​

var shapes = [];

let numberOfShapes = 20;

​

class shape {

  constructor() {

    this.x1 = 0;

    this.y1 = 0;

    this.x2 = random(windowWidth/4, windowWidth);

    this.y2 = windowHeight/4;

    this.x3 = windowWidth/3;

    this.y3 = random(windowHeight/3, windowHeight);

    this.x4 = random(windowWidth, windowWidth/4);

    this.y4 = random(windowHeight, windowHeight/4);

    this.r = random(0, 255);

    this.g = random(0, 255);

    this.b = random(0, 255);

  }

​

  move() {

    translate(width, height);

    let rotationValue = map(noise(frameCount/10000), -1, 1, 0, 180);

    rotate(rotationValue);  

    let widthValue1 = map(sin(frameCount/500), -1, 1, 0, windowWidth);

    let heightValue1 = map(sin(frameCount/500), -1, 1, 0, windowHeight);

    let widthValue2 = map(sin(frameCount/500), -1, 1, mouseX, windowWidth);

    let heightValue2 = map(sin(frameCount/500), -1, 1, mouseY, windowHeight);

    this.x1 = widthValue1;

    this.y1 = heightValue1;

    this.x2 = widthValue2;

    this.y3 = heightValue2;

    this.x4 = windowWidth/2;

    this.y4 = windowHeight/2;

  }

​

  display() {    

    bezier(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3, this.x4, this.y4);

  }

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  for (var i = 0; i < numberOfShapes; i++){

    shapes[i] = new shape();

  }

}

​

function draw() {

  background(map(noise(step/4), 0, 1, 0, 255), map(noise(step/4), 0, 1, 0, 50), map(noise(step/4), 0, 1, 200, 255));

  noStroke();

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

    fill(shapes[i].r, shapes[i].g, shapes[i].b, map(sin(frameCount/500), -1, 1, 50, 200))

    shapes[i].move();

    shapes[i].display();

  }

​

  step += 0.05;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}