Accumulative Shading

/* written by DeerfeederMusic

 * https://www.reddit.com/r/proceduralgeneration/comments/u8t2xu/accumulative_shading_in_processing/

 * converted to P5JS by JohnTellsAll

 */

​

let a1, a2, c1, c2;

let frame;

​

function setup() {

  createCanvas(1100, 1100);

  a1 = createVector(width / 4, height / 2);

  a2 = createVector(width - width / 4, height / 2);

  c1 = createVector(width / 4, 0);

  c2 = createVector(width - width / 4, 0);

  frame = createGraphics(width, height);

  frame.smooth(16);

  background(200);

  noFill();

  frameRate(120);

}

​

function draw() {

  translate(width / 2, height / 2);

  rotate(frameCount * 0.004);

  if (frameCount % 1200 === 0) {

    background(200);

  }

​

  a1.x = 600 * sin(frameCount * 0.001);

  a1.y = 600 * cos(frameCount * 0.0012);

  a2.x = 400 * cos(frameCount * 0.0022);

  a2.y = 400 * sin(frameCount * 0.0012);

  c2.x = 200 * sin(frameCount * 0.0032);

  c2.y = 200 * cos(frameCount * 0.0042);

  c1.x = 300 * sin(frameCount * 0.0011);

  c1.y = 300 * cos(frameCount * 0.0012);

​

  stroke(0, 0, 0, 10);

  noFill();

  bezier(a1.x, a1.y, c1.x, c1.y, c2.x, c2.y, a2.x, a2.y);

  renderDots();

}

​

function renderDots() {

  let r = 50 + 242 * sin(frameCount * 0.01) * sin(frameCount * 0.011);

  fill(5, 45);

  stroke(255, 20);

  ellipse(a1.x, a1.y, r, r);

  fill(155, 0, 0, 45);

  stroke(255, 20);

  ellipse(a2.x, a2.y, r, r);

  fill(255, 175);

  ellipse(a2.x, a2.y, r / 2, r / 2);

  ellipse(a1.x, a1.y, r / 2, r / 2);

}