// from Piter Pasma's explanation about Signed Distance Functions

let R = (a = 1) => Math.random() * a;

let L = (x, y) => (x * x + y * y) ** 0.5; // pythagorean distance formula

let xoff = 0;

let yoff =0;

let angle = 0;

​

function setup() {

  createCanvas(800, 800);

  background(255);

  noStroke();

  angleMode(DEGREES)

}

​

function sdf(x, y) {

  let bal = L(x + xoff, y + yoff) - 0.35; //*abs(xoff)

  //print(bal)

  return bal;

}

​

function draw() {

  // using sine and cos to get vals to move the circle

  xoff = sin(angle) * 0.6; 

  yoff = cos(angle) * 0.6;

  let c = color(random(125), random(255), random(225));

  // draw 1000 random ellipses

  for (let k = 0; k < 1000; k++) {

    let x = R(2) - 1; // to give us range from -1 to 1

    let y = R(2) - 1;

    // check the distance function

    d = sdf(x, y);

    // color based on if the distance is in or out of shape

    if ((d < -0.01)) fill(c);

    if (d > 0.01) fill(0);

    ellipse(((x + 1) * width) / 2, ((y + 1) * height) / 2, 8); //this prints the random dots

  }

  angle += 1; // angle for movement

}

​

function keyPressed() {

  // this will download the first 25 seconds of the animation!

  if (key === 's') {

    saveGif('sdfdeg.gif',6);

  }

}

​

​