p5.js Xuleta

Variables

let i;
let j = [];
        

Funcions Predeterminades

1. Inicialització i Configuració

preload(): Carrega fitxers externs abans que l'esbós comenci.
setup(): S'executa una vegada al principi per inicialitzar configuracions.
        

2. Dibuix i Animació

draw(): Executa contínuament el codi dins seu per actualitzar el llenç.
        

3. Interacció amb l'Usuari

mousePressed(): Quan es prem el botó del ratolí.
mouseReleased(): Quan es deixa anar el botó del ratolí.
mouseClicked(): Quan es fa clic amb el ratolí.
mouseMoved(): Quan es mou el ratolí.
mouseDragged(): Quan es desplaça el ratolí mentre es prem.
touchStarted(): Quan comença un toc en un dispositiu tàctil.
touchMoved(): Quan es mou un toc en un dispositiu tàctil.
touchEnded(): Quan acaba un toc en un dispositiu tàctil.
        

4. Interacció amb el Teclat

keyPressed(): Quan es prem una tecla.
keyReleased(): Quan es deixa anar una tecla.
keyTyped(): Quan es prem i es deixa anar una tecla.
        

5. Finestra i Redimensionament

windowResized(): Quan es redimensiona la finestra del navegador.
        

6. Altres Gestors d'Esdeveniments

deviceMoved(): Quan es mou el dispositiu (telèfon o tauleta).
deviceTurned(): Quan canvia l'orientació del dispositiu.
deviceShaken(): Quan es sacseja el dispositiu.
        

7. Miscellaneous

drawBackground(): Normalment s'utilitza per establir el fons inicial.
keyIsDown(): Comprova si una tecla específica està premuda.
mouseIsPressed: Boolean que és cert si el ratolí està premut.
        

Exemple de Visualització d'Áudio

let song;
let amplitude;
let playButton;

function preload() {
  song = loadSound('sounds/milesdavis.mp3');
}

function setup() {
  createCanvas(400, 200);
  background(200);
  playButton = createButton('Play/Pause');
  playButton.mousePressed(toggleAudio);
  playButton.position(10, 10);
  amplitude = new p5.Amplitude();
}

function draw() {
  background(200);
  let level = amplitude.getLevel();
  let size = map(level, 0, 1, 0, 200);
  ellipse(width / 2, height / 2, size, size);
}

function toggleAudio() {
  if (song.isPlaying()) {
    song.pause();
  } else {
    song.play();
  }
}

function touchStarted() {
  getAudioContext().resume();
  return false;
}
        

Formes Bàsiques en 2D

Ellipse: ellipse(x, y, width, height)
Rect (Rectangle): rect(x, y, width, height)
Line: line(x1, y1, x2, y2)
Triangle: triangle(x1, y1, x2, y2, x3, y3)
Quad (Quadrilateral): quad(x1, y1, x2, y2, x3, y3, x4, y4)
Arc: arc(x, y, width, height, start, stop, [mode])
Point: point(x, y)
Bezier Curve: bezier(x1, y1, x2, y2, x3, y3, x4, y4)
Vertex: beginShape(); vertex(x1, y1); ... endShape(CLOSE);
Curve: curve(x1, y1, x2, y2, x3, y3, x4, y4)
Curve Vertex: curveVertex(x, y)
        

Formes en 3D

Box (Cuboid): box(width, height, depth)
Sphere: sphere(radius)
Cone: cone(radius, height)
Cylinder: cylinder(radius, height)
Torus: torus(r1, r2)
        

Exemple de Renderització en 3D

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);
}
        

Filera d'Execució de Funcions Dinàmiques

let functionQueue = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255, 255, 255);
  for (let func of functionQueue){
    try {
      func();
    } catch (e){
      background(255, 0, 0);
    }
  }
}

function func0() {
  text("function #0", width/2, height/2);
}

function func1() {
  text("function #1", width/2, height/2 + 40);
}

functionQueue[0] = func0;
functionQueue.push(func1);