let startFrame = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(0);

  radius = 150 * circleSize;

  // Grow and shrink the circle based on keyboard input

  if (keyIsDown(UP_ARROW)) {

    circleSize += 0.01;

  } else if (keyIsDown(DOWN_ARROW) && circleSize > 0) {

    circleSize -= 0.01;

  }

​

  // Only draw the circle, if the mouse is pressed

  if (mouseIsPressed) {

​

    innerCircleAngle = frameCount/2000 + 1000.4 // just a nice starting angle, but animated over time

    // Let the starting animation play, then transition the outer circle to have a greater width quicker, then go to a slow rate of change 

    outerCircleAngle = frameCount - startFrame < 250

      ? (frameCount - startFrame)/2000

      : frameCount - startFrame < 550

        ? lerp((frameCount - startFrame)/2000, (frameCount - startFrame)/4000 + 0.75, (frameCount - startFrame - 250)/300)

        : (frameCount - startFrame)/4000 + 0.75

    num = min(round((frameCount - startFrame)/2), 50) // Initial entry animation: The number of lines gradually increase till 50.

​

    translate(mouseX, mouseY) // Draw the circle at the mouse, to follow it.

    scale(min((frameCount - startFrame)/25, circleSize)) // Initial entry animation: The circle scales up to the final size.

​

​

    // Draw inner circle

    rotate(radians(frameCount/2))

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

      innerCircleX1 = cos(innerCircleAngle * (i-1)) * radius

      innerCircleY1 = sin(innerCircleAngle * (i-1)) * radius

      innerCircleX2 = cos(innerCircleAngle * i) * radius

      innerCircleY2 = sin(innerCircleAngle * i) * radius

​

      // Draw cool glow effect

      drawingContext.shadowBlur = 32;

      drawingContext.shadowColor = "rgb(255, 0, 64)";

​

      // Draw the 1st layer of lines

      strokeWeight(5)

      stroke(255, 0, 64)

      line(innerCircleX1, innerCircleY1, innerCircleX2, innerCircleY2)

​

      // Disable the glow effect (besides, it's a performance killer!)

      drawingContext.shadowBlur = 0;

​

      // Draw the 2nd layer of lines

      strokeWeight(4)

      stroke(255, 0, 255)

      line(innerCircleX1, innerCircleY1, innerCircleX2, innerCircleY2)

​

      // Draw the 3rd layer of lines

      strokeWeight(2)

      stroke(255)

      line(innerCircleX1, innerCircleY1, innerCircleX2, innerCircleY2)

    }

    // Draw outer circle

    rotate(-8*radians(frameCount/2)) // Make it spin the other way, and much faster

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

      outerCircleX1 = cos(outerCircleAngle * (i-1)) * radius * 1.5

      outerCircleY1 = sin(outerCircleAngle * (i-1)) * radius * 1.5

      outerCircleX2 = cos(outerCircleAngle * i) * radius * 1.5

      outerCircleY2 = sin(outerCircleAngle * i) * radius * 1.5

​

      // Draw cool glow effect

      drawingContext.shadowBlur = 32;

      drawingContext.shadowColor = "rgb(255, 0, 192)";

​

      // Draw the 1st layer of lines

      strokeWeight(5)

      stroke(255, 0, 192)

      line(outerCircleX1, outerCircleY1, outerCircleX2, outerCircleY2)

​

      // Disable the glow effect (besides, it's a performance killer!)

      drawingContext.shadowBlur = 0;

​

      // Draw the 2nd layer of lines

      strokeWeight(4)

      stroke(255, 0, 255)

      line(outerCircleX1, outerCircleY1, outerCircleX2, outerCircleY2)

​

      // Draw the 3rd layer of lines

      strokeWeight(2)

      stroke(255)

      line(outerCircleX1, outerCircleY1, outerCircleX2, outerCircleY2)

    }

  }

}

​

// Store the frame the user clicked the mouse, for the entry animation

function mousePressed(event) {

  startFrame = frameCount;

}

​

// Resize the canvas (no need to preserve the aspect ratio this time)

function windowResized() {

  resizeCanvas(windowWidth, windowHeight)

}