Author: Parmida Zahedi

For the main game, I reused the girl from the portrait sketch I created during the first week of class. I adjusted her proportions to fit the new layout, then added a body and clothing. I used mouse interactions to allow the player to change the clothing colours and recreate the outfit from memory. Reusing my earlier portrait helped me see how a simple sketch could develop into part of a larger interactive project.

 

Originally, the game screen looked quite empty, so I added vanity lights and furniture to make it feel more like a dressing room. I also adjusted the text placement to make the layout clearer and more balanced. I wanted to use this as an opportunity to practise classes, building on what we had learned earlier in the course.

BEFORE:

NOW:

I initially developed the welcome screen, instructions page, and game separately, then combined them into one sketch. The page variable controls which screen appears, while game start controls whether the player is memorising, choosing colours, or viewing the result. This helped organise the different parts of the experience.

The timer records the start of each round using millis(). After five seconds, the clothing returns to its starting colours so the player can recreate the outfit from memory. When the player clicks CHECK LOOK, the game compares each clothing colour with its target and awards one point for each match.

I wanted the controls to connect directly to what the player sees, so clicking a clothing item changes that item’s colour. I added hover effects to the main buttons to make them easier to recognise as controls. The countdown and score also communicate what is happening at each stage.

Code I was proud of

One part I am especially proud of is the moving light beams on the welcome screen. The code uses sin() to create a smooth back-and-forth movement and map()  to control how far the beams travel. Transparent triangles create the appearance of stage lighting, while randomly positioned circles represent camera flashes. I like how these different movements work together to make my runway feel more alive and connect it to my original fashion-show idea.

// Moving light beams
 lightMove += 0.02;

 let leftX = map(sin(lightMove), -1, 1, width / 2 - 240, width / 2 - 100);
 let rightX = map(sin(lightMove), -1, 1, width / 2 + 100, width / 2 + 240);

 fill(242, 235, 202, 40);

 

I am also proud of how I incorporated images and mouse interaction. Alongside the illustrated instructions background, I used a wand image that follows mouseX and mouseY to replace the normal cursor. Clicking directly on the model’s clothing cycles through three colour options. This makes the interaction connect to what the player is looking at, while the buttons change colour when hovered over to show that they are clickable.

I am particularly proud of being willing to go back and change my work. Moving from my original 600-pixel canvas to a full-window layout meant revisiting the positions of the model, backgrounds, text, and buttons. Using positions based on width/2 and height/2 helped me arrange elements around the centre. This process showed me that developing an interactive project involves returning to earlier decisions and adjusting them as the idea changes. It was very time-consuming, but it helped me understand coding more.

Challenges I faced

I initially designed everything on a 600-pixel canvas, so adapting the layout to fit the full screen was challenging. I had to adjust the sizes and positions of the elements across the different screens

The most difficult part was combining the three separate sketches into one game. Although working on each screen individually helped me organise my ideas, bringing them together was more challenging than I expected. Overall, the project gave me an opportunity to combine drawing, images, sound, animation, and mouse interaction while developing my original fashion-game idea into a memory game.

Usage of AI

Throughout the project, I returned to previous class examples to find techniques I could apply, including classes, images, and mouse press. I used AI to help organise the game setup, particularly the restartGame() function. This function records the start time, randomly chooses a color for each clothing item, and displays the outfit for the player to remember. It also resets the score and sets the game stage to “remember.” Working through this code helped me understand how one function can prepare both the first round and later rounds.The millisInGame() function tracks the five-second memorising period. Once those five seconds are over, the clothing colours reset and the player can begin recreating the outfit, taking as much time as they need.

I also used AI for help developing the game concept and connecting my separate sketches, which was the most difficult part for me. The transition code checks the current page and whether the mouse click falls inside the button’s boundaries. Clicking “START” changes the page from “welcome” to “instructions,” while clicking “NEXT” changes it to “game” and calls restartGame() to begin the memory game. Breaking these down helped me understand how the buttons control the order of the screens and why entering the game also needs to trigger the setup for a new round.

// WELCOME PAGE — START
  if (page === "welcome") {
    if (
      mouseX > width / 2 - 100 &&
      mouseX < width / 2 + 100 &&
      mouseY > height - 100 &&
      mouseY < height - 35
    ) {
      page = "instructions";
    }
  }

  // INSTRUCTIONS PAGE — NEXT
  else if (page === "instructions") {
    if (
      mouseX > width / 2 - 110 &&
      mouseX < width / 2 + 110 &&
      mouseY > height / 2 + 225 &&
      mouseY < height / 2 + 270
    ) {
      page = "game";
      restartGame();
    }
  }

  // GAME PAGE
  else if (page === "game") {
    // CHECK LOOK / PLAY AGAIN BUTTON
    if (
      mouseX > width / 2 - 110 &&
      mouseX < width / 2 + 110 &&
      mouseY > height - 60 &&
      mouseY < height - 15

// START OR RESTART THE GAME

function restartGame() {
  let now = millis();
  gameStartTime = now;

  // Choose the target outfit
  targetTop = floor(random(3));
  targetSkirt = floor(random(3));
  targetShoes = floor(random(3));

  // Show the target outfit
  topColour = targetTop;
  skirtColour = targetSkirt;
  shoeColour = targetShoes;

  score = 0;
  gameStage = "remember";
}

// Time since this round started
function millisInGame() {
  return millis() - gameStartTime;
}

I also used AI to generate images that matched the theme of my game. I took a screenshot of the first page, which I had designed myself, and used it as a reference when asking AI to create a fashion-show runway for the instructions page. I also asked it to generate a matching cursor image. Using my own design as the reference helped keep the colours and style consistent across the pages. I then incorporated these images into p5.js using the image techniques we

had learned in class.

Reflection

The final game keeps the fashion-show atmosphere of my original idea while giving the player a clear memory challenge. However, the score only tells players how many items they matched, rather than which ones were correct. Showing the target outfit after scoring would make the feedback more useful and give each round a clearer ending.

In the future, I would like to include multiple mini-games within the same fashion-themed project. The player could choose between the current memory challenge, a free dress-up mode, and a timed styling challenge. This would bring back some of my original idea while giving players different ways to interact with the model and clothing.

If I developed the game further, I would improve how the layout fits smaller screens, since centring elements does not automatically make everything fit. I would also add more visuals, for example, when the mouse moves over a clothing item, making the clickable areas easier to recognise. Another improvement would be to show the original outfit beside the player’s outfit after scoring, so the player can see exactly which colours they remembered correctly.

References:

Royalty-Free Background MusicFASHION-IDOL | Fashion Background music Royalty Free | Backg…​

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

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

https://beta.p5js.org/reference/p5/floor/

 

Before reading this, I thought computer vision was similar to human vision because both are able to see and recognize things, however, I realized that they are actually very different. Human vision is much more flexible and intelligent because we can easily recognize people, objects, movement, and understand what is happening around us without having to think about it. A computer, on the other hand, mainly sees pixels, colors, and brightness values. It does not automatically understand what these pixels mean, so it needs specific algorithms and conditions to be able to recognize things. Computers can also be affected by things such as lighting, colors, and the background, meaning that the environment needs to sometimes be designed in a certain way to help the computer see better.

There are different techniques that can be used to help computer vision detect and track things. One example is frame differencing, which compares different frames to detect movement. Another is background subtraction, where the computer compares the current image to a background and can identify what has changed or what has been added. Brightness thresholding can also be used to separate objects based on how light or dark they are. There is also object tracking, which allows the computer to follow the position of a specific object. I found it interesting that the physical environment can also be changed to make these techniques work better. For example, having a strong contrast between a person and the background can make it much easier for the computer to detect them. This shows that computer vision is not only about the code but also about how the environment is set up.

I think computer vision’s ability to track and use surveillance creates a lot of different possibilities for interactive media. It allows the artwork to respond to the person interacting with it, such as tracking their face, body, movement, or position. This can make the artwork feel more interactive because the person is not just looking at the artwork but is actually becoming part of it. I think this could make an experience more interesting and personal because the artwork can change depending on what the person does. However, I also think there is an important issue with privacy because the same technology that makes interactive media possible can also be used to watch and track people. This made me think about how there needs to be a balance between making an artwork interactive and making sure people are comfortable with being tracked. If people do not know that they are being recorded or tracked, it could make the artwork feel more like surveillance than interaction.

Overall, this reading showed me that computer vision is not the same as human vision and that computers need specific techniques and conditions to understand what they are seeing.  I think the use of computer vision in interactive media  depends on how the user chooses to use it and whether the technology is being used to create an interaction that is unique.

One thing from Don Norman’s “The Psychopathology of Everyday Things” that made me think about my own experiences is his discussion of discoverability. He said the two main things is understanding and discoverability. I realized that I often get frustrated in malls because I cannot easily figure out where I am or where I need to go. Many malls have maps, but they are not always in places where I can easily find them, and sometimes I still have to spend time looking around to understand which direction I should walk. This made me question what makes something technically available but still difficult to use. If a map exists but I cannot find it or understand it quickly, is it really doing its job as a design or not? Norman’s idea of signifiers also changed how I think about this problem. A better mall map could use clear signs, icons, and arrows to show me where I am and where I should go. An interactive mall map could make this even easier by allowing me to search for a specific store and showing me a route from my current location. This would also have feedback within it.

What stood out to me most is that Norman argues that good design should make things understandable rather than forcing people to figure them out through trial and error.  Norman mentions how everything is interactive; it’s just the degree to which it is. For example, he uses books and movies and calls them interactive. Before reading this, I usually thought that getting lost in a mall was just my own problem or lack of attention.  It makes me think differently about interactive media because I realize that even simple things like buttons, maps, and directions need to communicate clearly with the user. Overall, these principles can make interactive media more intuitive, easier to use, and less frustrating. There are signifiers that give users clues about how to use something. I did not really include these in my project last week. For example, I made bubbles appear when the user clicks the mouse, and the bubbles can be removed by clicking again. However, the user would not know that these interactions are possible because I did not provide any signifiers to guide them.

This week, we learned about text and data visualization. I wanted to create my data visualization around Marvel movies and their Rotten Tomatoes scores based on the year they were released. At first, I was planning to create a fashion-themed data visualization, but I could not find the data I needed, so I decided to move on to movies, specifically Marvel movies. My initial idea was to use different tomato sizes to display the Rotten Tomatoes scores of Marvel movies across different years. At first, my tomatoes were all displayed in a line, but I later decided to arrange them in a more random-looking way so the visualization would be more visually interesting.

Concept

My concept is to visualize Marvel movies using tomatoes, with each tomato representing a different movie. The tomatoes are placed along a timeline from 2008 to 2024 based on the movie’s release year. Each tomato’s size represents its Rotten Tomatoes critics score, so movies with higher scores have larger tomatoes. I looped through each movie in the CSV file and used the movie’s data to determine the tomato’s position and size. I also used different rows to organize the tomatoes and make the visualization easier to read. My goal is to create a simple and visual way to see how Marvel movies have been rated over time.

I first used the shapes and text that we learned in Lesson One to create the Marvel sign at the top and the timeline at the bottom. I then created a class for the tomatoes so that instead of using simple circles, the tomatoes appear on the canvas to represent the Rotten Tomatoes ratings.

After that, I uploaded my data in the form of a CSV file. When editing the data, I chose to include only three pieces of information: the movie name, the release year, and the Rotten Tomatoes score. The image below shows a snippet of the data:

Then I used let numRows = marvel.getRowCount (), which allows me to count how many rows or movies are in my CSV file. I then collected the release dates and Rotten Tomatoes scores from the CSV. I also used the Float function, which changes the values into numbers so JavaScript can use them for calculations. I then used the minimum and maximum Rotten Tomatoes scores to determine the size of each tomato. Finally, I used the movie’s release year to position each tomato along the timeline and created different rows so the tomatoes would not all overlap.

The code I was most proud of was

let x = map(year, 2008, 2024, 50, width - 50);

 let size = map(rottenTomatoes[i], rottenMIN, rottenMAX, 10, 80);

I was proud of this code because I was able to use the data from my CSV file to map out the tomatoes visually. The first line uses the movie’s release year to decide where the tomato should be placed on the timeline. The map function takes the years from 2008 to 2024 and changes them to fit across the width of my canvas, from 50 pixels to width -50. This means that movies released earlier are placed closer to the left side of the timeline, while movies released later are placed closer to the right side.

The second line uses the Rotten Tomatoes score to decide the size of each tomato. It takes the lowest and highest Rotten Tomatoes scores in my data and maps them to tomato sizes between 10 and 80. This means that a movie with a lower score will have a smaller tomato, while a movie with a higher score will have a larger tomato. I was proud of this because I was able to take actual data and turn it into visual elements, rather than just displaying the numbers as text.

Reflection

For next time, I would like to make my visualization more interactive by having the name of the movie appear when I hover over each tomato. I think this would make the data easier to understand because the viewer could see the Rotten Tomatoes score through the size of the tomato while also being able to identify the movie. One part of my code that I found difficult to understand was how the tomatoes could be placed into different rows. In particular, I did not fully understand the code :

for (let i = 0; i < numRows; i++) {
   let year = int(releaseDate[i].substring(0, 4));

and how the I was used to change each tomato’s position. I used AI to help me understand this part of the code and fix it, since the tomatoes originally appeared in a straight line and then moved randomly. In the future, I want to be able to understand and create this type of code more independently instead of relying on AI when I get stuck.

Reflection – Trying to embed the mouse press on names

I wanted to try and make the mouse press work so that when I clicked on one of the tomatoes, the name of the movie would appear. I first tried using mousePressed() to display a movie’s name when I clicked on its tomato, but I couldn’t get it working. I was confused about how to connect the mouse position to a specific tomato and its corresponding row in the CSV.

I used AI to help me understand how dist could check whether the mouse was close to a tomato’s centre and how getString could retrieve its movie title. My attempt used “Movie” as the column name, although the actual column was called “Title”.

Although I tried adjusting the code, the click interaction still did not work as intended. I later changed to a hover interaction that displays the movie title in a fixed position.

In response to the feedback, I worked on correcting the error and making the connection between each tomato and its movie clearer. I first increased the canvas from 600 × 600 to 800 × 700 pixels because the original layout felt too crowded. I then adjusted the text positions and added a description to help viewers understand the visualization and how to interact with it.

The old layout :

I added a hover interaction so viewers could identify the movie represented by each tomato. Initially, the movie titles appeared near the tomatoes, but some of the text overlapped with other elements and made the visualization harder to read. I changed the label from a position based on the tomato’s x and y coordinates to a fixed position. Now, hovering over a tomato displays its movie title in the same area of the canvas. I also changed the label to red and increased its text size to 20.

Texts overlapping :

 

 

 

 

 

 

 

These edits helped me think about how the layout supports the information being presented. The tomatoes communicate the scores visually, while the movie titles help viewers identify the individual films. Giving the title a consistent location makes the interaction easier to follow.

Current look of the data being represented:

AI description

I used ChatGPT to help me understand and debug the movie-title interaction. I was encountering errors and needed help connecting the titles in my dataset to the tomato objects. ChatGPT provided explanations and code examples, including a complete revised version of the two JavaScript files. The specific parts it helped me with were the data check, creating tomato objects with movie titles, and displaying a title when the mouse is near a tomato.

Specific code that AI was used for is the following. The first one was !marvel. I learned that this checks if the Marvel data is available. If it is not, return stops the rest of the draw function. This stops the code from trying to use data that is not there yet, but it does not fix a problem with loading the file.

if (!marvel) {
  return;

The next code I learned was that this creates a tomato using the position, size, and movie name. The x and y decide where it goes, and size decides how big it is. The movieNames[i] gives it the name of the movie from that row in my CSV. Then tomato.show() draws the tomato and checks if the mouse is over it.

This was where I had been getting an error because I was asking the code to show a movie name without having the data it in the tomato first. I needed to code the name into the file and store it as this.movieName so the code knew which name to show.

let tomato = new Tomato(x, y, size, movieNames[i]);
   tomato.show();

Lastly, I learned that the dist function checks how far the mouse is from the middle of the tomato. If the distance is less than half its size, the movie name appears. I used fill to make the text red and textSize to make it bigger.

At first, the names appeared near the tomatoes, but they overlapped with other things on the canvas. I changed the position to (360, 190) so the names would appear in the same place and be easier to read. I also learned that pop brings back the drawing settings saved by push, so these changes do not affect the rest of my sketch.

if (dist(mouseX, mouseY, this.x, this.y) < this.size / 2) {
    fill("#ff0000");
    textSize(20);
    text(this.movieName, 360, 190);
  }

  pop();

During the revision, I adjusted the canvas dimensions, text placement, and label appearance to make the visualization clearer.

Reference 

Interactivity basically means the user can do something and the media responds to them in a way involving thinking and things other than reaction, and interactivity is not a yes-or-no; it’s high and low and subjective to a degree. I think a strongly interactive system is one where the user can actively do something and see a response from the system. The user should feel like their actions matter, rather than just watching something happen. For example, in my p5.js sketch, the bubbles become interactive when I click the mouse because clicking creates a new bubble. I could make my sketch even more interactive by adding more ways for the user to control what happens. For example, I could let the user click on the fish to make them change direction, press different keys to change the background or add new animals, or move the mouse to control the bubbles. I could also add buttons that allow the user to change the speed or appearance of the objects. This would make the sketch feel more interactive because the user would have more control over what happens on the screen.Before reading this, I usually thought that getting lost in a mall was just my own problem or lack of attention.  It makes me think differently about interactive media because I realize that even simple things like buttons, maps, and directions need to communicate clearly with the user. Overall, these principles can make interactive media more intuitive, easier to use, and less frustrating.

Concept

For this project, I chose an ocean theme. I wanted something with movement and interaction, so I created fish and bubbles and experimented with waves.

I first started by creating waves using ellipses, playing around with the color and position to create the illusion of waves. I mainly used ellipses to create these shapes, allowing the waves to blend into the sea. Afterward, I added stones and seaweed to the bottom. Finally, I changed the color of the last row of ellipses to match the background color.

I worked on making interactive bubbles. This is where I started using the concepts from this week more directly, especially arrays, functions, and Object-Oriented Programming. I created an empty array called bubbles. An array is basically a list where I can store multiple things. Instead of creating a separate variable for every bubble, I can put all of my bubbles inside this one array.

I then created a class. This connects to Object-Oriented Programming because, instead of manually describing every bubble, I created a template for what a bubble should be and move. I then created different functions inside the class for what the bubble can do. The move function changes the bubble’s position every frame. This makes the bubble move instead of staying in one place. I wanted to limit how high the bubbles can move. So I added an if statement that checks whether the bubble has reached a certain part of the canvas. If it does, its speed changes direction, which makes it bounce. Through a show function, I was able to make the appearance of the bubble I wanted to include 3 ellipses to give the bubble a 3d illusion and make it more realistic.

To make the bubble interactive, I updated the code so it creates a new bubble every time the mouse is pressed. I also set the horizontal speed xspeed to 0, meaning the bubble will not move left or right. Finally, I set the vertical speed yspeed to 2, which allows the bubbles to move straight up and down instead of moving randomly. I also added a pop to remove the bubbles when pressing the keypad.

function mousePressed(){

  interactiveBubble = new Bubble(mouseX, mouseY, 0,2);
  bubbles.push(interactiveBubble);

After the bubbles, I created the fish. I wanted them to be colourful, so instead of making the fish one colour, I used multiple ellipses layered inside each other. For example, I used an ellipse for the main body and a triangle for the tail. Then I added smaller ellipses in different colours inside the body. At first, I had a stroke around all of the shapes, but I realized that this made the fish look messy because you could see the outline around each coloured section. I fixed this by using noStroke for the smaller coloured ellipses while keeping the stroke around the outside and the tail. This made the fish look cleaner.

I created two fish at different positions and gave them different speeds:

let bubbles = [];
let interactiveBubble;

let fish1X = 100;
let fish2X = 100;
let speed1 = 2;
let speed2 = 3;

Every time draw runs, the position increases by the fish’s speed. Since the draw function repeats over and over, the fish looks like it is swimming across the screen.

I also wanted the fish to keep swimming instead of disappearing when they reached the edge. Using an if statement, I was able to check if the fish has gone past the right side of the canvas. If it has, its position is moved back to the left side. This creates a loop where the fish continuously swim across the screen.

The scene combines continuous movement with interaction from the viewer. The fish are intended to swim across the canvas on their own, while clicking adds bubbles at the mouse position. This allows the viewer to contribute to the ocean scene rather than only watch it. The stones and seaweed form the seabed, while the layered colours of the fish and the highlights inside the bubbles add detail to the underwater setting

Code I’m particularly proud of:

The first new thing I tried was learning how to create waves using the sin() function from the p5.js reference. I used:

let y = 15 * sin(x * 0.1) + 5;

I learned that sin creates a smooth up-and-down movement, which makes it useful for creating waves. The 15 controls the amplitude, or how tall the wave is. The 0.1 controls how quickly the wave changes as x increases, which affects how spread out the wave is. The +5 controls the vertical shift, so it moves the whole wave down by 5 pixels.

I experimented with this by creating multiple waves and changing their positions, colours, and stroke weights. This was useful because I learned a new way to create movement instead of only moving objects from one position to another.

However, when I tried combining the waves with the rest of my project, I started getting errors, and some of my other code stopped working. Because of this, I eventually removed the waves from my final version. Even though I removed them, I still wanted to include them in my process because learning how sin works was something new I learned this week.

I learnt this using p5 tutorials: https://p5js.org/reference/p5/sin/.

I would also say this is the code I am most proud of, since it is something new I learned on my own and enjoyed very much. Next time, I would like to learn how to integrate this into my work.

Reflection

In the future, I would like to be able to mix different types of code and try to learn more code on my own. I would also like to add different types of code and designs into my work. For example, in this project, I could have added new animals that were less basic and more challenging to make and make them more interactive.

One challenge in this project was combining separate experiments into a single scene. I explored waves using sin(), but encountered errors when I tried to combine them with the fish and bubbles. I removed that experiment from the final version, so the sine-wave code shown above documents an earlier stage of my process rather than a feature of the final sketch. The ellipse-based shapes described in my concept were a separate approach to creating the appearance of water.

AI documentation 

I used ChatGPT while adding new code to my sketch, mainly to help me understand how to make the bubbles move up and down. This helped me understand the bubble’s movement, its vertical speed, and the conditional statement in the bounce method. I learned that the conditional checks whether the bubble’s y position is above 100 or below height – 100. This allowed for the bubble to bounce within a certain height.

bounce() {
  if (this.y < 100 || this.y > height - 100) {
    this.yspeed = -this.yspeed;

I also used ChatGPT to understand the sin() function and investigate why my wave experiment was not working when I combined it with the rest of the scene. Afterwards, I stayed back to discuss the problem with my professor. We identified the way the background was being redrawn in the draw loop as part of the issue. During the wave experiment, I also noticed that the fish were leaving previous images on the canvas instead of appearing to move cleanly.  I eventually removed the sine-wave experiment from the final version because I had not successfully combined it with the other elements.

I would like to become more independent with coding by testing smaller sections separately and understanding how they work before adding them to a larger sketch.

Reference

Before watching this weeks lecture, I thought randomness meant that something was completely uncontrolled and involved no human interactive but this reading changed my mind because I realized that randomness can actually be controlled through decisions and rules. I found it interesting how randomness can be used to create art and how adding a small amount of noise to certain rules and code can make it look better. I especially liked the example of Reas and his wife incorporating randomness into clothing because it showed me that interactive media and random art can be applied in everyday life, even to something as simple as clothing. This made me realize that randomness is used much more widely than I originally thought. It also made me think about my own work because I usually create things that are more repetitive and less random however I could add some randomness to my p5.js work to make the outcome more unique while still keeping the overall structure of my design.Also a key thing is that randomness can be mixed into different subjects, such as biology and embedded into daily life I didn’t expect it to be a option, and it was something that surprised me as I never taught of this.

I think the optimum balance between complete control and total randomness is somewhere is a mix and depends on the situation. I think having a purpose and knowing what want the artwork to look like, and then deciding where randomness could improve it. I think too much randomness could make an artwork look messy or take away from its purpose, while a small amount can make it more interesting and not overstimulating. However in the process 18 example the complete randomness did make the overall art work look good so the extent of randomness is depends on the case. I also think testing is important because you can change the amount of randomness and see what works best instead of trying to control every detail. This connects to the work we did this week because for example I repeated shapes as I was were creating using rules and loops, but adding random changes to the colors, sizes, or positions could create more variation. I don’t think complete control is given to the person creating it as the computer has a certain degree of control and thats what creates the art and randomness. Overall, the talk showed me that using randomness does not mean giving up control. Instead, the artist can control how much randomness is within the art and use it as another creative decision.

Concept

This week in class, we learned about conditionals, and I really wanted to incorporate this new concept into my assignment. One of the examples we looked at in class showed us how we could change color when the mouse interacted within a certain area of the screen; in that case, it was a square turning pink. I wanted to take this and make the color change happen across 50% of the screen.

My canvas is 600 x 600 pixels, so I knew that 50% of the width would be 300 pixels, and once the mouse went past 300, the colors would change, and if the mouse was before 300, the colors would change back. This created an effect where the colors appear to swap between the two sides of the canvas as i moved the mouse from right to left.

I also incorporated the last week’s colors and shapes we learnt, and I mixed that with this week’s for loop. I used the for loops to help with the squares repeating every 50 pixels; I did this with the + 50. This created a repeating pattern that filled the entire canvas. By combining the repeating squares with the conditional color change, I was able to create an interactive pattern that changes when I move the mouse.

Overall, I wanted my artwork to demonstrate new concepts we learnt this week, while also the inspiration behind the look of the artwork was from the computer graphics artwork I saw in the August 1977 issue of Computer Graphics and Art as seen in the figure to the left  . (Hertlein, 1977)

 

 

 

Code particularly proud of

// Left half
     if (x < 300 && mouseX < 300) {
       fill('#ed0763');
     }
     // Right half
     else if (x >= 300 && mouseX >= 300) {
       fill('#ed0863');
     }
     // original colour
     else {
       fill('#f41aba');
     }

I was particularly proud of this code as it enabled the color change to take place. In this code, it says when the mouse is on the left and the squares on the left side, then the color will change; however, if it’s on the right, change again, but if it’s neither it will stay the otherwise, keep the original color. This code also allowed me specifically to practice carrying out conditional code.

How this was made

I started by setting the screen to 600 × 600 pixels. Then I created a for loop, which allowed the squares to repeat across the screen every 50 pixels. Each grid uses nested for loops, and I also added conditional statements. The if checks if the square is on the left half of the screen, meaning its squares are positioned where the x is less than 300, and if the mouse is also on the left half. If both things are true, the square changes color. I did the same thing for the right half of the screen. I also added an else code so that when the mouse is not on the same side as the square, the square stays its original color.

My sketch uses two overlapping grids of squares. In the first grid, the squares repeat every 50 pixels horizontally and vertically. In the second grid, they repeat every 40 pixels. The squares in both grids are 25 × 25 pixels. Because the spacing is different, the squares sometimes line up and sometimes overlap, creating a more layered pattern.

AI documentation 

Reflection

In the future, I would like to create more complex designs, use different shapes, and incorporate animation, as that is something I did not do this time. However, I am overall impressed by how such simple code was able to create an interactive design. Next time, I would also like to learn how to repeat squares in specific parts of the screen instead of having them cover the whole screen. This would allow me to create more complex and interesting patterns.

Reference

Hertlein, G. C. (Ed.). (1977, August). Computer graphics and art (Vol. 2, No. 3). Berkeley Enterprises, Inc. https://doubleobelisk.s3.amazonaws.com/COMPUTER_GRAPHICS_AND_ART_Aug1977.pdf

 

// eyes
fill('#ffffff');
ellipse(250, 175, 40, 24);
ellipse(350, 175, 40, 24);
fill('#44382c');
ellipse(250, 175, 22, 22);
ellipse(350, 175, 22, 22);
fill('#090806');
ellipse(250, 175, 12, 16);
ellipse(350, 175, 12, 16);

This week in class, we learned how to use basic shapes, colors, and drawing functions in p5.js. I started my self-portrait by creating the face using an ellipse to make an oval shape. After that, I worked on the hair. I realized that the hair looked better when I put its code before the face, because this allowed the hair to be behind the face. I then changed the order of my code.

For the hair, I used an arc for the top part and a rectangle to fill in the rest of the hair. I chose a brown color and used a color code with the ‘#’ to allow me to select a specific color instead of guessing colors with the numbers. For the face, I added a skin-tone color and then created the eyes. I used three ellipses for each eye to create the white part, the brown eye color, and the black for the pupil. For the nose, I used two simple lines. For the lips, I used two arcs and a line in the middle to create the shape of the mouth. Finally, I used a rectangle to create the neck.

A piece of code that I am particularly proud of is the code I used to create the eyes. Although it was basic, I was proud that I was able to make them and experiment with different colors and eye shapes. It took a lot of trial and error to get them the way I wanted, but I was happy with the final result.

I used AI for a small amount of help with creating the lips and eyebrows through this I was able to solidify my understanding of the two_Pi feature. I needed help understanding how to use arcs to create the shape I wanted. Other than that, I did not rely heavily on AI. I understood the basic concepts we learned in class and used them to create the portrait myself.

Reflecting upon this week’s tasks, I enjoyed learning how to code shapes and colors through p5.js. I feel my work is very basic, but for a start, I think it is okay. It has given me ideas for future work and improvements. I would like to become better at placement and using numbers, as I tend to guess the numbers rather than calculate them. I would also like to learn how to add motion and movement within my code and work.