Week 2

Concept

This sketch explores the interaction between two screen squares, incorporating movement and “emotional” behavior. The squares are initially placed randomly on the canvas, and they shrink and change color when they overlap, representing a form of “embarrassment.” The goal is to create a simple yet dynamic visual experience where the squares react to user interaction (mouse clicks) and their proximity. When clicked, the squares move toward the mouse position, and if they get too close, they start shrinking and changing color. This sketch is an experiment with combining basic geometric shapes and dynamic behavior in p5.js.

Code Highlight

One section of code I’m particularly proud of is the implementation of the shrink-and-color-change behavior. Here’s the part where the squares react when they “feel embarrassed”:

 

// Check for "embarrassment" (if squares overlap)
let distance = dist(square1.x, square1.y, square2.x, square2.y);
if (distance < (square1.size / 2 + square2.size / 2)) {
  square1.shrink = true;
  square2.shrink = true;
}

// If embarrassed, shrink and change color
if (square1.shrink) {
  square1.size -= 0.5;
  square1.color = color(random(255), random(255), random(255)); // Random color
  if (square1.size < 10) {
    square1.shrink = false; // Start over
    square1.size = 50; // Reset size
  }
}

if (square2.shrink) {
  square2.size -= 0.5;
  square2.color = color(random(255), random(255), random(255)); // Random color
  if (square2.size < 10) {
    square2.shrink = false; // Start over
    square2.size = 50; // Reset size
  }
}

 This logic triggers the shrinking and color change when the distance between the two squares becomes small enough (i.e., they overlap). It creates a fun dynamic where the squares seem to react in real time, making the sketch feel more alive.

Embedded Sketch

You can view and interact with the sketch directly in the p5.js editor, or here’s an embedded link to the live sketch:

Reflection and Future Work

This project started with a simple concept of square interaction, but it quickly became more dynamic by adding emotional “reactions” like shrinking and changing color. The interaction of movement toward the mouse creates an element of control, while the “embarrassment” response adds unpredictability.

For future improvements, I’d consider the following:

  1. Adding sound effects to accompany the “embarrassment” reaction, like a shriek or a sound that corresponds with the color change. This would enhance the multisensory aspect of the experience.
  2. More complex behaviors: Perhaps, when the squares get too small, they could “reproduce” into smaller squares, creating a chain reaction, or they could break apart into multiple pieces.
  3. Interactivity: Instead of just reacting to the mouse, I could add additional interaction methods, such as keyboard inputs or random events that change the behavior of the squares.
  4. Visual effects: Adding gradient colors or animations when the squares change could make the transition smoother and more visually engaging.

This sketch could evolve into a larger concept where geometric shapes and their “emotions” become central to the user interaction, possibly forming the foundation of a game or interactive artwork.

Self Portrait Mohidul

 

Week 1: Self Portrait

Concept: Drawing a portrait that looks professional, wearing a suit.

 

Section I am proud of: Drawing the Suit of the Portrait.

// Draw suit
  fill(30); // Dark gray suit color
  beginShape(); // Left lapel
  vertex(140, 340);
  vertex(200, 280);
  vertex(180, 340);
  endShape(CLOSE);

New things I have learned drawing the suit:

//Vertex

Embedded sketch

Reflection: The hadest part was to start the project and aligning the dots and vertex well. So for next one, I will learn more on the coordinates system and have a paper on my hand before drawing it.