Ejercicios de Programación Creativa con P5.js: Interactividad y Animación

Enviado por Chuletator online y clasificado en Plástica y Educación Artística

Escrito el 24 de Diciembre de 2024 en español con un tamaño de 24,06 KB

Conceptos Básicos de Animación y Juegos en P5.js

Bola que Rebota: Incremento de Velocidad

El siguiente código muestra una elipse en el centro de la pantalla que se mueve hacia abajo. Al llegar al borde inferior, rebota hacia arriba, y al llegar al borde superior, rebota hacia abajo. La velocidad se incrementa en cada rebote.

En este ejemplo, se declaran dos variables: 'y' controla la posición vertical de la pelota, y 'v' controla la velocidad vertical.


var y = 0;
var v = 1;

Siempre que queramos que la pelota suba y baje, necesitaremos una variable de velocidad, incluso si no varía.


function setup() {
  createCanvas(400, 400); // Creamos un lienzo de 400x400 píxeles.
}

function draw() {
  background(0); // Establecemos el fondo del lienzo en negro.

  // Dibujamos una elipse (la pelota) en la posición (200, y) con ancho y alto de 40 píxeles.
  ellipse(200, y, 40, 40);

  y = y + v; // Actualizamos la posición vertical de la pelota sumando la velocidad 'v'.

  // Verificamos si la pelota ha alcanzado el borde inferior del lienzo.
  if (y > 400) {
    v = v * -1.25; // Invertimos la dirección de la velocidad e incrementamos la velocidad para que la pelota rebote hacia arriba.
  }

  // Verificamos si la pelota ha alcanzado el borde superior del lienzo.
  if (y

Bola que Rebota y Cambia de Color

Este código realiza la misma funcionalidad que el anterior, pero con la adición de cambiar el color de la pelota cada vez que rebota en un borde.

Declaramos las variables: 'y' para la posición vertical de la pelota, 'v' para la velocidad vertical, y 'colR', 'colG', 'colB' para los componentes de color rojo, verde y azul respectivamente.


var y = 0;
var v = 1;
var colR = random(0, 255); // Generamos un valor aleatorio para el componente rojo del color.
var colG = random(0, 255); // Generamos un valor aleatorio para el componente verde del color.
var colB = random(0, 255); // Generamos un valor aleatorio para el componente azul del color.


function setup() {
  createCanvas(400, 400); // Creamos un lienzo de 400x400 píxeles.
}

function draw() {
  background(0); // Establecemos el fondo del lienzo en negro.

  fill(colR, colG, colB); // Establecemos el color de relleno usando los valores aleatorios de color.
  ellipse(200, y, 40); // Dibujamos una elipse (la pelota) en la posición (200, y) con un ancho de 40 píxeles.

  y = y + v; // Actualizamos la posición vertical de la pelota sumando la velocidad 'v'.

  // Verificamos si la pelota ha alcanzado el borde inferior del lienzo.
  if (y > 400) {
    v = v * -1.25; // Invertimos la dirección de la velocidad para que la pelota rebote hacia arriba.
    // Generamos nuevos valores aleatorios para los componentes de color.
    colR = random(0, 255);
    colG = random(0, 255);
    colB = random(0, 255);
  }

  // Verificamos si la pelota ha alcanzado el borde superior del lienzo.
  if (y

Juego: Desaparición de Elementos al Contacto

En este juego, hay diferentes gadgets y una bola. Cuando la bola toca un gadget, este desaparece.

Se utilizan las siguientes variables:

'imatge': Array para almacenar las imágenes.
'x', 'y': Arrays para las posiciones de las imágenes.
'bolaX', 'bolaY': Posición inicial de la bola.
'punts': Puntuación inicial.
'compt': Contador de tiempo.
'estat': Estado del juego.


var imatge = [];
var x = [];
var y = [];
var bolaX = 200;
var bolaY = 200;
var punts = 0;
var compt = 0;
var estat = 0;

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

  for (var i = 0; i  0) bolaX = bolaX - 5;
      if (key == "ArrowRight" && bolaX  0) bolaY = bolaY - 5;
    }
  } else if (estat == 1) { // Estado 1: Fin del juego
    background("orange");
    text("Has fet: " + punts + " punts", 200, 200);
  }
}

Bola que Aparece y Desaparece al Hacer Clic

Este código crea una bola que aparece y desaparece al hacer clic sobre ella. Al presionar la tecla de espacio, la bola se regenera en una nueva posición aleatoria.

Se utilizan las siguientes variables:

'estat': Controla el estado de la bola (0 para visible, 1 para invisible).
'x', 'y': Posición de la bola.


var estat = 0;
var x;
var y;

function setup() {
  createCanvas(400, 400);
  x = random(20, 390);
  y = random(20, 390);
  textAlign(CENTER);
}

function draw() {
  background(0);
  fill("white");
  text("Clica la bola per fer-la aparèixer o desaparèixer", 200, 180);
  text("Prem l'espai per re-generar la bola", 200, 200);

  if (estat == 0) {
    fill("red");
  } else if (estat == 1) {
    noFill();
  }
  noStroke();
  ellipse(x, y, 50);

  var d = dist(mouseX, mouseY, x, y);

  if (d

Elipses Púrpuras con Fondo Dinámico

Este código crea un efecto visual donde elipses de color púrpura se desplazan hacia la derecha cuando el ratón se acerca a ellas. El fondo del lienzo cambia gradualmente de rojo a negro.

Se utilizan las siguientes variables:

'posX': Array para almacenar las posiciones horizontales de las elipses.
'fonsVermell': Controla el color de fondo rojo.


var posX = [];
var fonsVermell = 255;

function setup() {
  createCanvas(400, 400);

  for (var i = 0; i

Elipses Blancas con Movimiento Vertical

Este código crea un conjunto de elipses blancas que se mueven verticalmente en función de la posición del ratón. Las elipses aumentan o disminuyen su velocidad vertical según la proximidad del ratón.

Se utilizan las siguientes variables:

'y': Array para almacenar las posiciones verticales de las elipses.
'vel': Array para almacenar las velocidades verticales de las elipses.


var y = [];
var vel = [];

function setup() {
  createCanvas(400, 400);

  for (var i = 0; i = 400) {
      vel[i] = 0;
    }
  }
}

Bolas con Posición y Colores Aleatorios

Este código crea cinco bolas que cambian de posición y color cada aproximadamente dos segundos.

Se utilizan las siguientes variables:

'x', 'y': Arrays para almacenar las coordenadas de las bolas.
'compt': Contador para realizar un seguimiento del tiempo.
'colors': Array para almacenar los colores de las bolas.


var x = [];
var y = [];
var compt = 0;
var colors = [];

function setup() {
  createCanvas(400, 400);

  for (var i = 0; i  120) {
      for (var i = 0; i

Juego de Clics en 10 Segundos

Este código crea un juego simple donde el jugador intenta hacer clic tantas veces como pueda en 10 segundos.

Se utilizan las siguientes variables:

'estat': Controla el estado del juego (0: inicio, 1: clics, 2: final).
'compt': Cuenta el tiempo restante en segundos.
'punts': Registra los puntos (clics).


var estat = 0;
var compt = 0;
var punts = 0;

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

function draw() {
  if (estat == 0) {
    iniciJoc();
  } else if (estat == 1) {
    clics();
  } else if (estat == 2) {
    finalJoc();
  }
}

function iniciJoc() {
  compt = 0;
  background("pink");
  text("Fes tants clics com puguis en 10 segons", 200, 200);
  text("Prem espai per començar", 200, 240);
}

function clics() {
  compt = 10 - int(frameCount / 60);
  background("red");
  text("Clics: " + punts, 200, 200);
  text("Temps: " + compt, 200, 240);

  if (compt

Colisiones de Figuras y Cambio de Fondo

Este código muestra tres figuras geométricas y cambia el color de fondo cuando el ratón pasa sobre ellas.


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

function draw() {
  background("black");
  fill("white");
  text("Per cada figura amb què per sobre passis el ratolí, canviarà el fons", 200, 300);

  fill("blue");
  ellipse(80, 200, 70);

  fill("green");
  rect(200, 200, 70);

  fill("yellow");
  ellipse(320, 200, 70);

  var d = dist(mouseX, mouseY, 80, 200);
  var d1 = dist(mouseX, mouseY, 200, 200);
  var d2 = dist(mouseX, mouseY, 320, 200);

  if (d

Imágenes Aleatorias Cada 3 Segundos

Este código muestra una imagen aleatoria en el centro del lienzo cada tres segundos.

Se utilizan las siguientes variables:

'imatge': Array para almacenar las imágenes.
'compt': Contador para llevar el tiempo.
'r': Variable para almacenar el índice de la imagen aleatoria.


var imatge = [];
var compt = 0;
var r;

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);

  for (var i = 0; i  180) {
      r = int(random(0, 3));
      compt = 0;
    }
  }
}

Juego: ¿Quién es el Asesino?

Un juego simple de toma de decisiones con tres opciones: Abuela, Jardinero y Mayordomo.

Se utilizan las siguientes variables:

'estat': Variable para controlar el estado del juego.
'compt': Contador de tiempo.


var estat = 0;
var compt = 0;

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

function draw() {
  if (estat == 0) {
    assassi();
  } else if (estat == 1) {
    decidir();
  } else if (estat == 2) {
    avia();
  } else if (estat == 3) {
    jardiner();
  } else if (estat == 4) {
    majordom();
  }
}

function assassi() {
  background("black");
  fill("white");
  text("QUI ÉS L'ASSASSÍ? El joc comença en " + compt, 200, 200);
  compt = 3 - int(frameCount / 30);
  compt = compt + 1;
  if (compt

Juego Interactivo: Bola y Cuadrados

Este código crea un juego simple donde el jugador controla una bola con las teclas de flecha y debe evitar los cuadrados.

Se utilizan las siguientes variables:

'qX', 'qY': Arrays para almacenar las posiciones de los cuadrados.
'bX', 'bY': Posición de la bola.


var qX = [];
var qY = [];
var bX = 200;
var bY = 200;

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);

  for (var i = 0; i  0) bX -= 2;
      if (key == "ArrowDown" && bY  0) bY -= 2;
    }
  }
}

Animación de Lluvia

Este código genera una animación de lluvia, donde múltiples gotas caen desde la parte superior del lienzo.

Se utilizan las siguientes variables:

'x', 'y': Arrays para almacenar las posiciones de las gotas.
'vel': Array para almacenar las velocidades de las gotas.
'col': Array para almacenar los colores de las gotas.


var x = [];
var y = [];
var vel = [];
var col = [];

function setup() {
  createCanvas(400, 400);

  for (var i = 0; i  400) {
      y[i] = 0;
    }
  }
}

Cuadrados que Desaparecen al Hacer Clic

Este código dibuja cinco rectángulos que cambian de color entre rojo y sin color cuando se hace clic sobre ellos.

Se utilizan las siguientes variables:

'x', 'y': Arrays para almacenar las posiciones de los rectángulos.
'mida': Array para almacenar los tamaños de los rectángulos.
'vermell': Array para almacenar los estados de color de los rectángulos.


var x = [];
var y = [];
var mida = [];
var vermell = [];

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);

  for (var i = 0; i

Movimiento con Teclas de Flecha

Este código permite mover una bola en un lienzo utilizando las teclas de flecha.

Se utilizan las siguientes variables:

'x', 'y': Coordenadas de la bola.


var x, y;

function setup() {
  createCanvas(400, 400);
  x = 200;
  y = 200;
}

function draw() {
  background(0);

  if (keyIsPressed) {
    if (key == "ArrowLeft" && x > 0) {
      x -= 5;
    }
    if (key == "ArrowRight" && x  0) {
      y -= 5;
    }
    if (key == "ArrowDown" && y

Bolas Activables con Clics

Este código crea una matriz de círculos que pueden ser activados o desactivados haciendo clic en ellos.

Se utilizan las siguientes variables:

'x', 'y': Arrays para almacenar las posiciones de los círculos.
'actives': Array para almacenar los estados activos de los círculos.


var x = [];
var y = [];
var actives = [];

function setup() {
  createCanvas(400, 400);

  for (var i = 0; i

Estilo Mondrian con Animación

Uso de formas geométricas simples y colores primarios. El cuadrado rojo varía su transparencia, el cuadrado azul avanza y retrocede horizontalmente, y el cuadrado amarillo cambia de color cuando el mouse pasa sobre él.

// Variables para controlar el color y la animación del cuadrado rojo.

var vermell = 0; // Variable para la transparencia del rojo.

var ample = 80; // Ancho inicial del cuadrado rojo.

var vel = 1; // Velocidad de avance o retroceso del cuadrado azul.

var colrs; // Variables para controlar el color del cuadrado amarillo.

var llistaColrs = ["red", "blue", "yellow"]; // Lista de colores para el cuadrado amarillo.

function setup(){

createCanvas(400, 400); // Crear lienzo de 400x400 píxeles.

colrs = random(llistaColrs); // Seleccionar un color aleatorio para el cuadrado amarillo.

}

function draw(){

background(0); // Establecer fondo negro.

// Dibujar los elementos del Mondrian.

fill(255); // Color blanco.

rect(0, 0, 80, 100); // Cuadrado superior izquierdo.

rect(0, 110, 80, 150); // Cuadrado inferior izquierdo.

// Cuadrado rojo con variación de transparencia.

vermell++; // Incrementar la transparencia.

if (vermell > 255) { // Si la transparencia es mayor que 255...

vermell = 0; // Reiniciar a 0.

}

fill(vermell, 0, 0); // Color rojo con transparencia variable.

rect(90, 0, 310, 260); // Cuadrado rojo.

// Cuadrados blancos.

fill(255); // Color blanco.

rect(90, 270, 160, 130); // Cuadrado inferior izquierdo.

rect(260, 270, 140, 60); // Cuadrado inferior derecho.

// Cuadrado amarillo que cambia de color al pasar el mouse sobre él.

var d = dist(mouseX, mouseY, 350, 350); // Calcular la distancia al cuadrado amarillo.

if (d

colrs = random(llistaColrs); // Seleccionar un color aleatorio.

}

fill(colrs); // Establecer el color seleccionado.

rect(260, 340, 140, 60); // Cuadrado amarillo.

// Cuadrado azul que avanza y retrocede horizontalmente.

ample = ample + vel; // Incrementar o decrementar el ancho.

if (ample > 400) { // Si el ancho supera el ancho del lienzo...

vel = vel * -1.25; // Cambiar la dirección a negativa para retroceder.

}

if (ample

vel = 1; // Restablecer la dirección a positiva para avanzar.

}

fill(0, 0, 255); // Color azul.

rect(0, 270, ample, 130); // Cuadrado azul. }

QUADRATS DESAPAREIXEN_CLICS_PUNTS

Este juego permite al jugador hacer clic en los cuadrados rojos para hacerlos desaparecer. Cuando todos los cuadrados rojos desaparecen, el juego muestra un mensaje de victoria.

// Declaración de variables para almacenar las coordenadas, tamaño y estado de los cuadrados.

var x = [];

var y = [];

var mida = [];

var vermell = [];

var estat = 0; // 0: en juego, 1: juego ganado.

var punts = 0; // Puntuación del jugador.

function setup(){

createCanvas(400, 400); // Crear lienzo de 400x400 píxeles.

rectMode(CENTER); // Establecer modo de dibujo de los rectángulos en el centro.

textAlign(CENTER); // Alinear texto al centro.

// Inicializar las coordenadas, tamaño y estado de los cuadrados.

for (var i = 0; i

x[i] = random(20, 390); // Coordenada x aleatoria dentro del lienzo.

y[i] = random(20, 390); // Coordenada y aleatoria dentro del lienzo.

mida[i] = random(20, 70); // Tamaño aleatorio del cuadrado.

vermell[i] = true; // Estado inicial: cuadrado rojo visible.

}

function draw(){

background(0); // Establecer fondo negro.

for (var i = 0; i

if (estat == 0) { // Si el juego está en curso...

if (vermell[i] == true) {

fill("red"); // Color rojo para cuadrados visibles.

} else if (vermell[i] == false) {

noFill(); // Sin relleno para cuadrados invisibles.

}

rect(x[i], y[i], mida[i]); // Dibujar el cuadrado en la posición actual.

var d = dist(mouseX, mouseY, x[i], y[i]); // Calcular la distancia al cuadrado.

if (d

if (mouseIsPressed && vermell[i] == true && estat == 0) { // Si se hace clic y el cuadrado es rojo...

punts++; // Incrementar los puntos.

vermell[i] = false; // Hacer el cuadrado invisible.

if (punts >= 5) { // Si se han hecho desaparecer todos los cuadrados...

estat = 1; // Cambiar al estado de juego ganado.

}. }. }

} else if (estat == 1) { // Si el juego ha sido ganado...

background("green"); // Establecer fondo verde.

fill("white"); // Color blanco para el texto.

text("¡HAS GANADO!", 200, 200); // Mostrar mensaje de victoria. } }. }

Completa el codi

El següent codi mostra una el·lipse al mig de la pantalla que va rebotant a les 4 bores de la pantalla. Canvia per a que no reboti a la part de baix i en canvi torni a sortir per la part de dalt cada vegada que marxi per la part de baix [5 punts]. Un cop ho tinguis fet, implementa la funció “dibuixaBarra” per a que dibuixi un rectangle a la part de baix de 70x10 píxels que es mou seguint la posició X del ratolí [10 punts].

var x; // Posición en x de la bola.

var y; // Posición en y de la bola.

var vx; // Velocidad en x de la bola.

var vy; // Velocidad en y de la bola.

function setup(){

x = 200; // Posición inicial en x de la bola.

y = 100; // Posición inicial en y de la bola.

vx = 1; // Velocidad inicial en x de la bola.

vy = 1; // Velocidad inicial en y de la bola.

createCanvas(400, 400); // Crea un lienzo de 400x400 píxeles.

}

function draw(){

background(0); // Establece el fondo del lienzo en negro.

ellipse(x, y, 30, 30); // Dibuja la bola en la posición actual.

x = x + vx; // Actualiza la posición en x de la bola según su velocidad.

y = y + vy; // Actualiza la posición en y de la bola según su velocidad.

if (x > 400) { // Si la bola llega al borde derecho del lienzo.

vx = -1; // Cambia la dirección de la velocidad en x para que la bola rebote.

}

if (x

vx = 1; // Cambia la dirección de la velocidad en x para que la bola rebote.

}

if (y > 400) { // Si la bola llega al borde inferior del lienzo.

y = 0; // Reposiciona la bola en la parte superior del lienzo.

}

if (y

vy = 1; // Cambia la dirección de la velocidad en y para que la bola rebote.

}

dibuixaBarra(); // Llama a la función para dibujar la barra.

}

function dibuixaBarra() {

rect(mouseX, 350, 70, 10); // Dibuja una barra en la posición del mouse.

}

Completa el codi Al següent codi trobareu una funció botoSi que dibuixa un botó de color verd amb un SI a la posició que li diem. I una funció botoNo que dibuixa un botó de color Vermell amb un NO ala posició que se l’indica.

Al programa principal com podeu veure dibuixem un botó Si i un de No, a una posició concreta.

VERSIÓ AMB ARRAYS:

var inici = true; // Variable que indica si el juego está en modo de inicio.

var cont = 0; // Contador utilizado para controlar el tiempo de inicio.

var xSi = []; // Array que almacena las coordenadas x de los botones "SI".

var ySi = []; // Array que almacena las coordenadas y de los botones "SI".

var xNo = []; // Array que almacena las coordenadas x de los botones "NO".

var yNo = []; // Array que almacena las coordenadas y de los botones "NO".

function setup(){

createCanvas(400, 400); // Crea un lienzo de 400x400 píxeles.

for (var i = 0; i

xSi[i] = int(random(0, 350));

ySi[i] = int(random(0, 350));

xNo[i] = xSi[i];

yNo[i] = ySi[i] + 40; } }

function draw(){

background(0); // Establece el fondo del lienzo en negro.

if (inici) { // Si el juego está en modo de inicio.

cont++; // Incrementa el contador.

background(0); // Limpia el lienzo.

fill(255, 0, 0); // Establece el color de relleno en rojo.

text("Intenta premer el botó Si", 100, 100); // Muestra un mensaje en la pantalla.

if (cont > 300) inici = false; // Si ha pasado cierto tiempo, cambia al modo de juego.

} else { // Si el juego está en modo de juego.

for (var i = 0; i

botoSi(xSi[i], ySi[i]); // Dibuja el botón "SI" en la posición actual.

botoNo(xNo[i], yNo[i]); // Dibuja el botón "NO" en la posición actual.

if (mouseX > xNo[i] && mouseX yNo[i] && mouseY

cont = 0; // Reinicia el contador.

inici = true; // Cambia al modo de inicio. }

if (mouseX > xSi[i] && mouseX ySi[i] && mouseY

var xT = xSi[i]; // Intercambia las coordenadas de los botones "SI" y "NO".

var yT = ySi[i];

xSi[i] = xNo[i];

ySi[i] = yNo[i];

xNo[i] = xT;

yNo[i] = yT;

} } } }

function botoSi(x, y) {

fill(0, 255, 0); // Establece el color de relleno en verde.

rect(x, y, 70, 30); // Dibuja el botón "SI" en la posición dada.

fill(0); // Establece el color de relleno en negro.

text("SI", x + 30, y + 20); // Muestra el texto "SI" en el botón. }

function botoNo(x, y){

fill(255, 0, 0); // Establece el color de relleno en rojo.

rect(x, y, 70, 30); // Dibuja el botón "NO" en la posición dada.

fill(0); // Establece el color de relleno en negro.

text("NO", x + 30, y + 20); // Muestra el texto "NO" en el botón.

}

Entradas relacionadas:

Etiquetas: