Author: Noura Alhosani

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);
}