Week 9 – Personal Distance Machine

For my first Arduino-based assignment I wanted to incorporate the use of an ultrasonic sensor to generate an interaction for the user based on their presence alone. My initial idea was to have the output in the form of a message displayed on an LCD screen – I even wired up the circuit for this idea as shown below. However I was unable to figure out how to link information from the sensor to the LCD screen and decided to try a new approach.

In an attempt to simplify things for myself while maintaining the idea of detecting someone’s/something’s presence, I decided to create a ‘personal distance machine’ which tells users when something is too close for comfort. To do this I replaced the LCD screen with a buzzer and an RGB light which changes incrementally from green to yellow to red depending on the distance detected by the sensor. Below is an excerpt from the code as well as an example video.

void loop() {
  distance = getDistance();   //variable to store the distance measured by the sensor

  Serial.print(distance);     //print the distance that was measured
  Serial.println(" in");      //print units after the distance

  if (distance <= 20) {                       //if the object is close

    //make the RGB LED red
    analogWrite(redPin, 255);
    analogWrite(greenPin, 0);
    analogWrite(bluePin, 0);
     tone(buzzerPin, 272);  


  } else if (20 < distance && distance < 40) { //if the object is a medium distance

    //make the RGB LED yellow
    analogWrite(redPin, 255);
    analogWrite(greenPin, 50);
    analogWrite(bluePin, 0);

  } else {                                    //if the object is far away

    //make the RGB LED green
    analogWrite(redPin, 0);
        analogWrite(greenPin, 255);
    analogWrite(bluePin, 0);
        noTone(buzzerPin);   
  }

https://youtube.com/shorts/5y1aWPqcZVg?feature=share

Week #8 Reading Response – Redha

The reading titled Emotion & Design and its exploration of the applications of form vs function led me to consider how people respond differently to objects that have similar affordances.

The author’s teapot examples reminded me of Pierre Paulin’s Dune Ensemble Sofa which has attracted some attention online in the past few years. In this case, the object certainly holds a significant form factor, thus producing a positive affect in the user and enhancing its central purpose – comfort. I feel that what makes the design of this object effective is that its inferred functionality also feeds back into this affect as users immediately associate expansive soft surfaces with the act of laying down. Moreover, the object’s purpose is expanded through its adoption of a ‘conversation pit’-like structure which encourages social interaction. With this design element, it can be argued that the object is transformed into and can be interacted with as a space in and of itself.

Dune Ensemble - Paulin Paulin Paulin

However, as mentioned in the reading, these interesting design choices (which embrace both form and function) can only be appreciated if presented in the appropriate low-risk social and domestic context.

Conversely, a hospital bed has similar affordances and a similar purpose of ensuring the comfort of the user but functions very differently as an object. To begin with, the need for it to be economic (financially and spatially)  leads to the bed’s compact and minimal stature. This links to the author’s point about form hindering processes within high pressure situations as, for example, getting a patient on and off of the Dune Ensemble Sofa would be tedious and uncomfortable. Naturally, the hospital bed’s function fills in the lack of form with features such as handles and an adjustable reclining angle.

COVID-19 could fill hospital beds, but how many are there? | Modern  Healthcare

Linking to the reading on Margaret Hamilton, I feel that what she was able to accomplish is even more impressive considering the usability of the tools she was working with. While they were less complex than the ones in use today, their design was also less informed by what we now know about usability and human-centred approaches to design. This thereby affected both form (exposed raw materials, unclear affordances) and function (manual processes, limited tech) of what Hamilton and her team were dealing with on a daily basis. Considering this, I am now curious to see whether studies have been done on the topic of usable design and efficiency across different use cases.

Image may contain Modern Art Art and PaintingImage may contain Face Human Person Furniture and TextImage may contain Machine Human Person and Lathe

Midterm Project – “Wanderer” – Redha Al Hammad

For my midterm project I created a simple interactive piece which focuses on the importance of mindfulness, slowing down and taking a break. The piece features a character that can be controlled by the user to walk left and right with the arrow keys. By walking (or ‘wandering’), the user progresses through a series of different scenic environments ranging from grass fields to mountain ranges. The user is then prompted to ‘think’ at given points (improper functionality explained later) before finally returning home. I have sequenced the images (sourced from craftpix) to convey the passage of time with the exception of the last image which I edited in Lightroom to create a ‘blue hour’ color palette. The link to the sketch is below. For the best experience, open your window in full screen:

https://editor.p5js.org/redhaalhammad/sketches/H_1B-Ts-1

Edits for the final frame

In terms of technical application, I am happy that I was able to incorporate an intuitive transition from background to background for the user through my updateBackground functions. I found it challenging to wrap my head around how exactly to include this functionally. An issue that I had early on was that the background would always change to the next image regardless of whether the user walked off-screen to the left or right. I was able to resolve this by adding an else if statement and simply subtracting 1 rather than adding 1. I feel that doing so helped create an immersive environment for the user as it more accurately reflected the development of the character’s ‘wandering’ journey. The source code for the background transitions is included below:

function updateBackground() {
  // Cycle through the backgrounds
  currentBackground = (currentBackground % 14) + 1;
}
function updateBackground2() {
  // Cycle through the backgrounds
  currentBackground = (currentBackground % 14) - 1;
}

Building upon this, I feel that another strength of this project is its continuity which applies to both aesthetic and narrative. While I initially wanted a basic silhouette sprite sheet to make the experience more universal and relatable, the pixelated design style of the character matches with the similar style of the background images. Additionally, the visual aesthetic of the background images is consistent despite being sourced from different asset folders on craftpix. In terms of narrative, I was conscious, as mentioned previously, of sequencing the images to reflect both the passage of time but also a sense of space. While I do not repeat images (except for the scene of the character’s home), I consciously chose to include scenes featuring mountains as the character nears returning home in correspondence to the scene of the mountain which appears at the beginning of the journey. The intention behind this was to subtly present to the user that the journey is nearing its end as (based on the sequencing) they can infer that the character’s home is located near mountains.

Unfortunately, I have several issues in this project which I repeatedly tried to resolve but ultimately could not figure out. The first, which will be apparent to users unless they engage with the piece in the p5 editor while the window is in full screen, is that I could not properly situate my character and text into a fixed position relative to the backgrounds. This is likely due to the fact that I used ‘innerWidth’ and ‘innerHeight’ for the canvas dimensions with background images that do not take up this entire space. I tried to place the y-position of my character relative to the height of the images (using summer1 as a reference) but that did not accomplish the adaptive positioning that I wanted it to.

Another technical shortcoming was my inability to successfully add a simple audio track to help create a sense of atmosphere. Despite being a straightforward incorporation which I am familiar with, I was unable to successfully have an audio track play once. When the audio did play, it would be called to play every frame and eventually cause the sketch to crash. I looked to the examples provided in the class notes, researched the references on the p5 website and asked more experienced colleagues but could still not figure out how to do it.

Finally, an issue that I am deeply upset about was the lack of functionality in the ‘press ENTER to think’ prompt. To begin with, I was able to get the ‘think’ prompt to work momentarily. However, when it was working, my sprite sheet was not entirely functional as it would move across the screen without being animated. I suspect that the ‘keyPressed’/’keyCode’ functions were interfering with one another but I could figure out how to resolve it. I am especially upset that this element did not work as I feel that it would have elevated my project on many levels. First, it would have simply added another level of interactivity besides the basic movement, thus making the piece more engaging. Second, I feel that it very succinctly relates to the intention behind this work by prompting the user to physically stop progressing and to focus on the digital scenery in front of them. Moreover, the text which that appeared on-screen when this element was functional (still in the source code) added a much-needed personal touch and sense of character to the work which I feel is lacking currently.

Wanderer – Midterm Progress

For my midterm project I will be creating an interactive artwork entitled Wanderer which will take the form of a visual loop featuring a figure that walks through various landscapes. The interaction itself will be fairly simple as the user will only be able to initiate the figure’s movement and change the landscape in which the figure is walking.  I have chosen to simplify the interaction as a means to draw attention towards the work’s visual qualities which will (hopefully) be satisfying to look at. To fulfil the brief, I plan to incorporate an “energy” meter which will cause the session to restart if it reaches zero. As of right now, I have started working on a sprite sheet and will make progress on the backgrounds in the coming days.

let spritesheet;
let sprites = [];
let direction = 1;
let step = 0;
let x;
let y;
let speed = 7;
let stepSpeed = 60;
let animationTimer;
let automaticMovement = false; 

function preload() {
  spritesheet = loadImage("walk-sprite.png");
}

function setup() {
  createCanvas(600, 600);

  let w = spritesheet.width / 17;
  let h = spritesheet.height / 2;

  for (let y = 0; y < 2; y++) {
    for (let x = 0; x < 17; x++) {
      sprites.push(spritesheet.get(x * w, y * h, w, h));
    }
  }

  x = width / 2;
  y = height / 2;

  imageMode(CENTER);
}

function draw() {
  background(255);

  if (automaticMovement) {
    direction = 1; 
    x += speed;
    step = (step + 1) % 12;

  translate(x, y);
  scale(direction, 1);
  image(sprites[step], 0, 0);
}
}

function keyPressed() {
  clearInterval(animationTimer);

 
  automaticMovement = true;

  // then set the interval
  animationTimer = setInterval(() => {
    step = (step + 1) % 12;
  }, stepSpeed);
}

function keyReleased() {
  clearInterval(animationTimer);


  automaticMovement = false;
}

function mouseClicked() {

  automaticMovement = true;
}

 

Computer Vision Reading Response – Redha

The main point that stood out to me from this week’s reading was the wide prospects of the use cases surrounding computer vision.

To begin with, two artworks stood out to me for two varying reasons. Both artworks, however, expanded the scope of possibilities for me concerning the applications of computer vision within the context of art.

The first of these artworks is Rafael Lorenzo-Hemmer’s Standards and Double Standards (2004). This work piqued my interest due to its incorporation of space and inanimate objects which are activated through the help of computer vision. Personally, I find the overlap between the digital and the tangible to be an interesting area of focus so this work immediately caught my attention for its symbolic repurposing of an everyday object which is then given a sense of agency through programming that is supported by computer vision. Moreover, this work allowed me to consider the potential of using computer vision without requiring a visual output based on the data that the program is using. For example, in Krueger’s Videoplace, the user can see a visualisation of the input that the computer vision system is receiving (their silhouette) and it becomes central to the work. Conversely, Standards and Double Standards makes use of the input internally in order to trigger an another action.  Finally, I definitely appreciated that this work does not feature a screen (!) as I feel that it has become an overly predictable method of presenting interactive art.

Rafael Lozano-Hemmer, "Standards and Double Standards," 2004 on Vimeo

That being said, the next work that I have identified is Christopher Moller’s Cheese (2003) – an installation which solely presents screen-based work. While I do feel that this installation is an exception to the statement above (due to its bold imagery and simple presentation (and the fact that the work itself is not interactive)), what stood out to me was not the effectiveness of the work itself but the technical implications concerning the computer vision system that made the work possible. Considering the exponential development of technology, and the fact that the work was produced over two decades ago, one can’t help but wonder what can be done with facial recognition technology today. The reading mentioned how sophisticated the computer vision system needed to be in order to recognise slight changes in emotion and provide a response (albeit a simple one).

Cheese - Christian Moeller

This has lead me to ponder what is possible with facial recognition technology (and computer vision as a whole) within the artistic space today. I was reminded of an installation produced in 2019 which I had looked at for another class entitled Presence and Erasure by Random International. As part of my presentation on this work I discussed the concept of consent within interactive art and, as an Arab and a Muslim, I immediately recognised that such a work would may not be able to exist in certain parts of the world (such as this one) as a result of social and cultural beliefs. Ultimately, going down this rabbit hole as led me to consider the endless possibilities we have with today’s technology but it has also helped me understand that just because you can pursue an idea, does not always mean that you should.

RANDOM INTERNATIONAL

Assignment 4 – Redha Al Hammad

As I was short on time for my fourth assignment I decided to utilise it as an opportunity to experiment with several different ideas.

The first of these ideas was an attempt to replicate the playfulness of the Pixar opening animation. For me (and I’m sure many others in the class) this opening sequence featuring Pixar’s familiar serif typography and iconic lamp character is incredibly nostalgic. I specifically remember how satisfying the movements  of the lamp and the reaction to the letter was to me as a child. I attempted to replicate the most notable movement from this reference in my sketch by focusing on the element of bouncing.

Pixar Movies and Shows | Disney+

I did this by enabling the individual letters of the word ‘jump’ to  jump and bounce once they reach their starting point. I am happy with the jumping and bouncing effect as I feel that is smooth and encapsulates the playfulness I was going for. However, as I was unfamiliar with how to go about it I used ChatGPT as a reference and, while it did give me a good starting point for my desired effect, it also produced a noise-like shaking which I could not figure out how to remove. I am still proud of this piece of code which enables the jumping and bouncing effect onto the individual letters.

 isMouseOver() {
    let letterWidth = textWidth(this.char);
    let letterHeight = this.size;
    return mouseX > this.x - letterWidth / 2 && mouseX < this.x + letterWidth / 2 &&
      mouseY > this.y - letterHeight / 2 && mouseY < this.y + letterHeight / 2;
  }
}

 

Using ChatGPT was a result of my limited time and, had I given myself enough time, I would have avoided the other main problem in my code which is that it became difficult to read after adding my second word – “zoom” – which moves across the screen when pressed. As I was attempting to do many different things (with the help of AI) in a short amount of time, things became overlapped and the “jump” function became used for both words.

Despite this, I feel that I have a better understanding of physics, classes and arrays after producing this work and will look to incorporate them more in my upcoming projects.


 

Reading Response Week 4 – Redha

I felt that this week’s reading effectively conveyed a holistic view of what “good design” is from a human-centred perspective. I felt that a lot of the concepts presented are relevant to our daily experiences with our personal devices (smartphones, tablets, laptops, PCs, smartwatches etc.).

In response to the author’s view that modern devices/machines are too complicated and present too many functions, these devices (for the most part) have incorporated more minimal designs both in their GUIs and their external appearance. Moreover, they have managed to present their complex affordances through simple and accessible conceptual models which can be understood easily by new users. However, I have found that the discoverability and comprehension of these devices’ conceptual models is dependent on how conditioned the user is to the universal modern language of conceptual modelling used across different technologies. As a basic example, someone who has been conditioned to understand these conceptual models would easily comprehend that a button with an arrow would indicate the ability to progress or move something (e.g scroll down a page, move a cursor, change a selection). Regardless of the use case, this affordance is understood through these commonly used signifiers. However, to someone from my parents’ generation, these connections are not made immediately (even if there is prior familiarity with similar interactions) and would take more time to understand.

Given this example, I would like to present interactive design as a language within itself – one that changes depending on time and place. An interesting component of this design is that there is an exponential increase in new “sounds” and “words” in the form of the constant development of technologies. A decade ago, the use of facial recognition and finger print identification technology in personal devices was a completely foreign “word”. Now, it is used dozens of times daily and is seen as an expectation in new devices. I feel that this view accommodates for the author’s informative identification of the different aspects of interactive design while highlighting the importance contextual information within the design process.

Assignment 3 – Pixel Dragon, Redha Al Hammad

My third assignment started with experimentation rather than ideation. As I initially struggled to grasp the concept of OOP and how to implement it into my own work, I went through the examples provided and began to change different variables just to see how they affected the output.

After some time, I decided that I wanted to continue my theme of recreating natural experiences. I initially wanted to pursue this by expanding on the concept of my last assignment (sitting under trees) to “sitting under clouds”. The idea for this was to have clouds move smoothly with a Sine function and incorporate some interactivity using “if (mouseIsPressed == true)” such as lighting or rainfall. However, after implementing Sine movement to my object, I noticed that it felt more “alive” than something as passive as clouds. As I had already conceptually situated my idea in the sky, I decided to branch off from my original concept and create a scene which depicts the body of a dragon.

While I decided to only create the body as a result of my inexperience, I personally like the unique perspective of only viewing a small part of something that is intended to be big. I believe that films often use this technique of showing a small part of a large creature in order to produce a sense of scale without having to animate its whole body.

In terms of interactivity, I still incorporated “if (mouseIsPressed == true)” in order to simulate the (off-screen) effect of the dragon breathing fire. I did this by generating a random color palette within the range of a faded red – a greenish grey on the background when the user clicks on the mouse.

I a simple yet effective piece of code from this assignment which I am proud of would be the “shading” which I managed to produce on the dragon’s body by increasing the number of rectangles in the for loop and selecting two analogous colors for the fill and stroke. I have included the two examples together below.

 // spacing and for loop
 let spacing = width / 163;
  for (let i = 0; i < width; i += spacing) {
    manyRectangles.push( new SineRect(i, 10 + i * 2)  );
  }

/////////////////

// dragon's body color
  fill(140, 70, 70);
  stroke(80, 50, 50);

Some points of improvement going forward (beyond learning how to make a full dragon) could be to create a more realistic sky as the flat/cartoonish style of the clouds contradicts the smooth aesthetic of the dragon. I feel that I could have also made the sketch more interactive by allowing the user to interact with the dragons body in some way (e.g it moves when the mouse is pressed or it follows the mouse).


 

Reading Response – Week #3 Redha Al Hammad

The main point which stood out to me from this reading was the author’s definition of interactivity as clarified by the analogy of a conversation. I found the comparison of “input, process, output” to “listen, think, speak” to be effective in conveying interactivity today (especially since the piece was written two decades ago). On this same note, I found the mention of an interactive process requiring “two actors” to be interesting. As someone who grew up with digital technology, I subconsciously tend to either view it as a tool or an extension of myself and my actions – not as a separate active party that has the agency to “listen, think and speak” in conversation with me. I feel that the only time I consider technology’s agency is when it does not cooperate with my goal as a user as, for example, oftentimes when a website does not load or is difficult to use we place the blame on it and not the interaction itself.

Another point I found interesting was the misuse of interaction in varying different contexts. More specifically, the distinction between integration and reaction stood out to me as the author strongly claims that they have nothing to do with one another. However, I do feel that there is some element of reaction within interaction (on the human side at the very least). In the aforementioned example, a poorly constructed website will surely garner a specific reaction in the user and, in turn, will affect how they interact with it. As such, I feel that in certain cases, the two are interlinked and should not be considered entirely separate processes.

Reading Response – Week #2 Redha Al Hammad

The main point from this lecture that stood out to me was the balance between randomness and order which has been central to the development of interactive art over time.

Prior to learning about the technical process behind coding, I never considered that conceptualization and randomness can coexist within the same work. I was vaguely aware of algorithmically generated art, especially with the rise of AI generated images in the past few years, and I had been exposed to contemporary art which puts conceptualization at the forefront. However, the merging of the two is something relatively new to me and definitely an avenue which I would like to explore in the future to expand the scope of my personal work beyond traditional photographic practices.

One of the examples of this presented in the reading was a project by Reas entitled Chronograph in which he algorithmically generated visuals to be projected onto the New World Center in Miami. What stood out to me from this work was the intentionality behind it as the visuals were created using images of the neighborhood surrounding the center and later manipulated and collaged through coding. This defied my preconceived notion of digital, coded art to be nothing more than a display of technique and skill as it offered a very tangible ‘why’ to the decision making process behind the work. I have included it below.

Another point which stood out to me from the lecture was the effectiveness of simplicity. This became apparent to me as Reas did a live demo of a very basic Commodore 64 program. Despite only using two basic symbols, Reas’ introduction of randomness allowed the program to produce an interesting visual. As someone who is inexperienced in coding, I would like to combine the aforementioned intentionality with the effective simplicity of this C64 program in order to get the most out of my work.