Author: Ghaliah Al Mansoori

Something that drives me crazy is the automatic entrance doors in C2, because sometimes when I walk towards one of the doors, it does not detect that I am there and stays closed. I usually end up moving towards the other door, only for the original door I wanted to use to suddenly open. I think this relates to Normans ideas of signifiers. There is no clear signifier showing exactly where I should stand for the sensor to detect me, and there is also nothing telling me whether I have been detected. This could be improved by adding a subtle marking showing where the sensor detects people, as well as a small light that turns on once someone has been detected. This would make the interaction much clearer instead of making the user guess what they are supposed to do.

Normans principles can be applied to interactive media by designing with the users perspective and human centred design (HCD) in mind rather than assuming that they will automatically understand how something works. Interactive media should have clear signifiers that communicate what can be interacted with, as well as feedback that clearly shows the user that their action had an effect. I also think mapping is important, because the way someone interacts with something should connect to the result they expect. Overall, Norman’s ideas made me think more about how an interactive experience should communicate with the user through its design, rather than needing instructions to explain how everything works.

Concept:

For this week’s assignment, I found myself being more drawn towards using Arabic text, not only because it was something new, but because in my Intro to Digital Humanities class we discussed how different languages can be difficult to represent within digital systems, which can cause certain meanings to get lost in translation. This made me think about how different languages have their own meanings and ways of expressing ideas, especially Arabic. I noticed that in Arabic, one broader concept can be connected to multiple words, each with slightly different meanings and associations, but still relating back to the same overall idea. I wanted to show some of these connections through generative text, so I decided to take three values that are deeply rooted in Emirati culture and display three different Arabic words connected to each one. Through this, I wanted to show how meaning can go beyond a single word.

My Artwork:

Code I am proud of:

function mouseClicked() {
  wordNumber += 1;

  if (wordNumber > 2) {
    wordNumber = 0;
    groupNumber += 1;
  }

  if (groupNumber > 2) {
    groupNumber = 0;
  }
}

The part of my code that I am proudest of would definitely be the mouseclicked() function. I used wordNumber to move through the three Arabic words in each group every time the user clicks. After clicking through all three words, wordNumber resets back to 0 and  groupNumber moves to the next value. I also made groupNumber reset after the final group so that the interaction continues in a loop. I am honestly really proud of this part because I was able to learn and use variables and if statements to control how the whole sketch changes by interacting with it, and it took a lot of trial and error.

How this was made:

I first created three different arrays to store the Arabic words related to each value: generosity, determination, and unity. I then used wordNumber to keep track of which word was currently being displayed and groupNumber to keep track of which value the user was on. Using the mouseClicked() function and if statements, I made each click move to the next word, and after the three words were displayed, the sketch would move to the next value. I also used different colors and Sadu inspired geometric patterns for each group to visually separate the three values while still connecting the overall design to the UAE.

A lot of the coding for this project was inspired by things we had already covered in class. I kept going back to the lecture notes and previous assignments whenever I got stuck, especially when working with arrays, variables, if statements, and mouseClicked(). Since I had already used arrays and interaction in previous sketches, I tried to take those concepts and apply them in a different way for this project.

One of the biggest challenges I had was getting the Arabic font to display properly. At first, the font I wanted to use was not working correctly with the Arabic text in p5.js. I used the CSS method provided in class and downloaded Noto Kufi Arabic from Google Fonts, then added the font file to my sketch and used textFont(“Arabic”) when displaying the Arabic words. This was something I had never done before, so it took some trial and error to understand how the font file, CSS, and p5js code worked together.

I also wanted the sketch to feel more generative rather than only changing when the user clicked. I experimented with adding faded copies of the current Arabic word into the background and making their size grow. At first, I tried using random() for the text size, but because it was being called continuously inside draw(), the words changed size extremely quickly and looked more like they were flickering. Instead, I created a wordSize variable and gradually increased it using wordSize += 0.5. Once it becomes too large, it resets back to its original size. This gave me a much smoother growing effect while still keeping the generative aspect of the sketch.

Reflections & Future work:

All in all, I am honestly really happy with how the final artwork came out. I thought a lot about the different aspects of the piece and tried to incorporate my culture where possible, while still keeping the meaning behind it clear and easy to understand. I learned a lot through the process, one of the biggest things being how much trial and error is involved in coding. There were multiple times where something as small as a bracket being in the wrong place would stop the interaction from working completely, and figuring out the Arabic font was also much more difficult than I expected. However, I think working through these problems helped me understand my code better rather than just getting it to work.

I also enjoyed experimenting with the visual side of the sketch. At first, the interaction was quite simple, with the words only changing when clicked, but adding the growing words in the background made the final result feel much more dynamic and generative. In the future, I would probably experiment with more ways for the user to interact with the words and patterns, rather than only clicking through them. I would also like to explore more Arabic words and values, since there are so many words that carry meanings and associations that cannot always be represented by a single English word.

In my opinion, I would classify the characteristics of a strongly interactive system as one that requires “two actors,” as Crawford mentioned. Interaction is not something as surface level as a book or a movie that you watch or listen to, but something that reacts to you and requires a back and forth interaction between the user and the system. What surprised me while reading was finding out that things I thought were interactive, such as dancing, opening a fridge door, and watching a play, were actually either not interactive or had a very low degree of interactivity. A strongly interactive system should be able to listen to the user’s actions, process them, and respond accordingly. I also agree with Crawford’s idea that interactivity exists on a scale, as simply responding to an action does not necessarily make something highly interactive.

Looking back at my p5 sketches, I think I could improve their level of interactivity by making the user’s actions have more of an effect on what happens within the sketch. For example, in my generative desert night sky, clicking currently generates a new arrangement of stars with different positions, sizes, speeds, and colors. Although the sketch responds to the user, the response is still quite limited because clicking always produces a similar result. To make it more interactive, I could allow different user actions to affect different parts of the artwork, such as having the movement of the mouse change the direction of the stars or allowing the user to affect the appearance of the sky. I think this would create more of the conversation Crawford describes. I would want to improve the degree of user interaction by not only implementing interactive functions and concepts where the user would be able to interact with the artwork or code, but also working harder on the function and form of the design. As I learned while reading, interactive design isn’t only about making an interface look good or function correctly, but considering both aspects to design the entire experience of interacting with something.

Concept:

The desert is a big part of the UAE’s landscape, and one thing I would always notice during desert trips was how bright the night sky was compared to in the city. I was also inspired by the nightsky timelapses where it showed the movement of the Earth and the various stars. I wanted to mimic that in my artwork, by randomizing the stars shape, size, speed and the positioning of stars with every click.

My Artwork:

Code that I am proud of:

// Move the stars across the sky
  update() {
    this.posX = this.posX + this.speed;

    // Move star back to the left when it leaves the canvas
    if (this.posX > width) {
      this.posX = 0;

The reason as to why I am proud of this code is because I used the update() function to make each star across the sky move not simultaneously, but across the sky with each having its own random speed. I also added an if statement that checks when a star would go past the edge of the canvas and moves it back to the beginning/left. I liked this as it helped solve the problem of how the stars would reappear as the sky would move.

Debugging/Issues:

One idea from Casey Reas’s talk that stood out to me was the relationship between randomness and control when creating art with code. Since I am still new to coding, I try to make my code as neat as and understandable as possible. The ability to visually comprehend my code is something I find important, such as where an object appears, what size it is, and how it should look. However, Reas made me think differently about randomness. Instead of seeing it as something that makes a piece messy or unorganized, I think randomness can make digital art feel more alive and less predictable. Reas touched on the topic of emotion and how something as simple as randomness can evoke emotion when used with direction and intention. This idea resonated with me because I like looking for deeper meanings behind things that may not initially seem meaningful. Randomness, for example, can easily seem meaningless or accidental, but Reas made me realize that when it is used intentionally, it can contribute to the emotion or message behind a piece of art. If I were to incorporate randomness into my own work, I would probably use it on smaller elements rather than the entire piece. For example, I could slightly change the position, size, or movement of certain shapes each time the program runs. This would allow every version to look slightly different while still keeping the original idea recognizable. I especially like the idea of using randomness to create imperfections or “jitter,” because those imperfections add a human touch, and add more meaning to the artwork.

While watching the video, I came to realize that I do not think there is one perfect balance between randomness and complete control. I think it depends on what the artist is trying to communicate and how they want the artwork to feel. Personally, I would lean more toward control because I still want the message I am trying to convey to be clear. However, Reas examples made me realize that adding elements of randomness does not mean that the meaning of the image would be erased. The artist is still the one deciding what specific code, elements, shapes and amount of randomness in the artwork. This made me question whether randomness in coded art can ever actually be considered completely random if the artist is still the one setting the boundaries for it.

Concept:

My main inspiration behind the artwork was the abstract art piece that I found in the ‘Program Information’ reading. I was drawn to it because it not only had various shapes and sizes of rectangles, but also included lines, which made the piece feel more detailed and abstract to me. I chose triangles because I wanted to experiment with a shape that I had not used much before in p5.js , and I liked how triangles could create completely different patterns depending on their size, position, and how they overlapped with each other. I chose a purple color palette because the color reminded me of NYUAD. I wanted the piece to be abstract and include animation to make it feel more dynamic and stand out.

My Artwork:

Code I am Proud of:

for (let yPos = 60; yPos < height; yPos = yPos + 90) {

  for (let xPos = 60; xPos < width; xPos = xPos + 90) {

    if (xPos < 100) {
      stroke(colors[0]);

    } else if (xPos < 200) {
      stroke(colors[1]);

    } else if (xPos < 300) {
      stroke(colors[2]);

    } else if (xPos < 400) {
      stroke(colors[3]);

    } else {
      stroke(colors[4]);
    }

    drawTriangleAt(xPos + triangleMove, yPos, 60);
  }
}

The part of my code that I am most proud of is the loop I used to create the smaller triangles. I liked this part because I was able to combine a few things we learned in class instead of just using loops on their own. The loops repeated the triangles across the canvas, while the x position helped me create the dark to light purple shift. I also added triangleMove to make the triangles move from side to side. There was a lot of trial and error with this part because I was still confused about how the positions and movement worked together, so I kept changing the values and seeing what happened. This helped me understand the code a lot better.

How this was made:

I began with a standard 500×500 canvas and added a couple of triangles. I then used what we learned in class to create a grid using nested loops, which let me repeat the triangles across the canvas instead of drawing each one individually. Once I had the grid, I wanted to make it more colorful, so I recreated the idea of the color palette we used in class. I used RGB values to create different shades of purple and used the x-position of the triangles to create an “ombre” effect from dark purple on the left to lighter purple on the right.

I also wanted to add movement to make the piece feel more dynamic and less like a stationary grid. I created variables to control the movement and speed of the triangles. I made the smaller triangles move from side to side, while the bigger triangles expand and shrink.

Using what we learned in class, I then decided to make the largest triangles expand towards the edges of the canvas. I did this by changing their size over time and using if statements to make them shrink again once they reached a certain size.

Finally, I added lines of different sizes and directions to make the artwork feel more scattered and abstract. There was a lot of trial and error throughout the process. One issue I had was when I originally named one of my color variables purple, which caused an error because p5.js already uses that name. I was confused at first, but after troubleshooting I changed it to normalPurple, which fixed it.

I used the p5.js Reference to look back at: for, loops, triangle(), color(), and line() whenever I was unsure about how they worked. I especially used the examples from class and the lecture notes to understand nested loops and how changing the x and y positions would affect where the triangles appeared. For the color palette, I searched up examples on Google and used this one as a reference to help me understand how to create and organize my own color palette. I mostly learned through trial and error by changing different values and seeing how they affected my artwork.

https://editor.p5js.org/blatinegra/sketches/pBH_qyD-o

Reflections & Future Work: 

I found the process of creating this artwork challenging and frustrating at first because I had a general idea of what I wanted it to look like, but I wasn’t completely sure how to recreate that idea using code. A lot of the process involved trial and error, especially when working with the loops, coordinates, and movement. I kept changing different values and running the code to see how they affected the triangles, which actually helped me understand what each part of the code was doing. I also found that as I continued working, my idea changed a lot from the simple grid of triangles I started with, as I kept adding different sizes, colors, movement, and lines.

This assignment made me more comfortable with using loops, especially nested loops, because I was able to see how a small amount of code could create an entire repeated pattern. I also became more confident with using variables and if statements to create movement rather than only using them for basic conditions. In the future, I would like to experiment with making each shape or line move independently and in different directions. I originally wanted to try this with the scattered lines in this piece, but I found it a little too complicated with what I currently know. I would also like to add more interactive elements, such as having the mouse affect the movement or appearance of the artwork.

Concept:

For this assignment, I was tasked with coding a self-portrait on p5.js. For my self-portrait, I wanted to create a small character which would resemble me, with my main facial features and clothing, as well as try to set a background and add in as many details as I could. This was my first experience with coding, so I really wanted to utilize the shapes, lines, and colors we discussed in class and add them into the self-portrait. 

In the beginning, I had grasped the main idea of shapes and coordinates, but not fully. I used the layout that we had already previously coded in class and decided to build off from that. I had already added in basic shapes like the circle, rectangle, and line, but I then went on the p5.js reference site to understand different shapes and how to code them into the self-portrait. From there, I added the ellipse, arc, and spline. I honestly found putting the coordinates in the most difficult, because with shapes like the arc or spline/curve, moving one coordinate without fully knowing what it does would change the whole shape entirely, and I had to go through multiple rounds of trial and error before correcting the size, area and shape that I wanted them to take.  

I created my portrait using mainly the p5.js reference website to research unfamiliar functions and better understand the different shapes available. I also used AI as a learning tool to clarify some of the concepts I found difficult to understand during the process.

Highlight of some code that I am proud of:

fill(mouseX, mouseY, 255);
  ellipse(140, 60, 130, 60);
  ellipse(90, 65, 140, 70);
  ellipse(110, 40, 90, 55);
  ellipse(500, 80, 165, 80);
  ellipse(450, 90, 125, 60);
  ellipse(45, 130, 70, 35);
  ellipse(70,125,55,30);
  ellipse(430, 150, 65, 30);
  ellipse(455,145,55,35);
  ellipse(445,145,55,35);

The part I’m proudest of would definitely be the color-changing clouds. When I first read the assignment details, I saw that it didn’t ask for any interactive elements, which for me as a first-time coder was honestly relieving, but after spending some time experimenting with the mouseX and mouseY variables I came to realize that having something be “interactive” doesn’t mean that it had to be very complicated. I was initially going to make the background interactive but thought that making the clouds be able to change color to show “weather” would be more creative. I learned that the clouds weren’t going from black to white because the fill function was reading them as RGB, but I decided to keep it because I thought the changing colors made the background more creative. 

Embedded sketch:

Reflection:

From this assignment, I learned the basics of coding with p5.js, how to add shapes, how x and y values work, how to layer code so that it would overlap in the way I wanted it to, how to add color, and how RGB works. I personally found adding the eyebrows was the hardest, as the spline shape was the most complicated one out of them all, and I really had to understand how to configure the coordinates and how to increase or decrease them based on the shape I wanted. What became easier by the end was definitely the coordinates, because in the beginning I honestly was adding them at random, seeing how they would fit and adjusting to them, but after understanding the formatting it became easier.  

In the future, I would like to focus on adding even more details, such as hands and clothing details as well as trying to add more interactive elements to make my image more realistic and creative. Something I would want to add if I had more p5.js experience would be moving backgrounds and animation, as I feel like it would truly let the image become more interactive and let it come to life.