Author: Qoot Al Hamed

Concept and design:

For my midterm project, I want to create a game where the player has to repair a broken control system. The system’s memory and navigation are corrupted, so the player has to complete different challenges to slowly restore it. The game includes number-pattern questions, arrow-key navigation tasks, and a final stage with many moving colored balls where the player has to figure out what to do by paying close attention. The player also has a battery that starts at 100%, and wrong answers lower it. Visually, I want the same control-panel background to stay throughout the game so it feels like the player is working inside one damaged system.

User Interaction and Code Design:

The player will interact with the game using the mouse and arrow keys. I will use the mouse for choosing answers, pressing buttons, and selecting objects, while the arrow keys will be used for the navigation challenges. Hints will also be available when the player needs help. I plan to organize the code using different stages for each part of the game, such as the start screen, memory tests, navigation challenges, final challenge, win screen, and restart screen. In the final round, there will be many moving colored balls, and I want to use a class so that each ball can have its own position, speed, size, and movement.

For the background, I first looked at an image of a control panel to help me decide the overall style I wanted. I then sketched out how I wanted the screen to be arranged, after that I used AI to help create the final control panel image that I plan to use as the background for the experience, images I gave AI:

final image:

Risk Prevention:

One part I was unsure about was whether the scanner that suppose to help the user get the answer work well enough . Since the scanner is one of the main ways the player explores the screen, I wanted to make sure the movement felt smooth and that the user could control it easily. I tried making a small test sketch first where a circular scanner moves up, down, left, and right using the arrow keys. This helped me check that the interaction worked before adding it to the full experience.

Here is the code I used to test it:

Another risk I identified is that the final page with the moving balls could be too difficult for the player. I still want it to be challenging, but not impossible to figure out. To reduce this risk, I plan to make the answer noticeable enough if the player watches carefully, and I will also include hints they can use if they get stuck. However, using too many hints will lower the battery percentage.

This is how the start page will look like:

how the challenge questions will look like:

 

One of the differences I observed was basically the flexibility of human vision compared to computer vision. Generally, we are able to identify people, objects, and occurrences without really thinking about it that much, even when there is a change in lighting and backgrounds. On the other hand, computer vision is dependent on certain conditions and rules. This means that when there is an extensive change in lighting or an object merges with the background, then the computer will not be able to detect it effectively. The reading also helped me understand that computers do not interpret what they are seeing, they just analyze pixels, movement, luminosity and contrast. 

There is one method called background subtraction where the computer compares the current video with a picture of the empty background in order to find out what has been changed. As it was mentioned in the reading, “areas which are very different from the background are likely to represent objects of interest.” In other words, if there is a person appearing in the frame, the computer will be able to identify that some areas of the picture are different from the original empty background and that would make it easier to track its movement. 

I believe that computer vision enhances the interactivity of art since the art piece will interact with your actions in terms of position, movement, and other factors. But at the same time, it can feel a little weird due to the fact that it feels like you are being watched and tracked. I believe that computer vision adds individuality to the experience, since art pieces will react to the actions of each person individually. This brings out the idea of individuality, surveillance, and privacy.

Concept: 

My project is called the Beach Finder, it randomly creates items for the user to search for when they are at the beach. I came up with this idea because I visit the beach frequently, so I thought of making something related to what I love doing. The items, descriptions, and locations will be combined randomly in order to produce prompts such as “Look for a colorful seashell by the shore.” The user gets a different beach find each time they click on the screen, I also designed the sketch with fish, a surfboard, and beach colors to match the theme.

Final Sketch:

Code I am proud of:

// Puts the random words together into one sentence
  let message =
    "Find a " + description + " " + object + " " + place + ".";

I’m most proud of this part because it brings all the random words together to create the final beach prompt. I like how every time I click, the object, description, and place can change, so I keep getting different things to find at the beach.

// Picks a random row and splits the words at each comma
  singleRow = splitTokens(
      strings[int(random(strings.length))], ","
  );

  // Gets the object from that random row
  let object = singleRow[OBJECT];

I’m also proud of this part because it randomly chooses a row from my CSV file and separates the words using the commas. Then it takes the object from that row. I used this same idea for the description and place, which is what makes every beach prompt different when I click.

How I Made It:

I started by creating the design for my Beach Finder using blue as the background color, brown as the border of the frame, a surfboard, and fish in different colors. For the fish, I made an array of different colors and used a for loop to make the six fish rather than doing them one by one. Next, I made the CSV file containing three categories that were an object, a description, and a place. I used loadStrings() to load the CSV file and splitTokens() to separate the words using the commas. I used random() function to choose random objects, descriptions, and places and make a sentence such as “Find a colorful seashell near the shore.” I used noLoop() to keep the sentence on the screen, and mouseClicked() and loop() functions to generate a new sentence whenever the user clicks the mouse anywhere on the sketch. Lastly, I used the font called “Original Surfer” which I got from google fonts and thought fit the beach theme. Along with the title “BEACH FINDER” and a small instruction to let the users know they can click for a new beach find.

Reflection (problems and improvement for the future):

Problems I ran into:

One problem I ran into was making sure the random words from my CSV file always made sense together. As both the object, description, and the place were selected randomly, not all combinations resulted in logical sentences at the beginning. Some words were altered to ensure that the combinations actually made sense no matter what.

Another problem was that for some of the generated sentences, they were very long, so the words were going under the surfboard. In order to solve this issue, I added maximum width to the text by modifying the code from:

This: text(message, 90, 150); 

To this:  text(message, 90, 150, 330);

Here, the 330 sets a limit on how much the text can spread out, that’s why in case it is very wide the words move to another line rather than being written under the surfboard.

Also since all my code was inside draw(), the random generated sentence kept changing very quickly but I wanted my sentence to remain the same until the user clicked it. I fixed it by adding this at the end of draw():

// Stops draw() so the text does not keep changing
noLoop();

noLoop() stops draw() from continuously repeating, so the generated sentence stays on the screen.

And to actually make it change when I press with the mouse I had to add:

// Generates a new sentence when the mouse is clicked
function mouseClicked() {
  loop();
}

loop() allows draw() to run again when I click, which generates a new random sentence. Then noLoop() stops it again.

Overall, I’m satisfied with the result of my Beach Finder because I managed to combine the knowledge of generative text and relate it to the beach, which I like. It was fun for me to learn how to work with a CSV file using loadStrings(), splitTokens(), and random() functions to create sentences that change every time. I also enjoyed creating the visual part of the project and making it interactive. For my future projects of this kind, I would try to add more words and categories in the CSV file and create more combinations of sentences. Also, I would consider adding some interactions and animations to the beach setting.

References:

https://p5js.org/reference/p5/loadStrings/

https://p5js.org/reference/p5/splitTokens/

https://p5js.org/reference/p5/random/

https://p5js.org/reference/p5/textFont/

https://p5js.org/reference/p5/loadFont/

https://fonts.google.com/selection?preview.layout=sample&preview.script=Latn

The coding train – 2.4: random() Function – p5.js Tutorial

The coding train – 1.5: JavaScript String Object – Programming with Text

I used AI to help me notice that some of my randomly generated sentences didn’t make sense because the words were being mixed from different rows. It helped me adjust the words in my CSV file so that any random combination would still make sense.

I was trying to think of something I use daily, which causes me frustration, and I remembered my problems with my AirPods. There have been times where I wish to pair them to either my phone or laptop, but they get paired to a different device, leaving me wondering where the sound comes from or if they are even connected since the only way to tell whether your device is connected to something is by checking if sound is coming out. When connecting to AirPods there isn’t even an option asking me which device I intend to connect to, making me wonder how hard it is to incorporate an option asking you which device you would like to connect to, or even just telling me if its connected to another device that is not mine. Another issue is with AirDrop, where there are times where it does not work as expected and I have to switch it on and off, or restart my device while I do not know what the problem is. Reading Norman helped me understand the importance of an understandable design. A simple note telling me why my AirDrop didn’t work or what to do or telling me which device has the problem in it would have made everything easier.

The concepts that Norman presents can be used for interactive media projects by making them understandable without requiring any explanation. An interesting concept that Norman discusses is signifiers. Signifiers are basically clues that tell people what actions they are supposed to perform. Norman claims that “Signifiers signal things, in particular what actions are possible and how they should be done.” In my case, it means that I can make my p5.js project easy to use by making objects change color or form when the user places the mouse on them, or a short instruction of what to do. This way, they literally get an obvious signifier that tells them that the object is clickable. Another useful concept is the mapping concept. The way to use it in p5.js is by making sure that if you want to move something to the right, pressing the right arrow key will do that. It might seem obvious, but, again, this is the point that Norman makes, the design of the project should make it easy to use. I personally found this reading entertaining as it is easy to understand and applicable to everyday life. At the same time, it helped me notice the design aspects that I usually ignore since I focus a lot more on the visual of the project.

Concept 

The movie ‘Coraline’ was my inspiration behind this project. Particularly the tunnel that leads from Coraline’s real house to the other world. I liked the dark and mysterious vibe of the tunnel in the movie, so I wanted to get that in my sketch. I used dark purple and blue colors to match the mood of the movie, and I added rain to make the scene feel more eerie. I added the small pink house at the end of the tunnel, because it is such an important and recognizable piece of Coraline. I also made the tunnel expand and contract. So it feels as if you are being pulled deeper into the other world.

Inspiration for my tunnel:
Image from: https://tenor.com/view/coraline-blue-gif-21532661

*idea of how I wanted it to look like

Final Sketch:

 

Code I’m Proud Of:

The part of the code I am most proud of is the rain as it helped me use Object Oriented Programming in a way that made sense with my idea. I created a RainDrop class:

class RainDrop {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  move() {
    this.y = this.y + 5;

    if (this.y > height) {
      this.y = random(-100, 0);
      this.x = random(0, width);
    }
  }

  display() {
    stroke("#ebebeb");
    strokeWeight(2);

    line(
      this.x,
      this.y,
      this.x - 6,
      this.y + 18
    );
  }
}

In this part every raindrop becomes its own object. Each has its own x and y position, and methods that tell it how to move and how to look. Then I put all the raindrops in an array and used a loop to move and display them.

Another code I am proud of is the tunnel since I used an array of colors and loop instead of just drawing every layer separately.

for (let i = 0; i < 11; i++) {

  let w = 540 - i * 48 + tunnelSize;
  let h = 620 - i * 55 + tunnelSize;

  fill(tunnelColors[i % 3]);

  ellipse(200, 200, w, h);
}

This made the code shorter and let the tunnel animate as one whole shape.

Reflection:

Problems I ran into

I had trouble with the rain, since I was creating a new raindrop every frame, after a while there were way too many raindrops on the screen. I fixed this by limiting the number of objects added to the rainDrops array.

How it used to be:

if (doorOpen == true) {
  rainDrops.push(
    new RainDrop(
      random(0, width),
      random(-100, 0)
    )
  );
}

How it is now:

if (doorOpen == true && rainDrops.length < 100) { 
  rainDrops.push( 
   new RainDrop( 
    random(0, width), 
    random(-100, 0) ) ); }

Changing this basically meant that it should only add another raindrop if the door is open and if there’s fewer than 100 raindrops.

Another problem was getting used to object-oriented programming. Initially I understood how to draw rain with simple lines, but making each raindrop an object with a constructor, move() method and display() method was a little confusing. When I realized that the class was pretty much a template for every raindrop it all made much more sense.

As well as little mistakes with capitalization. I kept getting mixed up between uppercase and lowercase letters in my variable and class names and this meant parts of the code stopped working so I had to keep going back and checking that the names matched exactly.

Another change I did, I changed the colors of the tunnel so that the movement is more visible:

How it was:

How it is now:

Improvement:

Through trial and error I learned how useful loops and arrays are to organize code in this project. I could have repeated the same idea again and again, and kept the code more organized, instead of drawing each tunnel layer, each raindrop. I’m also happy with the interaction, as opening the door makes the sketch feel more like a connected piece to my Coraline inspiration, rather than just a static image.

If I continued working on it I would probably add different versions of the scene, like daytime, sunset or even a darker night scene so every time the door opens it could reveal different atmosphere, and adding more interaction to my sketches.

References:

https://p5js.org/reference/p5/mousePressed/

https://p5js.org/examples/Animation-And-Variables-Conditions/

8.1 class and objects – p5.js Tutorial

13: Basics of Arrays in p5.js: How to Code Generative Art

For Loop – Creative Coding with p5.js

I think a strongly interactive system would be a system that does more than just react in one simple way. In the reading written by Chris Crawford, he explains that interactivity isn’t always one level but actually can have different degrees, from high to low. One example he gave of strong interactivity is a conversation as it isn’t one way but both ways as both sides do the talking, listening, and responding. From this, I understood that in order for a system to have a high level of interactivity it should understand what the user is actually doing and give a response, so both ways. He also gives the example of low interaction which is the refrigerator light, because it only turns on when the door opens and turns off when it closes, yes, the fridge is responding so its interactive however only in a really simple way. I think if an interactive design is really strong it would respond in different ways depending on what the user does. It should also be able to change its response depending on the users actions instead of just always giving the same response. 

For my p5 sketches, I could improve the level of interaction by giving the user more control over what happens so instead of just having one same response each click I could use the mouse position or the movement to create different outcomes. For example, in my new sketch instead of only one click to open the door and keeping it there I would also add  another click to close the door. From this it would make my sketch feel more like a back and forth conversation between the user and the program rather just one straight simple reaction.

Concept

As I scrolled through the Computer Graphics and Art magazine one image stood out right away. The geometric patterns looked familiar. They reminded me of the rugs I had seen during my trip to Morocco. The repeated diamonds, the shapes, all of it reminded me exactly of that. That moment became the starting point for my project. I wanted to bring the clean repeated designs of early computer art with the rich patterns and colors of Moroccan rugs. Making it feel random but still clean and organized.

*from COMPUTER_GRAPHICS_AND_ART_Aug1977

*Image of a Moroccan rug

Final Sketch

Code I’m Proud Of

One part of my code that I am particularly proud of is using the mouse position to change between two different color palettes:

// LEFT SIDE = COOL COLORS
if (mouseX < width / 2) {
  background(180, 220, 245); // light blue

  outerColor = color(40, 70, 160);   // blue
  innerColor = color(100, 180, 220); // cyan
  diamondColor = color(120, 90, 200); // purple
}

// RIGHT SIDE = WARM COLORS
else {
  background(245, 210, 160); // warm beige

  outerColor = color(180, 50, 40);   // red
  innerColor = color(240, 120, 60);  // orange
  diamondColor = color(245, 180, 60); // yellow
}

I specifically liked this part of my code as it makes my artwork interactive but without changing the structure of the design. mouseX tells the progress where the mouse is horizontally. Width / 2 represents the middle of the canvas, so if the mouse it on the left side of the canvas which is behind the middle then the cool colors appear but if its ‘else’ which is basically after the middle of the canvas it will show the warm colors.

How Was This Made?

I used rect() to build the borders and small parts of diamond patterns then I used for() loops to repeat the shapes instead of putting each one manually. I also created my own diamond() function so I could reuse the same shape in different places, which was the diamond shape diagonally across. For the interactive part I used mouseX with an if/else statement to split the canvas into two sides. When the mouse is on the left the sketch changes to cool colors and when the mouse moves to the right the sketch changes, to warm colors.

Reflection and Ideas for Future Work

I really enjoyed how this project let me bring together something I saw while I was traveling in Morocco with computer generated art. It made me understand that even though these two things are from different places they can still have similar ideas, like repetition, geometry, symmetry and pattern. I also found out that simple shapes can become much more interesting when they are repeated and arranged in a certain way.

If I kept working on this project I would add movement and randomness to the shapes. I would like some of the diamonds or small rectangles to move or change a little. Adding some sort of movement could elevate it more and make it even more interesting as it would feel like it’s alive but without getting too messy. As well as if I were to add different geometric patters or more color combinations that remind me of Moroccan rugs.

Resources:

COMPUTER_GRAPHICS_AND_ART_Aug1977

YouTube videos: Patt Vira-for loop creative coding with p5.js, The Coding Train-2.1: Variables in p5.js (mouseX, mouseY) – p5.js Tutorial

After watching Casey Reas talk, it made me think deeper into randomness in art. At 27:25 Casey Reas says something in the lines of “somewhere in between here is the space from order to chaos.” This made me stop and think that randomness does not always mean completely uncontrolled, but instead that I can set the rules in my work and let parts of it change or behave unexpectedly.

I specifically found how he mixes structure with variation, what I mean by this is that he makes the shapes move or appear in ways that are so unpredictable but still it feels connected and put together because it follows a specific system. I loved that the work could look random but not messy.

This made me really think about randomness and that with a good system it could flow really well. I wanted my work to look organized but at the same time not predictable. So I used this idea mainly through the colors and shapes, so when I move my mouse to the left side the design changes to cool colors but if I moved it to the right side it changes to warm colors. I still control the colors which appear in both sides, so even if the appearance changes it’s still organized. As well as the shapes, I used repeated shapes and a clear pattern to give the design structure. I found out the best designs comes from a clear plan and then as I’m working I can leave space for unexpected changes but still making sure the final design looks intentional and not messy.

My Concept

For my self-portrait, I wanted to create something that represented me through the colors and details I chose. I used some of my favorite colors especially blue and purple throughout the background, shirt, hearts and stars. I also added sunglasses because they are my favorite accessory and I wanted that to be one of the main details that represented my personality.

I used p5.js to code the sketch and built the character using basic shapes like ellipse(), rect(), arc() and line(). I used ellipses for the head, hair, eyes and sunglasses, rectangles for the shirt, arms and neck and lines for details like the eyebrows and nose. 

Code I am proud of

let glassesY = constrain(mouseY,150,230);
ellipse(225, glassesY, 40, 30);
ellipse(275, glassesY, 40, 30);
line(245, glassesY, 255, glassesY);
line(205,glassesY -2, 190, glassesY-8);
line(295,glassesY -2, 310, glassesY-8);

This code I am particularly proud of , the sunglasses. I didn’t want to keep them in one fixed position, so I decided to have them move up and down with the mouse. I used mouseY to control their vertical position and constrain() to keep them within a certain range on the face. The line glassesY = constrain(mouseY, 150, 230); was particularly helpful because it links the mouse movement to the sunglasses. Then I used glassesY for the lenses and for the lines that represent the arms of the glasses. This meant that the whole pair moved along when the mouse moved, giving the portrait more interactivity.

How this was made

I used the p5.js v1 Reference as an external source to help me understand the different functions and how to use them correctly. I also used a little bit of AI to help me figure out how to connect the sunglasses to the mouse and make them move up and down. I tried the code myself and made the final edits to best suit my design. I used external Unicode symbols for the hearts and stars and added them into the sketch using the text() function.

Reflection and ideas

In this project I had to experiment a lot to create the perfect picture. I had to modify the position, size, color, and order of each individual shape to create the complete picture. I often made small errors in my coding, but fixed them to build a better understanding of p5.js.

This project, overall, taught me that coding can be a creative and flexible process. It was fun to see how a character could be developed with the use of simple lines and shapes. I found that making the sunglasses interactive really enhanced a personalized component to the project and made it more enjoyable. If I were to do this project again, I would spend time developing more features of the project. This would include adding more animations to the character which could include making the character blink, and developing more movement to the character and the additional animations in this project.