Author: Raghd

Week 5 – Reading Response

->  Computer Vision for Artists and Designers

I believe that computer vision differs from human vision in several ways. First, unlike human vision, which is connected to cognition, experience, and contextual understanding, computer vision processes images as raw pixel data. This means that it does not know what it is looking at unless it is programmed to recognise specific patterns. Second, humans are able to recognise objects in various lighting conditions and angles, while computer vision usually has a hard time with these unless trained on extensive datasets. Additionally, human vision uses sensory data in real time with prior knowledge, while computer vision relies on predefined algorithms to take out meaningful information. Lastly, on instinct, humans are able to infer meaning from abstract images or recognise emotions in facial expressions, but computer vision needs complex models to achieve basic levels of recognition.

Due to the fact that computer vision lacks human intuition, we can improve its ability to recognise and track objects. This may be done by using lighting conditions to ensure the subject is distinguishable from the background (Myron Krueger’s Videoplace). Also, you could enhance visibility in low-light conditions by using infrared light, which is not visible to humans but detectable by cameras. Computer vision’s ability to track people and objects has a significant impact on interactive art. This means that artists can now use vision-based systems to create interactive installations that respond to body movement, voice, or gestures. It can also be used to highlight issues of privacy, surveillance, and control (Sorting Daemon). Overall, computer vision can reshape interactive art by allowing new forms of engagement, however, its surveillance capabilities also raise questions about privacy and ethics. This means that while this technology enables creative expression, it can also be a tool for control, highlighting the importance for artists/designers to handle these implications thoughtfully.

Week 5 – Midterm Progress

Concept:
For my midterm project, I wanted to create a game based on something I love, cats! Growing up and living in Abu Dhabi, I’ve noticed that there are a lot of stray cats, so I wanted to design a game where the player drives around a city, rescues stray cats, and takes them to a shelter. I got inspired by a photography project I did last semester about the spirit of street cats in Abu Dhabi. I went around the city in Abu Dhabi  and captured these cats lives and the environment they are in. (link to the photos). The game will combine movement mechanics, object interactions, and a simple pet care system. The goal of the game is to rescue and rehome all the stray cats before the game ends.

User Interaction and Design:
For the interaction, I would like to implement a way for the player to control the car using arrow keys to move around. The stray cats will be at random locations in the city and if the car touches a cat, it is rescued and sent to a shelter. I was also thinking of adding more to the game, where inside the shelter, the player can click on the cat to heal or feed them. Finally, once all the cats are healthy, the game ends and displays a win screen.
→ Visual:
Start Screen: Shows the game instructions and a “start” button.
Game Screen: Has a city background with a moving car, stray cats, and a shelter section.
End Screen: Congratulates the player and has a restart button.

Code Structure:
In order to ensure the code is organized, I plan to use Object-Oriented Programming by creating three main classes.
Car Class:
– Player movement (arrow keys).
– Checks for collisions with pets.
Pet Class:
– Stores pet location and condition (hungry, injured).
– Moves to the shelter when rescued.
Shelter Class:
– Displays rescued pets.
– Tracks pet status and healing progress.

Challenging Part & How I’m Addressing It:
I think that the most frightening part of this project is implementing collision detection between the car and pets. Because the game involves movement, I need to find a way to detect when the car “rescues” a pet. To try to solve this collision detection, I wrote a small sample using dist() function to check if two objects are close enough to interact. This will reduce my risk by confirming that object detection works before I use it in the full game.

function checkCollision(car, pet) {
let d = dist(car.x, car.y, pet.x, pet.y);
return d < 30;  // If distance is small, they collide
}

Week 4 –  The Design of Everyday Things, The Psychopathology of Everyday Things

In Chapter 1, Don Norman introduces the idea of human-centered design (HCD) and claims that a well-designed object should be intuitive and easy to use. He emphasizes how poor design may lead to confusion and frustration, which highlights that when people are struggling to use a product, it’s often the fault of the designer, not the user. Additionally, there are a few key principles that were introduced including affordances, signifiers, feedback, and conceptual models. Affordances refer to the properties of an object that indicate how it should be used (a handle affords pulling). Signifiers give clues about how an object functions, such as labels or icons. Feedback ensures that users receive a response when they interact with a design (a light turning on when a button is pressed). Lastly, conceptual models help users predict how an object will behave based on previous experiences. Norman critiques some common usability failures, such as confusing doors (push vs. pull) and complicated appliances. He believes that a well-thought-out design prioritizes clarity, simplicity, and usability rather than just aesthetics.

His valuable insights point out how much bad design impacts daily life. Usually, people will blame themselves for struggling with an object when, in reality, the issue lies in poor design choices. This made me think about how many times I’ve encountered objects that don’t work the way I expect them to, especially digitally where buttons are unresponsive. The chapter reinforces the idea that usability should always come before aesthetics in design. One thing that I find annoying is some modern car systems. Many car manufacturers have replaced physical buttons with touchscreen controls for functions like climate control. The reason that this is frustrating is that they often have poor menu structures, which require you to open multiple tabs for simple tasks like changing the AC temperature. There are various ways to improve this with one being to simply bring back physical buttons for frequently used functions like temperature, volume, and hazard lights. Another thing that could be done is the use of haptic feedback on touchscreens so users can feel when they’ve selected something. Applying Norman’s principles to interactive media can significantly improve usability and user experience. For example, buttons should look clickable, and the links should be distinguishable. Loading animations, confirmation messages, or vibrations on a touchscreen can signal that an action has been completed. Similarly, error messages should be clear and instructive and tell users what went wrong and how to fix it. By prioritising usability over aesthetics, designers are able to create interactive media that feels intuitive rather than frustrating.

Week 4 – Displaying Text

For this project, I wanted to make something fun, so I created a random law generator. The goal was to create absurd but still convincing-sounding fake laws that feel like they could exist in some strange town. The program works by randomly generating a town name, a weird law, and an exception. When the user clicks on the canvas, a new random law appears. As for the visual aspect, the law is displayed on a lined piece of paper with a pencil next to it. I added a brown background to make it look like the paper is resting on a wooden table.

One of the main parts of the project is how the laws are randomly generated and displayed:

function generateLaw() {
  let town = random(towns);
  let action = random(illegalActions);
  let exception = random(exceptions);

  randomLaw = `In the town of ${town}, it is illegal to ${action} ${exception}.`;
}

This selects a random town name from the towns array and picks a random illegal action from illegalActions. Then it selects a random exception from exceptions and combines them into an absurd law.

I faced a few challenges I had to overcome, including correctly aligning the pencil. At first, the pencil eraser and tip didn’t align properly with the body, so I had to adjust the x and y positions carefully to ensure the pencil remained vertical. Additionally, the lines on the paper were too bold, which made it feel unrealistic so I had to adjust the stroke colour and spacing.

Overall, I am satisfied with the way this turned out as it was a fun way to practice generative text output in p5.js. I learned how randomization in programming can create entertaining and unexpected results. Additionally, I had another chance to explore loops, which were useful for drawing repetitive elements like notebook lines. However, there are a few things I could improve on next time like including a hand holding the pencil or making the paper slightly curved for a more realistic effect. I also thought of an interesting element I could add, where I may add a “law history” section that can keep track of the previous laws.

Week 3 – Generative Artwork

Concept:

For my generative artwork, I was inspired by the simplicity and elegance of moving lines. The lines move in different directions across the canvas, creating a dynamic and constantly  changing composition. My idea was to explore motion, angles, and structure through minimalistic elements. The intention was to create an engaging visual using key programming concepts including functions, arrays, and object-oriented programming. I also wanted to implement an element of randomness, which is a concept we looked into last week. Through this, I believe the artwork can maintain a balance between structure and unpredictability, making each frame unique.

Code highlight: 

I needed to ensure that when a line moves across the canvas, it stays within the visible area instead of disappearing off the screen. 

// Keeps the lines inside the canvas
   if (this.x > width || this.x < 0) this.speedX *= -1;
   if (this.y > height || this.y < 0) this.speedY *= -1;

 

Challenges:

While I was creating this artwork, I faced some challenges. The first one was that initially, some of the lines would move off the screen permanently, which is not what I wanted. However, I overcame this by making them reverse their direction upon hitting the canvas boundaries. Additionally, at the start it was difficult making sure that I had the right balance between movement speed and line length. In order to ensure that the art was more visually engaging, I experimented with changing colours over time using frameCount % (). 

Future Improvements:

For the future, I would like to include more engaging elements to the artwork. For example, I could include more user interaction, like clicking to create new lines. Also, I would also like to also include more variations in stroke weight so that the final art has more added depth. Overall, this assignment has allowed me to explore generative art through the use of structured randomness, while also using key programming concepts in P5.js.

 

 

Reading response: 

To me, a strongly interactive system is characterised by intuitive user control, real-time responsiveness, meaningful feedback, adaptability, and finally, engagement. The system should have a dynamic feeling to it, where the users are able to influence the outcomes in both a seamless and rewarding way. Additionally, I believe the system should also anticipate and predict the user’s needs, be able to adjust to various inputs, and also provide a clear visual or auditory cue to ensure that users effectively understand their interactions. Interactivity is extremely important because it keeps the users invested and engaged with the system. For example, some interactive systems respond to user movement, which creates a personalised experience, making the users more invested and engaged with it. These are principles that can be applied to many disciplines, including education, entertainment, and digital art, as they help make more meaningful and engaging interactions. 

For my p5.js sketches, I could add a few elements to improve the user interaction in them. First, I could include real-time input, where I may use mouse movement, touch, or voice commands to affect the visuals. This is connected to adding more dynamic feedback, where the visual or auditory cues respond to user actions. Additionally, I could implement more adaptive elements, where various objects react differently based on the user’s behaviour. Lastly, I could include techniques that introduce elements like challenges or rewards in order to enhance engagement. By implementing these improvements, my p5.js sketches can become more interactive and also more immersive, engaging, and intuitive, which aligns with the principles of a well-designed interactive system.

 

Week 2: Art Work

For this assignment, I wanted to create a simple yet interactive artwork that users can engage with easily. My goal was for users to be able to click on the canvas to generate a new, random art piece, which ensures that each one remains unique and creative. I drew inspiration from the techniques and concepts we have been exploring in class and wanted to make this a fun interaction where people can experience various generative artworks.

 

One of my favourite parts of the code is the random colour generator, as it produces a new colour each time, making each piece visually dynamic and engaging. It also adds a layer of unpredictability and excitement to the art.

let c = color(random(255), random(255), random(255), random(200, 255)); // Random colors
fill(c);
noStroke();

(click to generate new art)

I am satisfied with how my art piece turned out, as it successfully achieves what I intended while allowing me to explore new coding concepts and functions. I liked how the random shapes and colours added variety, keeping the artwork interesting and different each time. The ability to regenerate a new art piece enhances user interaction, making the experience feel fun and creative. There are a few things I would improve on in the future including adding more details and complexity. This includes introducing more shape variations, such as complex shapes, lines, and curves, as they can help create a more intricate and detailed composition. Additionally, after reflecting on the project, I realised that enhancing user interactivity could make the experience even more engaging. For example, I could add a feature where users can contribute to the artwork by drawing their own elements would make it more personal and creative. Overall, this assignment was fun and rewarding to create and helped me better understand loops.

 

 

Reading Reflection: Casey Reas’ Eyeo talk on chance operations

Casey Reas’ Eyeo talk on chance operations examines the intersection between randomness and artistic control, especially in digital art. His discussion brings up an interesting reflection on the role of unpredictability in creative processes. While structured designs offer predictability and intentionality, bringing in random elements can lead to unexpected and innovative outcomes. His approach aligns with John Cage’s philosophy of chance operations, where the artist gives up some control to external forces, which allows for new interpretations and meanings. This raises questions regarding the limits of authorship in art, when does an artist stop being the sole creator if randomness plays a significant role in the final piece? His examples challenge the idea that randomness is naturally chaotic, but it can actually be utilised to create structured complexity.

In my own work, I see the potential to incorporate randomness as a way to explore new creative directions without sticking to preconceived outcomes. This is something I have already experimented with a little, for the artwork that I created. I made an artwork that generates various art pieces using random colours and shapes. However, I think that there is a balance between total randomness and complete control. Having too much unpredictability can make a design feel disconnected while having excessive control can suppress creativity. The challenge is in the ability to set parameters that allow for both structure and coincidence. This talk made me reconsider the extent to which I rely on controlled methodologies and has encouraged me to experiment more with random processes. One question that I still have is, how can we embrace randomness while ensuring the outcome still serves a practical purpose?

For this portrait I wanted it to serve as an opportunity for me to explore p5.js and coding, while also making it represent myself. As this is my first time coding, I am still getting used to it and discovering new elements, which means that my portrait is not as elaborate and realistic as I would like it to be. However, I still made it meaningful by including some things that represent me such as making it colourful and adding a cake to represent my love for baking.

One part of this assignment that I’m particularly proud of is the code for the nose. It was a challenging part of the portrait that took me some time to figure out, but I’m glad I was able to execute it successfully.

noFill(); // nose
stroke(0);
strokeWeight(1);
beginShape();
vertex(200, 200);
vertex(195, 220);
vertex(200, 220);
endShape();

Reflecting on the portrait I created for this first assignment, I feel satisfied with the result. It helped me get more comfortable with how coding in p5.js works and gave me a foundation to build on. For the future, I’d like to focus on adding more detail to my projects. For example, I could experiment with creating more detailed hair, such as adding front strands, designing a more interesting shirt, or even making the portrait interactive. This can be done by conducting more research and experimenting with different shapes and techniques, which I’m excited to try.

–  Raghd