I created an interactive galaxy simulation where users can draw stars onto the canvas by clicking the mouse. The stars are generated based on data provided in a CSV file, and the galaxy background moves and spirals as part of the effect.
One of the most challenging aspects of this project was working with dynamic data in the form of a CSV file and integrating it into the interactive star drawing. I wanted to make a galaxy where the background constantly moved while the user could add stars by clicking on the canvas. The CSV file had to be loaded, parsed, and used to generate star properties such as position, size, and color. Managing the data flow, especially ensuring that the properties were being applied correctly to each star object, was tricky.
The file contains predefined star data such as position (x, y), size, and color (r, g, b). In the preload() function, the CSV is loaded using loadTable(), which makes the data accessible within the program. After that, in the setup() function, I loop through each row of the CSV and extract these values to create star objects. These stars are then pushed into the stars array, which holds all the stars that will be drawn on the canvas.
for (let i = 0; i < starData.getRowCount(); i++) {
let x = starData.getNum(i, 'x');
let y = starData.getNum(i, 'y');
let size = starData.getNum(i, 'size');
let r = starData.getNum(i, 'r');
let g = starData.getNum(i, 'g');
let b = starData.getNum(i, 'b');
stars.push({
x: x,
y: y,
size: size,
color: color(r, g, b),
brightness: random(180, 255)
});
}
Right now, all the stars are drawn on the same layer, which can make the galaxy feel flat. I would like to improve this by adding a sense of depth—farther stars could be smaller and move slower than closer stars, and also add different layers of stars to simulate foreground and background elements. Also, I would like to improve the galaxy background, it could be enhanced by adding a texture or some glowing nebula-like shapes to give more life and movement.
