Blurry, orbital spheres in p5js

Blurry, orbital spheres in p5js

This is a tiny p5js sketch to make a bunch of spheres orbit a single, large sphere. It is user controlled so please click anywhere in the canvas to send a planet on its way!

And here is the code:

    
let place = [];
let x = 0;
  let y = 0;
  let s = 50;
let t = 0;

function setup() {
  createCanvas(400, 400);
  

// add the Sun
  
  place.push ({
    x:x,
    y:y,
    s:100,
    col:'yellow'
  });
  

  
}

function draw() {
  background(0,50);
  
  
  
  noStroke();
  translate(width/2, height/2);
  rotate(t);
  for (let p of place){
    fill(p.col);
    circle(p.x, p.y, p.s);
  }
  t+=0.02;
  
  filter(BLUR, 2);
}


  
function mousePressed() {

  // move mouse into centre-based space
  let mx = mouseX - width / 2;
  let my = mouseY - height / 2;

  // undo the current rotation
  let cosT = cos(-t);
  let sinT = sin(-t);

  let rx = mx * cosT - my * sinT;
  let ry = mx * sinT + my * cosT;

  place.push({
    x: rx,
    y: ry,
    s: random(s),
    col: color(
      random(255),
      random(255),
      random(255),
      random(50, 100)
    )
  });
}

  //clear the canvas by pressing c

function keyPressed() {
  if (key === 'c') {
    place = [];
	  place.push ({
    x:x,
    y:y,
    s:100,
    col:'yellow'
  });
    background(0);
  }
}