Author: Ibrahim Ahmad

In Chapter 1 of The Art of Interactive Design, Chris Crawford describes interactivity as a continuous loop with three steps: listening, thinking, and speaking. A system that truly engages users is one that doesn’t just react—it listens, processes input and responds differently based on type of the input.

The strongest interactive systems create a kind of “conversation” between the user and the program. It’s not just about clicking a button and getting a fixed response, but more about the system understanding the user’s input and adapting to it. For example, a simple calculator provides weak interaction because it only gives pre-programmed results. On the other hand, a video game provides a much richer experience by reacting to the player’s choices and strategies in real time.

To make my p5.js sketches more interactive, I could start by making them more adaptive to user behavior. My most important takeaway from the chapter is separating ‘participation’ as compared to ‘interactivity’. In my old sketches I have used ‘participation’ where no matter how the user approaches the system, the system outputs from a list of fixed effects. Moving to making my systems interactive would mean that any system I design would not just respond the same to each output but contain an algorithm that accurately digests the variability of inputs whether that is length, type of interaction, active or passive interaction and then react accordingly.

Instead of just reacting with basic changes like color shifts when the mouse is clicked, I hope to now build in more complex systems of interactivity in my sketches. For instance, if the user holds the mouse down longer, maybe the system reacts in a different manner. Or, I could design it so that the faster someone moves their mouse, the more dramatic the visual change. The more, the user thinks that not just their input matters, but their type of input matters as well, the more I will know I did a good job creating an interactive piece of media. By adding this kind of real-time feedback, the sketch can feel more dynamic and have deeper user involvement, a system of ‘inputs’, ‘processing’ and ‘outputs’, that Crawford would consider ‘interactive’.

Concept:

For this project, I viewed a lot of generative artwork created using P5.JS but the idea for my particular design did not click until I was watching a 3Blue1Brown, a math youtuber’s video on Dirichlet’s theorem. The theorem tries to explain how prime numbers create certain spirals, and the randomness of primes means you cannot accurately predict the pattern. Thus the idea of working with random spiral shapes was born. I decided to create a 6×6 grid of spirals, each generating a gradient of color for unique spiral shapes. I wanted to add a level of interactivity which I did by making the spirals spin when the mouse hovers over them (mimicking an electron’s spin and change of behavior when ‘observed’). Furthermore I made it so that any mouse click on a particular spiral, changed the direction of the spin.

Code I am particularly proud of:

A part of the code I am particularly proud of is the draw_ background() function that created a smooth gradient for the background. In plain white the sketch looked dull and uninteresting but I believe the new gradient background has allowed each spiral color to ‘pop’.

//this function draws the background gradient going from dark blue to pink
function draw_background() {
  let c1 = color(60, 120, 200);  // navy blue shade
  let c2 = color(255, 182, 193);  // light pink shade
  //loop through each pixel row to create the gradient
  for (let y = 0; y <= height; y++) {
    let gradient_color = lerpColor(c1, c2, y / height);  //finds an in-between color for each pixel depending on height in the sketch
    stroke(gradient_color);  // color for the current row
    line(0, y, width, y);   // draws a line of that color
  }
}

 

Final Sketch:

Reflections:

I am happy with the results of this assignment. It is visually interesting, pleasing to look at and interactive but I do believe there is room for improvement. Another level of interactivity I hope to add is the spirals changing colors when hovered over or maybe when clicked upon. Another idea I had was the spirals morphing into different shapes based on user movement across the canvas. Overall I believe this assignment sets up a good basis for further development of this seemingly simple idea.

Concept:

For this project I really wanted to experiment with geometry and adding chaos to a shape which is commonly deemed as stable, the humble rectangle. I chose to have the rectangles rounded and translucent to further add to the playful nature of the artwork. The randomness in size, color, and movement makes each play through unique, creating a sense of spontaneity every time the code runs. The fact that they only begin to move  when the mouse is hovered is meant to mimic the human ability to see art even if any isn’t there. If a tree falls in a forest and no one is there to hear it, does it still make a sound? (If your mouse is hovering over it, then sure)

Code Highlight:

The part of this code that I’m really proud of is the way the rectangles handle hitting the edges of the screen:

if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    //if statement checks whether mouse is inside the canvas by analyzing       x and y positions
    //if inside the canvas, the x and y values of each rectangle is changed based on its speed and direction value which was assigned in the setup function
    rect_object.x += rect_object.speed_x * rect_object.dir_x;
    rect_object.y += rect_object.speed_y * rect_object.dir_y;

    //this checks whether the object is hitting the horizontal border by analyzing if the left or right side of the rectangle have exited the canvas, it then reverses the rectangle's direction to ensure it stay on screen 
    if (rect_object.x <= 0 || rect_object.x + rect_object.w >= width) {
      rect_object.dir_x *= -1; // Reverse horizontal direction
    }
    //this checks whether the object is hitting the vertical border by analyzing if the top or bottom side of the rectangle have exited the canvas, it then reverses the rectangle's direction to ensure it stay on screen 
    if (rect_object.y <= 0 || rect_object.y + rect_object.h >= height) {
      rect_object.dir_y *= -1; // Reverse vertical direction

It’s a small section, but it’s key to making the animation feel fluid and continuous. Each time a rectangle hits a boundary, it bounces back in the opposite direction, keeping each rectangle within the bounds of the canvas. This adds to the randomness of their movement and ensures the canvas is not slowly emptied throughout a run.

Final Product:

Reflections:

Looking ahead, I think there’s a lot of potential to make this interaction even more engaging.  I want to add a feature where clicking on a rectangle changes its size or color. Another idea would be to incorporate deceleration/acceleration effects to make the motion more organic, and make it seem as if the rectangles have weight. I’d also love to experiment with sound or other visual effects that react to the movement, turning this simple animation into something that engages multiple senses.

Concept: 

For my self portrait I wanted to do something slightly unconventional. Joan Miro is an artist that I really like and I thus decided to do my self portrait in his unorthodox surrealist style. I wanted to have fun background elements commonly seen in his artwork such as the crescent moon and a star.

Something I’m proud of:

Something I’m proud of for this assignment are the random curves across the whole portrait, and especially drawing the crescent moon. These aspects took me the longest time to figure out and are thus the ones I am most proud of.

function details() {
  
  fill(255,255,0);//drawing a crescent moon shape by drawing two intersecting circles and having one of them be the color of the background
  //this effect makes it so that the second circle cuts the first one to make the moon shape
  noStroke();
  ellipse(150,630,100,100);
  fill(240, 248, 255);
  ellipse(170,630,100,100);

  //drawing the diagonal lines for the eyebrows
  stroke(0);
  strokeWeight(4);
  line(300, 300, 450, 400);
  line(500, 400, 650, 300);

  //drawing the yellow curve around the mouth
  noFill();
  stroke(255, 215, 0);
  strokeWeight(8);
  beginShape();
  vertex(250, 550);
  bezierVertex(350, 500, 450, 700, 550, 550);
  endShape();
}

Final Product:

Reflections:

I enjoyed working on this assignment quite a lot, it was a fun experience juggling between taking inspiration from Miro and then also trying to add my own personality into the portrait so I could make something I could be truly proud of. An aspect that I would like to work on in the future is adding some sort of interactivity maybe with eye movement or some background features morphing into others to further portray the dreamlike essence of Joan Miro.