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

— P 5 . j s

—

P 5 . j s

J a v a s c r i p t

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

P 5 . j s

^ ^

P 5 E d i t o r

function setup() {createCanvas(800, 600);

}

function draw() {ellipse(100, 100, 50, 50);

}

function setup() {

…

}

function draw() {

…

}

function setup() {

( , );

}

function draw() {

( x, y, , );

}

function draw() {fill(‘blue’);ellipse(100, 100, 50, 50);

}

function draw() {fill(‘blue’);ellipse(100, 100, 50, 50);

}

function draw() {fill(‘blue’);ellipse(100, 100, 50, 50);fill(‘red’);ellipse(100, 200, 50, 50);

}

setup

createCanvas( , )

ellipse( x, y, , )

fill(‘ ’) fill(R, G, B)

stroke(‘ ’) stroke(R, G, B)

rect(x1, y1, , )

triangle(x1, y1, x2, y2, x3, y3)

line(x1, y1, x2, y2)

quad(x1,y1,x2,y2,x3,y3,x4,y4)

var size = 50;

=

function draw() { var size = 50; ellipse(100, 100, size, size);}

ellipse

size 50

size 50

function draw() { var size = 10; ellipse(100, 100, size + 1, size + 2);}

c o n s o l e . l o g

var w = 20;var h = 30;console.log(w * h);

console

1 . 2 .

3 .

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

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

var a = 5;var b = 10;var c = b / 2;var d = 10 % 3; a = b + c;b += 1;b *= b;

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

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

function setup() { createCanvas(800, 600); }

function draw() {}

function mouseClicked() {ellipse(mouseX, mouseY, 50, 50);}

function mouseClicked() {ellipse(mouseX, mouseY, 50, 50);}

mouseX, mouseY p5

m o u s e C l i c k e d ( ) , m o u s e D r a g g e d ( )

. . . . . . . . .

function mouseClicked() { if (mouseX > 400) { fill(‘red’); } else { fill(‘blue’); }ellipse(mouseX, mouseY, 50, 50);}

> <

> = < = = = ! =

. . .

l o o p

. . .

e l l i p s e ( )

f o r l o o p

function draw() { for(var i = 1; i <= 10; i ++) { ellipse(i*50, 50, 20, 20); }}

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

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); } }}

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()