Snowflake animated

var numberOfFrames = 60;

var currentFrame = 0;

var frameOffset = 0;

var frames = [];

var sw = 5;

var cursorImg;

var pauseAnim = false;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  stroke(255);

  strokeWeight(1);

  background(0, 0, 30);

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

    frames.push(createGraphics(windowWidth, windowHeight));

    frames[i].angleMode(DEGREES);

    frames[i].background(0, 0, 30);

    frames[i].stroke(10, 10, 55);

    frames[i].strokeWeight(sw);

    frames[i].blendMode(ADD);

    frames[i].translate(width / 2, height / 2);

  }

  cursorImg = createGraphics(windowWidth, windowHeight);

  cursorImg.stroke(255).fill(255);

}

​

function draw() {

  if (!pauseAnim) {

    currentFrame = (frameCount + frameOffset) % numberOfFrames;

  }

​

  if (keyIsDown(LEFT_ARROW)) {

    if (sw > 1) {

      sw--;

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

        frames[i].strokeWeight(sw);

      }

    }

  }

  if (keyIsDown(RIGHT_ARROW)) {

    sw++;

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

      frames[i].strokeWeight(sw);

    }

  }

​

  if (mouseIsPressed) { // draw mouse strokes to current animation frame

    // translate mouse coordinates:

    let px = pmouseX - width / 2;

    let py = pmouseY - height / 2;

    let x = mouseX - width / 2;

    let y = mouseY - height / 2;

​

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

      let fr = frames[currentFrame];

​

      c = 110 + random(146)

      //if(random(100)>98){fr.strokeWeight(random(6));}

​

      fr.stroke(c, c, 255);

      fr.line(px, py, x, y);

      fr.stroke(100, 100, c);

      fr.line(-px, py, -x, y);

      fr.rotate(60);

    }

  }

​

  // display current animation frame:

  image(frames[currentFrame], 0, 0);

​

  let x = mouseX - width / 2;

  let y = mouseY - height / 2;

  cursorImg.angleMode(DEGREES);

  cursorImg.clear();

  cursorImg.resetMatrix();

  cursorImg.translate(width / 2, height / 2);

​

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

    cursorImg.rotate(60);

    cursorImg.ellipse(x, y, sw, sw);

  }

  //drawCursor();

  image(cursorImg, 0, 0);

​

}

// ---------------------------------------------------

function keyPressed() {

  if (key === ' ') {

    pauseAnim = !pauseAnim;

    frameOffset = currentFrame;

  }

  if (key === 'c') {

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

      frames[i].clear();

      frames[i].background(0, 0, 30);

    }

  }

  // this will download the first 1/2 second (30 frames) of the animation!

  if (key === 's') {

    saveGif('mySketch', 0.5);

  }

}