Geometria i composició

Recordatori: el llenç i draw()

Seguim utilitzant setup() per definir la mida del llenç i draw() per dibuixar. Ara ampliem el vocabulari de formes i aprenem a controlar amb exactitud on i com apareixen.

function setup() {
  createCanvas(500, 400);
  background(245);
}

function draw() {
  // aquí aniran les nostres formes
}

Catàleg de formes 2D

A més de ellipse() i rect(), p5.js ofereix altres primitives geomètriques. Vegem-les amb exemples interactius:

Recorda: L'ordre de dibuix afecta la superposició. Les formes declarades després es pinten al damunt.

Modes de dibuix: CENTER i CORNER

Per defecte, ellipse() i rect() utilitzen el mode CENTER, on (x,y) és el centre de la figura. Podem canviar a mode CORNER amb ellipseMode(CORNER) o rectMode(CORNER), i llavors (x,y) serà la cantonada superior esquerra.

// Mode CENTER (per defecte)
rect(90, 70, 80, 60);   // centre a (90,70)

// Mode CORNER
rectMode(CORNER);
rect(50, 30, 80, 60);   // cantonada sup. esq. a (50,30)

// També per a el·lipses:
ellipseMode(CORNER);
ellipse(50, 30, 40, 40);

Controlar posició i mida amb variables

En lloc de posar números directament, podem utilitzar variables per a fer el codi més llegible i fàcil de modificar. També podem aprofitar les variables integrades width i height que contenen l'amplada i l'alçada del llenç.

let centerX = width / 2;   // meitat de l'amplada
let centerY = height / 2;  // meitat de l'alçada
let mida = 100;

ellipse(centerX, centerY, mida, mida);
rect(centerX - mida/2, centerY - mida/2, mida/2, mida/2);

Consell: Acostuma't a utilitzar width i height per a crear composicions que s'adaptin automàticament si canvies la mida del llenç.

Principis de composició visual

Crear formes és fàcil; col·locar-les de manera harmoniosa és un art. Aquí tens algunes directrius:

• Regla dels terços: divideix mentalment el llenç en 3×3 parts. Col·loca elements importants a les interseccions o al llarg de les línies.
• Simetria: La simetria transmet ordre i calma. L'asimetria pot generar dinamisme i tensió.
• Jerarquia visual: Un element gran o de color contrastat domina la composició. Utilitza mides i colors per guiar la mirada.
• Espai negatiu: El buit (fons) és tan important com les formes. No omplis tot el llenç.

Experimenta amb aquests conceptes als exemples següents.

Exemples creatius pas a pas

let cx = width/2, cy = height/2;
noFill(); stroke(255,200,0); strokeWeight(2);
for (let i=20; i<=120; i+=20) {
    ellipse(cx, cy, i, i);
}
fill(255,100,0,150); noStroke();
rect(cx-40, cy-40, 80, 80);
fill(0,200,255,150);
ellipse(cx, cy, 50, 50);

background(135,206,235); // blau cel
fill(100,200,100); rect(0,150,width,50); // gespa
fill(100,100,100); triangle(50,150, 150,40, 250,150);
fill(80,80,80);   triangle(20,150, 120,60, 220,150);
fill(120,120,120); triangle(100,150, 220,30, 340,150);
fill(255,255,0); ellipse(280,50,40,40);

let w = width/3, h = height/2;
for (let i=0; i<3; i++) {
  for (let j=0; j<2; j++) {
    fill(255,150,0,180); rect(i*w, j*h, w, h);
    fill(0,150,255,120); ellipse(i*w + w/2, j*h + h/2, w/2, h/2);
    stroke(255); strokeWeight(2);
    line(i*w, j*h, i*w+w, j*h+h);
    line(i*w+w, j*h, i*w, j*h+h);
  }
}