In my previous blog post I explained how I was changing my code to show 3d visuals, that is no longer the case. My idea for how I wanted everything to look was posing problems for how to conceptualize 3d rendering, it will be something I return to in the future.
Since I have returned to 2 dimensions I have made much more progress towards shaping my visuals towards my original idea. Below are 4 iterations of the visuals, demonstrating a bit of how procedural my decision making is.
I began with the basic structure, all the planets I wanted orbiting the sun, then I begin emphasizing the orbits to make the planets more clear.
After that I simply tried seeing what would happen if I filled in the arcs tracing the orbits rather than just the lines, which I do like the look of, but the planets closer to the sun get lost in the bright stack of the orbits. Finally I added the traced arcs back in and I am happy with the look,, for now.
Below I have a draft of the visuals along with the music, this specific recording is a result of experimenting with the timbres of each notes, trying different virtual instruments, both sampled and synthesized. I am broadly pleased with the effect the visuals have to emphasize the music, though I am not entirely happy with either yet. I specifically need to refine the math I am using to determine the speed of Mercury, the innermost planet, around the sun, it does not seem to be lining up the way I want but that should be a simple fix.
And finally, my code, there is currently a lot of extra material that is doing nothing, I would like to implement a small explosion or expansion effect whenever a body passes the vertical threshold and a note is triggered. I am also considering adding a starfield in the background, normally these fields of light illustrate fast travel through space but I think a spiral would be a very nice effect, I could have multiple layers of stars moving at different speeds and different sizes to illustrate distance, I think this would add some nice depth. I will of course also be working more on the sound of the music.
let objects = [];
let stars = [];
const bpm = 90;
// 90beats_minute / 60seconds_minute = 1.5beats_second
// 60frames_second / 1.5beats_second = 40 frames_beat
const framesPerBeat = 60 / (bpm / 60);
// fullscreen, !CHANGE FOR SPECIFIC EXPORT!
var w = window.innerWidth;
var h = window.innerHeight;
function setup() {
createCanvas(w, h);
frameRate(60);
angleMode(RADIANS);
const min_dist = min(width, height);
const dist_increment = (min_dist/15);
const max_dist = min_dist - ((dist_increment) / 2);
console.log(max_dist);
// "...,you must first create the universe."
// name size color distance orbit_speed
objects.push(new Body('Sol', 20, color(255), 0, 0));
// Create objects - Inner System
objects.push(new Body('Mercury', 5, color(145), 30, 1));
objects.push(new Body('Venus', 7, color(145), 42, 2.5));
objects.push(new Body('Eearth', 8, color(145), 55, 4));
objects.push(new Body('Mars', 6, color(145), 67, 7.75));
// Create Planets - Asteroid Belt
objects.push(new Body('4 Vesta', 2, color(145), 130, 15));
objects.push(new Body('Ceres', 3, color(145), 150, 19));
// Create Planets - Outer System
objects.push(new Body('Jupiter', 12, color(145), 210, 47));
objects.push(new Body('Saturn', 11, color(145), 230, 123));
objects.push(new Body('Uranus', 10, color(145), 270, 351));
objects.push(new Body('Neptune', 9, color(145), 310, 684));
// Create Planets - Kuiper Belt
objects.push(new Body('Pluto', 4, color(145), 390, 1032.75));
}
function draw() {
// background(135, 145, 155);
background(17,17,23);
push();
stroke(255, 50);
// line(width/2, 0, width/2, height/2);
pop();
objects.forEach(planet => { // Render objects
planet.display_orbit();
planet.display();
planet.orbit();
});
// noLoop();
}
// Sphere class to represent sol and the other objects
class Body {
constructor(name, size, col, distance = 0, orbitSpeed = 0) {
this.name = name;
this.size = size; // diameter
this.col = col; // color
this.distance = distance; // Orbit diameter
this.orbitSpeed = TWO_PI/(orbitSpeed * framesPerBeat); // degrees of rotation each frame
this.angle = TWO_PI - HALF_PI; // cumulative angle change
this.angle = random(TWO_PI); //TODO TESTING
// this.explosion = new Explosion();
}
orbit() {
if (this.distance > 0)
this.angle += this.orbitSpeed;
}
display_orbit() {
push();
translate(width/2, height/2); // center screen
// noFill();
fill(255, 15); //TODO TESTING
stroke(255, 75);
// noStroke(); //TODO TESTINGx
/* draw arc from 0 to position in orbit */
arc(0, 0, this.distance * 2, this.distance * 2, TWO_PI - HALF_PI, this.angle);
pop();
}
display() {
push();
translate(width/2, height/2); // center screen
rotate(this.angle); // apply orbit
translate(this.distance, 0, 0); // distance from sol
noStroke();
fill(this.col);
circle(0, 0, this.size);
pop();
}
}
class Star {
constructor(xpos, ypos, xvel, yvel, size, col) {
this.xpos = xpos;
this.ypos = ypos;
this.xvel = xvel;
this.yvel = yvel;
this.size = size;
this.col = col;
}
move() {
this.xpos = xpos + this.xvel;
this.ypos = ypos + this.yvel;
}
display() {
fill(this.col);
circle(this.xpos, this.ypos, this.size);
}
}
class Explosion{
constructor(maxSize, size, col, distance, xpos, ypos, angle, speed) {
this.maxSize = maxSize;
this.size = size;
this.col = col;
this.distance = distance;
this.xpos = xpos;
this.ypos = ypos;
this.angle = angle; // TWO_PI - HALF_PI
this.speed = speed;
}
display() {
circle(this.xpos, this.ypos, this.size);
}
expand() {
this.size += this.maxSize/this.speed;
}
}
/* name | Orbital Period n:Mercury | Diameter M | Distance M | Diameter Scale n:Mercury
Sun | 0 | 1 | 0 | 294.118
Mercury | 1 | 0.0034 | 42 | 1
Venus | 2.5 | 0.0086 | 75 | 2.529
Earth | 4 | 0.0091 | 110 | 2.676
Mars | 7.75 | 0.0048 | 165 | 1.412
4 Vesta | 15 | tiny | 247.8 | 0.108
Ceres | 19 | tiny | 290.85 | 0.471
Jupiter | 47 | 0.1 | 560 | 29.412
Saturn | 123 | 0.084 | 1000 | 24.706
Uranus | 351 | 0.034 | 2000 | 10
Neptune | 684 | 0.033 | 3000 | 9.1
Pluto | 1032.75 | | | 0.487
*/At the bottom of the code is a table I wrote with the data I am using and the data I hoped to use. Unfortunately the solar system is just too large to have it all in one screen, the sun ends up 1 pixel wide, Pluto isn’t even on the screen and none of the planets are visible being tens and hundreds of times smaller than the sun, making every planet, tens and hundreds of 1 pixel.