Concept
I often find myself wondering: beneath all the sleek design and high-definition media, what is the internet really made of? At its core, it’s nothing more than basic lines of text, numbers, and code.
This project is my exploration of that idea. By using basic alphanumeric characters (a-z, 0-9,@#%?&) as the fundamental “atoms” of my digital canvas, I let them generate randomly while using code to keep them organized and separated. It’s my way of turning raw, invisible data into a visual piece of art.
How this was made?
One problem I met at first is how to prevent the letters from overlap.instead of writing super long and confusing if statements to prevent letters from crashing into each other, I used a return;. If a new letter gets too close to an old one, the code just stops right away and tries again next time. It’s super simple and keeps the code clean.
for (let i = 0; i < charCount; i = i + 1) {
let c = chars[i];
let d = dist(x, y, c.x, c.y);
if (d < (size + c.size) * 0.45) {
return;
}
}
I didn’t just store the letter itself in the array. I packed its X/Y positions, size, letter type, and RGB colors together into one object. This makes it super easy later—my drawCharacter() function knows exactly how to paint it.
chars.push({
x: x,
y: y,
char: symbol,
size: size,
r: rgb[0],
g: rgb[1],
b: rgb[2]
})
When I was setting up the object properties, my instinct was to write something simple like “color:rgb” or directly grab an entry from color palette I thought, “Why can’t I just store the whole color array together and hand it to fill()?” But when I tried that, p5.js didn’t handle the color array the way I expected inside fill(). I was so confused until I realized I had to unpack the array and store the RGB values as three separate properties (r, g, b) inside each object so fill(c.r, c.g, c.b) could read them smoothly.
Reflection
To be completely honest, my code went wrong a million times before it finally worked. Going into this project, I knew using an array was a strict requirement, but I didn’t actually have a deep understanding of how arrays function under the hood.
I spent a huge amount of time just trying to wrap my head around one fundamental question: Why couldn’t I just pick a random letter and a position inside AddCharacter() and paint it right onto the screen? Why did I have to save everything into an array first, and then write a completely separate for loop inside draw() just to repaint it every single frame? Wrestling with this concept and breaking down p5.js’s frame-by-frame rendering loop was easily the biggest learning curve for me.
Looking back, there are definitely things I wish I could have added: I wanted to experiment with cooler typography effects, like adding soft ghosting or motion shadows behind the characters, but it felt a bit too complex for my current skill level, so I decided to keep the visuals simple for now.And I’d love to explore adding interactivity in future versions—such as letting users click anywhere on the canvas to spawn specific words, using mouse clicks to control the generation order, or adding a click-to-clear button to reset the canvas and start over.