Author: Mikaela Jonbenet Mariño

I think a strongly interactive system is one where users feel like their actions genuinely matter and produce meaningful responses. The interaction goes beyond just getting any reaction, and to actually getting responses that feel thoughtful and varied based on what you actually do. A strongly interactive system gives you agency almost like you feel like you’re having a conversation with it rather than just triggering pre-programmed effects. The fridge light example really clicked for me here. Sure, the light turning on is necessary for seeing inside, but what would make it strongly interactive is if different lights indicated whether the fridge is full, running low on food, or out of ice. That kind of communication transforms a basic function into something that actually responds to your needs in a meaningful way.

Honestly, I’ve been prioritizing aesthetics way too much with my designs, and I want to flip that relationship entirely. I want interaction to be the main focus, with visuals supporting it rather than the other way around. I also really want to give users actual choice in what they interact with. I could add memory too, where the sketch remembers your previous interactions and elements behave differently based on that history. I want the goal is to surpass just making pretty things that happen to be clickable and instead create experiences where meaningful interaction is actually the heart of the piece.

Concept

I was inspired by candy hearts (as seen below) during Valentine’s Day, which is coming up soon. I wanted to recreate the soft colors and heart shapes of the candy hearts while adding movement and interactivity. So, my final sketch has hearts float and bounce around the screen, and when you click, it changes colors (but still within the color palette I’ve chosen).

My Final Sketch!

Code that I’m Proud of

// hearts' colors selection
getRandomColor() {
  let colorChoice = int(random(4));
  
  if (colorChoice == 0) {
  return color(255, 200, 220);
} else if (colorChoice == 1) {
  return color(220, 200, 255);
} else if (colorChoice == 2) {
  return color(200, 230, 255);
} else {
  return color(200, 255, 220);
  }
}

changeColor() {
  this.col = this.getRandomColor();
}

I particularly liked how I structured the changeColor() method and the color selection system. I created dedicated method that randomly picks from my chosen pastel palette and learned how conditional statements work with color from Patt Vira’s tutorial on YouTube and w3schools’ Statement Reference page. Each time you click, all hearts get new random colors from this palette.

How this was made

I used Object-Oriented Programming with a Heart class in which, each heart object has properties like position, size, color, and movement. I also used an array called hearts[] to store and manage all the heart objects. In the setup() function, I create each heart with random positions and sizes using a for loop, then push them into the array. In the draw() function, I loop through the array to call move() and display() on each heart every frame, which creates the continuous animation. The move() function makes the hearts bounce around. It updates position by adding speed values to the coordinates. When a heart hits a canvas edge, the function reverses its direction by multiplying the speed by -1 and makes it bounce back. This keeps hearts moving continuously without leaving the screen. For the heart shape itself, I used a parametric equation I found from this YouTube tutorial. The equation uses sine and cosine functions to plot the mathematical curve of a heart shape.

Reflection and Future Improvements

I learned a lot about how objects and arrays work and for these elements, I honestly found YouTube tutorials, like The Coding Train and Patt Vira, more helpful than reference pages (though I still used them as a reference for this project), especially with getting used to OOP. Next time, I’d love to learn how to add text to the objects because for my project, the candy hearts I referenced has phrases on them (as seen above) that would’ve added a nice touch and more accuracy.

Upon watching Casey Reas’ talk, I became interested in his approach of using artificial, computation processes to create something that feels “organic,” as he says. Another thing that resonated with me was when he mentioned how he was more interested on the paths that elements were taking while moving rather than on their individual location at specific moments. I plan on keeping these two features in my mind for my future works. I want to apply this thinking by designing systems where the journey and behavior of elements matter more than their fixed positions, letting randomness guide their movements while maintaining an intentional overall direction or purpose, and create something with that “organic” feeling, where the work doesn’t look rigidly programmed but instead has a natural, living quality to it.

I think the optimum balance lies in incorporating random elements by establishing controlled boundaries while allowing freedom within those constraints.  Simply put, controlling where something can exist or move, but letting how it moved or which specific direction it takes to be determind by chance. There would be a defined space or ruleset but then letting randomness operate freely within those parameters. In this way, everything still feels intentional and cohesive because it’s all happening within a thoughtfully designed framework.

Concept

I drew inspiration from the movie Coraline, where there was a little door that lead to another world through a mysterious tunnel and I wanted to use that tunnel as my loop. So in my sketch, there’s a little door and when clicked, it reveals a mesmerizing tunnel of concentric circles that pulse and animate.

My Final Portrait!

Code that I’m Proud of

let animatedSize = d - t;
if (animatedSize > 0) {
  ellipse(0, 0, animatedSize);
}

d -= random(15, 35);

I wanted a “magical tunnel” effect so I used d – t to make all circles pulse inward together and random(15, 35) to give each circle irregular spacing. I think it was successful in capturing the mysterious portal feeling and as if you’re being pulled into another dimension.

How this was made

The draw() function has two states controlled by mouse interaction. When the mouse is not pressed, it shows a door: for the door, I wanted to create something simple yet mysterious, so I just used a rectangle with a small circle on the side as the handle and a plain black background. When the mouse is pressed, it shows a tunnel: for the tunnel effect, I initially tried using a for() loop but switched to a while() loop to get that random, organic effect. I was inspired by a p5.js example that used a while loop to create concentric circles with random spacing. The example code showed how while (d > minSize) could draw circles that decrease by random amounts using d -= random (5, 15), which created this uneven pattern instead of perfectly uniform circles. I thought this technique would be perfect for creating a mysterious tunnel effect and I heavily implemented that in my sketch. I used translate() to move origin point to the center, which made drawing the circles so much easier since I could just use ellipse() instead of calculating positions every time. I was also experimenting with the minSize value to control how much blank space shows in the center and settled with 100. I learned modulo operato % to make the animation loop endlessly.

Reflection and Future Improvements

I used the p5.js reference page for examples of for() and while() loops and The Coding Train’s playlist on YouTube about loops to understand the logic and process of creating a loop. These sources were helpful in making me understand loops better as I missed the class discussion about this. In the future, I’d like to learn adding color gradients for the circles and a spiral motion to add more depth and make it more whimsical-looking.

Concept

I decided to create myself as a pink crab on the beach. Instead of a traditional self-portrait, I wanted to make something that represents me through the things I like: the crab is my favorite animal, pink is my favorite color, and I like going to the beach! The beach is also a nod to my home country, The Philippines, which is known for having beautiful beaches.

My Final Portrait!

Code that I’m Proud Of

// claws
fill(227, 115, 131);
let biteSize = PI / 16;
let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
let endAngle = TWO_PI - startAngle;

// left claw
push();
translate(width / 2 - 60, height / 2 - 50);
rotate(radians(330));
arc(0, 0, 45, 45, startAngle, endAngle, PIE);
pop();

// right claw
push();
translate(width / 2 + 60, height / 2 - 50);
rotate(radians(210));
arc(0, 0, 45, 45, startAngle, endAngle, PIE);
pop();

This is the code I’m particularly proud of. I wanted my crab to have the motion of snapping its claws. So, I went on the p5.js reference page to look for something that would help with that. I found a coding reference for a Pac-Man style animation on the arc() section and decided to use that but I had to double and shift it to my liking and what’s fitting for my crab.

How this was made

For the background, I wanted to split the sky and the sand so I used rectangles and to slip them evenly, I just set the size to divide by the height accordingly. To add more of a “beach-y” feel, I added sun (using ellipse), clouds (using ellipse as well), and a beach umbrella (using rectangle and arc). For my crab, I split the body into two arcs because I wanted it to have different colors. For the face, I used two identical black ellipses and for the mouth, I used arc. Now for the legs (the part I spent quite a bit of time on), I used rectangles and had to manually shift each of them accordingly and because of that, some parts appear to be a bit uneven. Throughout the code, I learned to use  PI to control how arcs are drawn, since p5.js uses radians, and it allowed me to create half-circle for the body, smile, and claws. I also used push() and pop() to isolate translate() and rotate() so each part could be shifted independently without affecting the rest of the sketch.

Reflection and Future Improvements

I learned a lot useful coding skills from making this assignment and the p5.js reference page was a huge help. I feel more comfortable with p5.js and navigating myself on the reference page. With more practice, I’d like to learn more animations like clouds drifting or my crab moving sideways, and if there are ways to duplicate or mirror a function (concerning my crab’s legs) to save more time and make sure everything is perfectly even.