//

// after making the illusions https://advent2012.alienbill.com/treemergent/ and

// https://advent2012.alienbill.com/frostyspin/ where a simple "gravity" effect

// (if the dot is to one side of a line, a positive constant is added to its velocity,

//  otherwise the negative version of the constant is added) creates an illusion of rotation

//

//  I suspected that that simple repeated addition/subtraction might be creating 

//  a sine like effect but wasn't sure how close the numbers lined up, but according to

//  this little app (where the red line is a proper sine wave, and the blue is using that 

//  cheesy "gravity" effect) the answer is... pretty close! I think the lack of exact match 

//  is mostly rounding error. (You can tweak the "gravity constant" with the mouse a bit)

​

​

function setup() {

  createCanvas(800, 400);

  noStroke();

}

​

const H = 100;

​

function draw() {

  background(220);

  stroke(0);

  line(0,200,800,200);

  noStroke();

  translate(0,200);

    fill(250,0,0,100);

​

  for(let x = 0; x < 800; x++){

      const a = map(x,0,400,-PI/2,PI*7/2);

      ellipse(x,sin(a) * H,5,5);    

  }

    fill(0,0,250,100);

  y = -H;

  const GRAV = map(mouseX,0,800,.09,0.07);

  text(GRAV,20,-150);

  ys = 0.1;

  for(let x = 0; x < 800; x++){

      const a = map(x,0,800,PI,PI*4);

      ellipse(x,y,5,5);

    ys += y < 0 ? GRAV : -GRAV;

    y += ys;

  } 

}