Concept

I wanted to build something that felt alive but also structured, and the lunar cycle is a great mix of both. The project simulates the eight phases of the moon, from New Moon to Waning Crescent, with randomized textures (spots) and stars to make each redraw unique. The idea is that every click reveals a new “night sky,” giving the viewer a sense of time passing without relying on animation loops.

How It Works

• Moon.js defines a Moon class. Each moon has a position, size, and current phase index. The phase controls how much of the circle is lit and how much is in shadow.

• The surface spots are stored in an array of objects, each with its own position, size, and shade of gray. This randomness makes the moon look organic rather than like a flat white circle.

• I also made sure spots only show up in the “visible” lit portion of the moon, so the shadows aren’t just cosmetic.

• Sketch.js handles the overall scene: the canvas, the star field (also an array of little objects), and the interaction. Every mouse click moves the moon forward by one phase, regenerates its surface spots, and refreshes the stars.

What I’m Proud Of

The hardest and most satisfying part was getting crescents and gibbous phases to look right. p5.js doesn’t have a neat intersection() or shape-clipping tool for arcs, so I had to improvise using combinations of ellipses, arcs. It was like solving a puzzle with the wrong pieces, but in the end it worked.

Another “aha” moment came with the order of drawing. For example, if I drew the stars last, they’d sit awkwardly on top of the moon. If I drew spots before clipping, they’d spill into the shadows. It’s such a small detail, but the sequence of draw calls makes or breaks the illusion.

Aesthetic Choices

• The moon is a soft gray (230) while shadows are much darker, to keep things simple but still distinguishable.

• Stars are randomized each time you click, which makes the scene feel less static.

• The phase name and “day” number are displayed in monospace above the moon to mimic an old-school astronomy chart.

Problems Along the Way

• Figuring out crescents and gibbous shapes took the most trial-and-error. I tried a bunch of naive arc overlaps before landing on my ellipse-mask workaround.

• Getting the spots to fit entirely inside the circle (without spilling over the edge) was trickier than expected; I had to add a distance check plus a little buffer zone.

Casey Reas’ Eyeo 2012 talk, Chance Operations, made me think differently about randomness in art. He shows how even data from something as steadfast as a natural component can generate patterns that are surprising and meaningful when processed through a system with rules. It made me realize that randomness isn’t just chaos, rather it can actually be a tool if some limits are set on this. That idea challenged how I usually approach making things; I used to tend to want complete control, but maybe leaving room for the unexpected could make my work more interesting and dynamic.

For my own work for this weeks production, I’ve tried experimenting with randomness in things like layout, placement, or small visual details so the final piece isn’t predictable. For me, the balance between control and chance is having a framework that guides the work but still allows it to surprise me. I don’t want total randomness, because then it wouldn’t feel like my work at all, but I also don’t want it completely fixed, because then it might feel rigid or boring. I believe we can not overstate the attempt of finding the sweet spot between dictation and improvisation that allows the bounds of structure, and at the same time, manages to surprise with the output.

Concept:

I wanted to make something playful and unpredictable using what we have learned so far: loops, conditionals, and simple shapes. The idea was to fill the canvas with a grid, but instead of every cell looking the same, each square of the grid gets randomly assigned a circle, a square, or a diagonal line. This way, the overall structure feels ordered (in code, not compilation), but the details are different every time you run (or click) the sketch.

Code snippet to highlight:

The piece of code I’m most proud of is the tiny decision that controls the orientation of the lines. Despite it being only an If condition, it has quite an effect on how the final image looks. Without it, all the lines would lean the same way, and the grid would look stiff. With it, each line can either go \ or /, which suddenly makes the whole composition feel more dynamic and unpredictable.

stroke(random(50, 200), random(50, 200), random(50, 200), 220);
strokeWeight(random(1, 4));
let orientation = int(random(2)) // decides orientation of the line
if (orientation == 0) {
  line(i, j, i + space, j + space);
} else {
  line(i + space, j, i, j + space);

 

Reflection and Prospects:

What I like most about this sketch is how structured chaos plays out. The grid keeps everything orderly, but within each cell, there’s randomness that gives the piece character, resulting in the chaotic image we get./
If I were to push it further, I’d try:
– Rotating the rectangles randomly, not just keeping them straight.
– Introducing a shifting color palette that changes slowly over time.
– Adding a gentle animation so the grid breathes instead of sitting still.
For now, though, I think it’s a fun little experiment in how tiny tweaks (like flipping a line) can completely change the energy of a generative artwork.

CONCEPT:
For this assignment, I built a self-portrait entirely out of shapes in p5.js. I wasn’t trying to make something realistic, instead, I went for a cartoon version of myself: a round face, messy hair, glasses, and a simple smile. The idea was to see how much “me” I could get across with just ellipses, arcs, and lines. The output is far from realistic; come on, I am not trying to replace my passport photo with this. The portrait is simple, but I like how it balances between looking generic and still recognizably like me.

HIGHLIGHTED CODE:
The glasses ended up being my favorite part. Without them, the face felt empty, but adding two circles and a line suddenly made it feel right:
  noFill();
  stroke(0);
  strokeWeight(3);
  ellipse(167, 170, 60, 60);
  ellipse(233, 170, 60, 60);
  line(200, 170, 200, 170); // bridge

REFLECTION AND FUTURE WORK:
This was my first attempt at drawing myself, and that too using code; and it showed me how powerful even basic shapes can be. It doesn’t need shading or complex details to read as a face, and luckily identify a person if the components are placed right.

However, if I had more time, I’d like to:
– Make the eyes blink or move with the cursor (saw many do that, i can’t just yet)
– Give the background more personality
– Fix the hair so it looks less like a helmet and more like actual messy hair (pretty doable with multiple ellipses but i reckon there are more efficient ways)
Even with its simplicity, I like how it turned out, it’s definitely not a mirror image, but it’s “me” enough.