Animaciones interactivas con p5.js: círculos, pelotas, botones y efectos visuales
Informática y Telecomunicaciones11,24 KB
Cinco círculos que crecen y paran
var tam = [];
var creix = [];
var x = [];
var y = [];
function setup() {
createCanvas(400, 400);
for (var i = 0; i < 5; i++) {
x[i] = random(width);
y[i] = random(height);
tam[i] = 0; // Diámetro inicial del círculo
creix[i] = true; // Los círculos comienzan a crecer
}
}
function draw() {
background(0);
for (var i = 0; i < 5; i++) {
ellipse(x[i], y[i], tam[i], tam[i]); // Dibujar el círculo
if (creix[i]) {
tam[i] = tam[i] + 1;
}
var d = dist(mouseX, mouseY, x[i], y[i]);
if (d < tam[i] / 2 && mouseIsPressed && mouseButton == LEFT) {
creix[i] = false;
}
if (d < tam[i] / 2 && mouseIsPressed && mouseButton == RIGHT) {
creix[i] = true;
}
if (tam[i] > 180) {
tam[i] = 0;
}
}
}
Pelota que rebota y va más rápido
var y = 0;
var vy = 1;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
ellipse(200, y, 40, 40);
y = y + vy;
if (y >= 400) {
vy = -vy;
vy *= 1.01;
}
else if (y <= 0) {
vy = -vy;
vy *= 1.05;
}
}
Pelota que cae y barra con seguimiento
var x;
var y;
var vx;
var vy;
function setup() {
x = 200;
y = 100;
vx = 1;
vy = 1;
createCanvas(400, 400);
}
function draw() {
background(0);
ellipse(x, y, 30, 30);
x = x + vx;
y = y + vy;
if (x > 400) vx = -1;
if (x < 0) vx = 1;
if (y > height) {
y = 0;
}
if (y < 0) vy = 1;
dibujaBarra();
}
function dibujaBarra() {
rect(mouseX - 35, 390, 70, 10);
}
Tres círculos que crecen y se van
let canvasSize = 500;
let mida = 50;
let alphacol = 255;
function setup() {
createCanvas(canvasSize, canvasSize);
}
function draw() {
background('blue');
noFill();
if (mouseIsPressed) {
mida = mida + 1;
alphacol = alphacol - 3;
for (let i = 0; i <= 3; i++) {
stroke(255, 255, 255, alphacol);
circle(mouseX, mouseY, i * mida);
}
}
else if (!mouseIsPressed) {
mida = 50;
alphacol = 255;
}
}
Botones Sí y No
var inici = true;
var cont = 0;
var xSi = [];
var ySi = [];
var xNo = [];
var yNo = [];
function setup() {
createCanvas(400, 400);
for (var i = 0; i < 4; 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);
if (inici) {
cont++;
fill(255, 0, 0); // Color rojo para el texto
text("Intenta pulsar el botón Sí", 100, 100);
if (cont > 300) {
inici = false;
}
} else {
for (var i = 0; i < 4; i++) {
botoSi(xSi[i], ySi[i]);
botoNo(xNo[i], yNo[i]);
if (mouseX > xNo[i] && mouseX < xNo[i] + 70 && mouseY > yNo[i] && mouseY < yNo[i] + 30 && mouseIsPressed) { cont = 0; inici = true; } if (mouseX > xSi[i] && mouseX < xSi[i] + 70 && mouseY > ySi[i] && mouseY < ySi[i] + 30) { var xT = xSi[i]; 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);
rect(x, y, 70, 30);
fill(0);
text("SI", x + 30, y + 20);
}
function botoNo(x, y) {
fill(255, 0, 0);
rect(x, y, 70, 30);
fill(0);
text("NO", x + 30, y + 20);
}
Tres círculos que se quedan
var amplada = 0;
var posX = 20000;
var posY = 20000;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0, 0, 255);
noFill();
amplada = amplada + 1;
for (i = 0; i < 3; i++) {
ellipse(posX, posY, i * 10 + amplada);
}
if (mouseIsPressed) { // Al hacer clic se resetea a la nueva posición con ancho 0
amplada = 0;
posX = mouseX;
posY = mouseY;
}
}
Cuadrados cambian de color al pasar (2D)
var color = [];
function setup() {
createCanvas(400, 400);
for (i = 0; i < 100; i++) {
color[i] = 0;
}
}
function draw() {
background(220);
for (i = 0; i < 10; i++) {
for (j = 0; j < 10; j++) {
fill(color[i + j * 10], 0, 255);
rect(i * 40, j * 40, 40, 40);
if (dist(mouseX, mouseY, i * 40 + 20, j * 40 + 20) < 20) { color[i + j * 10] += 10; } else { if (color[i + j * 10] > 0) color[i + j * 10]--; } } } }
Cuadrados cambian de color al pasar
let color = [];
function setup() {
createCanvas(400, 400);
for (let i = 0; i < 10; i++) {
color[i] = 0;
}
}
function draw() {
background(220);
for (let i = 0; i < 10; i++) {
fill(color[i], 0, 255);
rect(i * 40, height / 2 - 20, 40, 40);
if (dist(mouseX, mouseY, i * 40 + 20, height / 2) < 20) { color[i] += 10; // Incrementa el color si el ratón está cerca } else { if (color[i] > 0) color[i]--; } } }
Nieve
var x = [];
var y = [];
var v = [];
function setup() {
createCanvas(400, 400); // Crea un lienzo de 400x400 píxeles
for (i = 0; i < 40; i++) {
x[i] = random(0, 400); // Asigna una posición horizontal aleatoria a cada gota
y[i] = 0; // Inicializa todas las gotas en la parte superior de la pantalla
v[i] = random(1, 5); // Asigna una velocidad aleatoria a cada gota
}
}
function draw() {
background(0); // Dibuja un fondo negro en cada frame
for (i = 0; i < 40; i++) {
fill(255); // Color de relleno blanco
rect(x[i], y[i], 3, 3); // Dibuja un rectángulo pequeño de 3x3 píxeles
y[i] = y[i] + v[i]; // Actualiza la posición vertical de la gota
if (y[i] > 400) y[i] = 0; // Si la gota alcanza el fondo, vuelve arriba
}
}
Redonda cambia de color con mouseMoved
let fillValue;
let shapeScale; // Tamaño de la elipse
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
fillValue = 0;
shapeScale = 50;
}
function draw() {
background(75, 50);
fill(fillValue, 0, 0);
ellipse(width / 2, height / 2, shapeScale, shapeScale);
}
// Función que cambia el valor de fillValue de forma aleatoria cuando se mueve el ratón
function mouseMoved() {
fillValue = random(255); // Asigna un valor aleatorio para el rojo
}
// Función que modifica shapeScale cuando se presiona el ratón
function mousePressed() {
shapeScale = random(30, 150); // Tamaño aleatorio entre 30 y 150
}
Espectro de audio
let audio;
let fft;
let so;
let frieren;
function preload() {
audio = loadSound("data/sound.wav");
frieren = loadImage("data/frieren.png");
}
function setup() {
createCanvas(400, 400);
fft = new p5.FFT();
so = false;
imageMode(CENTER);
}
function draw() {
background(0, 50);
let spectro = fft.analyze();
for (i = 0; i < 400; i = i + 10) {
let amp = spectro[i] / 255;
let tam = map(amp, 0, 1, 3, 50);
image(frieren, i, height / 2, tam, tam);
}
}
function keyPressed() {
if (so == false) {
audio.play();
so = true;
audio.onended(restartt);
}
}
function restartt() {
audio.play();
}
