let b = 0;

let c = 0;

let h = 0;

​

function preload () {font = loadFont('assets/font.ttf');}

​

// this class describes the properties of a single particle.

class Particle {

// setting the co-ordinates, radius and the

// speed of a particle in both the co-ordinates axes.

  constructor(){

    this.x = random(0,width);

    this.y = random(0,height);

    this.r = random(1,8);

    this.xSpeed = random(-0.1,0.1);

    this.ySpeed = random(-0.1,0.1);

  }

​

// creation of a particle.

  createParticle() {

    noStroke();

    fill('rgba(255,250, 250, 0.5)');

    circle(this.x,this.y,this.r);

  }

​

// setting the particle in motion.

  moveParticle() {

    if(this.x < 0 || this.x > width)

      this.xSpeed*=-1;

    if(this.y < 0 || this.y > height)

      this.ySpeed*=-1;

    this.x+=this.xSpeed;

    this.y+=this.ySpeed;

  }

​

// this function creates the connections(lines)

// between particles which are less than a certain distance apart

  joinParticles(particles) {

    particles.forEach(element =>{

      let dis = dist(this.x,this.y,element.x,element.y);

      if(dis<85) {

        stroke('rgba(255,255,255,0.04)');

        line(this.x,this.y,element.x,element.y);

      }

    });

  }

}

​

// an array to add multiple particles

let particles = [];

​

function setup() {

  createCanvas(720, 400);

  for(let i = 0;i<width/10;i++){

    particles.push(new Particle());

    angleMode(DEGREES)

  }

}

​

function draw() {

  //frameRate();

  background('#0f0f0f');

  textFont(font);

  for(let i = 0;i<particles.length;i++) {

    particles[i].createParticle();

    particles[i].moveParticle();

    particles[i].joinParticles(particles.slice(i));

  }

  textAlign(CENTER);

  text("galaxy clock", width/2, height/6);

 translate(width / 2, height / 2);

  fill('rgba(255,255, 255, 0.9)');  

  push();

  rotate(a);

  //let s = second();

  //a = 0 + map(s,0,60,0,360);

  a = a + 6;

  ellipse(50, 50, 15, 15);

  pop();

  push();

  rotate(b);

  b = b + 6/60;

  ellipse(80, 80, 20, 20);

  pop();

  rotate(c);

  c = c + 6/3600;

  ellipse(120, 120, 30, 30);

  drawGradient();

}

​

​

function drawGradient() {

  push();

  colorMode(HSB, 360, 100, 100);

  noStroke();

  ellipseMode(RADIUS);

  let h = 0;

  for (let r = 60; r > 0; --r) {

    let s = hour();

    fill(0, map(s, 0, 24, 0, 100), h);

    ellipse(0, 0, r, r);

    h = (h + 1) % 360;

  fill(90);

  ellipse(0, 0, 30, 30);

  fill(130);

  ellipse(0, 0, 20, 20);

  fill(200);

  ellipse(0, 0, 5, 5);

}

 pop();

}