Moon spirals

/******************

Code by Vamoss

Original code link:

https://www.openprocessing.org/sketch/738610

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

let canvas, ctx, size;

​

const total = 90;

const duration = 3000;

let spiralType = 0;

​

//custom out -> in ease

//http://fooplot.com/#W3sidHlwZSI6MCwiZXEiOiI0KigoeC0wLjUpXjMpKzAuNSIsImNvbG9yIjoiIzE1RkYwMCJ9LHsidHlwZSI6MTAwMCwid2luZG93IjpbIi0xLjA3NDQxMjkxMjYzOTk5OSIsIjEuMTA2NjI1MTY3MzU5OTk5NiIsIi0wLjEzMDI3NTA4MjIzOTk5OTczIiwiMS4yMTE5MDIxOTc3NTk5OTk1Il19XQ--

easeInOut = t => 4*pow(t-0.5,3)+0.5;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  size = min(width, height) / 10;

  canvas = createGraphics(size, size);

  canvas.noStroke();

  ctx = canvas.drawingContext;

}

​

function draw() {

  background(0);

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

    let progress = i / total;

    let loop = easeInOut((millis()/duration + progress)%1);

    canvas.clear();

    ctx.globalCompositeOperation="source-over";

    canvas.fill(255, 255, 0);

    canvas.rect(0, 0, size, size);

    canvas.fill(0);

    canvas.ellipse(loop*size*2-size/2, size/2, size-4, size-4);

    ctx.globalCompositeOperation="destination-atop";

    canvas.ellipse(size/2, size/2, size, size);

​

    let spiral, angle;

    if(spiralType==0) {

      //initial state

      spiral = sqrt(progress + 0.8/total);

      angle = TWO_PI * spiral * 6.6;

    }else{

      if(spiralType==1) spiral = progress;//linear

      else if(spiralType==2) spiral = sqrt(progress);//ease out

      else if(spiralType==3) spiral = pow(progress, 3);//ease in

      angle = TWO_PI * spiral * mouseX/width * 30;

    }

    let radius = size * spiral * 6.6;

    let x = cos(angle) * radius;

    let y = sin(angle) * radius;

    image(canvas, (width-size)/2 + x, (height-size)/2 + y);

  }

}

​

function mousePressed(){

  spiralType++; 

  if(spiralType>3) spiralType = 0;

}