The code for the Particles part of my assignment

was adapted from:

Arora, S. (n.d.). Particles. P5js.org.

https://p5js.org/examples/simulate-particles.html

*/

​

let a = 0;

let b = 0;

let c = 0;

​

function preload() {

  font = loadFont("assets/font.ttf");

}

​

function setup() {

  createCanvas(720, 400);

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

    particles.push(new Particle());

    angleMode(DEGREES);

  }

}

​

function draw() {

  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);

​

  //Drawing the glow of minute (inner) and hour (outer) based on the current time

  //I don't draw the glow for second since it changes quite fast and makes the glow looks distracting

  drawGradientHour();

  drawGradientMinute();

​

  //Drawing the centre sun

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

  ellipse(0, 0, 30, 30);

  fill("rgba(255,255, 255, 0.4)");

  ellipse(0, 0, 50, 50);

  fill("rgba(255,255, 255, 0.2)");

  ellipse(0, 0, 70, 70);

​

  //Drawing 'second' planet

  //Since the default framrate is 60, the increment for rotation must be 6 so that the planet will rotate 1 round per sec

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

  push();

  rotate(a);

  a = a + 6;

  ellipse(50, 50, 15, 15);

  pop();

​

  ////Drawing 'minute' planet

  //60 times slower than 'secound' planet

  push();

  rotate(b);

  b = b + 6 / 60;

  ellipse(80, 80, 20, 20);

  pop();

​

  ////Drawing 'hour' planet

  //60 times slower than 'minute' planet

  rotate(c);

  c = c + 6 / 3600;

  ellipse(120, 120, 30, 30);

}

​

// 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, 7);

    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 drawGradientMinute() {

  push();

  colorMode(RGB);

  noStroke();

  ellipseMode(RADIUS);

  let h = 0;

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

    let m = minute();

    fill(map(m, 0, 24, 255, 0), 0, map(m, 0, 24, 0, 255), h - 5);

    ellipse(0, 0, r, r);

    h = (h + 1) % 360;

  }

  pop();

}

​

function drawGradientHour() {

  push();

  colorMode(RGB);

  noStroke();

  ellipseMode(RADIUS);

  let h = 0;

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

    let hr = hour();

    fill(0, map(hr, 0, 24, 255, 0), map(hr, 0, 24, 0, 255), h - 10);

    ellipse(0, 0, r, r);

    h = (h + 1) % 360;

  }

  pop();

}

​