struktur program

//berjalan sekali ketika program dimulai
function setup(){
  createCanvas(800,600); //lebar,tinggi dalam satuan piksel
}

//berjalan terus menerus setelah fungsi setup
function draw(){
  //me-render kode program terus menerus
}

variabel sistem

windowWidth / windowHeight
//lebar / tinggi jendela browser

width / height
//lebar / tinggi kanvas

mouseX / mouseY
//posisi mouse horisontal/vertikal saat ini

umpan balik non-visual

print();
//menampilkan data ke konsol

//double slash untuk memberikan komentar
//(program akan melewatinya)

warna

fill(120); //abu: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alfa/transparansi
fill('red'); //warna dengan bentuk string
fill('#ccc'); //warna dengan 3-digit heksadesimal
fill('#222222'); //warna dengan 6-digit heksadesimal
color(0, 0, 255); //objek p5.Color

perhitungan numerik

+ - / *  //dasar operasi matematika

random(low,high); //mengacak angka yang berkisar

map(value, in1, in2, out1, out2);
//memetakan nilai dari rentang input ke rentang output

bentuk 2d

line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //silakan tambahkan lebih banyak simpul/titik
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);

• sistem grid

• line()

• ellipse()

• rect()

• arc()

• vertex()

atribut

background(color);
//atur warna latar

fill(color);
//atur warna isian (bentuk 2d)

noFill();
//menonaktifkan isian

stroke(color);
//atur warna stroke (garis luar bentuk 2d)

strokeWeight(weight);
//atur lebar garis dalam piksel

noStroke();
//menonaktifkan stroke

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER

textSize(pixels);

logika bersyarat if/then

if(test){
  //pernyataan / statements
}

===  //sama dengan
!==  //tidak sama dengan
>   //lebih dari
<   //kurang dari
>=  //lebih dari atau sama dengan
<=  //kurang dari atau sama dengan