AnimationDraft

let x,y;

var running = true;

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB);

  smooth();

  noStroke();

  y = height/2;

  x = 0;

}

​

function mousePressed() { //click the mouse to pause the frame and click again to continue the animation

  running = !running

}

​

function draw() {

  if (running){

    var color = 0;

    background(0);

    fill(frameCount%360, 100, 100);

    x ++;

    translate(x, y);

    for (let j=0; j<5; j++){

      rotate(frameCount);

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

        fill(color, 100, 100);

        heart(0,0, 100);

        scale(0.9);

        color += 10;

        rotate(frameCount/50);

      }

  }

    if (x < 0) {

      x = width;

    }

  }

  }

​

function heart(x, y, size) {

  beginShape();

  vertex(x, y);

  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);

  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);

  endShape(CLOSE);

  translate(0, size/2);

}

​