Author: Qoot Al Hamed

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.