Author: Ibrahim Ahmad

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.