Author: Qoot Al Hamed

Final sketch:

Play my game here: Sketch

Concept

For my midterm project, I created a game where the player has to repair a broken control system by completing five different challenges. The system’s memory and navigation are corrupted, so the player has to solve number patterns, use arrow keys to locate hidden signals, and complete a final challenge with moving colored balls to find the bug. I also added a battery system that starts at 100%, where every wrong answer lowers it by 20%. If the battery reaches 0%, the system shuts down and the player has to restart.

My inspiration came from the game “Among Us”, and specifically from the missions which included repairing various systems of the ship such as wires. The game had many interactive small tasks that had a connection to one common purpose. But I did not want to create a similar type of challenge and preferred to concentrate more on the logical tasks, patterns and observation. For example, my game has puzzles with numbers, detecting hidden signals by pressing arrow keys and noticing a ball which is moving differently compared to others. There is also a battery system to penalize the player in case of an error. In order to make it seem like repairing one system rather than playing mini-games, there is the same control-panel background used all through the gameplay.

On the left are some tasks I screenshotted from Among Us. As you can see, they are quite simple, like connecting colored wires to their matching colors or clicking a button to download files. I liked the idea of fixing something through different tasks, but I wanted my own game to be a little more challenging.

 

Visual improvements:

I added a transparent black layer over the background so the colors wouldn’t be too bright and the text would be easier to read.

Before:

After:

 

I also added a black box behind the hints so that they can be more visible:

Before:

After:

How it works 

The game starts with a system failure screen that explains what happened to the machine and what the player needs to do. Once they press Start System, they begin completing the challenges one by one. The first two challenges focus on number patterns, where the player either chooses the correct answer or types it into an input box. The next two challenges use the arrow keys to locate hidden signals by following the signal strength and proximity percentages. I wanted the final challenge to be a little harder than the others because it requires more observation and patience. There are many moving colored balls, but only one is different. The player has to pay close attention to notice this difference and click the correct ball, which is basically the “bug” causing the system to fail. I also added a hint button to help players if they get stuck, but every three hints reduce the battery by 20%, so they have to decide whether they want help or try to figure it out themselves.

The game begins with a system failure message explaining what has happened to the machine and what the user should do to fix the problem. After the player clicks Start System, they will start to work on the problems, one after another. The first two problems are based on number patterns, where the user can either select the right answer from a few choices, or simply type in the solution on the provided input area. The following two challenges are solved using the arrow keys to find hidden signals based on the percentage of strength and proximity of the signals. So for the final challenge I thought that the it should be slightly more difficult than the rest since it demands greater attention and observation. There are many colorful moving balls, and only one of them is different. The user has to find this difference and click on it, which is actually the bug causing the system to crash. Also, there is a hint button for those who need help. Every third use lowers the battery by 20% to make it more challenging. 

What I am proud of:

One part of my project that I’m especially proud of is the final challenge with the moving colored balls. I wanted this challenge to be a little harder than the others because the player has to pay attention instead of just answering a question. To create this, I used a class called Ball to give each ball its own position, size, color, and movement. I then used a for loop to create 40 balls and stored them in an array. What I liked most was using random() to select one ball as the bug and sin() to make it slowly grow and shrink. This made the final challenge more interesting because the player has to observe the balls carefully to find the one that behaves differently.

Code I used to create the 40 balls and randomly select the bug:

//creates the balls
function createBalls() {
  balls = [];//empties the array before creating new balls

  let colors = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93", "#f28482", "#84a59d", "#f6bd60"];

  for (let i = 0; i < 40; i++) {//loops 40 times to create 40 balls
    balls.push(new Ball(//creates a new ball and adds it to the array
      random(40, 560),//gives the ball a random horizontal position
      random(210, 345),//gives the ball a random vertical position
      random(14, 22),//gives the ball a random size
      random(colors)//chooses a random color from the colors array
    ));
  }

  bugBall = random(balls);//randomly chooses one ball to be the bug
  bugBall.isBug = true;//marks the chosen ball as the bug
}

Code I used to make the bug ball grow and shrink:

display() { //method that draws the ball on the screen
  let currentSize = this.size; //sets the ball's normal size

  //only the bug grows and shrinks
  if (this.isBug) {//checks if this ball is the bug
    currentSize = this.size + sin(frameCount * 0.05) * 3.5;//makes the bug slowly grow and shrink
  }

  noStroke();//removes the outline
  fill(this.c);//fills the ball with its assigned color
  circle(this.x, this.y, currentSize);//draws the ball at its position and size
}

This is a method inside my Ball class. I used this.isBug to check whether the ball is the special one, and sin() to make its size change smoothly. I’m proud of this because I was able to use different programming concepts together to create a challenge that fits the story of my game.

Another part I’m proud of is the sound ON/OFF switch that I added to the top-right corner of the game. I wanted players to have the choice of listening to the audio or turning it off while playing. I used a Boolean variable called soundOn to keep track of whether the sound is enabled, and an if statement to change the button’s text and color. When sound is on, the text appears green, and when it’s off, it appears red. I also created a separate function called toggleSound() to control when the audio plays or stops. I like this feature because it gives the player more control over their experience.

Code I used to turn the sounds on and off:

//turns the sounds on or off
function toggleSound() {//controls the audio in the game
  soundOn = !soundOn;//switches sound from on to off or off to on

  if (!soundOn) {//checks if the sound is turned off

    //stops the intro sound
    if (introSound && introSound.isPlaying()) {//checks if the intro audio exists and is playing
      introSound.stop();//stops the intro audio
    }

    //stops the game music
    if (gameSound && gameSound.isPlaying()) {//checks if the game music exists and is playing
      gameSound.stop();//stops the game music
    }

  } else {//if the sound is turned on

    //plays the game music again
    if (stage >= 1 && stage <= 5 && battery > 0) {//checks if the player is in a challenge and still has battery
      if (gameSound && !gameSound.isPlaying()) { /checks if the game music exists and is not already playing
        gameSound.play();//plays the game music
      }
    }
  }
}

I used soundOn = !soundOn to switch the Boolean value between true and false. I also used conditions to check whether an audio file was already playing before stopping or starting it. 

Problems I ran into:

A problem I had was to make sure that the typing box in the second memory challenge would work properly. Initially, the problem was that nothing could be typed since my keyPressed() method prevented any keyboard inputs from being registered. However, I solved it by making sure that if the player is currently at the second challenge and chose to input something, they will be able to do so without affecting other keyboard inputs such as the arrow keys.

Before – My original keyPressed() function ended with return false;, which interfered with typing in the input box.

//keyboard interactions
function keyPressed() {

  //press q to enter or exit fullscreen
  if (key == "f" || key == "F") {//checks if the player pressed q or Q
    toggleFullscreen();//switches fullscreen on or off
    return false;//prevents the key's normal browser action
  }

  if (battery <= 0 || showCorrect) return false;//ignores keyboard actions if the game is over or showing CORRECT

  //navigation 1
  if (stage == 3 && key == " ") {//checks if the player pressed Space during navigation 1
    let signalDistance = abs(scannerX - targetX);//calculates the distance between the scanner and hidden signal

    if (signalDistance < 20) {//checks if the scanner is close enough to the hidden signal
      correctAnswer(4);//shows CORRECT and prepares navigation 2
    } else {
      wrongAnswer();//reduces the battery if the scanner is in the wrong position
    }
    return false;//prevents Space from doing its normal browser action
  }

  return false;//prevents default keyboard actions for other keys
}

I added this condition at the beginning of keyPressed():

//lets the user type in the second challenge

if (stage == 2 && input && document.activeElement == input.elt) {//checks if the player is typing in the input box

  return;//allows normal typing and stops checking other keyboard actions

}

This allows the player to type normally when the input box is selected, while the other keyboard controls still work.

Another problem I faced was ensuring the game could transition properly from one challenge to another. Initially, transitioning from one stage to another would instantly take the player to the next challenge without giving any kind of feedback on the completion of the challenge. To fix this issue, I used showCorrect, nextStage, and millis() so that a message reading “CORRECT” would appear for a second before moving to the next challenge.

This saves which challenge comes next and starts the timer:

//correct answer
function correctAnswer(newStage) {//controls what happens after a correct answer
  showCorrect = true;//shows the CORRECT message
  correctStart = millis();//stores the time when the player answered correctly
  nextStage = newStage;//stores which challenge comes next
}

This shows the correct answer screen for 1.2 seconds before moving to the next challenge:

if (showCorrect) { //if showCorrect is true
  drawCorrectScreen(); //shows the CORRECT message

  //waits 1.2 seconds before moving to the next challenge
  if (millis() - correctStart > 1200) {
    showCorrect = false; //stops showing the CORRECT message
    stage = nextStage; //moves the player to the next challenge
  }

  drawBattery(); //shows the battery percentage
  drawSoundButton(); //shows the sound on and off button
  pop(); //restores the original drawing settings
  return; //stops the rest of draw() from running this frame
}

What I have done is introduced a correctAnswer() function which uses the showCorrect() function to output a notification when the user gets the answer right. Also, I have made use of the millis() function to determine how long it takes and nextStage which contains the next stage of the challenge. In the draw() function, I added a condition which allows the stage to change after 1.2 seconds.

Areas for improvement:

One area I would like to improve is the feedback and sounds within the game. I would like to add the sound effect for both right and wrong answers, as well as some special effect for transitioning from one challenge to another. As well as making the puzzles more diverse if the user will try to play this game several times. As far as I see the game is quite effective, so just these minor adjustments and improvements would make the game better and more enjoyable. Overall, I am really pleased with the results of my project because I am proud of the idea that I have developed. It is unique and interesting to me, and I also like the fact that all the challenges are related to the theme of system repair.

References

Changing between game screens:

https://editor.p5js.org/Aya_Riad/sketches/bXwvUEEpz

Creating the typing box and Submit button:

https://editor.p5js.org/Aya_Riad/sketches/bSPV3s-UD

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

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

Changing the screen size:

https://editor.p5js.org/Aya_Riad/sketches/vgp-dlvea

Timing the CORRECT message:

https://editor.p5js.org/Aya_Riad/sketches/qZsp9Qete

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

Loading and playing sounds:

https://editor.p5js.org/Aya_Riad/sketches/dXHs6td4Y

https://editor.p5js.org/Aya_Riad/sketches/XyXDfPmE4

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

Random movement and keyboard interactions:

https://editor.p5js.org/Aya_Riad/sketches/h1DlwZwph

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

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

Font:

https://fonts.google.com/specimen/Bitcount+Ink?preview.layout=sample&preview.script=Latn

Audios:

https://pixabay.com/music/search/system%20startup/

https://pixabay.com/music/search/electrical%20short%20circuit/

Videos:

https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/2-variables/5-map

https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/7-arrays/4-mouse-interaction

https://thecodingtrain.com/tracks/sound

https://thecodingtrain.com/tracks/p5js-2.0/p5js-2.0/async-await

https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/5-functions/2-arguments

https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/6-objects/3-constructor

Use of AI:

I used ChatGPT to understand why the typing box in my second memory challenge wasn’t working. At first, I couldn’t type anything into the box, even after clicking on it. I tried checking the input box settings, but the problem continued. I asked ChatGPT to explain what might be causing this, and it helped me understand that the return false; at the end of my keyPressed() function was blocking normal keyboard input. It explained that I could add a condition to check whether the player was on stage 2 and had selected the input box. I then added this condition at the beginning of keyPressed() so the player could type normally while keeping the other keyboard controls working.

I also used it to understand why my second audio file wasn’t working. At first, I had two audio files, StartAudio.mp3for the introduction and AllGame.mp3 for the challenges. The first audio worked, but the second one wouldn’t play when I pressed START SYSTEM. I first tried checking whether the audio file was uploaded correctly and whether it had finished loading, I even uploaded it more than once but it still didn’t work. I also tried reducing the file size because I thought it might be taking too long to load. When that didn’t solve the problem, I asked ChatGPT what else could be wrong. It explained the difference between .loop()and .play(), where .loop() repeats the audio and .play() plays it once. I then tried changing gameSound.loop() to gameSound.play() in both my mousePressed() and toggleSound() functions to see if that would help and it did, so yeah it was a really simple fix that took way too long.

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.