Category: F2025 – Aya

Concept – Inspiration
I want to keep my portfolio for this class associated with Dexter series as long as possible because assignments are not very specific and require some kind of inspiration to make. I thought while I’m passionate about this TV show, why not save myself time and just pursue doing this assignment inspired by it. For this assignment I used OOP, classes, and different mouse functions as I mentioned in my previous post. My inspiration were blood stains on white walls. Dexter was a blood spatter analyst, and he had pictures of some in his office. So, by holding left-click and dragging across the screen user would draw thinner blood lines along the cursor, while when pressing the key, user would draw big chunk of blood in form a circle where cursor is located. Also, by scrolling mouseWheel user would be able to clean the wall from blood using pop().

Highlight of the code

function mouseDragged() {
  if (mouseButton === LEFT) {
    marks.push(new BloodCluster(mouseX, mouseY)); // one cluster per drag
  }
}

function keyPressed() {
  marks.push(new Tomato(mouseX, mouseY));
}

function mouseWheel() {
  if (marks.length > 0) {
    marks.pop(); // remove last (cluster or tomato)
  }
}

(Do not give too much attention to class called ‘Tomato’ it is just for me to navigate throughout the code better). Apart from that, I think this part of the code the crucial rule. it helps with drawing blood lines and bigger blood drops on the wall and cleaning it using mouseWheel(). Generally, I think also using arrays to store blood stains and then applying .pop() was the part of the code that helped a lot to perform next actions. Of course, in order to understand how those functions work, I looked through p5js reference page for keyPressed() and mouseDragged().

Sketch
Initially, I had some issue with class Tomato drawing oscillating circles as blood marks and troubles with cleaning the wall from blood marks in general when using mouseWheel(). But, after storing marks inside the array, applying .pop(), and some clever code arrangement the issues were solved. To be honest, took a lot of time to figure it out.

Reflection
I’m quite fulfilled by the work I’ve done. It definitely followed my initial vision of how I wanted my final result to look like. I like how neat everything looks in code, the organization is very easy to understand. I learned new functions and wise use of arrays to store blood marks using marks = []. In the future, I want to incorporate more mouse functions in my projects to enhance the interactivity of the project like mouseReleased() would also draw some different kind of blood. Also, I would want to make specific type of blood pattern when pressing the key, so blood marks would be kind of the same – more like in real life.

What do you consider to be the characteristics of a strongly interactive system?
After reading Chris Crawford’s chapter on Interactivity, I would strongly agree with what he has to say. It is definitely when both parties (actors as he says) are listening, thinking, and speaking. Otherwise, in more computer terms providing input, processing, and producing output. How would we measure the strength of interactivity of each system? To be honest, as long as it has those three components, I would consider the system interactive. However, whether it is super interactive or less interactive I think depends on person’s perception of what’s is enough interactivity for artwork and what’s not. For example, for me any type solo video-game like ‘Jedi Fallen Order’ is already a peak of interactivity because you control the character, you listen what the game instructs you to do, you think, and game also challenges you too. I feel like making the user think critically and act is an excellent characteristic for strong interactive system.

What ideas do you have for improving the degree of user interaction in your p5 sketches?
The one thing that comes to my mind is how we use mouseX and mouseY commands to make something move along our cursor. Also, new commands introduced by the end of the class using mousePressed, scroll, mouseReleased are too a way to interact in p5js. I would love to incorporate more of such functions in my future sketches to express my feelings and interests.

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.

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);
}

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.

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.

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”

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.

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.

As I was watching Casey Reas’ talk, I kept thinking back to the artists we’re talking about in Understanding Interactive Media. His instructions for his art reminded me of Ben Patterson’s ‘Paper Music’ and Sol LeWitt’s ‘Wall Drawing’, both are examples of art where you have a set of instructions, but each performance or art piece differs based on how the artists and performers interpret the instructions. I feel like both these works are also perfect examples of the idea of both order and chaos coming together. Elements of randomness and control are in use at the same time; you have control in the set of instructions, but you also have randomness in the way the performer will interpret these rules. Works like this make me think that a balance is essential, but what the ratio between order and chaos is rather vague. I believe it depends on the work, so the optimal balance shouldn’t be generalized, but on a case-by-case basis. You have works like Jean Arp’s collages, which are based on the law of chance, which I would say rely mostly on randomness. I don’t believe control would make much sense there. 

On the other hand, if I think of my most recent work for this week’s task, I would say randomization would make it better. I could randomize the different colors of the design on the coffee cup, but I’d need to control the color combinations and the colors to choose from. So this would be an example of where control is necessary while also maintaining an element of randomness. Ultimately, I think the amount of chaos and order that goes into one’s work depends on their intention with the work and what experience they want the watcher to have. 

Concept:

The first cup of coffee, usually accompanied by music of Fairuz, in the morning, is a staple in every Lebanese household. I knew I wanted to do something that is connected to my culture and identity, so I looked up a picture of the signature morning setup and tried my best to mimic it. 

A little bit of background, we call the coffee cup ‘finjan’ and the pot ‘rakwe’. The coffee itself is usually Turkish coffee. 

Proud of This Part(s)!
I’m proud of two parts of my code, one is where I used loops to imitate the designs on the cup.

//loop for the oval design of the cup (for)
let ovals = 2;
for (let i = 0; i < ovals; i++) {
  let x = 450 + i * 60;
  let y = 300;
  fill(" #3F51B5");
  ellipse(x, y, 20, 70);
}

//loop for the flower (while)
let flowers = 3;
let i = 0;
while (i < flowers) {
  let x = 430 + i * 50;
  let y = 275;
  stroke("#3F51B5");
  strokeWeight(5);
  line(x, y, x, y + 45);
  noStroke();
  fill("#F44336");
  ellipse(x, y, 10, 20);
  i++;
}

It was very fun to try and figure out the spacing, and using both for and while loops to get myself used to their separate structures, as I tend to be more prone to using for loops.

The other part of my code that I’m really proud of is the little animation when you press your mouse on the ‘rakwe’, it fills the ‘finjan’ and displays a welcome text. 

//little animation for when you press the rakwe
//coffee cup seems to be full
//and a welcome text
if (
  mouseIsPressed &&
  mouseX > 65 &&
  mouseX < 185 &&
  mouseY > 120 &&
  mouseY < 205
) {
  fill("#50211C");
  ellipse(480, 250, 80, 10);
  textAlign(RIGHT);
  textStyle(NORMAL);
  textSize(50);
  fill('black');
  text("Ahla w Sahla", 420,100);
}

My Work:

Reflection:

It’s really fun taking concepts we implemented in class, but actually applying them to your own creative work. You also wind up learning new things on the way, for example, this was my first time using text in p5.js. 

While I like the final result, I definitely see as we learn more, the more interactive and complex I can make it. I would like to make the ‘rakwe’ draggable, and have the user manually fill the cup with coffee. Also, maybe a possibility of under- or over-filling the cup and different display messages for each scenario.