1 Drawing Using HTML5 Canvas ● Go to http://o.ooli.ca/canvasjsbin ● Presentation copy http:// ✔ ✘ ✔ ✔ ✔ ✔ ?
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Drawing Using HTML5 Canvas
● Go to http://o.ooli.ca/canvasjsbin● Presentation copy http://
✔
✘
✔
✔
✔
✔
?
2
ADVANCED
Overview
● Main Topics– Lines
– Color
– Shapes
– Images
● Optional– Curves
– Bezier curves
– Text
3
Computer screens = dots
4
Change colors of the dots to make pictures
5
Change colors of the dots to make pictures
6
Dots = pixels
8 megapixels
800 x 480
720p HD
7
Where is the dot?
8
Where is the dot?
9
Where is the dot?
10
Where is the dot?
11
Where is the dot?
3
12
Where is the dot?
3
13
Where is the dot?
3
14
Where is the dot?
3, 13
15
Math it up!
3, 1x y
16
Let's Start Programming: jsbinhttp://o.ooli.ca/canvasjsbin
17
jsbinhttp://o.ooli.ca/canvasjsbin
<!DOCTYPE html><canvas id="canvas" width="500" height="500"></canvas><script> canvas = document.getElementById('canvas'); c = canvas.getContext('2d'); function wait(fn) {window.setTimeout(fn, 250); }</script>
18
Let's Draw Somethinghttp://o.ooli.ca/canvasjsbin
19
Let's Draw Somethinghttp://o.ooli.ca/canvasjsbin
20
Let's Draw Somethinghttp://o.ooli.ca/canvasjsbin
Checking for Errors
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
21
What's Going On?
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
22
Canvas
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
23
Move Pen
c.moveTo(20,90);c.lineTo(90,90);c.stroke(); 20
90
24
Tell Computer Where You Want a Line
c.moveTo(20,90);c.lineTo(90,90);c.stroke(); 90
90
25
Tell Computer to Draw the Line
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
26
Tell Computer to Draw the Line
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
27
Tell Computer to Draw the Line
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
28
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);c.lineTo(90,140);c.lineTo(20,140);c.lineTo(20,90);c.lineTo(55,60);c.lineTo(90,90);
c.moveTo(45,140);c.lineTo(45,115);c.lineTo(65,115);c.lineTo(65,140);c.stroke();
29
Make Your Own Picture
30
Make Your Own Picture
c.moveTo(20,90);
31
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
32
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);c.lineTo(90,140);
33
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.lineTo(20,140);c.lineTo(90,140);
34
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
35
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
36
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.lineTo(90,90);c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
37
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.moveTo(45,140);
c.lineTo(90,90);c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
38
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.lineTo(45,115);c.moveTo(45,140);
c.lineTo(90,90);c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
39
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.lineTo(65,115);c.lineTo(45,115);c.moveTo(45,140);
c.lineTo(90,90);c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
40
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.lineTo(65,140);c.lineTo(65,115);c.lineTo(45,115);c.moveTo(45,140);
c.lineTo(90,90);c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
41
Make Your Own Picture
c.moveTo(20,90);c.lineTo(90,90);
c.stroke();c.lineTo(65,140);c.lineTo(65,115);c.lineTo(45,115);c.moveTo(45,140);
c.lineTo(90,90);c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);
42
IdeasDrawing a Line
Checking for Errors
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧
F12
ADVANCED
43
Curves
ADVANCED
44
Curves
ADVANCED
45
Curves
ADVANCED
46
Curves
ADVANCED
47
Which Curve?
ADVANCED
48
Which Curve?
ADVANCED
49
Which Curve?
ADVANCED
50
Curves
ADVANCED
51
Curves
ADVANCED
52
Curves
ADVANCED
53
Curves
ADVANCED
54
Curves
ADVANCED
55
Curves
ADVANCED
56
Curves
ADVANCED
57
Curves
ADVANCED
58
Curves
ADVANCED
59
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
ADVANCED
60
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
ADVANCED
61
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
ADVANCED
62
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
ADVANCED
63
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
ADVANCED
64
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
ADVANCED
65
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
ADVANCED
66
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)
67ADVANCED
Drawing a Curve
Ideas
c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
68
Colored Lines
69
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
Review
70
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
Review
71
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
Review
72
c.moveTo(20,90);c.lineTo(90,90);c.stroke();
Review
73
c.moveTo(20,90);c.lineTo(90,90);c.strokeStyle = 'red';c.stroke();
Colored Lines
74
c.moveTo(20,90);c.lineTo(90,90);c.strokeStyle = 'red';c.stroke();
Colored Lines
75
c.moveTo(20,90);c.lineTo(90,90);c.strokeStyle = 'red';c.stroke();
Colors
blackbluebrown
greenorangepurple
redwhiteyellowyellow
pinkgray
76
Drawing Two Lines
77
c.moveTo(5,5);c.lineTo(90,5);c.strokeStyle='green';c.stroke();
Drawing Two Lines
78
c.moveTo(5,5);c.lineTo(90,5);c.strokeStyle='green';c.stroke();
Drawing Two Lines
c.moveTo(20,20);c.lineTo(90,20);c.strokeStyle='red';c.stroke();
79
c.moveTo(5,5);c.lineTo(90,5);c.strokeStyle='green';c.stroke();
Drawing Two Lines
c.moveTo(20,20);c.lineTo(90,20);c.strokeStyle='red';c.stroke();
80
c.moveTo(5,5);c.lineTo(90,5);c.strokeStyle='green';c.stroke();
c.beginPath();c.moveTo(20,20);c.lineTo(90,20);c.strokeStyle='red';c.stroke();
Different Lines, Different Colors
81
Colored Lines
Ideas
c.beginPath();c.moveTo(20,20);c.lineTo(90,20);c.lineTo(90,90);c.strokeStyle='red';c.stroke();
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
blackbluebrowngreenorangepurpleredwhiteyellowyellowpinkgray
ADVANCED
82
Crazy Curves
ADVANCED
83
Crazy Curves
ADVANCED
84
Crazy Curves
ADVANCED
85
Crazy Curves
ADVANCED
86
Crazy Curves
ADVANCED
87
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
88
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
89
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
90
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
91
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
92
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
93
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
94
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
95
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
96
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
97
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
98
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
99
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
100
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
101
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
102
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
103
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
104
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
105
4 Point Bezier Curve
● Invented by French mathematicians/engineers around 1960
● Adobe used them in computer graphics in the 1980s
ADVANCED
106
c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)(10,90)
ADVANCED
107
c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)(10,90)
ADVANCED
108
c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)(10,90)
ADVANCED
109
c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)(10,90)
ADVANCED
110
c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)(10,90)
ADVANCED
111
c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)(10,90)
ADVANCED
112
c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();
(20,20) (90,20)
(100,90)(10,90)
113ADVANCED
Bezier Curves
Ideas
c.beginPath();c.moveTo(10,10);c.bezierCurveTo(10,50,90,50,90,90);c.stroke();
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
114
Filled Shapes
115
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Drawing Shapes
116
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Drawing Shapes
117
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Drawing Shapes
118
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Drawing Shapes
119
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Drawing Shapes
120
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Drawing Shapes
121
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Drawing Shapes
122
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Fills
123
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Fills
c.fill();
124
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.stroke();
Fills
c.fill();
125
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.fill();
Colored Fills
126
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.fill();
Colored Fills
c.fillStyle = 'red';
127
c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);
c.fill();
Colored Fills
c.fillStyle = 'red';
128
Filled Shapes
Ideas
c.beginPath();c.moveTo(20,20);c.lineTo(90,20);c.lineTo(90,90);c.fillStyle='red';c.fill();
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
blackbluebrowngreenorangepurpleredwhiteyellowyellowpinkgray
ADVANCED
129
Text
Will you go to thedance with me?
ADVANCED
130
Writing Things
c.fillText('Hello', 20, 100);
Hello
ADVANCED
131
Writing Things
c.fillText('Hello', 20, 100);
Hello
ADVANCED
132
Writing Things
c.fillText('Hello', 20, 100);
Hello
ADVANCED
133
Writing Things
c.fillText('Hello', 20, 100);
Hello
ADVANCED
134
Writing Things
c.font = '20px';c.fillText('Hello', 20, 100);
Hello
ADVANCED
135
Writing Things
c.font = '20px';c.fillText('Hello', 20, 100);
Hello
ADVANCED
136
Writing Things
c.font = '20px';c.fillText('Hello', 20, 100);
Hello
ADVANCED
137
Writing Things
c.font = '20px serif';c.fillText('Hello', 20, 100);
Hello
ADVANCED
138
Writing Things
c.font = '20px serif';c.fillText('Hello', 20, 100);
Hello
139ADVANCED
Moon
Text
Ideas
c.fillStyle='blue';c.font = '20px sans-serif';c.fillText('Hello', 20, 100);
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
Hello
Red Moon
140
Drawing is Hard
141
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
142
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
143
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
144
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
145
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
146
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
147
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
148
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
149
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
150
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
151
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
152
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
153
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
http://o.ooli.ca/ele.png
154
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,50);
});
155
Placing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,50);
});
156
Placing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,50);
});
157
Placing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,50);
});
100
158
Placing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,50);
});
100
50
159
Placing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,90);
});
100
50
160
Placing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,90);
});
100
90
161
Two Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,90);
});
162
Two Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,90);
});
163
Two Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';b = new Image();b.src = 'http://o.ooli.ca/mona.jpg';wait(function() {
c.drawImage(a,100,90);
});
164
Two Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';b = new Image();b.src = 'http://o.ooli.ca/mona.jpg';wait(function() {
c.drawImage(a,100,90);
});
165
Two Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';b = new Image();b.src = 'http://o.ooli.ca/mona.jpg';wait(function() {
c.drawImage(a,100,90);c.drawImage(b,10,10);
});
166
Two Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';b = new Image();b.src = 'http://o.ooli.ca/mona.jpg';wait(function() {
c.drawImage(a,100,90);c.drawImage(b,10,10);
});
167
Click on Run If It Gets Stuck
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
168cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
Program
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
ele.png
Images
person.png
car_top.pngdog.png
mona.jpg
http://o.ooli.ca/
http://o.ooli.ca/
tree.png
leaves.png
grass.png
brick.png
stone.png
169
Where to Get Images
● Find an image● Right-click (ctrl-click)● Copy
– Copy Image URL
– Copy Image Location
– Copy Image Address
– Properties...Address
● Paste it
● Or upload your own images!
170cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
Ideas http://o.ooli.ca/ele.png http://o.ooli.ca/dog.png http://o.ooli.ca/person.png http://o.ooli.ca/car_top.png http://o.ooli.ca/mona.jpg http://o.ooli.ca/tree.png http://o.ooli.ca/leaves.png http://o.ooli.ca/stone.png http://o.ooli.ca/brick.png http://o.ooli.ca/grass.png
● Find an image● Right-click (ctrl-click)● Copy
● Copy Image URL● Copy Image Location● Copy Image Address● Properties...Address
● Paste it
171
Animation Using HTML5 Canvas
● Go to http://o.ooli.ca/canvasjsbin● Presentation copy http://
✔
✘
✔
✔
✔
✔
?
172
ADVANCED
Overview
● Main Topics– Images
– Basic Animation
– Keyboard Control
● Optional– Affine Transforms
– Advanced Animation
→←
173
jsbinhttp://o.ooli.ca/canvasjsbin
174
jsbinhttp://o.ooli.ca/canvasjsbin
<!DOCTYPE html><canvas id="canvas" width="500" height="500"></canvas><script> canvas = document.getElementById('canvas'); c = canvas.getContext('2d'); c.clear = function() {this.clearRect(0,0,500,500);}; function wait(fn) {window.setTimeout(fn, 250); } function repeat(fn) { if (window.requestAnimationFrame) { var advance = function() {fn(); requestAnimationFrame(advance);}; requestAnimationFrame(advance); } else window.setInterval(fn, 50); } var dx = 0, dy = 0, mousex = 0, mousey=0, mouseclicks = 0; document.onkeydown = function(e) { var key = e.keyCode; if (key == 37) dx=-1; else if (key == 38) dy=-1; else if (key == 39) dx=1; else if (key == 40) dy=1; else return true; return false; }; document.onkeyup = function(e) { var key = e.keyCode; if (key == 37 || key == 39) dx=0; else if (key == 38 || key == 40) dy=0;else return true; return false; }; canvas.onmousemove = function(e) { var rect = canvas.getBoundingClientRect(); mousex = e.clientX - rect.left; mousey = e.clientY - rect.top; }; canvas.onmousedown = function(e) {mouseclicks++;};</script>
175
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
176
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
177
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
178
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
179
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
180
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
181
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
182
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
183
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
184
Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
185
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
186
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
187
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
http://o.ooli.ca/ele.png
188
Changing Images
a = new Image();a.src = 'http://o.ooli.ca/ele.png';
wait(function() {
c.drawImage(a,100,50);
});
189
Where to Get Images
● Find an image● Right-click (ctrl-click)● Copy
– Copy Image URL
– Copy Image Location
– Copy Image Address
– Properties...Address
● Paste it
● Or upload your own images!
190cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,100,50);
});
Ideas http://o.ooli.ca/ele.png http://o.ooli.ca/dog.png http://o.ooli.ca/person.png http://o.ooli.ca/car_top.png http://o.ooli.ca/mona.jpg http://o.ooli.ca/tree.png http://o.ooli.ca/leaves.png http://o.ooli.ca/stone.png http://o.ooli.ca/brick.png http://o.ooli.ca/grass.png
● Find an image● Right-click (ctrl-click)● Copy
● Copy Image URL● Copy Image Location● Copy Image Address● Properties...Address
● Paste it
ADVANCED
191
Affine Transformations
● What are they?– Graphics effects for distorting images
– Mostly useful for 3d animation● Due to useful mathematical properties
ADVANCED
192
Affine Transformation Example
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.drawImage(a,10,10);
});
ADVANCED
193
Affine Transformation Example
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(3, 1);c.drawImage(a,10,10);
});
ADVANCED
194
scale
translate
rotate
shear (not available in canvas)
Four Distortions
ADVANCED
195
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(1, 1);c.drawImage(a,10,10);
});
ADVANCED
196
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(1, 2);c.drawImage(a,10,10);
});
ADVANCED
197
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(2, 1);c.drawImage(a,10,10);
});
ADVANCED
198
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(3, 1);c.drawImage(a,10,10);
});
ADVANCED
199
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(0.5, 1);c.drawImage(a,10,10);
});
ADVANCED
200
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(0.1, 1);c.drawImage(a,10,10);
});
ADVANCED
201
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(-1, 1);c.drawImage(a,10,10);
});
ADVANCED
202
Scale
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.scale(-1, 1);c.drawImage(a,100,10);
});
ADVANCED
203
Translate
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.translate(0, 0);c.drawImage(a,10,10);
});
ADVANCED
204
Translate
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.translate(300, 0);c.drawImage(a,10,10);
});
ADVANCED
205
Translate
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.translate(300, 50);c.drawImage(a,10,10);
});
ADVANCED
206
Rotate
a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';
wait(function() {
c.rotate(30 * Math.PI / 180);c.drawImage(a,10,10);
});
ADVANCED
207
Combining Affine Transforms
● More than one transformation?– What happens?
c.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);
ADVANCED
208
Combining Affine Transforms
● Do the steps backwards!
c.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);
ADVANCED
209
Combining Affine Transformsc.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);
ADVANCED
210
Combining Affine Transformsc.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);
ADVANCED
211
Combining Affine Transformsc.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);
ADVANCED
212
Combining Affine Transformsc.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);
ADVANCED
213
Combining Affine Transformsc.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);
ADVANCED
214
Overhead Car
a = new Image();a.src = 'http://o.ooli.ca/car_top.png';
wait(function() {
c.drawImage(a, 0, 0);
});
ADVANCED
215
Overhead Car
a = new Image();a.src = 'http://o.ooli.ca/car_top.png';
wait(function() {
c.drawImage(a, 0, 0);
});Move the car
over here,then rotate it
ADVANCED
216
Overhead Car
a = new Image();a.src = 'http://o.ooli.ca/car_top.png';
wait(function() {
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
// Resetc.setTransform(1,0,0,1,0,0);
});
ADVANCED
217
Overhead Car
a = new Image();a.src = 'http://o.ooli.ca/car_top.png';
wait(function() {
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
// Resetc.setTransform(1,0,0,1,0,0);
});
ADVANCED
218
Overhead Car
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
ADVANCED
219
Overhead Car
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
ADVANCED
220
Overhead Car
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
ADVANCED
221
Overhead Car
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
ADVANCED
222
Overhead Car
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
Move the carover here,
then rotate it
223ADVANCED
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
a = new Image();a.src = 'http://o.ooli.ca/car_top.png';
wait(function() {
c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.scale(1, 1);c.drawImage(a, 0, 0);
// Resetc.setTransform(1,0,0,1,0,0);
});
http://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png
● Find an image● Right-click (ctrl-click)● Copy
● Copy Image URL● Copy Image Location● Copy Image Address● Properties...Address
● Paste it
● Stretch an image● Mirror or flip an image● Rotate an image its lower-right point
224
Animation: Moving Things
225
Animation: Moving Things
226
Images Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';
wait(function() {
c.drawImage(a,50,50);
});
227
Images Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';
wait(function() {
c.drawImage(a,50,50);
});
228
Images Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';
wait(function() {
c.drawImage(a,50,50);
});
229
Animation
a = new Image();a.src = 'http://o.ooli.ca/person.png';
wait(function() {
c.drawImage(a,50,50);
});
230
Animation
a = new Image();a.src = 'http://o.ooli.ca/person.png';
wait(function() {
c.drawImage(a,50,50);
});
231
Animation
a = new Image();a.src = 'http://o.ooli.ca/person.png';
repeat(function() {
c.drawImage(a,50,50);
});
232
Animation
a = new Image();a.src = 'http://o.ooli.ca/person.png';
repeat(function() {
c.drawImage(a,50,50);
});
233
Animation: Variables
a = new Image();a.src = 'http://o.ooli.ca/person.png';
repeat(function() {
c.drawImage(a,50,50);
});
234
Animation: Variables
a = new Image();a.src = 'http://o.ooli.ca/person.png';
repeat(function() {
c.drawImage(a,50,50);
});
235
Animation: Variables
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.drawImage(a, x,50);
});
236
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.drawImage(a, x,50);x = x + 1;
});
237
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.drawImage(a, x,50);x = x + 1;
});
238
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
239
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
240
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
241
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
242
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
243
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
244
Animation: Changing Things
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
245cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x, 50);x = x + 1;
});
Ideashttp://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png
● Find an image● Right-click (ctrl-click)● Copy
● Copy Image URL● Copy Image Location● Copy Image Address● Properties...Address
● Paste it
ADVANCED
246
Advanced Animation
● So far ● More flexibility
ADVANCED
247
Time
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;
repeat(function() {
c.clear();c.drawImage(a, x, y);x = x + 1;
});
ADVANCED
248
Time
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;
repeat(function() {
c.clear();c.drawImage(a, x, y);x = x + 1;
});
ADVANCED
249
Time
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;time = 1;repeat(function() {
c.clear();c.drawImage(a, x, y);x = x + 1;
});
ADVANCED
250
Time
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;time = 1;repeat(function() {
c.clear();c.drawImage(a, x, y);time = time + 1;x = x + 1;
});
ADVANCED
251
What Time Is It?
...repeat(function() {
c.clear();c.drawImage(a, x, y);time = time + 1;x = x + 1;
});
Move right
ADVANCED
252
What Time Is It?
...repeat(function() {
c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}
});
time=50
ADVANCED
253
What Time Is It?
...repeat(function() {
c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}
});
When time is between 1 and 50,
move right
time=50
ADVANCED
254
What Time Is It?
...repeat(function() {
c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}if (time > 50 && time < 100) { x = x + 1; y = y + 1;}});
time=0 time=50
time=100
ADVANCED
255
What Time Is It?
...repeat(function() {
c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}if (time > 50 && time < 100) { x = x + 1; y = y + 1;}}); When time is
between 50 and 100,
move right and down
time=0 time=50
time=100
256ADVANCED
cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;time = 1;repeat(function() {
c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}if (time > 50 && time < 100) { x = x + 1; y = y + 1;}});
http://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png
● Find an image● Right-click (ctrl-click)● Copy
● Copy Image URL● Copy Image Location● Copy Image Address● Properties...Address
● Paste it
257
Using the Keyboard
→←
258
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
259
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
260
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
261
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
262
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
263
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
264
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
265
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
266
Animation Review
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
267
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
268
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
269
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
270
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
→
271
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
→←
272
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
→←Done!
273
Keyboard: dx
● Special variable dx
→←
dx = 0 dx = +1dx = -1
274
Keyboard: Why Does This Work?
● Remember, use (x, y) for positions90
90
(90,90)
275
Keyboard: Change in Positions
● To go right, x should get bigger
● To go left, x should get smaller
(90,90)
276
Keyboard: Change in Positions
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)
277
Keyboard: Change in Positions
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
278
Change in x
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
279
Change in x
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
x = x + 1
280
Change in x
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
x = x + 1
x = x - 1
281
Keyboard
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
x = x + 1
x = x - 1
→←
dx = 0 dx = +1dx = -1
282
Keyboard
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
→ x = x + 1
x = x - 1
→←
dx = 0 dx = +1dx = -1
283
Keyboard
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
→ x = x + 1
x = x - 1
→←
dx = 0 dx = +1dx = -1
dx
284
Keyboard
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
→
←
x = x + 1
x = x - 1
→←
dx = 0 dx = +1dx = -1
dx
285
Keyboard
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
→
←
x = x + 1
x = x - 1
→←
dx = 0 dx = +1dx = -1
+ dx
dx
286
Keyboard
● To go right, x should get bigger
● To go left, x should get smaller
(90,90) (150,90)(30,90)
→
←
x = x + 1
x = x - 1
→←
dx = 0 dx = +1dx = -1
+ dx
dx
x = x + dx
287
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
288
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + 1;
});
289
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
290
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
→
dx= 1
291
Keyboard: dx
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
→
dx= 1
←
dx= -1
292
Click on Canvas to Use Keyboard
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
293cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12
a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {
c.clear();c.drawImage(a, x,50);x = x + dx;
});
Ideashttp://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png
● Find an image● Right-click (ctrl-click)● Copy
● Copy Image URL● Copy Image Location● Copy Image Address● Properties...Address
● Paste it
ADVANCED
294
Driving Car
a = new Image();a.src = 'http://o.ooli.ca/car_top.png';x = 50;y = 50;angle = 0;repeat(function() {
angle = angle + dx;x = x - dy * Math.cos(angle * Math.PI / 180);y = y - dy * Math.sin(angle * Math.PI / 180);
c.clear();c.translate(x, y);c.rotate(angle * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);
c.setTransform(1,0,0,1,0,0); // reset
});
295
Art CreditsMage City ArcanosHyptosisopengameart.org
BaurnRachel J. MorrisArtSader
Justin BieberKevin Aranibar of Kerosene PhotographyCC Attribution 2.0 Generic
Chad KroegerJames AndersonCC Attribution-Share Alike 3.0 Unported
Celine DionGeorges BiardCC Atribution-Share Alike 3.0 Unported
neo1973ryanlerchopenclipart.org
TV iconjhnri4openclipart.org
Architetto -- macchina fotograficaAnonymous (francesco rollandin)openclipart.org
Edit Hand Holding Pencildarrenbeckopenclipart.org
tango style pen(remix of tango pen)warszawianka openclipart.org
Brunette Female DriverMerlin2525openclipart.org
horse machovkaopenclipart.org
RPG man symbols: Round Towernicubunuopenclipart.org
Related Documents
