Guia de Programació Creativa amb p5.js: Exemples Pràctics

1. Pinzell interactiu: Canvi de color i mida

Aquest codi permet crear un pinzell que canvia les seves propietats segons les tecles premudes.

let mida = 20; // Variable per a la grossària
let color = "black"; // Variable per al color

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {
  if (mouseIsPressed) {
    noStroke();
    fill(color);
    circle(mouseX, mouseY, mida);
  }
}

function keyPressed() {
  if (key == 'r') color = "red";
  if (key == 'v') color = "green";
  if (keyCode == UP_ARROW) mida += 5;
  if (keyCode == DOWN_ARROW) mida -= 5;
  if (key == ' ') background(255);
}

2. Bucle de rectangles amb ones de color

Utilitzem el mode HSB per generar una animació d'ones suaus.

let angle = 0;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
}

function draw() {
  background(0, 0, 95);
  for (let x = 0; x <= width; x += 20) {
    let variacio = sin(angle + x * 0.05) * 50;
    let y = height / 2 + variacio;
    let colorActual = (x + angle * 10) % 360;
    fill(colorActual, 80, 90);
    noStroke();
    rect(x, y, 15, 60);
  }
  angle += 0.05;
}

3. Joc d'estats aleatoris amb imatges i comptador

Exemple de gestió d'estats (inici, joc, final) amb imatges i text.

let fotos = [];
let index = 0;
let estat = 0;
let temps = 10;
let frases = ["¡Eres un crack!", "¡Sigue así!", "¡Casi lo tienes!"];

function preload() {
  for (let i = 0; i < 3; i++) {
    fotos[i] = loadImage("foto" + i + ".jpg");
  }
}

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER);
}

function draw() {
  background(200);
  if (estat == 0) {
    text("Clica per començar", 200, 200);
  } else if (estat == 1) {
    image(fotos[index], 50, 50, 300, 200);
    text(frases[index], 200, 300);
    if (frameCount % 60 == 0 && temps > 0) temps--;
    text("Temps: " + temps, 200, 350);
    if (temps <= 0) estat = 2;
  } else if (estat == 2) {
    text("¡GAME OVER!", 200, 200);
    text("Prem R per reiniciar", 200, 250);
  }
}

4. Codi de joc de cartes (Sergi)

Implementació d'un sistema de cartes amb descripcions i lògica d'atzar.

// Lògica de cartes i estats del joc
let nom = ["Llança de Silici", "Consell de delegats", ...];
// ... (resta del codi de Sergi)