Okay, here’s my blog post about making a constellation generator, written in the style you requested:
So, I got this kinda random idea the other day – I wanted to make my own constellations! I’m no artist, so drawing them was out. I figured, “Hey, I can code, I can make something that spits out random star patterns!”
First thing I did was just mess around. I needed a way to, you know, show the stars. I thought about using a simple HTML canvas because I wanted to do somthing in browser. I thought, okay, I can use javascript, and that’s it. That felt like the easiest way to get something on the screen without pulling in a ton of other stuff.
Getting the Basics Down
I started with a super basic HTML file. It just had a canvas element, and some width and height. Pretty standard, nothing fancy.
Then came the JavaScript. I needed a way to make random dots. The fillRect method on the canvas context was perfect for this. I whipped up a little loop, and inside that, I used to get random X and Y positions for each “star.”
Boom! I had a screen full of white dots on a black background. It looked…okay. A bit too random, though. Real constellations have, like, patterns, right?
Making it More “Constellation-y”
I spent a while just staring at my random dots, trying to figure out how to make them look less random,and more constellation-y. My first thought? Some stars are brighter than others. So, I played around with the size of the dots. Instead of all of them being 2×2 pixels, I made the size random too. Some tiny, some a bit bigger.
<script>
var canvas = *('myCanvas');
var ctx = *('2d');
* = "black";
*(0, 0, *, *);
for (let i = 0; i < 70; i++) {
var x = *() *;
var y = *() *;
var size = *() 3 + 1;
* = 'white';
*(x, y, size, size);
</script>
And I added more dots. the number of dots is also a key to make it real.
Next, I messed with the color. Instead of pure white, I gave them a slightly off-white, yellowish tint. This made them look a bit more…starlike, I guess.
<script>
var canvas = *('myCanvas');
var ctx = *('2d');
* = "black";
*(0, 0, *, *);
for (let i = 0; i < 70; i++) {
var x = *() *;
var y = *() *;
var size = *() 3 + 1;
* = 'rgb(255, 255, 240)';
*(x, y, size, size);
</script>
I wanted some structure. I decided to group some stars closer together.I achieved it, roughly, by making the random number generation not quite so random. I did some probability magic, it means it’s more likely to pick positions near existing stars.
Finally, I add a simple function to re-generate. Just a button, and when you click it, BAM, new random constellation.
<button id="generateBtn">Generate New Constellation</button>
<script>
var canvas = *('myCanvas');
var ctx = *('2d');
var generateBtn = *('generateBtn');
function generateConstellation() {
* = "black";
*(0, 0, *, *);
for (let i = 0; i < 70; i++) {
var x = *() *;
var y = *() *;
var size = *() 3 + 1;
* = 'rgb(255, 255, 220)';
*(x, y, size, size);
generateConstellation();
*('click', generateConstellation);
</script>
</body>
</html>
Wrapping Up
It’s still pretty basic, and I didn’t spend too much time for it. I bet I could spend days tweaking the randomness to make it look even better. Maybe add some lines connecting the stars, or even make them twinkle! But for a quick, fun little project, I’m pretty happy with how it turned out. It definitely scratched that itch to make my own star patterns.
