Rectangle - OpenProcessing

mySketch
xxxxxxxxxx
 
let efectos = [];
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(9);
​
  // Crear efectos anidados con diferentes tamaños
  efectos.push(new EfectoRectangulo(width / 2, height / 2, 400, 550, 20));
  //efectos.push(new EfectoRectangulo(width / 2, height / 2, 3, height / 5, 10));
  //efectos.push(new EfectoRectangulo(width / 2, height / 2, 300, 500, 30));
  //efectos.push(new EfectoRectangulo(width / 2, height / 2, 100, 300, 30));
}
​
function draw() {
  background(0, 9); // Desvanecimiento para efecto de estela
​
  if(frameCount%100==0)
      efectos.push(new EfectoRectangulo(width / 2, height / 2, 1, height / 5, 20));
  if(frameCount%200==0){
    efectos.push(new EfectoRectangulo(width / 2, height / 2, width / 5, 1, 20));
    efectos.shift(); // Elimina el primer efecto (el más viejo)
  }
      
  if(frameCount%300==0){
    efectos.push(new EfectoRectangulo(width / 2, height / 2, 500, 600, 20));
    efectos.shift(); // Elimina el primer efecto (el más viejo)
  }
  
  if (efectos.length > 2) {
    efectos.shift(); // Elimina el primer efecto (el más viejo)
  }
​
  
  // Actualizar y mostrar cada efecto
  for (let efecto of efectos) {
    efecto.update();
    efecto.display();
  }
}
​
// --- Clase EfectoRectangulo ---
class EfectoRectangulo {
  constructor(x, y, baseWidth, baseHeight, particlesPerFrame) {
    this.x = x;
    this.y = y;
    this.baseWidth = baseWidth;
    this.baseHeight = baseHeight;
    this.rectWidth = baseWidth;
    this.rectHeight = baseHeight;
    this.particlesPerFrame = particlesPerFrame;
    this.particles = [];
  }
​
  update() {
    // Modificar tamaño del rectángulo dentro de un rango
    this.rectWidth = this.baseWidth + random(1) * 30; 
    this.rectHeight = this.baseHeight + random(1) * 30; 
    this.rectWidth = this.baseWidth + sin(frameCount * 0.1) * 70; 
    this.rectHeight = this.baseHeight + cos(frameCount * 0.1) * 70; 
​
    // Generar partículas en cada frame
    for (let i = 0; i < this.particlesPerFrame; i++) {
      this.generateParticle();
    }
​
    // Actualizar partículas
    for (let i = this.particles.length - 1; i >= 0; i--) {
      let p = this.particles[i];
      p.update();
      if (p.alpha <= 0 || p.size <= 0) {
        this.particles.splice(i, 1);
      }
    }
  }
​
  display() {
    // Dibujar rectángulo sin relleno
    noFill();
    stroke(255);
    rectMode(CENTER);
    //if (random(100)<20)
    //  rect(this.x, this.y, this.rectWidth, this.rectHeight);
    
    // Dibujar partículas
    for (let p of this.particles) {
      p.display();
    }
  }
​
  // Función para generar partículas en los bordes del rectángulo
  generateParticle() {
    let side = int(random(4)); // Lado aleatorio (0=izq, 1=der, 2=arriba, 3=abajo)
    let x, y, direction;
    
    if (side === 0) { // Izquierda
      x = this.x - this.rectWidth / 2;
      y = random(this.y - this.rectHeight / 2, this.y + this.rectHeight / 2);
      direction = createVector(-1, 0);
    } else if (side === 1) { // Derecha
      x = this.x + this.rectWidth / 2;
      y = random(this.y - this.rectHeight / 2, this.y + this.rectHeight / 2);
      direction = createVector(1, 0);
    } else if (side === 2) { // Arriba
      x = random(this.x - this.rectWidth / 2, this.x + this.rectWidth / 2);
      y = this.y - this.rectHeight / 2;
      direction = createVector(0, -1);
    } else { // Abajo
      x = random(this.x - this.rectWidth / 2, this.x + this.rectWidth / 2);
      y = this.y + this.rectHeight / 2;
      direction = createVector(0, 1);
    }
​
    this.particles.push(new Particle(x, y, direction));
  }
}
​
// --- Clase Partícula ---
class Particle {
  constructor(x, y, direction) {
    this.pos = createVector(x, y);
    this.vel = direction.copy().mult(random(1, 10)); // Velocidad inicial aleatoria
    this.alpha = 255; // Opacidad inicial
    this.size = random(1, 5); // Tamaño inicial
  }
​
  update() {
    this.pos.add(this.vel);
    this.alpha -= 3; // Desvanecimiento
    this.size *= 0.95; // Disminuir tamaño gradualmente
    this.vel.mult(1.02); // Acelerar movimiento
  }
​
  display() {
    stroke(255, this.alpha);
    strokeWeight(this.size);
    point(this.pos.x, this.pos.y);
  }
}
​