“We are all mosaics of the people we’ve met.”
This artwork started as an idea I couldn’t stop thinking about: what if all the people and experiences in our lives were shapes in a giant, messy mosaic, connected by invisible lines we carry with us? So I made it happen. Each shape, circles, squares, triangles, and some random oddballs, represents a person or a memory. The lines connecting them are the invisible threads of influence that never really go away, no matter where you move or who you become.
I wanted this mosaic to feel alive. It’s not static. The shapes can move around when you click on them, but the connections always stay. It’s a simple interactive twist, but I love how it visually represents the idea that we carry pieces of each other wherever we go. You can almost imagine it breathing, like a community of little tiles that are all related in some way.
How I Built It:
I used Object-Oriented Programming because I wanted each shape to feel like its own little character, with its own position, size, rotation, and even “friends,” aka connections to other shapes. All the shapes live in an array, which makes it super easy to loop through them to draw, animate, and update lines.
The movement was trickier than I thought. I used lerp() to make shapes glide smoothly toward new spots instead of jumping around like they were hyperactive. And here’s a cool tip I learned from The Coding Train: push() and pop() are lifesavers for isolating transformations like rotation and translation. Without them, every rotation or move would have messed up all the other shapes. Honestly, watching that video was a game-changer. I finally understood why isolating transformations is so important in generative art.
The hardest part was keeping the lines connected while shapes moved independently. At first, I tried drawing straight lines, but it looked rigid and didn’t feel like a living mosaic. I solved it by using curved lines with quadratic vertex and a little randomness to the midpoint, which made the connections feel fluid and unique. I also had to carefully loop through each shape’s connections array so that every connection stayed accurate even when shapes moved.I must have spent hours fiddling with arrays and connections, trying to get it to feel smooth but not rigid. I think it ended up working, and honestly, I kind of love the little quirks. The lines stretch and bend in ways that feel alive. The code snippet:
// Draw connecting lines
stroke(255, 100);
strokeWeight(2);
for (let i = 0; i < shapes.length; i++) {
for (let target of shapes[i].connections) {
// curved line for mosaic effect
let mx = (shapes[i].x + shapes[target].x) / 2 + random(-20, 20);
let my = (shapes[i].y + shapes[target].y) / 2 + random(-20, 20);
noFill();
beginShape();
vertex(shapes[i].x, shapes[i].y);
quadraticVertex(mx, my, shapes[target].x, shapes[target].y);
endShape();
}
}
The Interactivity:
You can click on any shape, and it will move to a new random location. The lines stretch and follow, showing that even if things move around in life, the connections remain. I considered adding drag-and-drop or color changes, but I kind of like it simple. Letting the shapes shift on their own feels like they have a mind of their own.
Reflection :
This project taught me a few things:
- Classes and arrays are magical once you get them to work together
- lerp() is a lifesaver for smooth motion
- push() and pop() are your best friends for rotations and translations (thanks, Coding Train)
- Generative art can be messy and chaotic, but sometimes that’s exactly the point
If I did this again, I’d probably add more personality to each shape, maybe tiny patterns or colors that reflect “who” each piece is. For now, I like how it’s simple, a little messy, and interactive, like a mini community on the screen.