xxxxxxxxxx
145
/*
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();
}