Raya Tabassum: “Chaotic Harmony” art

The artwork is supposed to represent a grid filled with random circles, squares, and triangles, each with a unique color. The number of shapes in each grid tile is also randomly determined, adding an element of unpredictability to the artwork. The black background and semi-transparent colors contribute to a visually dynamic and intriguing composition. The outer loop iterates through the x-axis, and the inner loop through the y-axis, creating a grid of tiles. The use of a while loop inside the nested loops allows for the random generation of multiple shapes within each tile. The switch statement is employed to choose between drawing circles, squares, or triangles based on a randomly generated shape type.
The element of interaction is when the user clicks on it, it alters the composition randomly every time with new colors and grids. This intricate dance creates a mesmerizing grid of shapes, each telling its own colorful story. And if you click on it rapidly, you can see some shapes forming on their own and the whole artwork feels like it’s moving.
I think the artwork effectively utilizes loops to create a visually engaging and dynamic composition. The randomization of shape count and type introduces an element of surprise, making each iteration unique. For future work or improvements, I could experiment with additional parameters such as varying the size or rotation of shapes, and introducing gradients. I also envision expanding the symphony of this visual experience by integrating sound. Each shape could emit unique tones, creating a multi-sensory journey. Additionally, exploring interactive elements, allowing users to dynamically influence the composition in real-time, could open up new dimensions for artistic expression and engagement.
The inspiration came from my desire to make something very vibrant with popping colors and simple shapes. Changing the “tileSize” and playing with different outcomes every time was a really fun experience until I found the visuals I most loved. As I reflect on this creation, I find joy in the harmonious chaos that emerges.

function setup() {
  createCanvas(600, 600);
  noLoop(); //Only draw once
}

function draw() {
  background(0); //Start with a black background
  let tileSize = 10;

  for (let x = 0; x < width; x += tileSize) {
    for (let y = 0; y < height; y += tileSize) {
      let shapeCount = floor(random(1, 5)); //Determine how many shapes to draw in each tile
      let i = 0; //Initialize while loop counter

      while (i < shapeCount) {
        //Generate a random color for each shape
        fill(random(255), random(255), random(255), 200);

        //Randomly choose a shape to draw
        let shapeType = floor(random(3)); // 0, 1, or 2
        switch (shapeType) {
          case 0: //Draw a circle
            ellipse(
              x + tileSize / 2,
              y + tileSize / 2,
              tileSize * 0.5,
              tileSize * 0.5
            );
            break;
          case 1: //Draw a square
            rect(x + 10, y + 10, tileSize - 20, tileSize - 20);
            break;
          case 2: //Draw a triangle
            triangle(
              x + tileSize / 2,
              y + 10,
              x + 10,
              y + tileSize - 10,
              x + tileSize - 10,
              y + tileSize - 10
            );
            break;
        }
        i++; //Increment while loop counter
      }
    }
  }
}

//Allow for regenerating the artwork on mouse press
function mousePressed() {
  redraw(); //Redraw everything
}

 

 

When you change “tileSize”:

Raya Tabassum: Self-Portrait Assignment

This is my first attempt at p5.js. I’ve tried to reflect my personal preferences and appearances in this “self-portrait”. My idea is to portray a Bangladeshi girl with big eyes, dark lipstick, and blush wearing a dress and a necklace. I matched the skin color with my own complexion, and the hair color with my hair highlight’s color. Concept wise I think the intention was to personalize the drawing as much as I can using only the simple shapes like ellipse, circle, arc, rectangles and straight lines. I tried to make the colors pop and to make it very detailed for example the necklace is similar to an actual one that I have with an Emerald stone, then the parting between the hair which is something very prominent in my appearance. Placing the lips and the eyelashes were the most difficult part for me I think.
I added interactivity with a smile formed on the mouth upon mouse-click with the if-else statement and mouseIsPressed function. So if you click on the image the lips change to a smile.
For improvements I think adding interactivity with the eyes opening and closing periodically and having some texts would have been nice. Also maybe making it a full-body self-portrait would be a very detailed development I believe which I intend to work on later. Overall, I loved playing with the numbers and parameters and colors and shapes to make it more and more perfect to the reality.

function setup() {
  createCanvas(500, 500);
  background(255, 182, 193); //Pink background
}

function draw() {
  //Hair
  noStroke();
  fill(90, 56, 37); // Hair color
  arc(250, 140, 200, 180, PI, 0); // Top hair
  rect(150, 140, 200, 300); // Side hair
  
  //Neck
  fill(230, 180, 145);
  rect(200, 260, 100, 70);
  
  //Dress
  fill(220, 0, 100);
  arc(250, 445, 250, 300, PI, 0, OPEN);
  
  //Necklace Design
  noFill();
  strokeWeight(2);
  stroke(255);
  arc(250, 320, 137, 200, 0, PI);
  arc(250, 317, 127, 190, 0, PI);
  stroke(0);
  fill(31.4, 78.4, 49);
  ellipse(250, 416, 9, 12);

  //Face
  stroke(0);
  strokeWeight(1);
  fill(230, 180, 145); //Skin color
  ellipse(250, 200, 170, 195); //Face shape
 
  //Eyes
  fill(255); //White of the eyes
  ellipse(215, 180, 40, 20); //Left eye
  ellipse(285, 180, 40, 20); //Right eye
  fill(0); //Pupil color
  ellipse(215, 180, 10, 20); //Left pupil
  ellipse(285, 180, 10, 20); //Right pupil

  // Eyelashes
  stroke(0);
  strokeWeight(0.5);
  // Left eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(190 + i * 6, 162, 200 + i * 6, 172);
  }
  // Right eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(278 + i * 6, 172,  288 + i * 6, 162);
  }

  // Eyebrows
  strokeWeight(2);
  noFill();
  arc(215, 167, 40, 20, PI, TWO_PI); //Left eyebrow
  arc(285, 167, 40, 20, PI, TWO_PI); //Right eyebrow
  
  //Middle parting of Hair
  strokeWeight(1);
  line(250, 52, 250, 103);
  
  //Nose
  noFill();
  strokeWeight(1);
  arc(250, 210, 10, 15, 180, 90, OPEN); 
  
  //Blush
  noStroke();
  fill(255, 192, 203);
  ellipse(195, 210, 20, 10);
  ellipse(305, 210, 20, 10);

  //Forming a smiley face when mouse is pressed
  if(mouseIsPressed){
    noFill();
    stroke(0);
    arc(250, 225, 80, 45, 120, 103);
    fill(255);
    arc(250, 225, 58, 70, 120, 103, OPEN);
    
  }
  else{
    //Lips
    fill(128, 0, 0); //Lip color
    noStroke();
    arc(260, 250, 28, 12, PI, 0);
    arc(240, 250, 28, 12, PI, 0);
    arc(250, 250, 50, 20, 0, PI);
  }
}