planes

let shapes = [];

let shapesNum = 100;

const palette = ["#E23544", "#A92084", "#EFA732", "#69963E", "#17A2B2"];

let sizeMax;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  angleMode(DEGREES);

  noStroke();

​

  sizeMax = max(width, height) * 0.5;

​

  for (let i = 0; i < shapesNum; i++) {

    shapes.push(new Shape());

  }

​

  background("#141414");

}

​

function draw() {

  // background("#E7ECF2");

​

  for (let i = 0; i < shapes.length; i++) {

    shapes[i].move();

    shapes[i].display();

  }

}

​

class Shape {

  constructor() {

    this.rMax = random(sizeMax * 0.1,sizeMax);

    this.r = 0;

    this.rt = random(360);

    this.rStep = random(0.5, 3);

    this.t = random(360);

    this.tStep = random(0.5, 1.0);

    this.tSign = random(1) >= 0.5 ? 1 : -1;

    this.x = 0;

    this.y = 0;

    this.z = 0;

    this.wMax = random(10, 150);

    this.w = 0;

    this.h = 10;

    this.rot = createVector(random(-360, 360), random(-360, 360), random(-360, 360));

    this.rotRange = this.r * 0.01 + 0.01;

    this.rotStep = createVector(random(-this.rotRange, this.rotRange), random(-this.rotRange, this.rotRange), random(-this.rotRange, this.rotRange));

    this.wt = random(360);

    this.wStep = random(1, 3);

    this.ct = random(360);

    this.cStep = random(0.5, 5.5);

    this.c = color(palette[0]);

    this.cA = color(random(palette));

    this.cB = color("#141414"); //color(random(palette));

    this.rotY = random(-360, 360);

    this.rotYStep = random(0.5, 1.5);

    this.rotYSign = random(1) >= 0.5 ? -1 : 1;

  }

​

  move() {

    this.r = this.rMax * sin(this.rt);

    this.x = this.r * cos(this.t);

    this.y = this.r * sin(this.t);

    this.w = this.wMax * sin(this.wt);

    this.c = lerpColor(this.cA, this.cB, sin(this.ct));

​

    this.rt += this.rStep;

    this.t += this.tSign * this.tStep;

​

    this.rot.add(this.rotStep);

    this.wt += this.wStep;

​

    this.ct += this.cStep;

​

    this.rotY += this.rotYSign * this.rotYStep;

  }

​

  display() {

    fill(this.c);

    push();

    rotateY(this.rotY);

    translate(this.x, this.y, this.z);

    rotateX(this.rot.x);

    rotateY(this.rot.y);

    rotateZ(this.rot.z);

    plane(this.w, this.h);

    pop();

  }

}