Copyright © Steven W. Johnson

Today: Multimedia Canvas SVG

What’s a codec? xxxfile types
<audio autoplay="autoplay" controls="controls"> <source src=“audio.ogg" /> <source src=“audio.mp3" /> <a>Download this file.</a> <a href=“audio.mp3”>Download the MP3 version</a> </audio>

Audio and HTML5: HTML4 relied on 3rd party plugins for multimedia
HTML5: plan was to not do that <audio> and HTML5: cascading support for audio file types <audio autoplay="autoplay" controls="controls"> <source src=“audio.ogg" /> <source src=“audio.mp3" /> <a>Download this file.</a> <a href=“audio.mp3”>Download the MP3 version</a> </audio>

Audio and HTML5: Current (2014) support: Firefox: .ogg Webkit: .mp3
Opera (pre-10): .wav only <audio autoplay="autoplay" controls="controls"> <source src=“audio.ogg" /> <source src=“audio.mp3" /> <a>Download this file.</a> <a href=“audio.mp3”>Download the MP3 version</a> </audio> Plays first file type it understands

Video and HTML5: Current (2014) support: Safari, IE9: H.264
Firefox: Theora open source codec Opera: Vorbis (firefox and opera: theora and vorbis)_ Chrome: .ogg and .mp4 Set type type to save the browser from doing this work <video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. Kill it quickly.<a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video> Plays first file type it understands

Video and HTML5: Other video stuff: Preload attribute
Controls displays controls <video preload> <video preload controls>

Audio and HTML5: Do you really mean it?
Audio can be major annoyance (rahatsız etmek) Typically use .mp3 file type (.wav or .ogg) May or may not be streamed (akım) Problem: file size distraction

Audio and HTML5: Both placed in <head>:
Audio played in background (no controls) Browser controls, appearance varies (embedded) <audio src=“myfile.mp3” type=“audio/mpeg” autoplay></audio> <audio src=“myfile.mp3” type=“audio/mpeg” controls></audio>

Audio and HTML5: Audio support: no universal agreement on anything MP3
WAV OGG Chrome Yes No Firefox IE 9 No* Opera Safari

Audio and HTML5: Due to file sizes, preloading is a good idea
Add ‘preload’ attribute <audio src=“myfile.mp3” preload controls></audio>

Video and HTML5: More of the same pain continued Really??? Must you?
YouTube is bad enough, this is video (even worse) No one wants to watch your stinking video Currently, Firefox and IE do not support <video src=“file.mp4” controls preload=“auto”></video>

Video and HTML5: Browser support is a problem:
no universal agreement on anything H.264 = .mp4 and .mov H.264 OGG WebM 3GP Chrome No Yes Firefox ??? IE 9 No* Opera Safari Safari Mobile

Plugins and extensions:
Extensions change the browser itself Plugins allow the browser to do more things

Plugins: Adds abilities to a larger application Plugin uses (browser):
video audio flash virus scanners display Office documents 3rd party libraries plugins embedded into page (<embed> or <object>)

Extensions: Similar idea Extensions are usually added toolbars
Mozilla: Add-ons (plugins and extensions) Extensions are additional features: Toolbars New menus New tabs in an interface

Plugins: Allows ‘core program’ to be small
Add ‘extra’ functions that you need via plugins The debate points: Plugins are less reliable Unknown author (support, liability, security, reliability) No brand to associate with

Rich media: Rich media = multimedia
First there was text (Cern, circa 1991) Then there was images (1993) Then there was FutureSplash (1996) First successful version

Rich media: FutureSplash: a multimedia plug-in
Proprietary; not an open specification RealPlayer QuickTime many others

Rich media: Flash: succeeded because it did a unique job well
plug-in: no cross-browser issues issue today: do we want plug-ins?

Rich media: Flash: animation/multimedia tool in vector graphics*
Issues with Flash: myth #8: Flash is dead myth #10: Browser vendors control HTML5 Do we want proprietary technologies?

Rich media: Flash: time-based content; built on a timeline
paradigm: animators (Walt Disney) combines vector graphics, bitmaps, audio Apple: no support for Flash on iPhone, iPad

Rich media: Flash versus Silverlight: Silverlight time-based
Silverlight uses XAML (larger) and .NET

Rich media: Silverlight, Flash are proprietary:
challenges to accessibility challenge to device independence challenge to data portability don’t work well with other standards can promote interoperability money and access issues

Rich media: Many mobile devices will not play Flash
Workaround for all media: <object width=“300” height=“200” type=“application/x-shockwave-flash” data=“ <embed src=…></object> <iframe src= style=“max-width: 100%;”></iframe>

Rich media: ‘Old code” (issues with HTML5):
Workaround for all media (HTML5): <object width=“300” height=“200” type=“application/x-shockwave-flash” data=“ <embed src=…></object> <iframe width="560" height="315" src=" frameborder="0" allowfullscreen></iframe>

Rich media: Embed YouTube: find the movie ‘Share’ the movie
click ‘embed’ copy link (

Lab: multimedia Open ‘multimedia’ folder
Insert ‘Jinglebells’ as background music Insert ‘Onuncu_Yil_Marsi’ as embedded music Embed a YouTube (find your own) Forget all of this; don’t use multimedia

SVG and Canvas: Two new image types
Vision: eliminate plug-ins and use SVG, canvas SVG NOT part of HTML5 (brought up at same time) Both are programming APIs that create images SVG: vector-based images, XML file format Canvas: pixel-based images, JavaScript

SVG and Canvas: SVG: good for data charts
resolution-independent graphics interactive animated user interfaces vector image editing scales well light footprint slow to draw

SVG and Canvas: Canvas: defined shapes edited using JavaScript
‘primitive form of Flash’ larger footprint than SVG make games and use logic in image no DOM nodes (large images run faster) limited pre-defined shapes

Canvas: Experimental/undefined area of HTML Original developer: Apple
Pixel-based API (renders fast, poor scaling) Images defined as geometric shapes

Canvas: Major features: stroke and fill color patterns and gradients
lines rectangles paths (curves) text transformations (scale, rotate, etc)

Canvas: Create 3D games using JavaScript (OpenGL)
Creates interactive graphics, applications, games

Canvas:

Canvas: For HTML5 compatible browsers only Other browsers ignore
new browsers: show image old browsers: show alternate content <canvas id=“myid” width=“400” height=“400”> <p>Your browser is not HTML5 compatible</p> </canvas> <canvas id=“myid” width=“400” height=“400”> <img src=“myimage.png”> //.png equivalent </canvas>

Canvas: Addressing comes from upper left corner x x x Y IP . EP

Canvas: A bitmapped image drawn using “JavaScript”
like GD2 from PHP, OpenGL Define a canvas size, color Draw regular geometric shapes from UL corner . shape.fillStyle=“rgb(51, 153, 51)”; X position width shape.fillRect(10,15,100,200) Y position height .

Canvas: Shapes are a collection of pixels
Most shapes: use paths (lines) as edges “Create” shapes using beginPath(), closePath(); beginPath() start: moveTo closePath() . continue: lineTo . . continue: lineTo . . continue: lineTo continue: lineTo

Canvas: Ellipses/ovals are a collection of pixels
quadraticCurveTo(), bezierCurve To() arc()

Canvas: Write function that makes image
retrieve canvas from DOM node (rename) test browser support define context (“2d”or “experimental-webgl”) create shapes (color, shape & location) function draw() { var canvas = document.getElementById('canvas').getContext('2d'); canvas.fillStyle = "rgb(200,0,0)"; canvas.fillRect (10, 10, 55, 50); canvas.fillStyle = "rgba(0, 0, 200, 0.5)"; canvas.fillRect (30, 30, 55, 50); canvas.beginPath(); canvas.moveTo(10, 10); canvas.lineTo(90, 90); canvas.strokeStyle = "rgb(0,200,0)"; canvas.stroke(); }

Canvas: Canvas resources:

Lab: draw Create this image in canvas: white canvas (300 x 300 px)
green square (200px) centered on canvas draw red line

Lab: draw Steps: define/determine all sizes/dimensions
create the canvas draw the square draw the line

Lab: draw First steps: define canvas (id, size of image)
define fallback image <html> <head> </head> <body> <canvas id="canvas" width="300" height="300"> <img src=“fallback.png”> </canvas> <p>Here is some text on the page</p> </body> </html>

Lab: draw Define the function: <script> function draw() { }
window.onload=draw; </script>

Lab: draw Write the code Done! Test in browser
canvas = document.getElementById('logo').getContext('2d'); canvas.fillStyle = "rgba(0, 255, 0)"; canvas.fillRect (50, 50, 200, 200); canvas.beginPath(); canvas.moveTo(50, 50); canvas.lineTo(250, 250); canvas.strokeStyle = "rgb(255, 0, 0)"; canvas.stroke();

Lab: logo Create this image in canvas: red oval (200 x 100px)
green square (200px) blue equilateral triangle (200px tall) centered on canvas

Lab: logo Create this image in canvas:
corner of square is center of oval top of triangle is middle of side of square 20 pixels between image border and shapes

Lab: logo Calculate the image definitions: 20px 100px 200px 20px

Lab: logo Calculate the image definitions: 20px 100px 200px

Lab: logo Calculate the image definitions: Canvas height: 20 50 100
20px 20 50 100 200 390 100px 200px 200px 20px

Lab: logo Calculate the image definitions: 200px 20px

Lab: logo What is the size of the triangle? equilateral
opposite side 200 pixels tall hypotenuse 2x adjacent x px2 = 2x2 200px / √3 = 115 2x 2 √3 200px 60° x 1 115px

Lab: logo Calculate the image definitions: Canvas width: 20 100 200
200px 20px 20 100 200 115 455 200px 115px 20px

Lab: logo Calculate the image definitions: (√5*100)/2 = 113 455px

Lab: logo Calculate the image definitions: Canvas height: width: 20 20
20px 200px 20 50 100 200 390 20 100 200 115 455 100px 200px 200px (√5*100)/2 = 113 20px

Lab: logo Draw the canvas: 455px 390px

Lab: logo Create folder ‘canvas’
Create HTML5 file ‘logo.html’. Save locally <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>Logo Lab: Steve Johnson</title> </head> <body> </body> </html>

Lab: logo Code to make background: background defined in canvas tag
graceful degradation with image (<img>) call the function using JavaScript <script> function draw() { } window.onload=draw; </script> </head> <body> <canvas id="logo" width="455" height="390"> <img src="backup.png" width="453" height="390" alt="Logo image" title="Logo image"> </canvas> </body>

Lab: logo Start from back of image: draw the red ellipse 120, 70
120, 70 200, 100

Lab: logo Ellipse is not regular shape
Several methods to draw; our method: 2 curves Bezier curves: smallest change in curve point-to-point 20px 200px 20px 100px

Lab: logo Pierre Bézier: (1910 – 1999) and Bézier curve (1968)
Developed to draw automobile designs (Renault) Basis for curves in CAD and computer graphics Used in Photoshop, Illustrator, etc.

Lab: logo Draws polynomial shapes

Lab: logo Use 2 Bézier curves (right, left) Need to know:
center of ellipse (120, 70) width, height of ellipse (200, 100) 20px 200px 100px

Lab: logo Write the function: centerX = 120; centerY = 70;
20px Lab: logo Write the function: 200px 100px centerX = 120; centerY = 70; width = 200; height = 100; //defines shape critical values canvas = document.getElementById("logo").getContext('2d'); //variable ‘canvas’ now describes the canvas image on the webpage }

Lab: logo . . . Write the function: . . . canvas.beginPath();
20px Lab: logo Write the function: . . . canvas.beginPath(); canvas.moveTo(centerX, centerY - height/2); canvas.bezierCurveTo( //describe right half of bounding box centerX + width/2, centerY - height/2, //x:y coordinates centerX + width/2, centerY + height/2, centerX, centerY + height/2); centerX - width/2, centerY + height/2, //x:y coordinates centerX - width/2, centerY - height/2, centerX, centerY - height/2); canvas.fillStyle = "red"; canvas.fill(); canvas.closePath(); }

Lab: logo Calculate the image definitions: define dimensions 120, 70
320, 70 120, 270 320, 270

Lab: logo Code to make green square: .
120, 70 320, 70 120, 270 canvas.fillStyle = "rgba(0, 255, 0, .5)"; canvas.fillRect(120, 70, 200, 200);

Lab: logo Calculate the image definitions: define corners and fill
320, 170 205, 370 435, 370

Lab: logo Code to make blue triangle: . . . canvas.beginPath();
320, 170 . . 205, 370 435, 370 canvas.beginPath(); canvas.moveTo(320, 170); //define starting point canvas.lineTo(433, 370); //define second point canvas.lineTo(207, 370); //define third point canvas.closePath(); canvas.fillStyle = "rgba(0, 0, 255, .5)"; canvas.fill();

Lab: logo Older browsers that don’t do <canvas>?
Make image for graceful degradation Photoshop

Lab: logo Create new file (390 x 455px, 96 ppi)
Background is transparent Use ‘Info’ to locate each shape Use oval marquee: initial point: 20, 20 size of shape: 200, 100 fill with red Initial position Size of shape 20px 20px 100px 200px

Lab: logo Create a new layer Use rectangular marquee:
initial point: 120, 120 size of shape: 200, 200 fill with green Set opacity to 50% Initial position Size of shape 120px 120px 200px 200px

Lab: logo Use triangle tool Must know centroid (ağirlik merkezi):
short: 115/200 of long 115*115/200 = 67 also: 2/3 from top 320, 303 320, 170 133 px 200 px 67 px 115 px

Lab: logo Create a new layer Use polygon tool (3 sides):
initial point: 320, 303 end point: 435, 370 fill with blue set opacity to 50% Initial position Size of shape 320, 303 435, 370

Lab: logo Flatten layers Clear the background; color may change
Save in correct format as ‘backup’ Place in ‘canvas’ folder Open logo.html in your browser

Lab: logo Done! Save code to in-class files

Lab: animation Animation can be done in <canvas> Required:
describe position of object using variables create function that updates with time old image must be erased; new image applied Command: reqAniFrame determines frame speed

Lab: animation Big picture stuff: <script>
set variables; (global) function animate() { draw(); } function draw() { } animate(); </script> <body> <canvas id="animation" width="400" height="400"> </canvas> </body>

Lab: animation Variables: <script>
var x = 0; //starting coordinate for x /*x ranges between 0 and 375 */ var y = 15; //starting coordinate for y var speed = 5; //increment size direction = "up"; //add (up) or subtract(down)to x

Lab: animation Animation sequence: function animate() {
reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ; reqAnimFrame(animate); if (direction == "down") { x -= speed; //declared in variables } else { x += speed; if (x >= 375) direction = "down"; if (x <= 0) direction = "up"; draw();

Lab: animation The shape: function draw() {
var canvas = document.getElementById("animation").getContext("2d"); document.getElementById("animation").style.background = "#CCCCCC"; canvas.clearRect(0, 0, 400, 400); //destroys old shape canvas.fillStyle = "#ff00ff"; //creates new shape canvas.fillRect(x, y, 25, 25); //position of new shape } animate(); </script>

Lab: birds Use 4 images to create an animation Does not work in Chrome
Copy ‘birds’ to your desktop; open ‘bird.html’

Lab: birds General code layout is the same <body>
<canvas></canvas> <script> //declaring global variables function animate() { draw(); } function draw() { animate(); </script> </body>

Lab: birds Draw() loads 4 different images <body>
<canvas></canvas> <script> //declaring global variables function animate() { draw(); } function draw() { bird.src = “bird”+i+“.png”; animate(); </script> </body>

Lab: birds Canvas and global variables <body>
<canvas id="sky" width="600" height="250" style="border:1px solid red;"></canvas> <script> var x = -100; //initial position var y = 75; //initial position var speed = 2; var i = j = l= 1;

Lab: birds Animate function: function animate() {
reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ; reqAnimFrame(animate); x += speed; if(x==700) x = -100; //restarts bird at 100 if(l == 4) l=1; //resets image counter draw(); }

Lab: birds Draw function: function draw() {
var canvas = document.getElementById("sky"); var context = canvas.getContext("2d"); context.clearRect(0, 0, 600, 250); //empty old view context.beginPath(); var gradient=context.createLinearGradient(300,200,400,-150); gradient.addColorStop(0,"#BADAF6"); gradient.addColorStop(1,"#98C5F8"); context.fillStyle=gradient; //sky gradeint color var bird = new Image(); //load new image bird.src = "images/bird"+l+".png"; if(x%20 ==0){l++;} //increment “l” counter context.fillRect(0,0, 600, 400); //background first context.drawImage(bird, x, 20); //image on top }

Lab: birds Add call to ‘animate()’ Done! } animate(); </script>
</body> </html>

SVG and HTML5: Vector Graphics:
uses defined regions of color; not pixels Advantages: ability to zoom file size* Two forms in HTML: .svg <SVG>

SVG and HTML5: Vector Graphics terminology: fill: ‘inside’ of shape
stroke: ‘edge’ of shape path: ‘line’ Consistent (same) with other graphic programs

SVG and HTML5: Use of <img> for .svg allowed: IE: 9.0+
Firefox: 4.0+ Safari: 4.0+ Chrome: 4.0+ Opera: 9.0+ Mobile support except for: Android <3.0 iOS Safari <4.0

SVG and HTML5: Use of <object> for .svg allowed*:
<object width=300 height=200 type=“svg+xml” data=“filename.svg”> </object> *Legacy browsers, current conditions may be very different

SVG and HTML5: If use .svg images:
test to see of if .svg supported in <img> use <object>, define fallback image; gracefully degrade <object width=100 height=200 data="your.svg" type=“image/svg+xml”> <img src=“yourfallback.png” alt=“image”> </object>

SVG and HTML5: <object> tag: holds embedded object; multimedia
content ‘inside’ object will display in place of <object width=100 height=200 data="your.svg" type=“image/svg+xml”> <img src=“yourfallback.png” alt=“image”> </object>

SVG and HTML5: Other alternatives: <embed>
OLD html, usually used for/with plugins No fallback, render problems (OLD browsers) <embed width=“100” height=“200” src=“your.svg” alt=“myimage” title=“myimage”>

SVG and HTML5: Other alternatives: <iframe>
deprecated HTML 4, xhtml new life in HTML5 as ‘sandbox’ no fallback set frameborder to 0 if not wanted <iframe width=“100” height=“200” src=“your.svg” alt=“myimage” title=“myimage”>

SVG and HTML5: Other alternatives: <img>
problem for older browsers no fallback <img src=“your.svg” width=“100” height=“200” alt=“myimage” title=“myimage”>

SVG and HTML5: SVG elements are part of DOM Access through DOM; Style
Create a simple SVG image <svg xmlns= width=“400px” height=“400px”> </svg>

SVG and HTML5: Basic shapes: rect circle ellipse line polyline polygon

SVG and HTML5: A simple image:
<svg xmlns= width=“400px” height=“400px”> <rect fill=“blue” stroke=“red” x=“150” y=“150” width=“125” height=“75”> </svg>

SVG and HTML5: A simple image:
<svg xmlns= width=“400px” height=“400px”> <circle fill=“#B9B9B9” stroke=“red” cx=“151” cy=“151” r=“150”> </svg>

SVG and HTML5: Coloring with XML definitions:
<svg xmlns= width=“400px” height=“400px”> <defs> <linearGradient id=“MyGradient” gradientTransform=“rotate(45)”> <stop offset=“0%” stop-color=“#B9B9B9” /> <stop offset=“50%” stop-color=“#FF0000” /> <stop offset=“100%” stop-color=“#00FF00” /> </linearGradient> </defs> <circle fill=“url(#MyGradient)” cx=“151” cy=“151” r=“150”> </svg>

SVG and HTML5: Coloring with XML definitions

Lab: svg Create this image as svg
Use ‘svg’ folder (image found inside) 400px 25px 25px 400px

Lab: svg Rectangle: centered vertically Right edge in middle of window
175 pixels wide 76 pixels tall Red-green 400px 25px 25px 400px

Lab: svg Circle: centered vertically Left edge in middle of window
175 pixels wide Green-blue 400px 25px 25px 400px

Lab: svg Initial code: <!DOCTYPE html> <html> <head>
400px 25px Lab: svg Initial code: <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>SVG Lab: Steve Johnson</title> </head> <body> </body> </html>

Lab: svg Make rectangle, circle: <body>
400px 25px Lab: svg Make rectangle, circle: <body> <svg xmlns=“ width=“400px” height=“400px”> <rect fill=“red” x=“25” y=“162” width=“175” height=“76” /> <circle fill=“green” cx=“288” cy=“200” r=“88” /> </svg> </body>

Lab: svg Define 2 gradients: <body> <defs>
<linearGradient id=“rectGradient”> <stop offset=“0%” stop-color=“#FF0000” /> <stop offset=“100%” stop-color=“#00FF00” /> </linearGradient> </defs> <svg xmlns=“ width=“400px” height=“400px”> <rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /> <circle fill=“green” cx=“288” cy=“200” r=“88” /> </svg> </body>

Lab: svg Isn’t red + green = yellow? Why did we get gray? 255 255 128

Lab: svg Define 2 gradients: <body> <defs>
<linearGradient id=“rectGradient”> <stop offset=“0%” stop-color=“#FF0000” /> <stop offset=“100%” stop-color=“#00FF00” /> </linearGradient> </defs> <linearGradient id=“circleGradient”> <stop offset=“0%” stop-color=“#00FF00” /> <stop offset=“100%” stop-color=“#0000FF” /> <svg xmlns=“ width=“400px” height=“400px”> <rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /> <circle fill=“url(#circleGradient)” cx=“288” cy=“200” r=“88” /> </svg> </body>

Lab: svg Last step: Add the backup plan <body>
<svg xmlns=“ width=“400px” height=“400px”> <rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /> <circle fill=“url(#circleGradient)” cx=“288” cy=“200” r=“88” /> <img src=“svg.png” width=“400” height=“400” alt=“svg image” title=“svg image”> </svg> </body>

Lab: svg Play time: Add another gradient definition <body>
<svg xmlns=“ width=“400px” height=“400px”> <defs> <linearGradient id="MyGradient" gradientTransform="rotate(45)"> <stop offset="0%" stop-color="#FF0000" /> <stop offset="50%" stop-color="#00FF00" /> <stop offset="100%" stop-color="#0000FF" /> </linearGradient> </defs> <rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /> <circle fill=“url(#MyGradient)” cx=“288” cy=“200” r=“88” /> <img src=“svg.png” width=“400” height=“400” alt=“svg image” title=“svg image”> </svg> </body>

Lab: svg Play time: Add another gradient definition <body>
<svg xmlns=“ width=“400px” height=“400px”> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="#FF0000" /> <stop offset="50%" stop-color="#00FF00" /> <stop offset="100%" stop-color="#0000FF" /> </linearGradient> </defs> <rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /> <circle fill=“url(#MyGradient)” cx=“288” cy=“200” r=“88” /> <img src=“svg.png” width=“400” height=“400” alt=“svg image” title=“svg image”> </svg> </body>

Lab: svg Done! Save and check work

SVG image maps Week 7, created pixel-based image map
Include code in .svg image to create image map

Assignment: screensaver
Create a ‘screensaver’ using <canvas> ‘Bounce’ a unique image (not your friend’s) off the edges of the image (700w x 375h) Image moves at 45° trajectory (path) ‘Bouncing’ must happen naturally Color background with unique gradient Add border

Assignment: shapezoo Create an image using <svg>
Unique image is to include: rectangle circle ellipse triangle or hexagon or star Color each item Use 2 gradients

Copyright © Steven W. Johnson

Similar presentations

Presentation on theme: "Copyright © Steven W. Johnson"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Copyright © Steven W. Johnson

Similar presentations

Presentation on theme: "Copyright © Steven W. Johnson"— Presentation transcript:

Similar presentations

About project

Feedback