Author: Noura Alhosani

In Norman’s text, he argues for having a human-centered design, focusing on creating products that are simple and straightforward to use by aligning the design with what users need and can do. In context to that, one thing that drove me crazy (probably because I was really hungry) is how confusing digital appliances can be—like the air fryer I tried to use in the dorm. I expected it to be super easy, but instead, both me and Amna my sister, had to spend ages trying to figure out the functions because the instructions were just vague images and the digital display wasn’t clear. For someone who doesn’t cook often, it was frustrating to the point where I had to search TikTok to find out how to use it, and still it took ages to figure out as I had to find a similar Air fryer. To fix this, I think appliances like this should have built-in, interactive tutorials. Imagine turning on the air fryer for the first time and having it guide you step-by-step on the screen, showing you exactly how to use it. That way, you wouldn’t have to guess or waste time searching for help online.

In terms of applying Norman’s principles to interactive media, his ideas about affordances and signifiers would be super helpful. For example, in apps or websites, using clear icons or buttons that naturally show what they do would make everything easier to navigate. Also, feedback is key, like when you press a button, having a small animation or sound that lets you know the app is working on your request. It’s those little things that make the user experience smoother. Plus, having a simple design that allows users to quickly figure out how everything works without needing a tutorial, would make interactive media way more intuitive, kind of like how appliances should work right out of the box without you needing to look up instructions.

Concept:

For this assignment my main inspiration came from my niece, actually, during family lunch, she was playing around with a kaleidoscope, and i remembered how as a kid, I was so intrigued by them. I searched up inspirations and patterns online and i definitely wanted to try and create a design similar to a kaleidoscope. So i created jittery, dot shape that turns into this, flowy dot when you click on the mouse, just as how the shapes change when you rotate a kaleidoscope.

Reflection:

Honestly the code wasn’t as complex and was made up of mostly arrays, OOPS what we did in class mostly, and maybe next time i should try and be more complex with it and try new codes not taken in class, but I’m still very proud of the outcome. However, I did try sin and cos to create the waviness and jitter movements with the shape , which i got inspired from Amna’s previous code last week, and I’d say that’s the code I’m most proud of as it was something new to me that took some time to get right, but after reading about it on the P5 website, I figured it out, turns out it was just coordinates and using the function random to create those flowy movements, and this is the code that allows for the dots to then turn into wavy dots so it can then look like those squares when u click/toggle on the mouse, hence if I remove it the dots would just flow up and down or side to side instead of creating the square trail.

here is code im most proud of:

// Function to move the dot
move() {
  // Create two different movement patterns based on `flowDirection`
  if (flowDirection === 0) {
    this.x += random(-2, 2); // Random jitter in the x direction
    this.y += random(-2, 2); // Random jitter in the y direction
  } else {
    this.x += sin(this.y * 0.05) * 2; // Wavy movement based on the y-coordinate
    this.y += cos(this.x * 0.05) * 2; // Wavy movement based on the x-coordinate
  }

here is my sketch:

A strongly interactive system, as described in The Art of Interactive Design, goes beyond just reacting to user input; it creates an ongoing back-and-forth between the user and the system. Crawford talks about the system as “listening, thinking, and speaking,” meaning it responds in meaningful ways to what the user does. In my p5.js sketches, I want to improve user interaction by giving more immediate feedback and making the system react in a way that feels more real or personalized if that makes sense. For example, much like how in Minecraft your actions (building or destroying) immediately affects the world around you, like destroying the wrong block could lead to a flood, same with my designs, I want to make my sketches change and evolve with user input. Furthermore, instead of having a single click trigger a known/set action, I want the system to adapt and change based on the actions similar to how Spotify creates personalized playlists based on previous songs you’ve listened to. So basically, the previous user inputs influence the sketch’s future outcomes. I can also add depth by layering interactions, like having multiple variables such as colors, shapes, or movement change in response to user input, which I am implementing right now to my sketches and giving it a go, as I do believe it gives a more appealing look to the system. I also just found out, that you can add sound effects on P5, which I hope we get to learn that, during the semester, as I’m sure everyone can agree sound enhances any type of design. Hence, by incorporating these elements into my sketches and designs, I aim to create more interactive and engaging sketches that feel alive and responsive, aligning with Crawford’s vision of true interactivity.

CONCEPT:
For this assignment, my inspiration mostly came from Bill Kolomyjec’s art piece ‘Random Squares’.
‘Random Squares’ Bill

However, I wanted to add a bit of a twist and make it more chaotic or trippy in some sort of way. I’ve gotten the idea of the changing shapes depending on the area of the canvas from class and interpreted it into my design, which thankfully pulled the piece together. In addition, the crazy random colours definitely added to the effect of it being trippy at least I hope so. Moreover, it still felt a bit bland, and after watching Casey Reas’s video, I knew I needed to add something to make the piece seem more alive or organic, as he says. In doing so, I discovered a growing and shrinking factor, which, after some trial and error, I realized it was just a variable that I needed to create and then just adjust the shape size accordingly, and it turned out not so hard after all. This would probably be what I’m most proud of in the whole code.
Code that I’m most proud of:

/ Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;

function setup() {
  createCanvas(400, 400);
  frameRate(5);
}

function draw() {
  background("black");

  // sizeChange variable to create growing/shrinking effect
  if (growing) {
    sizeChange += 1;
    // If the size gets too large, start shrinking
    if (sizeChange > 20) {
      growing = false;
    }
  } else {
    sizeChange -= 1;
    // If the size gets too small, start growing again
    if (sizeChange < 0) {
      growing = true;
    }
  }

 

Reflection/Improvment:
Next time, I would love to have the shapes rotate, which is something I tried doing but unfortunately failed, I did watch videos on youtube but i still didn’t understand it so i decided to scratch that until i fully understand how it works. So hopefully next time!

 

My design:

 

My code:

// Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;

function setup() {
  createCanvas(400, 400);
  frameRate(5);
}

function draw() {
  background("black");

  // sizeChange variable to create growing/shrinking effect
  if (growing) {
    sizeChange += 1;
    // If the size gets too large, start shrinking
    if (sizeChange > 20) {
      growing = false;
    }
  } else {
    sizeChange -= 1;
    // If the size gets too small, start growing again
    if (sizeChange < 0) {
      growing = true;
    }
  }

  for (let x = 0; x <= width; x += 40) {
    for (let y = 0; y <= height; y += 40) {
      // Outer stroke for the shapes
      strokeWeight(3);
      stroke("black");
      // Right half of the canvas - enlarging and shrinking squares
      if (mouseX > width / 2) {
        for (let size = 30 + sizeChange; size > 0; size -= 10) {
          fill(random(255), random(255), random(255), 150);
          // nested squares
          rect(x + (30 - size) / 2, y + (30 - size) / 2, size, size);
        }
      } else {
        // Left half of the canvas - enlarging and shrinking circles
        for (let size = 30 + sizeChange; size > 0; size -= 10) {
          fill(random(255), random(255), random(255), 150);
          // nested circles
          ellipse(x + 20, y + 20, size, size);
        }
      }
    }
  }
}

 

In Casey Reas’ talk on chance operations, one of the most interesting ideas he explores is how randomness can act as a creative form in art. Reas shows how randomness can introduce unpredictability into structured digital systems, giving artificial creations a more natural and organic feel which he stated at the beginning of the video. Hence, made me think about how randomness is used in larger projects, like architectures and so on. For example, the designs of Expo 2020 or the Museum of the Future in Dubai bring together technology and creativity in a way that balances control with randomness, showing how both aspects can work together to create something that feels alive and evolving. Another thought that came to mind was how even small random changes can totally change the result of an algorithm. The “noise” is what keeps the system interesting, as he said without it, it’ll turn homogeneous and basically move in the same direction, which obviously isn’t exciting, and the system pretty much just becomes predictable. However, it also makes me think about things like how much randomness is good before it turns into chaos and when it stops adding to the art and starts taking away from it. One artist, for instance, Jean Tinguely, made “Homage to New York,” a machine that is meant to break itself. Yes, I get the idea of embracing chaos, but this amount of uncertainty makes it harder for me to connect. It’s too random for me to handle, and the lack of structure makes it difficult for me to connect personally with the piece. Still, I can see how some people might connect with Tinguely’s method, enjoying the randomness and how it shows how chaotic life is. In essence, too much chaos makes me feel disconnected, which shows that this type of art might not speak to everyone.

Homage to New York:

For this assignment, I decided to do a simple portrait as it was my first time coding. However, I did want to play around with the background and try new codes, so I decided to do a background that changes color at random when you toggle around the mouse. At first, I thought it was too hard, and it took me time to figure out the codes, but I watched some tutorials on YouTube and went over the presentations in class, and I finally figured it out and was definitely proud of the outcome. I honestly found it difficult to figure out the shapes and where everything goes, but the Mouse X and Y function was a lifesaver, and it was a matter of getting the hang of it. The hair, however, was my least favorite part as it was getting really confusing with the placements of each circle. Maybe there was an easier way instead of just repeating each circle in a different location, so hopefully, I will figure it out in the future. Overall, after a long process of figuring out each shape, size, and code I’m happy with the outcome.

here is the background code which I am most proud of:

let x, y, r, g, b;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  // background that changes color
  background(mouseX, mouseY, 100, 7);
  r = random(0, 255);
  g = 0;
  b = random(0, 255);
  x = random(0, 600);
  y = random(0, 400);
  noStroke();
  fill(r, g, b, 100);
  circle(x, y, 24);

here is my portrait!

here is the code:

let eyeRX = 170;
let eyeLX = 225;
let speed = 15;
let x, y, r, g, b;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  // background that changes colour
  background(mouseX, mouseY, 100, 7);
  r = random(0, 255);
  g = 0;
  b = random(0, 255);
  x = random(0, 600);
  y = random(0, 400);
  noStroke();
  fill(r, g, b, 100);
  circle(x, y, 24);
  print(mouseX + "," + mouseY);

  //neck
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  rect(200, 280, 70, 150, 100);

  //   left ear
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  circle(135, 177, 25);

  //   right ear
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  circle(264, 177, 25);

  // face
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  ellipse(200, 160, 125, 185);

  //nose
  noFill();
  arc(199, 183, 20, 15, 270, 90);

  // hair
  noStroke();
  fill(46, 28, 17);

  //  top hair
  circle(140, 60, 40);
  circle(183, 95, 40);
  circle(205, 88, 40);
  circle(160, 100, 40);
  circle(170, 50, 40);
  circle(200, 40, 40);
  circle(230, 50, 40);
  circle(233, 94, 40);
  circle(260, 60, 40);

  // More top curls
  fill(46, 28, 10);
  circle(160, 80, 40);
  circle(190, 70, 40);
  circle(220, 70, 40);
  circle(250, 80, 40);

  // Left side curls
  fill(46, 28, 17);
  circle(130, 90, 40);
  circle(120, 120, 40);
  circle(134, 135, 40);
  circle(142, 113, 40);

  // Right side curls
  fill(46, 28, 17);
  circle(270, 90, 40);
  circle(280, 120, 40);
  circle(262, 134, 40);
  circle(256, 115, 40);

  // eyebrows
  stroke(21, 19, 19);
  strokeWeight(2);
  noFill();
  arc(170, 135, 30, 10, PI, TWO_PI);
  arc(225, 135, 30, 10, PI, TWO_PI);

  //right eye
  fill(255);
  ellipse(eyeRX, 150, 20, 20);

  //left eye
  fill(255);
  ellipse(eyeLX, 150, 20, 20);

  //right pupil
  fill(51, 0, 0);
  ellipse(eyeRX, 150, 10, 10);

  //left pupil
  fill(51, 0, 0);
  ellipse(eyeLX, 150, 10, 10);

  //  mouth up
  strokeWeight(1);
  fill("pink");
  rectMode(CENTER);
  arc(200, 209, 30, 15, PI, 0);

  //   mouth down
  strokeWeight(1);
  fill("pink");
  rectMode(CENTER);
  arc(200, 209, 30, 15, 0, PI);

  //   lip line
  arc(200, 210, 27, 1, 0, PI);

  //shirt
  fill(126, 167, 189);
  noStroke();
  rect(200, 380, 199, 200, 50);

  //   shirt neck line
  fill(240, 190, 120);
  noStroke();
  arc(200, 280, 90, 80, 0, PI, CHORD);

  //   short neck shadow
  noFill();
  strokeWeight(8);
  stroke("#212E2D");
  arc(200, 280, 90, 80, 0, PI);

  noStroke();
  fill(64, 102, 122);
  triangle(128, 315, 135, 400, 150, 400);
  triangle(265, 315, 267, 400, 250, 400);
}