羅高網頁互動設計工作坊 - 簡報(一)
TRANSCRIPT
![Page 1: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/1.jpg)
2 0 1 6
2016 / 01 / 26 Presented by Chiun Hau You at Luo Tong Senior High (LTSH)
Find more of my works on GitHub @chiunhau, or on Behance @chiunhauyou
![Page 2: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/2.jpg)
![Page 3: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/3.jpg)
![Page 4: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/4.jpg)
![Page 5: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/5.jpg)
![Page 6: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/6.jpg)
![Page 7: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/7.jpg)
![Page 8: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/8.jpg)
![Page 9: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/9.jpg)
![Page 10: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/10.jpg)
![Page 11: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/11.jpg)
— P 5 . j s
—
![Page 12: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/12.jpg)
P 5 . j s
J a v a s c r i p t
![Page 13: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/13.jpg)
h t t p : / / p 5 j s . o r g / d o w n l o a d / # e d i t o r W i n d o w s
![Page 14: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/14.jpg)
![Page 15: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/15.jpg)
P 5 . j s
^ ^
![Page 16: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/16.jpg)
P 5 E d i t o r
![Page 17: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/17.jpg)
![Page 18: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/18.jpg)
![Page 19: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/19.jpg)
![Page 20: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/20.jpg)
![Page 21: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/21.jpg)
function setup() {createCanvas(800, 600);
}
function draw() {ellipse(100, 100, 50, 50);
}
![Page 22: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/22.jpg)
function setup() {
…
}
function draw() {
…
}
![Page 23: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/23.jpg)
function setup() {
( , );
}
function draw() {
( x, y, , );
}
![Page 24: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/24.jpg)
function draw() {fill(‘blue’);ellipse(100, 100, 50, 50);
}
![Page 25: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/25.jpg)
function draw() {fill(‘blue’);ellipse(100, 100, 50, 50);
}
![Page 26: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/26.jpg)
function draw() {fill(‘blue’);ellipse(100, 100, 50, 50);fill(‘red’);ellipse(100, 200, 50, 50);
}
![Page 27: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/27.jpg)
setup
createCanvas( , )
ellipse( x, y, , )
fill(‘ ’) fill(R, G, B)
stroke(‘ ’) stroke(R, G, B)
![Page 28: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/28.jpg)
rect(x1, y1, , )
triangle(x1, y1, x2, y2, x3, y3)
line(x1, y1, x2, y2)
quad(x1,y1,x2,y2,x3,y3,x4,y4)
![Page 29: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/29.jpg)
![Page 30: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/30.jpg)
var size = 50;
=
![Page 31: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/31.jpg)
function draw() { var size = 50; ellipse(100, 100, size, size);}
ellipse
size 50
size 50
![Page 32: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/32.jpg)
function draw() { var size = 10; ellipse(100, 100, size + 1, size + 2);}
![Page 33: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/33.jpg)
c o n s o l e . l o g
![Page 34: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/34.jpg)
var w = 20;var h = 30;console.log(w * h);
console
![Page 35: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/35.jpg)
1 . 2 .
3 .
![Page 36: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/36.jpg)
function draw() { ellipse(100, 100, 50, 50); ellipse(100, 200, 50, 50); ellipse(100, 300, 50, 50); ellipse(100, 400, 50, 50); ellipse(100, 500, 50, 50);}
5 0 1 0 0 w w w
![Page 37: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/37.jpg)
function draw() { var size = 50; ellipse(100, 100, size, size);ellipse(100, 200, size, size);ellipse(100, 300, size, size);ellipse(100, 400, size, size); ellipse(100, 500, size, size);}
s i z e o k
![Page 38: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/38.jpg)
![Page 39: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/39.jpg)
var a = 5;var b = 10;var c = b / 2;var d = 10 % 3; a = b + c;b += 1;b *= b;
![Page 40: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/40.jpg)
h t t p : / / c o d e p e n . i o / c h i u n h a u / p e n / G J z b m g
![Page 41: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/41.jpg)
![Page 42: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/42.jpg)
a c c e l e r a t i o n , k e y b o a r d , m o u s e , t o u c h h t t p : / / p 5 j s . o r g / r e f e r e n c e / # g r o u p - E v e n t s
![Page 43: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/43.jpg)
function setup() { createCanvas(800, 600); }
function draw() {}
function mouseClicked() {ellipse(mouseX, mouseY, 50, 50);}
![Page 44: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/44.jpg)
function mouseClicked() {ellipse(mouseX, mouseY, 50, 50);}
mouseX, mouseY p5
![Page 45: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/45.jpg)
m o u s e C l i c k e d ( ) , m o u s e D r a g g e d ( )
![Page 46: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/46.jpg)
. . . . . . . . .
![Page 47: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/47.jpg)
function mouseClicked() { if (mouseX > 400) { fill(‘red’); } else { fill(‘blue’); }ellipse(mouseX, mouseY, 50, 50);}
![Page 48: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/48.jpg)
> <
> = < = = = ! =
![Page 49: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/49.jpg)
. . .
![Page 50: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/50.jpg)
![Page 51: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/51.jpg)
l o o p
![Page 52: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/52.jpg)
. . .
e l l i p s e ( )
![Page 53: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/53.jpg)
f o r l o o p
function draw() { for(var i = 1; i <= 10; i ++) { ellipse(i*50, 50, 20, 20); }}
![Page 54: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/54.jpg)
f o r
for(var i = 1; i <= 10; i ++) { ellipse(i*50, 50, 20, 20);}
for( ; ;)
10 i 1 10
i ++ i = i + 1
![Page 55: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/55.jpg)
![Page 56: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/56.jpg)
1 0 * 1 0
function draw() { for(var i = 1; i <= 10; i ++) { for(var j = 1; j <= 10; j ++) { ellipse(i*20, j*20, 10, 10); } }}
![Page 57: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/57.jpg)
![Page 58: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/58.jpg)
h t t p s : / / d e v e l o p e r . m o z i l l a . o r g / e n - U S / d o c s /W e b / J a v a S c r i p t / G u i d e / L o o p s _ a n d _ i t e r a t i o n
for()while()
![Page 59: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/59.jpg)
![Page 60: 羅高網頁互動設計工作坊 - 簡報(一)](https://reader033.vdocuments.net/reader033/viewer/2022042604/588227361a28ab52368b531f/html5/thumbnails/60.jpg)