Concept
For this assignment, I built a night-sky inspired sketch using attractors and movers. In class, we used the attractor/mover system to show motion and forces, and I kept thinking: if attractors “pull” and movers “orbit,” that feels a lot like stars/planets. So my concept became a stylized sky at night, with glowing star bodies and drifting trails.
To add a personal twist, I placed my initials (ABJ) in the center as a constellation-like pattern made from many tiny attractor/mover pairs. The initials stay readable, but still wobble and respond to the mouse so they feel “alive.” Also to be honest this assignment wasn’t the easiest for me and isn’t my favorite, but it’s the best I can do so far with attractors and movers and I learned a lot through iteration 🙂
Inspiration
My main inspiration is simply the sky at night: glowing points, soft halos, and a sense of motion even when things are calm. I didn’t copy a specific image but I had the starry night in mind by Van Gogh.
Sketch
How the code is organized
The code is organized sections so the behavior stays understandable even as the sketch becomes more complex. I use two main classes: Attractor and Moverwhere attractors apply a gravitational-style force and movers respond with velocity and acceleration. Several helper functions control additional forces: repelFromMouse() pushes movers away from the cursor to add interactivity, applyTurbulence() introduces Perlin-noise-based motion so the movement feels organic instead of mechanical, and springTo() pulls movers back toward a target position. Scene-building functions like addMainOrbitPairs(), addEdgeOrbitPairs(), and addInitialsABJ() handle different visual systems in the sketch, separating setup from animation logic.
Code highlight I’m proud of
The part I’m most proud of is how I built the ABJ initials using point generators + tiny attractor/mover pairs. Each point of each letter becomes a mini “star” that’s pulled into place, wiggles with turbulence, repels from the mouse, and springs back to stay readable:
// Build ABJ using many tiny attractor+mover pairs.
// Each letter point is a fixed attractor with a mover that wiggles around it.
function addInitialsABJ() {
let cx = 200, cy = 200;
let letterW = 32, letterH = 48, spacing = 38;
let oxA = cx - spacing - letterW / 2;
let oxB = cx - letterW / 2;
let oxJ = cx + spacing - letterW / 2;
let oy = cy - letterH / 2;
let aPts = letterAPoints(0, 0);
let bPts = letterBPoints(0, 0);
let jPts = letterJPoints(0, 0);
for (let [lx, ly] of aPts) {
let ax = oxA + lx;
let ay = oy + (letterH - ly); // A is flipped vertically
initialsPairs.push({
attractor: new Attractor(ax, ay, 40),
mover: new Mover(ax + random(-4, 4), ay + random(-4, 4), 1.2, 2, 0.05, 0.05),
});
}
for (let [lx, ly] of bPts) {
let ax = oxB + lx;
let ay = oy + ly;
initialsPairs.push({
attractor: new Attractor(ax, ay, 40),
mover: new Mover(ax + random(-4, 4), ay + random(-4, 4), 1.2, 2, 0.05, 0.05),
});
}
for (let [lx, ly] of jPts) {
let ax = oxJ + lx;
let ay = oy + ly;
initialsPairs.push({
attractor: new Attractor(ax, ay, 40),
mover: new Mover(ax + random(-4, 4), ay + random(-4, 4), 1.2, 2, 0.05, 0.05),
});
}
}
// In draw(): update ABJ using multiple forces so it moves but stays readable.
for (let p of initialsPairs) {
p.attractor.attract(p.mover); // pulls toward letter point
p.mover.applyTurbulence(t * 0.3); // gentle wiggle
repelFromMouse(p.mover, 0.6); // weaker mouse repulsion
springTo(p.mover, p.attractor.pos, 0.018); // snaps back to letter shape
p.mover.update();
}
Milestones + challenges
- My first idea was using an image background (like a starry-night painting) and layering moving stars on top of it. I got it working, but visually it felt more like “decorating an image” than building a system, so I scrapped that direction.
- I switched to a fully generated background with glows and stars, and started focusing on the attractor/mover motion as the main design elements
- Adding the ABJ initials was the biggest step: it made the sketch feel personal and gave me a focal point.
- Challenge: The hardest part was balancing turbulence. Too little and everything looked static; too much and the motion became chaotic and the initials stopped reading as letters. I had to iterate on turbulence strength and also add a spring force so the ABJ points could move while still returning to a clean letter structure.
Reflection + future improvements
If I continued this project, I would improve the “sky” depth by adding multiple layers of stars that move at different speeds (parallax). I’d also experiment with making the attractors slowly drift so the whole constellation system evolves over time. Also, in this assignment you get the nature of the sky, but it doesn’t feel natural, so that’s something that I need to keep in mind.