Author: Batool Al Tameemi

Project Overview

For this midterm I wanted to approach Islamic geometric ornament as a system rather than a style. Instead of drawing an 8-fold star, I reconstructed the {8,8,4} tiling that produces it. The star is not designed first. It emerges from a checkerboard of octagons and squares.

I was interested in exposing the structure behind something we often read as decorative. Girih patterns are precise, proportional, and rule-based. They are algorithmic long before computers existed. After reconstructing the grid mathematically, I introduced controlled oscillation. The geometry breathes. The valleys of the star expand and contract subtly, but the proportional relationships remain intact.

This project investigates:

• Ornament as system
• Pattern as consequence
• Tradition as computation
• Geometry as inheritance

The woven strapwork illusion is achieved through layered strokes only. There is no shading or depth simulation. The complexity comes from repetition and constraint.

Oscillation

The motion in the system is driven by a minimal oscillator that functions as a time engine. Rather than animating positions directly, I use a simple class that increments a time variable at a steady speed. This time value feeds into a sine function, which subtly modulates the inward valley radius of each tile.

Instead of having every tile move in perfect synchronization, I introduce phase offsets based on distance from the center. This causes the oscillation to ripple outward across the field. The pattern breathes, but it does not collapse. The proportional relationships remain intact. The system moves without losing structural stability.

The {8,8,4} Grid

The foundation of the project is the alternating tiling of octagons and squares, known as the {8,8,4} tiling. The grid is constructed as a checkerboard: when the sum of the tile indices is even, an octagon is placed; when it is odd, a square is placed.

The spacing of the grid is determined by the apothems of the octagon and square. These radii define the structural rhythm of the tiling and ensure that the shapes interlock precisely. Every star, intersection, and strapwork path derives from these underlying geometric relationships.

I included a toggle that reveals this hidden construction grid. Conceptually, this was important. I did not want the ornament to detach from its mathematical logic. The beauty of the pattern comes from its structure, and I wanted that structure to remain visible.

Strapwork Construction

Each tile generates strapwork by alternating between two radii: the midpoint radius and the inward valley radius.

The process is repetitive and rule-based. First, the path crosses the midpoint of a hidden polygon edge. Then it rotates halfway between edges and moves inward to form a valley. This sequence repeats around the polygon.

The 8-fold star is not explicitly drawn. It emerges from this alternating rhythm. The star is a consequence of structure, not a predefined graphic element.

The Weave Illusion

The woven ribbon effect is created through two drawing passes of the exact same geometry.

The first pass uses a thick black stroke to establish the structural band. The second pass uses a thinner white stroke on top of it. This layering creates the illusion of interlacing.

There is no masking, depth simulation, or z-index manipulation. The woven effect emerges purely from stroke layering. I wanted the illusion to remain structurally honest and consistent with the logic of the system.

Interface

The interface is intentionally minimal. It includes a morph slider, a thickness slider, a hidden grid toggle, and simple keyboard controls to pause or save the canvas.

The morph slider controls how deeply the valleys cut inward. At a value of 50, the star sits in a balanced classical configuration. Moving away from this midpoint exaggerates or compresses the geometry, revealing how sensitive the form is to proportional change.

The interface supports exploration, but it does not overpower the geometry. The system remains the focus.

Video Documentation

what I intended to print at the cat

Reflection

This project shifted how I understand Islamic ornament.The 8-fold star is not a symbol to be drawn. It is a structural outcome.Working through the math made me realize that the beauty of girih lies in constraint. The system is strict, but the visual outcomes feel expansive.

What works:
• Immediate feedback through sliders
• Conceptual clarity via grid toggle
• Subtle motion that remains architectural

What I would develop further:
• Introduce color logic tied to oscillation
• Allow zooming and panning
• Experiment with density variation
• Explore extrusion into 3D space

This project feels like the beginning of a larger investigation into computational ornament and inherited geometry.

References

Conceptual Influences
• Islamic girih tiling systems
• Archimedean {8,8,4} tiling
• Khatam geometric construction

Technical Resources
• p5.js documentation
• The Nature of Code-  Daniel Shiffman
• Trigonometric construction of regular polygons

AI Disclosure
AI tools were used to refine some code language when encountered functioning errors. All geometric logic and implementation were developed independently.

Concept

This project began with Abu Dhabi.

More specifically, it began with the building everyone calls the “Pineapple Building,” formally the Aldar Headquarters Building. Growing up in the UAE, I have always been surrounded by architecture that feels sculptural, patterned, and repetitive. What fascinates me about this building is not just its circular form, but its structural skin. It feels cellular. Layered. Alive.

Our class is about nature. At first, I struggled with how to connect Abu Dhabi’s hyper-urban identity to natural systems. Then I began thinking about cities as organisms.

Cities breathe.T hey pulse. They expand and contract.

That is where Simple Harmonic Motion came in.

Inspired by Memo Akten’s approach to translating natural systems into generative code, I wanted to build something that felt architectural but behaved like a living surface. Instead of simulating water, particles, or gravity, I decided to simulate a kinetic façade  an aperture system that opens and closes like breathing cells across a city skin.

The triangular repetition of the Pineapple Building translated into a 6-fold radial aperture. Each module behaves like a mechanical petal system. When tiled together, they form a shifting urban membrane.

The result is not a literal copy of Abu Dhabi architecture, but a computational abstraction of its rhythm.

Code Highlight

One piece of code I am particularly proud of is the phase variation across the grid. At first, all modules were opening and closing at the same time, which felt flat and mechanical in a static way.

Introducing a spatial phase shift changed everything:

Instead of synchronized movement, the surface now moves like a wave. It feels less like a digital animation and more like a living field.

I also implemented easing to make the motion linger at the open and closed states:

This small adjustment made the motion feel architectural rather than purely mathematical.

EMBEDED SKETCH

Milestones and Challenges

Milestone 1: Building a Stable Radial System

The first step was creating a single aperture module. I constructed six evenly spaced angles:

This established rotational symmetry. However, early attempts resulted in uneven overlaps and distorted petal geometry. The relationship between the inner hub radius, hinge radius, and outer tip radius required several rounds of trial and error.

Too much spread caused the petals to disconnect.
Too little spread made the motion invisible.

Balancing geometry and movement became the central challenge.

Milestone 2: Introducing Simple Harmonic Motion

To simulate breathing, I introduced a sine-based oscillation:

This normalized the motion between 0 and 1. However, pure sine motion felt abrupt at the extremes. It lacked the softness of organic motion. That led to introducing easing to create a smoother open-close rhythm.

This was my first real “nature” moment. I realized that nature is rarely linear. Even harmonic systems have softness.

Milestone 3: Scaling to an Urban Surface

Once the single module felt stable, I tiled it into a staggered grid:

The offset grid created density similar to a façade or cellular membrane.

The biggest challenge here was visual noise. When too many modules moved in sync, the surface felt static. When phase variation was too extreme, it became chaotic. Finding the right coefficients for the phase shift required repeated adjustment and testing.

This stage transformed the project from an object into an environment.

Reflection

I am in AW in what I can create in a week and teach myself….

What I learned from this project is that nature does not only exist in forests or oceans. It exists in systems. It exists in repetition. It exists in oscillation.

Abu Dhabi, often perceived as artificial or hyper-constructed, actually contains its own form of organic logic. Through coding, I translated that logic into a living digital surface.

This project allowed me to think about cities as breathing entities. Architecture as skin. Code as biology.

Future Improvements

Moving forward, I would like to:

• Introduce mouse interaction so the “city” responds to proximity.

• Incorporate particle systems inspired by Nature of Code Chapter 4.

• Experiment with light and shadow instead of line-only rendering.

• Translate the system into a physical fabrication prototype, possibly laser-cut layered acrylic panels.

I am especially interested in expanding this into a responsive façade simulation, where environmental data could drive the oscillation.

This sketch went through more versions than I expected. What I’m submitting now is not where I started at all. The process was mostly about learning when to stop adding, when to remove, and when to trust small decisions like color and speed instead of big visual tricks.

Rather than drawing literal objects, I wanted to treat the canvas like a sky that slowly paints itself. The goal was to get something that feels alive and emotional through motion alone, without relying on obvious symbols.

Concept

The sketch is made up of many moving walkers that act like brush strokes. Each one follows a smooth flow field, creating large swirling currents across the canvas. Small warm dots are scattered in the space. They are intentionally subtle and not meant to be read as stars directly. Instead, they influence the motion by creating gentle swirling forces around them.

Movement is more important than form here. The drawing builds up slowly over time as strokes overlap, fade, and accumulate. I wanted the sketch to feel closer to painting than animation.

Inspiration

The main inspiration was The Starry Night by Van Gogh, but specifically the energy of the sky, not the imagery. I was drawn to how the sky feels restless, emotional, and alive. I wanted to translate that feeling into motion and color, without copying shapes or composition directly.

I was also thinking about painterly mark-making and how repetition and gesture can build texture and depth.

Milestones and process

This project was very much a trial-and-error process, and each milestone came from something not working visually.

Milestone 1: Realizing movement alone wasn’t enough
The first versions technically worked but looked bad. The motion was chaotic and noisy, and everything competed for attention. Even though there was a lot happening, nothing felt intentional. This was when I realized that having a system is not the same as having a composition.

Milestone 2: Struggling hard with color
Color was the longest and most frustrating part. Early versions were way too neon and saturated. They felt more like a screensaver than a painting. I kept tweaking values and nothing clicked until I made a decision to restrict the palette almost entirely to deep blues. Warm tones were allowed only in very small amounts. That shift changed everything. Once the palette was limited, the sketch finally started to feel grounded and cohesive.

Milestone 3: Changing how forces work
At first, I used direct attraction, which caused clustering and visual clutter. Everything kept collapsing into points. Switching to a tangential force that makes walkers swirl around dots instead of moving toward them was a turning point. This single change transformed the sketch from messy to controlled and gave the motion a calm, circular rhythm.

Milestone 4: Removing visual elements
This was a big one. I tried adding glowing stars, silhouettes, and other focal points, but they kept overpowering the motion. Removing them made the piece stronger. Each time I deleted something, the sketch improved. This taught me that generative work benefits a lot from editing and restraint.

Milestone 5: Slowing everything down
The final milestone was reducing speed and force. Earlier versions moved too fast and felt anxious. Slowing the walkers and letting the trails accumulate over time made the sketch feel more meditative and painterly. This is when it stopped feeling like an experiment and started feeling like an artwork.

Code highlight

This section of the code was crucial to reaching the final behavior. Instead of pulling walkers inward, it pushes them sideways so they orbit and swirl:

That small change completely reshaped the motion and helped the sketch feel intentional rather than chaotic.

Coded embedded 

Reflection and future work

This project taught me how important restraint is in generative art. The sketch became stronger every time I simplified it. Color, speed, and force mattered far more than adding new visual elements.

In the future, I want to explore:

• Using fewer walkers to increase negative space

• Creating print-focused versions with stronger contrast

• Letting the flow field change slowly over time to create different emotional phases

So far honestly I am so so proud of myself for creating this and I loved it

Reading Chapter 2 of The Nature of Code weirdly calmed me down. I think I usually approach motion by trying to make things feel dramatic or responsive, like faster equals better. This chapter made me slow down and realize that motion is not about speed at all. It is about pressure. Direction. Influence.

What really clicked for me is the idea that forces act on acceleration, not velocity. That sounds obvious when you read it, but in practice I was constantly breaking that rule. Every time I moved the mouse, I was basically telling the system to panic. Once I stopped doing that and forced the speed to stay constant, the sketch suddenly felt more confident. The rain did not need to prove anything. It just kept falling.

I also liked how the book is not obsessed with realism. It cares more about whether something feels believable. That gave me permission to simplify. My rain is not physically accurate, but it behaves consistently. Gravity always pulls down. Wind always pushes sideways. When the cursor leaves, the wind eases out instead of snapping back. That easing honestly made the biggest difference emotionally. It feels patient, not reactive.

Another thing that stuck with me is how small forces matter when they accumulate. I kept my wind values tiny because I was scared of it getting messy. But because they are applied every frame, they slowly shape the motion. That made me trust the system more instead of over-designing the interaction. I did not need big gestures. I needed persistence.

this chapter made me realize that personality in motion comes from constraints. By limiting speed and letting forces only steer, the rain feels stubborn in a quiet way. It does not rush when you touch it. It responds, but on its own terms. I think that is the first time I felt like I was designing behavior instead of just animation.

For future work, I want to play more with multiple forces at once without losing control. I am also interested in how constraints can be used intentionally to create mood, not just structure. This reading made me think less about showing off interaction and more about letting motion breathe.

reference video

For my movement-in-nature example, I focused on rain falling in wind. I like rain because it looks simple, but it is actually full of micro rules. It accelerates because of gravity, it gets pushed sideways by wind, and it never falls in a perfectly clean line. It feels alive even when nothing “exciting” happens.

My goal was to give the rain a personality through behavior only: steady, determined drops that do not freak out. Even when you move your cursor hard left or right, the rain will lean but it will not speed up. It is stubborn in a calm way.

Rules I used

1. Each raindrop has a velocity and an acceleration.

2. Acceleration acts like steering, not like speed boosting.

3. After applying acceleration, I force the velocity back to a constant magnitude so every drop keeps the same speed.

4. Cursor movement creates wind direction, but the wind eases in and out so it feels natural, not like a switch.

5. Mouse click adds more drops, it does not change the physics.

Code highlight I am proud of

This is the moment where the whole concept becomes real. I let acceleration steer the motion, then I “lock” the speed so nothing can accidentally accelerate out of control:

This is basically my “thesis”. The rain can have mood and direction changes, but it stays consistent. It feels grounded.

Embeded sketch

Reflection + future improvements

I love how it turned out honestly

What worked:

• The constant speed constraint makes the sketch feel controlled and intentional. Even when the wind changes, it stays believable and not chaotic.

• The eased wind makes interaction feel like a real force building up, not a sudden game mechanic.

• The click-to-add drops changes the “weather intensity” without breaking the physics.

What I would improve next:

• Depth: Add a second layer of drops that are thinner and slightly slower, so it feels like near/far rain.

• Gust behavior: Instead of mapping wind directly to mouseX every frame, make occasional gusts that ramp up and decay, then let the cursor influence gust direction.

• Splashes: When drops hit the bottom, spawn tiny splash particles for a few frames.

• Performance polish: Use an object pool for drops so we reuse drops instead of constantly adding new ones when clicking.

Concept

For this assignment, I made a random walker to explore motion in a very basic but visual way. The walker moves around the canvas using randomness, but not in a totally chaotic way. Most of its steps are small, with occasional larger jumps, because the step size comes from a Gaussian distribution.

Half of the time, the walker is influenced by the mouse position, and the other half of the time it moves randomly. I liked this balance because it feels like a mix of control and letting go. On top of that, the walker also moves through color. As it travels, its color changes based on how much it moves, so motion is shown not just by position, but also through hue.

Code Highlight

This line is one of my favorite parts of the sketch:

What I like about it is how simple it is, but how much it does. The color changes depending on how far the walker moves. Small movements create small color shifts, and bigger movements create more noticeable changes. It helped me understand how motion can be translated into something visual without making the code complicated.

Embedded Sketch

Reflection and Future Ideas

This project helped me better understand how randomness works in code, especially the difference between regular random values and Gaussian randomness. The movement felt much more natural and less jittery when I used randomGaussian(). I also realized how much small visual choices, like opacity, line weight, and color mode, affect how the sketch feels overall.

If I continue working on this, I would like to experiment with multiple walkers instead of just one, and see how they interact visually. I’m also interested in adding noise to make the movement smoother over time, or applying the same motion logic to something other than color, like scale or sound.