Build Cool Things with p5.js

Why p5.js is COOL?

NYU ITP

Example Code <3

function setup()

function draw()

function setup(){ createCanvas(500, 500);}

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

ellipse(x, y, width, height)

function setup(){ createCanvas(500, 500);}

function draw(){ ellipse(100, 100, 50, 50); ellipse(200, 100, 70, 70);}

fill(color(100, 200, 100));stroke(color(“red”));

// or no colornoFill();noStroke();

var xPos = 0;

function draw(){ ellipse(xPos, 100, 50, 50); xPos ++;}

function mouseClicked()

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

Cool?

rect() triangle()

quad() bezier() vertex()

….

Advanced

Build a matrix

for(var i = 0; i < 9; i ++){ for(var j = 0; j < 9; j ++) { ellipse(i*50 , j*50, 30, 30) }}

for(var i = 0; i < 10; i ++){ for(var j = 0; j < 10; j ++) { if(i % 2 == 0) { fill(color(“blue”)); } else { fill(color(“red”)); } ellipse(i*50 ,j*50, 30, 30); }}

#PrayForParis

Using sin()

frameCount

function draw(){ ellipse(400, 400, sin(frameCount), sin(frameCount));}

function draw(){ var sinSeed = sin(frameCount * 0.01); ellipse(400, 400, sinSeed * 100, sinSeed * 100);}

sin() = Magic

Final Project

Terima Kasih!