Week 3 – Fish

For this project, I created a small aquarium scene, where colorful fish swim across the screen. Each fish is an object with its own properties like color, speed, and direction, and they move infinitely using simple math. I used arrays to manage multiple fish at once, and clicking on a fish makes it disappear, while pressing “C” brings all the fish back.

I decided to do this because I wanted to practice the class material but keep it interesting at the same time. Initially, I just had fish swimming in one direction with different speeds but I thought it was too boring so i added different directions and made them more interactive.

One problem I ran into was making fish face the correct direction when swimming left or right, but adding a simple check for xspeed solved it. Overall, this project helped me practice object-oriented programming and arrays while making a fun, interactive visual.

The part of the code that I’m proud of is this part:

move() {
    if (!this.visible) return; // skip if hidden

    this.x += this.xspeed;
    this.y += this.yspeed;

    let bodyHalf = 30;
    if (this.x > width + bodyHalf) this.x = -bodyHalf;
    if (this.x < -bodyHalf) this.x = width + bodyHalf;
    if (this.y > height + bodyHalf) this.y = -bodyHalf;
    if (this.y < -bodyHalf) this.y = height + bodyHalf;
  }

Here, it makes the fish disappear when clicked. It took me some time to figure out where I’d need to press and how not to let the “invisible” fish get in the way.

Something that I would like to improve in the future would be adding more aesthetics to it and making the fish more sophisticated-looking so to say.

But after all, here’s what I got, try to catch them all 😛

Reading Response – Week 3

Reading Chris Crawford’s The Art of Interactive Design reshaped the way I think about interactivity. Crawford defines interactivity not as a simple feature or function but as a conversation, a cyclical process of listening, thinking, and speaking. What really drew me into this reading the most was his insistence that many things we casually call “interactive” are not interactive at all, because they lack a genuine back-and-forth exchange. Clicking a button or watching an animation play is not enough if the system does not “listen” and respond with meaningful output that takes the user’s input into account. This shifted my perspective away from thinking of interactivity as a checklist item and toward understanding it as a measure of quality and how deeply the system engages with its user.

One passage that stood out to me was Crawford’s description of the conversation between Gomer and Freedgund, where both must listen, think, and respond to create a true dialogue. It made me question: How do we measure good listening in a digital system? Algorithms process data, but does that count as “thinking” or “understanding”? This question feels even more relevant today, with AI systems claiming to “converse” with users. Crawford’s argument suggests that the test of interactivity lies in whether the user feels heard and whether the system’s response prompts further exploration or reflection.

Reflecting on my own work with p5.js sketches, I realize I have often stopped at surface-level interactivity: a mouse click might trigger a color change, or the position of the mouse might move a shape. But these interactions rarely invite deeper engagement. A strongly interactive system, in my view, should encourage curiosity, creating an open-ended dialogue where the user feels like a co-creator. Moving forward, I want to implement more engaging interactivity for example, using the speed of the mouse movement to alter the size or complexity of generative patterns, or incorporating audio could be an interesting way of engagement. Adding unpredictability by using randomness is also a key factor that could make the experience feel more alive. Ultimately, I want my sketches to feel less like static art pieces and more like evolving systems that “listen” to the user and respond in a way that makes them want to keep interacting.

Assignment 2 – Loops

Concept:

For this assignment, I wanted to make a design that moves and looks alive, as compared to my static design for the first assignment. I used nested loops to draw a grid of circles, and each circle changes size and color using a wave. I had to learn how to use the wave and the map functions so I could control how the circles grow and change colors, which was a little tricky at first, but really fun to figure out. The loops made it so much easier to draw many circles without writing a lot of code.

Code Highlight:

I’m really proud of how I made the circles pulse and change color using the wave and map functions. Even though it’s just a few lines of code, it completely changes how the artwork feels. Figuring out how to use the wave and map together was really challenging at first. I had to do a lot of trial and error, watch some YouTube videos, but it was satisfying to see it finally work.

let wave = sin((frameCount * 0.07) + (x + y) * 0.05); // simple wave
let size = map(wave, -1, 1, 10, spacing); // circle size changes with wave
let colorValue = map(wave, -1, 1, 50, 255); // color changes with wave
fill(colorValue, 170, 355);

 

Embedded Sketch:

Reflections & Future improvements:

This assignment was initially challenging because I had to figure out how to make the circles pulse and change color using loops and functions. I spent some time watching tutorials and testing different ideas to get the animation to look right, especially figuring out how to use the wave and map functions together. Completing this project helped me understand how to combine new concepts with what I already know, such as loops and grids, to create something that actually moves and changes on the screen.

For the future, I’d like to make it more interactive. Right now, the circles just pulse on their own, but it would be cool if the user could click or drag the mouse to change the colors or the speed of the animation.

Week 3 – Reading Response

The author differentiates “tools” for utility, such as the hypothetical Nintendo fridge, from something “fun” and “interactive”. Thus, he raises a question, “Is interactivity utterly subjective?”, only to discuss the process of interactivity as a subjective flow. In particular, he argues that the thinking that spurs creativity–and a certain level of randomness as we discussed last week–is a crucial element of interactivity.

I agree that the thinking for creative responses is the most important part. In the past, even now, some low- and mid-level interactive creations, as the author would categorize, are solely dependent on a set of rules that only attempt to be generative. Their output doesn’t serve a meaning itself, only reflecting part of a bigger scene defined by the rule setter. Ideally, however, every output should prompt some further thinking in the receiver of the response, or the originator of the conversation. It is indeed fairly difficult to achieve so, particularly in the past.

The advent of Generative AI could bring some change, especially when it’s seemingly untouched in the interactive visual art sphere. What if, I say what if, some code is written in real-time, following a certain broader set of rules? What if, in addition to a set of rules, some new impromptu visual rules are created in real time?

Week 2: Reading Reflection

Randomness in computer art is integrating a level of unpredictability into a work, creating a piece that is ever changing and transforming. Casey Reas’ presentation on introducing randomness to creative coding pieces, opened my eyes to the value such an approach can add to a work. Coding can seem like a rigid mechanical process that is deprived of nature, however, with an added touch of randomness we can emulate the natural phenomenon of chance. One of the things that one would notice if they observed their surroundings is the existence of chance and randomness everywhere. You can never predict when you’ll bump into a childhood friends years later or when a leaf will fall off a tree as you pass by it. These uncertainties that we face in our everyday life are what define our everyday experiences, they are not mechanical and precise. Bringing that same sense of unpredictability into our code to some extent gives a piece life, where the viewer cannot tell what the work’s next move will be.

Randomness comes with  countless merits, but it does raise the question of where do we draw the line. How much randomness before we define a piece as chaos? Reas’ claim that a strong foundational code that randomness is to be built on is essential and is a factor that I do believe is important to integrate into works, though I do also believe that relying on chance to a larger extent is not creating disorder and taking away from the work’s value. Chaos and spectacle have always been an essential part of art, and an integration of randomness to the extent that it leaves the viewer confused to me is not necessarily a bad thing. It could leave the audience with an overwhelming feeling, which is a chance to explore a certain intersection of art where appreciation and discomfort come together. Digital and algorithmic art is a relatively new practice, and shying away from too much randomness in fear of chaos might hold us back from exploring this type of art to it’s full potential. In some cases foregoing the foundational code that the randomness is built on could result in intriguing work. Art is about experimentation and risk and unless we let go of order we will never reach an understanding of what that really means.

Week 2 – Loops

Concept

This idea came from something super ordinary: looking at the lamp on my desk. I liked how objects close to it felt sharp and bright, while things farther away faded quietly into the background and into the wall. I wanted to capture that shift in attention, where one small light changes the way everything around it feels.

My sketch uses a grid of circles and a drifting light. As the light moves, the circles respond by glowing more when it’s near and dimming when it’s far. The result is a simple pattern that looks somewhat steady but comes alive as the light passes through.

Code I’m proud of

The bit of code I like most is the distance calculation, and how just a few lines of code could turn geometry into behavior!

let d = dist(x, y, lightX, lightY);

if (d < 150) {
  fill(255 - d, 200, 100);
} else {
  fill(50);
}

That small check gives each circle its own response. Some of them glow strongly, others fade away. It’s nothing complex, but it changes the grid from static to responsive, and I like that.

Here’s the work!

Reflections

If I keep developing it, I’d like to make the light follow the mouse so the viewer can interact directly. Multiple lights with different colors could overlap and create more interesting patterns. I could also vary the size or shape of the circles to add depth, so the sketch feels less like a flat grid and more like a living surface.

For now, though, I’m happy with how it turned out. It’s a small experiment, but it was indeed very fun to implement.

Reading Reflection – Week 2

I think Casey Reas’ talk was beneficial in how it helped me rethink my understanding of randomness in creative work. Before watching his presentation, I viewed chance as leaving artistic control, a way in which an artist makes pieces without intent. Reas’ presentation, however, provides compelling evidence to the contrary. His determined works gave way to systems where a tiny bit of injected “noise” was the crucial element preventing the entire structure from becoming homogenous and static. To be clear, his idea that a slight, random “jitter” is what keeps a system dynamic and alive has fundamentally changed my perspective in a way. It’s not about letting go of control entirely; it’s about building a system of rules and then introducing a controlled element of unpredictability to see where it goes. The quote Reas shared perfectly captures this: “It’s a chance that is always planned, but also always surprising.” This has made me think; is the artist’s role less about being a creator of objects and more about being a designer of ecosystems, carefully balancing deterministic rules with probabilistic life? I think this point is very interesting and eye-opening to me in some way.

Moving forward, I feel like I want to incorporate randomness more into my own work as, let’s say, a subtle disruptor of stillness and rigidity. All my life, I was focused on creating art pieces that are rigid. Going forward, instead of creating a perfectly symmetrical digital pattern, I want to play with the form and introduce a slight, randomly determined offset to the position or rotation of each element. The overall structure would still be mine, but the final texture would feel more organic and less sterilely perfect. For me, the balance between total randomness and complete control will lie in intentionality. The balance is right when randomness serves the artist’s goal, whether it’s to create surprising juxtapositions or whatever the goal is. Complete control often leads to predictable, “lifeless” results, while total randomness leads to incoherent noise. The sweet spot for me is a well-defined system where chance is given just enough freedom to introduce variations that I could not have conceived of on my own, making the final output a true collaboration between my intent and the unexpected.

Week 2 – Art with For and While Loops – Elyazia Abbas

Concept

In many houses here in the UAE and the Gulf region, the art displayed around homes often reflect culture and faith. For this weeks coding assignment I wanted to integrate the two pieces of art found in many Arab homes that I love the most. The first being bakhoor. The burning of bakhoor is a common tradition especially when welcoming guests, filling the space with oud and mysk fragrance. It involves using mabkhara, and adding a hot piece of coal in the middle. Then we add different kinds of oud sticks as well.

The second piece I wanted to depict in my sketch is the frames of Kiswah hung in many homes. The kiswah is basically the black silk cloth that covers the Kaaba in Mecca. Once its time to change the kiswah, ususally parts of it are sold.

My program depicts a mabkhara with a hoat coal in the middle, burning with smoke rising to the top of the screen. Behind the mabkhara is just an image I pasted of the Kiswah that says “بسم الله الرحمن الرحيم ” or “Bismillahir Rahmanir Raheem”

7+ Hundred Bukhoor Royalty-Free Images, Stock Photos & Pictures | ShutterstockDiscover 50 bakhoor ideas on this Pinterest board | incense, incense burner, oud perfume and more

Where does the Kaaba's Kiswa end up after its replacement on Arafat Day?

Code I am Proud of:

function updateSmoke() {
  noStroke();
  for (let i = smokeParticles.length - 1; i >= 0; i--) { 
//backward for loop where we decrememnt backwards, this is because we want to kill the oldest particles first then the newer ones 

    let p = smokeParticles[i]; 
//p is just there two know which particle we are currently working on 

    p.y -=5; //move particles up by decrementing y value 
    p.age+=1; //increase the age

    fill(200, 200, 200, p.alpha * (1 - p.age / p.life)); 
//coloring logic: the closer the age gets tot he life, this means that we want the particle to die off, so it would be a value/ over the same values , ultimately 1-1, which is zero, so the particle wont shpw anymore
   

 ellipse(p.x, p.y, p.size); 
//draw the smoke particle at the random x y position


    if (p.age > p.life) { //if age is greater than life, then splice the particle
      smokeParticles.splice(i, 1);
    }
  }
}

Sketch:

https://editor.p5js.org/ea2749/sketches/CBpMgmTff

Reflection and ideas for future work or improvements:

In the future I plan to hopefully start using more classes as it makes referencing so much easier and makes the process of editing certain parameters much simpler because everything is contained in a class. For future work I also plan to integrate sounds tot he skecth, for instance, which this sketch the sounds of burning wood would be very fitting!

 

Reading Reflection:

How are you planning to incorporate random elements into your work? Where do you feel is the optimum balance between total randomness and complete control?

I find it interesting how Casey Reas talks about order before he mentions randomness. Reas discusses how everything started with order and was associated with power in historic times. I specifically liked the part where, towards the end of the video, Reas showed art that depicted “parametrization” more than randomness, and he emphasized how much we can pay attention to detail, even when it looks underwhelming, when there is no randomness. But as Reas shows the pieces, we notice that there is randomness, though it does not overpower the overall structure of the art. This made me reflect on how we can balance structure/control and randomness. After looking at the last few pieces he showed, I found that the best balance is not when one overpowers the other, but when one complements or completes the other. With that in mind, I hope that for the next p5 sketches I work on, I focus more on how randomness can complement structure and parametrization rather than overpower it.

Random StructureRandomness & Chaos: An Overview of Why They Aren't the Same

 

 

Reading Reflection – Week 2

For me, the most significant takeaway from Casey Reas’ talk was the idea that chaos and order can coexist. Initially, I thought to myself, “This doesn’t make sense. How can two opposite ideas be used together to bring harmony and coordination? However, as I listened further to the point where he gave examples of pieces of art where randomness or chance was included to generate order and beautiful patterns in art, I was fully convinced.

Most importantly, Casey’s talk helped me realize that randomness doesn’t necessarily mean lack of control. I agree that it is essential to incorporate constraints to have control over randomness added to a piece of art. This is where I feel the optimum balance between total randomness and complete control can be achieved.  By using constraints, we can maintain intention but still have elements of unexpected and creative variations.

This understanding will be very useful to me as a learner. Although I’m not experienced in creative coding with p5.js, I plan to explore incorporating randomness into my works. For instance, I can use the random() function and set boundaries for positions and sizes so that my output is confined within a specific area, while having some variations in its properties.