Author: Nada Beltagui

What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

Something that drives me crazy is some of the dryers in the laundry rooms on campus, specifically the ones that don’t have a screen! How am I supposed to know when my laundry will be ready? This system could make sense if this machine was just used by one person in their house, and they could just check on the machine whenever (or maybe there’s some sound that plays when a cycle is done). However, for a machine that’s shared by a whole building, it’s so inconvenient that you kinda have to just guess when your laundry would be ready. And if you’re too late, your laundry might just be tossed on the floor! This can be blamed on either university facilities for purchasing machines that do not have screens (since a few do, it’s just some that don’t have screens) or we can just blame the machines, because why can’t I know how long my clothes will take? So the improvement from my perspective is to add a screen!

How can you apply some of the author’s principles of design to interactive media?

Instructions! But, simple ones. Ones that build on what user’s are used to. For example, users are now used to pressing on the right side of their screen to speed up videos as that is how you do it on TikTok, YouTube, and Instagram. Instead of trying to reinvent wheel, sometimes it’s best to use what already exists.

Your concept

I had many ideas for this assignment. When we saw the flight path visualizations in class, I was inspired to do something similar, focusing on maybe DXB and AUH airports. However, after looking through Kaggle, I didn’t find datasets that would really work for the ideas I had, and I didn’t have many idea on how to do a new kind of visualization. Instead, I decided to think about how I could include generative text and that’s how I came up with the idea I ended up doing! I love the Inside Out movie, so I decided to create a visual of the orbs that store her memories, and when the user presses on each orb, it displays that memory.

Embedded sketch

How this was made

The first thing I did was create the design for the orbs. At first, I was going to just import images for each color, however, I decided to explore the different features of p5.js and instead create them from scratch. I referred to a video by Patt Vira where she was actually creating a Gradient Screensaver, built from circles with gradient fill. I watched up till almost the half point of the video to understand how to create the gradient fill. I’ve included comments wherever I used code from her video. I customized the colors based on the colors of the emotions from the movie. At first, I had the colors randomized and were generated using a function. I was planning to repeat the same memories for multiple orbs since it wasn’t guaranteed that I’d have enough memories for the number of orbs generated from each color. After actually creating the csv file of the memories, I realized that there weren’t that many and decided that the number of orbs would be equivalent to the number of memories, and the color of each orb would match up with the emotions for each memory. To actually create this in code, I created an object that stored all the emotion names and the color for each one. Then, I had a function called when creating the orbs that would check what color each one should be based on the emotion it was assigned.

The other main bit of code in this is the interactivity of the user pressing on the orb and the text being displayed.  When creating the orbs, each orb is assigned a line in the csv file (an emotion and corresponding memory), so when the user selects a specific orb, it just shows whichever memory text was assigned to that orb. I also imported a font from Google Fonts to try to add my own touch to the text section.

A highlight of some code that you’re particularly proud of

// referred to yt vid: https://youtu.be/Mdt81-7-U18?si=Uzq8KlE-3FfifFLA
function drawOrb(orb) {
  let gradient = ctx.createRadialGradient(orb.x, orb.y, 0, orb.x, orb.y, orb.r);
  
  let rr = red(orb.c);
  let gg = green(orb.c);
  let bb = blue(orb.c);
  
  // make the center transpert and outer area solid
  gradient.addColorStop(0, `rgba(${rr}, ${gg}, ${bb}, 0)`);
  gradient.addColorStop(0.8, `rgba(${rr}, ${gg}, ${bb}, 1)`);
  
  // use gradient as fill for the circles
  ctx.fillStyle = gradient;

  noStroke();
  ellipse(orb.x, orb.y, orb.r * 2, orb.r * 2);
}

Despite using a video to do this section, I am still really proud that I explored something new to improve the aesthetics of my assignment!

Reflection and ideas for future work or improvements

Something I wanted to add, but didn’t have the time, was a glowing effect to kind of mimic how the orbs look in the movie. I think that’s a possible improvement that could make the sketch look more realistic to the inspiration.

Describe the overall concept of your artwork

The idea for my artwork came from a conversation with my friend, I felt that I wanted to start looking into gamifying my code and so she gave me the idea to do the snake game! I looked for photos online to kind of get an idea of what it would look like. Below is one of the photos that I used as inspiration.

This photo made the concept feel more approachable as I knew I could just use built-in shape functions for the snake, adding more as the snake gets larger. I did want to add some of my own touch so I decided to use fruit images for the food. I imported 4 pictures, orange, strawberry, apple, and banana, and randomly spawned the fruits for the snake to eat. Including an array in my code was easy as I used it to store the 4 images of the fruits. I also knew that I would use a class for the snake as it had many functions unique to it, however, I did struggle a bit to get started on the code for the class. I started by watching the videos on Classes by The Coding Train which helped me wrap my mind around the idea. I also found that he had a video where he coded the snake game as well, so I watched a bit of it and used his code as reference for a few of the snake functions. I also referred to the p5.js reference page to understand the built-in functions he used in his code, and also made some of my own edits and changes to the food aspect of the game.

Embedded Sketch

Use your arrow keys to move the snake!

What do you consider to be the characteristics of a strongly interactive system?

Building off of the author’s example of interactivity using a conversation (listening, thinking, and speaking), I would say for a system to be strongly interactive, the user has to intentionally cause this ‘interaction.’ I would also argue that the interaction should be something new or different to be a strong interactive system, for instance, pressing a button for the doorbell could be on the same level as the refrigerator light since it’s not a new idea. The user does it without really thinking about it. So by contrast, I would say games shown in the IM Showcase are good examples of a strongly interactive system as they usually use familiar forms of interaction for new situations, so for example, pressing a buzzer for a character to jump on the screen. I would say the characteristics of a strongly interactive system are 1) when there is some form of movement or change as a result of your action and 2) it is unique, unexpected, or different, i.e. done with intentionality. The more I think about this question, the more examples I think of from everyday life that I wonder whether they would be considered an interactive system.

What ideas do you have for improving the degree of user interaction in your p5 sketches?

For p5 sketches, the main way to impose user interaction are using the mouse and keyboard. So far, I’ve mostly used the mouse as a form of interaction to add some uniqueness to my sketches, and to kind of make the work not seem very 2d, but rather more interactive and allow the user to have some control. For this week, I also used the arrow buttons on the keyboard to add more interaction to my sketch (since it’s also a game). I hope to continue exploring more forms of user interaction that are unexpected and go beyond the scope of just the computer, maybe something to do with sound and hand movements. This would add a difference to the interactivity of my sketches as the user may be used to using the mouse and keyboard anyways.

Initally, I expected Casey Reas’ video to be more of a lecture-like talk about randomness and control, however, it was nice to see that his video consisted of a lot of examples as I prefer actually getting to watch, rather than just hearing about the ideas.  My favorite part of the examples was when he showed himself coding this maze-like images at the end. This is kind of where I started to find an answer to the balance between total randomness and complete control. He is in control of the shapes being drawn, but it’s up to the computer which shape is being drawn and when. However, it still created beautiful, unique pieces everytime. I’m excited to incorporate randomness into my work by kind of allowing the computer to ‘make the decisions’ for me when it’s minor things like where each box goes or what color each box is, but controlling the limits of these decisions. I also think another way of intrepreting randomness and control can be about controlling your own narratives for your work rather than following what the current trends are or what the preferred styles are. You insert randomness by being unexpected and doing what you prefer rather than what people might expect, and you gain control because you control the narrative.

While watching the video, I was just doodling on my iPad, and I feel like it’s a nice example of randomness (with a bit of control). 

Your concept

I was scrolling through the provided old computer art magazines for inspiration, and  I ended up liking the work Random Squares by Bill Kolomyjec from COMPUTER_GRAPHICS_AND_ART_Aug1977. I wanted to add my own touch to it, so I had two main goals, adding color and adding some kind of interaction with the cursor.

A highlight of some code that you’re particularly proud of

// this function makes a box dissapear when the cursor hovers over it.
function squareDissapear(xPos, yPos, size, offset) {
  
  let cellX = xPos - offset;
  let cellY = yPos - offset;
  
  // only active when mouse is within the canvas
  let mouseInside = (mouseX >= 0 && mouseX < width && mouseY >= 0 && mouseY < height)
  
  // true / false
  let hover = mouseInside && mouseX > cellX && mouseX < cellX + squareSize && mouseY > cellY && mouseY < cellY + squareSize;
  
  if (!hover) {
    square (xPos, yPos, size);
    return;
  }
  
  push();
  
  fill (220);
  noStroke();
  square(xPos, yPos, size)
  
  pop(); 
}

This is the interaction I ended up adding. When the cursor moves over a box, the box dissapears! I initally wanted to do some type of rotation but I wasn’t able to really understand how to use the functions correctly so as a comprimise, I landed on just doing dissapearing boxes as it was a bit simpler. Due to the way I did the loops to draw the boxes, it was still not very straightforward, so I did have to do some mental gymnastics to get it to work. However, I’m happy I was able to add this interaction, and it looks especially cool if you move the cursor over the preview screen quickly.

I did also add another interaction with the color changing. When the user clicks the mouse, the colors of all the boxes change!

Embedded Sketch

Click your cursor to change the color!

Reflection and ideas for future work or improvements

I enjoyed getting more creative for this work and taking inspiration from the works in the magazines provided. I would love to continue exploring generative art in my work and try to add more elements of interactivity. I definitely want to work on understanding the rotations and angles on p5.js so I can add that to my code.

Your concept

For my self-portrait, I had two main ideas I wanted to portray. First, I wanted to include something from Egypt. I landed on including the Pyramids as the background of the portrait. I really like how it looks and how it’s a subtle detail in the background that gets my idea across. The other detail I wanted to include some interactivity to do with taking off/putting on my glasses, since I recently started wearing contacts. I was showing my friend the self-portrait, when she gave me the idea to also change the background when I added the glasses, which I decided to incorporate. During the day, I included clouds as well as the sun in the background, at night, it’s replaced with stars and the moon (in addition to adding glasses on my face)!

A highlight of some code that you’re particularly proud of

// glasses
if (mouseIsPressed) {

strokeWeight(2);
fill(211, 211, 211, 100);
stroke("brown");
circle(305, 256, 50)
circle(378, 256, 50)

line (330, 253, 352, 253)
line(280, 253, 271, 246)
line(403, 253, 410, 246)
}

I’m proud of the code to add the glasses on my face. The code is pretty simple but I was excited to add something interactive to my code, so I like that the user can press to change up somethings in the portrait. After adding the glasses code, I added the code to change up the background (day/night).

// pyramids
  let s = color ("#D6BF6F");
  let c = color('#e2ca76');
  fill(c);
  stroke(s);

  // pyramid of khufu
  triangle(436, 400, 586, 166, 720, 377);
  
  // pyramid of khafre
  triangle(139, 390, 342, 40, 575, 400);
  
  // pyramid of menkaure
  triangle(0, 386, 147, 140, 298, 390);

I’m also proud of my code for the Pyramids, as simple as it may seem, it took me a while to get all the coordinates right. What I found especially helpful was using the cursor & printing the values of the coordinates to find where I should place each point of the triangles. I really like how the pyramids overlap over each other and I like that the outline becomes more visible at night.

Embedded sketch

How this was made

The first thing I completed was the Pyramids and sand in the background. Initially, I had place this code in the setup() function, rather than the draw() function, since I wasn’t planning to change the background. However, after deciding to have an interaction of changing the background between day and night, I moved the code to the draw() function. Throughout the code, the most helpful thing to figure out coordinates was definintely the print(mouseX, mouseY) line (which is commented out at the end of my code).

After completing the Pyramids, I started working on the actual portrait. I was a bit unsure on how I wanted to do my hijab, and I landed on an ellipse with a rectangle at the bottom. I also added a semi-circle with a rectangle at the bottom to mimic my body. For the face, I used ellipses, circles, semi-circles, triangles, lines, and rectangles, to complete all the features. Something that I found so tedious was the eyelashes. It was a bit to annoying to manually find the coordinates for each point on the line, especially since it was so small, so it took more time than I expected. I expected that drawing my eyebrows would be a bit difficult as I wasn’t sure how to draw a curve, and a line would’ve been too thin. However, after looking through the references, I realized I can just edit the stroke weight so that was helpful. The glasses were what I was most excited for in this portrait, and I love how they turned out since they look very similar to my current glasses.

The clouds, stars, sun, and moon were the last few details that I added. At first, I was struggling with getting the cloud shape correct as I was trying to do using an ellipse and the circles on the outside., but it didn’t look right. I decided to just find a YouTube tutorial and as soon as I started the video, I realized I was overcomplicating it for myself. I just used three circles for each cloud, the left and right circles are smaller and similar in size, while the middle circle is bigger than both circles. As for the sun, it was just a simple yellow circle, I just decided to add the transculent circle in the background as I thought it looked pretty. For the stars, I wanted to play around with the random() feature  so that each star would be randomly placed everytime the user pressed the mouse. However, it didn’t really go as expected as the stars were just moving around instead. I tried playing around with some functions but it didn’t really work the way I wanted so in the end, I just manually wrote around 10 random coordinates for each star. The moon was pretty simple, I just placed it at the same location as the sun but just made it a tad bit smaller.

Throughout the code, I mostly referred to the p5.js reference page and just trial-and-error to get everything looking the way I wanted. I also used Google to find hex codes for everything, as well as also just selecting directly from the color gradients.

Code

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

function draw() {
  
  // background is blue sky & sand at the bottom
  // sky
  if (mouseIsPressed) {
      background('#00022e')
  } else {
    background('#448ee4');
  }
  
  if (mouseIsPressed) {
    // moon
    fill("white");
    stroke("white");
    circle(601, 79, 130)
      
    color("white")
    strokeWeight(5);
    point(23,45);
    point(100,76);
    point(500,25);
    point(340,132);
    point(265,156);
    point(45,190);
    point(650,200);
    point(130,10);
    point(123,143);
    point(600,12);
    point(696,109);
    point(210, 63)
    point(462, 97)
    point(484, 148)
    point(318, 27)
    
  } else {
    // clouds
    fill("white");
    stroke("white");
    circle(75, 67, 60)
    circle(128,55, 80)
    circle(176, 59, 60)

    circle(275,111, 80)
    circle(337,110, 120)
    circle(407, 111, 80)

    // sun
    fill("orange");
    stroke("orange");
    circle(601, 79, 150)

    fill(255, 255, 0, 50);
    stroke(255, 255, 0 , 50);
    circle(601, 79, 170)
  } 
  
  // pyramids
  let s = color ("#D6BF6F");
  let c = color('#e2ca76');
  fill(c);
  stroke(s);

  // pyramid of khufu
  triangle(436, 400, 586, 166, 720, 377);
  
  // pyramid of khafre
  triangle(139, 390, 342, 40, 575, 400);
  
  // pyramid of menkaure
  triangle(0, 386, 147, 140, 298, 390);
  
  // sand 
  // i added the code for the sand after the pyramids to cover the bottom outline of the pyramids
  fill(c);
  stroke(c);
  rect(0, 389, 700, 600);
  ellipse(118, 388, 264, 20);
  ellipse(263, 429, 500, 100);
  ellipse(577,400, 264, 50);
  ellipse(646,400, 400, 60);
  
    strokeWeight(1);
  
    // hijab 
    let h = color("#808080");
    fill(h);
    stroke(h);
    ellipse(340, 310, 200, 280);
    rect(241, 335, 198, 100);
  
    // face
    let f = color("#f3c37e");
    fill(f);
    stroke(f);
    ellipse(340, 290, 150, 210);
    
    // eyes
    fill("white");
    stroke("white");
    ellipse(305, 256, 40, 15);
    ellipse(378, 256, 40, 15);
  
    fill("#371d10");
    stroke("black");
    circle(305, 256, 15);
    circle(378, 256, 15);
  
    // eyelashes
    line(292,250,289, 243);
    line(297, 248, 295, 241);
    line(302, 247, 301, 240);
    line(307, 247, 307, 240);
    line(312, 248, 313, 240);
    line(317, 249, 319, 242);
  
    line(366, 249, 362, 242);
    line(370, 248, 369, 240);
    line(375, 248, 374, 240);
    line(380, 249, 380, 240);
    line(384, 248, 386, 241);
    line(388, 249, 392, 242);
  
    // eyebrows
    strokeWeight(8);
    line(320, 230, 294, 228);
    line(282, 234, 294, 228);
  
    line(360, 230, 388, 228);
    line(398, 234, 388, 228);
  
    strokeWeight(1);
    
    // nose
    fill ("#DAB073");
    stroke("#DAB073");
    triangle(331, 311, 340, 280, 350, 311);
  
    // body
    let b = color("#800080");
    fill(b);
    stroke(b);
    arc(340, 490, 210, 150, PI, TWO_PI);
    rect(235, 490, 210, 110);
  
    // mouth
    fill("#a90830")
    stroke("#a90830")
    arc(340, 328, 85, 80, 0, PI);
  
    // teeth
    fill("white")
    stroke("rgb(240,235,235)")
    rect(305, 328, 9, 10);
    rect(314, 328, 9, 10);
    rect(322, 328, 9, 10);
    rect(331, 328, 9, 10);
    rect(340, 328, 9, 10);
    rect(349, 328, 9, 10);
    rect(358, 328, 9, 10);
    rect(367, 328, 9, 10);
  
    rect(324, 357, 9, 10);
    rect(334, 358, 9, 10); 
    rect(343, 358, 9, 10);
    rect(353, 356, 9, 10); 
  
    // glasses
    if (mouseIsPressed)  {
    
      strokeWeight(2);
      fill(211, 211, 211, 100);
      stroke("brown");
      circle(305, 256, 50)
      circle(378, 256, 50)

      line (330, 253, 352, 253)
      line(280, 253, 271, 246)
      line(403, 253, 410, 246) 
    }
  
    // print(mouseX, mouseY);

}

Reflection and ideas for future work or improvements

Overall, I’m proud of my work, and I hope to continue improving in p5.js, especially when it comes to smaller details and learning to use more shapes (such as curves and quadrilaterals). I’m really happy I was able to add interactivity, and am especially happy with how the background turned out, and I hope to continue learning how to work with all the interactive features.

I do think there’s a lot of room for improvement in my work. I would love to work on the hijab in my portrait and try to make it more realistic. Additionally, I would’ve liked to have more realistic facial features which I hope will become easier the more familiar I become with p5.js.