Author: Batool Al Tameemi

Project Overview

This project started from something very familiar to me. Bukhoor is not just something you look at, it is something you interact with. You light it, you wait, and then you blow on it. When you blow, it responds. The smoke becomes thicker, the coal reacts, and it feels alive. I wanted to recreate that exact behavior digitally.

So instead of drawing smoke, I built an interactive oud burner that reacts to the user’s breath through the microphone. When the user blows into it, the smoke becomes denser and more active. When there is silence, it calms down and almost disappears.The goal was not to simulate smoke perfectly, but to translate the experience of bukhoor into a responsive system.

Implementation Details

This project combines a few key ideas from class to build a system that behaves naturally. I focused on using the concepts where they actually mattered.

Key Concepts Applied

• Random + Noise
  Used Perlin noise to create variation in: smoke turbulence, wind, background

This keeps the system from feeling mechanical.

• Vectors + Forces

Each particle moves using forces: upward force (smoke rising), horizontal wind, noise-based turbulence

This is what makes the smoke behave instead of just animate.

• Oscillation
  Subtle sine movement adds: soft sway in smoke, slight pulsing in the system

It keeps everything alive even when idle.

• Particle Systems

Smoke is built from particles: particles grow and fade, particles continuously spawn and disappear

The smoke exists as a system, not a fixed drawing.

• Autonomous Agents + Flocking
  Each particle reacts to nearby particles: avoids crowding, aligns slightly, stays grouped

This creates a continuous smoke flow instead of random dots.

• Fractals
  Used in the background: recursive shapes, slow animation, adds depth without taking focus

Core Interaction (Bukhoor Logic)

Sound is treated as breath.

• silence → almost no smoke
• small sound → light smoke
• blowing → dense smoke

Video interaction

Embedded sketch

Milestones / Process

Step 1: Background and Fractals 

I started with the background because I wanted the sketch to feel atmospheric before the bukhoor even reacts. I used a recursive fractal system to create repeated star-like shapes that slowly rotate and shift over time. and I also drew an oud

Step 2: Forces

I built a Movement + Noise system where particles respond to forces like gravity (upward movement) and wind. This made the motion feel physical.

Step 3: Particle System

I replaced static drawing with particles that spawn, grow, and disappear. This is when the smoke started feeling alive.

Step 4: Flocking

I introduced flocking so particles move together instead of randomly. This created a cohesive smoke form.

Step 5: Sliders

After the smoke system was working, I added sliders so the user could control the behavior more directly.

The main sliders are:

• Sensitivity: controls how strongly the microphone input affects the smoke
• Wind Direction: pushes the smoke left or right
• Smoke Speed / Morph: changes how fast the smoke rises, sways, and disappears

The morph slider was important because it makes the smoke feel less fixed. The user can slow it down for a softer bukhoor effect, or speed it up so the smoke becomes more energetic and animated.

Step 6: Refinement + User Feedback

Based on feedback, I made the smoke more animation-like instead of realistic:

• clearer shapes
• more exaggerated motion
• stronger response to input

This made the interaction more obvious and satisfying. and I added the Mic interaction and the illustrated Bukhoor

Reflection

I am so soooooooo proud of how this project turned out, This project shifted how I think about making visuals.

At first, I focused on how smoke looks. But the project only started working when I focused on how it behaves.

The biggest improvement came from simplifying the smoke and making the interaction clearer. When someone naturally tries to blow into it without instructions, that is when the project succeeds.

The strongest part of the work is that it translates a real-world habit into a digital interaction in a way that feels intuitive.

Future Improvements

• move beyond circular particles into more dynamic smoke shapes
• add hand interaction instead of only sound
• make the coal react more physically
• connect the background to sound
• push the visual language further

References

Technical

• p5.js
• Web Audio API
• Flocking systems

Conceptual

• Bukhoor as an interactive and sensory experience

AI disclosure 

AI was used to help refine the structure of the code and debug specific technical parts, especially around audio input and signal processing.

I used AI to better understand and implement the RMS (Root Mean Square) calculation used to detect microphone intensity:

analyzer.getByteTimeDomainData(dataArr);

let sum = 0;
for (let i = 0; i < dataArr.length; i++) {
  let v = (dataArr[i] - 128) / 128;
  sum += v * v;
}

return sqrt(sum / dataArr.length);

This part was important for making the system respond smoothly to sound instead of being too sensitive or unstable.

All creative decisions, including the concept of translating bukhoor into an interactive system, the visual direction, and how the interaction behaves (blowing = more smoke), were developed and implemented by me.

This project ended up being inspired by bukhoor, but not in a literal way. I was more interested in how it feels than how it looks. Bukhoor is something small and everyday, but it carries a lot, like memory, comfort, and presence, mostly through the smoke. The smoke became the main thing for me because it is always moving and never fixed.

While building my p5.js sketch , I started focusing less on making a realistic object and more on building a system. The piece is made of different parts that work together, the embers, the smoke, and the environment. The smoke especially became central because it reacts, grows, fades, and shifts over time. It is not something you can fully control, which felt important to keep.

After user testing, I realized the project was stuck between being realistic and abstract in a way that did not feel intentional. That made me rethink my direction. I considered pushing it to be fully stylized and less real, but instead I worked on balancing it better. I kept the expressive and generative aspects, but made parts of the bukhoor, especially the madhkhanah, feel more grounded.

I also started working more on the background. I added very subtle Islamic geometric patterns using a fractal system. They are not meant to stand out, but to sit behind everything and give context. It was important for me that they do not overpower the smoke or the interaction.

In the end, the project is not about showing bukhoor as an object. It is more about building an atmosphere that you experience over time. It sits somewhere between something you recognize and something that is constantly changing.

“عود (Oud): A Responsive Atmosphere”

This project started from something very small and familiar to me: the moment when oud smoke rises. It is never still. It folds into itself, disappears, comes back, reacts to the smallest movement in the air. I kept thinking about how that feels less like an object and more like a system that is alive.

For me, decoding nature is not about representing trees or landscapes. It is about understanding behavior. How things move, how they react, how they carry presence without being solid.

So I built a system where smoke becomes the main language.

Concept

This work simulates a bukhoor burner where smoke, embers, and air exist as a responsive environment. The smoke is not pre-animated. It is generated through particles that move using forces like turbulence, attraction, and separation, similar to how natural systems behave.

The system is also reactive. When activated, it listens. Sound changes the environment. The smoke becomes heavier, faster, more chaotic. When there is no sound, it returns to a quieter, almost breathing state.

It feels like the space is aware of you.

Process

I worked with p5.js to build this from the ground up as a living system rather than an animation.

• I used particle systems to construct the smoke and embers
• I implemented flocking behaviors so particles move collectively instead of randomly
• I used noise to introduce instability and natural variation
• I connected the system to microphone input so it can respond in real time

What I found interesting is that the more I tried to control it, the less natural it felt. So the process became about letting the system behave on its own terms.

Visual Direction

Visually, the work sits between two conditions.

There is structure. The background uses a very subtle geometric pattern inspired by Islamic repetition and symmetry. It feels ordered, quiet, almost fixed.

Then there is the smoke. It interrupts that order. It drifts, breaks, spreads, disappears.

I wanted that tension between control and unpredictability to exist in the same space.

The color palette stays very minimal. Dark, warm tones with a soft glow from the coal. Nothing too loud. It should feel atmospheric, not illustrative.

Why Oud

Oud is important here because it is already a system. It is not just smell or smoke. It is memory, ritual, presence. It fills space without being seen clearly.

I am not trying to recreate it realistically. I am translating what it does into code.

Outcome

The final piece is an interactive sketch where:

• Smoke continuously generates and evolves
• The system responds to sound and presence
• The environment shifts between calm and intensity

It becomes something you do not just look at, but exist with for a moment.

Sadu UAE weaving was my starting point for this project. I was drawn to its geometry, repetition, and rhythm, especially the way pattern is built through structure rather than decoration alone. What moves me about Sadu is that it carries both discipline and feeling. It is precise, but it never feels empty. It holds labor, memory, and cultural identity inside repeated forms. UNESCO describes Al Sadu as a textile practice defined by geometric designs, rhythmic repetition, symmetry, and vivid colors, which is part of why it felt like such a strong visual and conceptual reference point for me.

I did not want to directly imitate Sadu weaving. That was never the goal. I wanted to think through some of its visual logic using code. I kept returning to the fact that Sadu is built gradually, line by line, through accumulation. A motif does not appear all at once. It emerges through repetition, structure, and patience. That felt very close to the way generative systems work.

Because of that, I built this sketch using a one dimensional cellular automata system. I was interested in the way a very simple set of rules could generate something that feels visually rich and unexpectedly intricate. The system grows row by row across the screen, which made me think of a digital loom. It felt less like drawing an image and more like constructing a surface. Rule 90 became especially important to the project because it is one of the elementary cellular automata rules that produces a triangular recursive structure from a single active cell.

Visually, I stayed close to a Sadu inspired palette. I used a deep red background with white and black accents, and I added horizontal color banding to make the sketch feel closer to a woven field than a plain mathematical diagram. I wanted the result to feel like a digital textile, something that sits between computation and ornament. I was trying to make code feel tactile.

Concept and inspiration

My concept was to create a Sadu inspired generative pattern system that unfolds across the screen like a woven surface. I was interested in the relationship between weaving and cellular automata because both depend on local decisions that accumulate into a larger pattern. In both cases, complexity comes from repetition. That connection helped me stop thinking of code as only technical and start thinking of it as a material for pattern making.

One artist I kept thinking about was Andy Lomas. His work uses computational growth systems to generate intricate forms that feel both artificial and organic. What inspired me about his practice was not that it looks like my sketch, but that it takes rule based generation seriously as an artistic language. His Cellular Forms project explores how complex structures can emerge from simple growth processes, and that gave me confidence to treat a systems based sketch as something visually expressive rather than only analytical.

I was also inspired by the broader history of cellular automata as visual systems. What interested me most was emergence. A cellular automaton begins with almost nothing, then grows into a structure that feels much larger than its initial conditions. That idea resonated with me because Sadu also works through repetition and disciplined variation. In both, the beauty is not separate from the structure. The beauty comes from it.

Embedded sketch

Code I am particularly proud of

The part of this project I am most proud of is the moment where the sketch stopped feeling like a technical demo and started feeling like it had visual intention. That happened when I introduced the palette system, the horizontal banding, and the interactive controls.

I like that the user can change the rule value, switch palettes, and restart the system, because it turns the sketch into something exploratory rather than fixed. I also like the way the row drawing works with the color bands, since that was my attempt to move the image closer to cloth and away from a plain black and white automata study.

I am also proud of the logic that converts a rule number into an eight value rule set. It is simple, but it made the whole sketch more flexible. Instead of hard coding one outcome, I built a structure where different visual identities can emerge through interaction. That felt like the right balance between control and surprise.

Milestones and challenges

Milestone 1: starting with almost nothing

At the beginning, the sketch was nearly empty. I only had the canvas, the background color, and the basic grid setup. This stage felt a little sad, honestly, because I had the concept in my head but visually there was almost nothing there yet. It looked flat and unfinished. Still, it mattered because it gave me the space, the scale, and the overall visual ground to build on.

Milestone 2: the first active cell

The next step was placing a single active cell in the middle. It was such a small move, but it changed the feeling of the project. Suddenly the sketch had a point of departure. There was a beginning. Even though it was still minimal, I could sense the logic getting ready to unfold.

Milestone 3: getting the automata to generate row by row

This was the real turning point. Once I implemented the rule based row generation, the triangular structure began to appear. This was the moment the project started to feel visually alive. It stopped being only an idea and became a pattern with its own force. Seeing that recursive geometry emerge from one starting point was probably the most exciting part of the process.

Milestone 4: shifting it toward Sadu

After I got the system working, I realized the sketch still felt too mathematical. It needed more of a visual language. That is when I began working on the palette and horizontal banding. The deep red, white, and black pulled it much closer to the mood I wanted, and the stripes helped the sketch feel more textile based. This stage mattered a lot because it was where the project became mine.

Milestone 5: adding interactivity

The next milestone was making the system interactive. I added a rule slider, a number input, a palette selector, and a random restart button. This allowed the piece to become something the viewer could explore rather than just observe. I liked that it made the work feel less static. It also helped me understand the system better because changing parameters in real time made the logic more visible.

Challenges in the process

One challenge was that the early stages were visually underwhelming. It is hard to stay excited when the concept feels rich but the screen still looks empty. I had to trust the process and keep building through that awkward stage.

Another challenge was balancing cultural reference with abstraction. I did not want to make something that simply copied Sadu motifs. That would have felt too literal. At the same time, I wanted the reference to remain visible. Finding that middle ground was difficult. I had to keep asking myself how much was enough for the sketch to carry the feeling of Sadu without turning into imitation.

I also struggled with making the interaction feel useful rather than decorative. Since the visual field is already dense, too many controls could have distracted from the piece. I wanted the viewer to be able to explore, but I did not want the interface to overpower the pattern.

Reflection

What I value most about this project is that it helped me think about code differently. I usually think visually first, and sometimes coding can feel distant from the kinds of cultural and material references I care about. This project made those things meet. It showed me that code can also be a way of thinking through pattern, rhythm, repetition, and inheritance.

I also like that the sketch begins with a strict rule and then slowly becomes more personal through color, pacing, and reference. That mattered to me. I did not want to make something that only demonstrated technical skill. I wanted to make something that felt visually and emotionally connected to my interests.

More than anything, this project made me think about how digital systems can hold memory. Not literally, and not in a nostalgic way, but through structure. Through the way a pattern grows. Through the way repetition carries meaning.

Future improvements

If I continue this project, I would like to experiment with different starting seeds instead of only one active cell in the middle. Multiple seed points or hand designed seed arrangements could create more varied and complex woven fields.

I would also like to explore different cell shapes. Right now the sketch uses square cells, but I think there is a lot of potential in trying triangles, diamonds, or line based structures that could feel even closer to textile construction.

Another direction would be slowing down the animation and making it more immersive. Right now the system builds clearly, but I can imagine turning the growth into something more atmospheric, almost like watching a woven surface assemble itself in real time.

I would also like to develop the Sadu reference further without becoming too literal. Maybe that could happen through more refined palettes, more nuanced banding systems, or even by introducing user drawn motifs as initial seeds.

At the moment, this piece feels like a beginning. It opened something for me. It made me realize that generative art can still feel intimate, and that code can carry cultural weight when it is treated carefully.

ConceptThis project explores swarm behavior as something emotional rather than purely biological. I was interested in how a group can move together without ever fully becoming one thing. Instead of treating the bees as literal insects, I approached them more like particles of attention or energy that are constantly negotiating space, attraction, and distance.

The interaction is centered around the mouse, which acts almost like a shifting force field. The bees are drawn toward it, but never fully settle. They resist each other through separation forces, creating a constant tension between clustering and dispersing. I wanted the movement to feel alive, slightly unpredictable, and never static.

Visually, the hexagonal grid references a honeycomb structure, but it is not rigid or dominant. It behaves more like a responsive environment. When collisions happen, the grid lights up and ripples expand outward, turning invisible physics interactions into visible traces. This transforms collisions from purely mechanical events into something more atmospheric and expressive.

Inspiration came loosely from flocking systems, especially murmuration patterns, as well as particle simulations that feel soft and organic rather than rigid. I was also thinking about systems where small interactions leave temporary marks in space.

Code Highlight (What I’m Proud Of)

One part of the code I’m particularly proud of is the behavior system where multiple forces are layered together to create the swarm effect:

// SEEK MOUSE
let seek = p5.Vector.sub(mouseVec, pos);
seek.normalize();

Body.applyForce(b, b.position, {
  x: seek.x * strength,
  y: seek.y * strength
});

// SEPARATION
if (d < 25) {
  let escape = p5.Vector.sub(pos, otherPos);
  escape.normalize();
  escape.mult(0.0002);
  Body.applyForce(b, b.position, { x: escape.x, y: escape.y });
}

What I like about this is that the motion is not coming from one rule, but from multiple competing forces. The bees are simultaneously being pulled, pushed, and slightly randomized through noise. That layering makes the system feel less artificial and more like something emergent.

Embedded Sketch

Milestones and Challenges

Milestone 1: The Hexagonal Environment

Setting up the basic p5.js canvas and draw the background pattern. I didn’t add physics yet, just using math to tile a grid of hexagons.

Milestone 2: Introducing Physics & Spawning Bees

Bringing in Matter.js. I created the physics engine, turn off gravity so things float, and spawn our “bees” (physical circles) into the world.

Milestone 3: Following the Cursor

Applying physical forces to make the bees seek the mouse. I also added a speed limiter so they don’t accelerate infinitely and fly off the screen.

Milestone 4: Organic Swarm Movement (Separation & Wiggle)

I added a “Separation” force that pushes the bees away from each other if they get too close, and Perlin noise to make them wiggle like real insects.

Milestone 5: Detecting Collisions & Drawing Ripples

I Introduced the Events.on() listener. Whenever the Matter.js engine detects two bees colliding, it spawns a new Ripple object at that exact coordinate, which expands and fades away.

Milestone 6: The Final Polish (Hexagon Glow)

During collisions, I now check the distance between the collision point and our grid of hexagons. If a hexagon is close, its glow value is set to 1. In drawHexGrid, this glow translates to opacity, fading out slowly over time using h.glow *= 0.96.

Reflection and Future Improvements

Looking back, the project successfully explores how forces can be layered to produce emergent behavior. The combination of attraction, separation, and noise creates a system that feels alive and responsive rather than scripted.

The collision system works well visually, but it is currently limited to collisionStart. If I were to develop this further, I would explore additional collision events like collisionActive and collisionEnd to create more sustained or evolving effects, such as continuous glowing or gradual decay tied to contact duration.

I am also interested in pushing the visual language further. Right now, the bees are quite minimal. There is potential to experiment with scale, transparency, or trails to make the swarm feel even more atmospheric.

Another direction would be to shift the interaction away from the mouse and explore autonomous behaviors, where the system evolves on its own or responds to less direct inputs.

I feel like this project helped me think of physics not just as simulation, but as a design tool for shaping movement, interaction, and visual rhythm.

Concept + References

I didn’t want to make a “flocking simulation” in the traditional sense. I wanted something that feels alive but also unstable. Something that holds itself together, then loses control, then collapses.

The system is structured as a looped lifecycle with four distinct phases: organism, boil, shockwave, spores

Each phase shifts not just motion, but also energy, density, and emotional tone. It’s less about birds flocking and more about a body going through pressure, rupture, and release.

I was really inspired by Ryoichi Kurokawa’s work, especially how he uses temporal disruption instead of just spatial complexity. His visuals feel like they’re glitching in time, not just moving fast.

I was also thinking about Robert Hodgin’s particle systems, especially how they feel dense and intentional rather than random. His work made me care more about composition, not just behavior.

So instead of just coding movement, I focused on how particles occupy space, how density creates visual tension, how color and blending create a kind of “liquid light”

Highlight of Code I’m Proud Of

I think the strongest part of my system is how the phases are structured and how each one completely redefines the physics:

function getPhase(t) {
  if (t < 13000) return 'organism';     
  if (t < 21000) return 'boil';         
  if (t < 24000) return 'shockwave';    
  return 'spores';                      
}

This simple structure lets the whole system evolve over time instead of staying static.

But what I’m most proud of is the shockwave phase. Instead of just pushing particles outward, I introduced a temporal glitch:

if (frameCount % 4 === 0) {
  this.vel.mult(0.1); 
} else {
  let blastAngle = random(TWO_PI);
  let blast = p5.Vector.fromAngle(blastAngle).mult(5);
  this.acc.add(blast);
}

This creates a stuttering effect where particles freeze and explode intermittently, which feels much more chaotic and alive than a smooth explosion. It’s not just movement, it’s disruption.

Embedded Sketch

Milestones 

Milestone 1: The Basic Flocking Organism

Before I could build a complex timeline, I needed a base system. I started by creating 1,000 particles and using Perlin noise to guide their movement. I added a gentle pull toward the center of the screen so they wouldn’t just scatter. I also drew a low-opacity background every frame to create soft motion trails.

Milestone 2: Introducing the Time Machine

Once I had my organism floating nicely, I wanted the environment to change over time. I created a 30-second loop using millis() and wrote a getPhase() function to track time. I then updated my particle’s physics engine to react completely differently depending on whether it was in the organism, boil, shockwave, or spores phase.

Milestone 3: The Final Visuals and Additive Blending

The physics were working perfectly, but it felt a little stiff visually. For my final step, I mapped specific colors to the timeline so the sketch would transition from cool cyan to boiling orange, into blinding white sparks, and fade out into grey dust.

To give it that volumetric, glowing liquid feel, I implemented blendMode(ADD) in the draw loop, and I instructed larger particles to draw a secondary, highly transparent circle behind them.

Reflection

I think what worked best in this piece is the sense of tension and release.

The “organism” phase feels calm but slightly eerie, like something is forming. Then the “boil” phase starts introducing discomfort and instability. The “shockwave” is the breaking point. And the “spores” phase feels like exhaustion, like everything just gives up and drifts.

I also paid a lot of attention to:

• blending modes (ADD made everything feel volumetric and glowing)
• motion blur through background fading
• particle size variation to create depth

I didn’t want it to look like dots moving. I wanted it to feel like matter.

Future Improvements

If I were to push this further, I would:

• Make transitions between phases more gradual instead of abrupt
• Introduce sound and sync the phases to audio (especially inspired by Kurokawa)
• Add interaction, maybe letting the mouse disturb the system
• Experiment with depth or layering to make it feel even more spatial
• Refine color transitions so they feel less mapped and more emergent

Also, I think there’s potential to push the narrative more. Right now it suggests a lifecycle, but it could become something more specific or symbolic.

Final Thoughts

This project made me realize that generative systems don’t need to just simulate nature. They can simulate states, emotions, or conditions.

It’s not about particles.
It’s about what they feel like together.

Concept + References / Inspiration

This sketch visualizes thoughts as a living system, behaving somewhere between a school of fish and coral formations. I was especially drawn to corals as a reference, not just visually but structurally. Corals are collective, slow, reactive organisms that grow through accumulation and interaction rather than control. That felt very aligned with how thoughts operate.

Instead of treating thoughts as isolated units, I approached them as a soft ecosystem. They cluster, avoid, drift, and react to an external stimulus, which in this case is the mouse acting as a “focus point” or “idea.” When the interaction is calm, thoughts gather and stabilize. When it becomes too fast or erratic, they scatter, almost like a disturbance in water.

There’s also influence from generative systems like flocking and steering behaviors, but I wanted to move away from purely mechanical logic and make it feel more emotional. The system shifts between states: wandering, focusing, and panicking. That transition is what makes it feel alive to me.

Code Highlight (something I’m proud of)

One part I’m particularly proud of is the behavior system tied to mouse speed, especially how it shifts between different “mental states”:

I like this because it’s simple but expressive. It turns a technical input (mouse velocity) into something that feels psychological. The system isn’t just moving, it’s reacting, almost like attention and overwhelm are being simulated.

Embedded Sketch

Milestones 

✦ milestone 1  baseline dots

it started as just points on a screen, nothing intelligent, nothing reactive. just scattered presence. like the baseline state of a mind before anything kicks in, just existing, quiet but full.

✦ milestone 2  random motion

then they started moving, but without direction. drifting, floating, no purpose. it felt like background thoughts, the kind that just pass through you when you’re not paying attention to anything specific.

✦ milestone 3  steering toward focus

this is where intention entered. everything began to move toward the mouse, like trying to focus on something. it’s not perfect, it overshoots, it adjusts, but there’s a clear pull. like when you’re trying to gather your thoughts into one place.

✦ milestone 4  separation

once everything started gathering, it became too much, everything overlapping, collapsing into one point. so separation was introduced. thoughts began to keep distance from each other, like needing space to think clearly. it stopped being chaos and started feeling structured.

✦ milestone 5  trails (memory)

then memory appeared. each thought started leaving a trace behind it. nothing fully disappears anymore. even when it moves on, something lingers. this is where the system stopped feeling like motion and started feeling like time.

✦ milestone 6  color and mood

movement started affecting visuals. faster thoughts became brighter, more intense. slower ones stayed softer. the system began expressing mood, not just behavior. it became less about where things are and more about how they feel.

Reflection + Future Work

This project made me think a lot about how behavior systems can move beyond being purely functional and start becoming expressive. Small parameter changes completely shift the emotional tone of the piece, which I found really interesting.

If I were to develop this further, I would push it in a few directions. I want to explore more coral-like growth over time, where thoughts don’t just move but also accumulate or leave behind structure. Right now, everything is transient, but memory could become spatial.

I’m also interested in introducing clusters or hierarchies, where some thoughts carry more weight or influence others, instead of everything behaving equally. That could create moments of tension or dominance within the system.

Visually, I would refine the trails to feel even more organic, maybe closer to underwater motion or bioluminescence. Sound could also be interesting, where movement generates subtle audio feedback tied to speed or density.

This feels like a starting point for thinking about systems as emotional landscapes, not just simulations.

Picture of Inspiration

I chose a connecting corridor inside a teamLab installation. It is a transitional space, not a main artwork, which is exactly why it stood out to me. When you walk through it or touch the walls, the light disappears around you. It does not explode or react loudly. It just empties.

Why I Chose This Visual

What stayed with me was not the visuals themselves, but the behavior.

Most interactive works reward you. They give more when you touch them. More color, more movement, more feedback. This one does the opposite. It takes away. The space clears around your presence, almost like it is making room for you, or avoiding you.

That felt different. It felt quieter and slightly uncomfortable. You are not adding to the system, you are interrupting it.

I wanted to work with that idea. Not interaction as spectacle, but interaction as subtraction.

Code Production

I tried to recreate this logic using a particle system. The particles move continuously using noise, forming a kind of ambient field. When the user interacts, instead of attracting particles or creating brightness, the system creates a “void” that pushes particles away.

The goal was not to replicate the exact visual of teamLab, but to capture the feeling of space being cleared in response to presence.

One important part of the process was fixing how the system transitions between states. At first, the scene would abruptly reset when interaction stopped, which broke the illusion. It felt mechanical. I adjusted this by removing hard resets and introducing gradual transitions, so the system responds more like a continuous environment rather than a switch.

I also slightly increased the background fade during interaction so the space actually feels like it is dimming, not just rearranging.

My Twist

The original corridor is very minimal and almost silent in behavior.

My version exaggerates the system slightly. Instead of a clean empty space, the particles resist the user and leave behind traces of motion. The void is not perfectly clean. It is unstable and constantly reforming.

I also introduced layered particles with different sizes and brightness levels. This creates a glow effect that lingers, so the absence is never total. There is always a memory of what was there.

So instead of pure emptiness, my version becomes something closer to a shifting field that reacts, clears, and then slowly rebuilds itself.

Code I’m Proud Of

What I am most satisfied with is how I handled the transition between interaction and stillness.

Originally, I used a direct background reset:

This caused the scene to snap instantly, which felt harsh and disconnected from the rest of the motion.

I replaced it with a gradual fade:

fill(0, 0, 0, fade);
rect(0, 0, width, height);

This small change made a big difference. The system now dims and recovers smoothly, which aligns better with the idea of a responsive environment rather than a binary state.

Embedded Sketch

Please view it in p5 itself, here its looking funny

Milestones and Challenges

The first step was simply getting something to move on the screen. I started by creating a “Particle” class. At this stage, I wasn’t worried about colors or glows; I just wanted to see if I could make 5,000 objects move without crashing the browser.I used a simple Particle object with a position and a velocity.

Now that the system was working, it needed to react to me. This milestone was about the “Control” half of my theme. I created a “void” around the mouse. I wrote a mathematical check: If the distance between a particle and my mouse is small, push the particle away.

The final version was about the transition. In the beginning, the lights snapped back instantly when I moved the mouse, which felt mechanical. I wanted it to feel like the system was “exhaling.” The Logic: I introduced lerp() (Linear Interpolation) to every state change.

Reflection

This project made me think more about interaction as something subtle. Not everything needs to respond loudly. There is something more interesting in systems that shift quietly or even withdraw.

I also realized that small technical decisions, like how a background is drawn, can completely change how the work feels. The difference between a reset and a fade is not just visual, it changes how the system is perceived.

Future Work

If I continue this, I want to push the idea of absence further.

One direction is to make the void linger longer, so the space remembers where the user was. Another is to introduce multiple interaction points, allowing different “voids” to overlap and interfere with each other.

I am also interested in connecting this to sound or vibration, so the clearing of space is not only visual but also sensory.

Right now, the system reacts. In the future, I want it to feel like it anticipates or resists.

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.