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