and rotation. Based on a similar sketch by 'thedotisblack'.

    (He did that with Processing)

*/

let x = 200;

let y = 200;

let angle = 90;

let dia = 15;

​

function setup() {

  createCanvas(600, 600);

  frameRate(120);

  colorMode(HSB, 360, 100, 100);

}

​

function draw() {

  background(0);

  translate(width / 2, height / 2);

  rotate(radians(angle / 3));

  for(let a = 0; a < 360; a += 10) {

    push();

    if(angle < 360) rotate(radians(a) * sin(radians(angle)));

    else rotate(radians(a));

    stroke(a, 100, 100);

    strokeWeight(3);

    line(x * sin(radians(angle)), 0, 0, y - dia / 2);

    noStroke();

    fill(255);

    ellipse(x * sin(radians(angle)), 0, dia / 2, dia / 2);

    stroke(255);

    noFill();

    ellipse(0, y, dia, dia);

    pop();

  }

  angle++;

}

function mousePressed() {

  saveGif('ring.gif', 10);

}

​