Author: Khalifa Al Shamsi

For this assignment, I am not sure I drew my inspiration from the right place; I ended up being inspired by the Club Penguin dance floor. For some reason, while playing around with different-sized squares in p5js, that was all I remembered when I aligned them.

For reference:

The sketch:

While it isn’t the same proportions as the Club Penguin dance floor, It was because I wanted it to be more visually appealing with the size. After all, this is supposed to be an art piece…

let numTiles = 10; // Number of tiles across and down
let tileWidth;
let tileHeight;
let colors = [];

function setup() {
  createCanvas(600, 600);
  tileWidth = width / numTiles;
  tileHeight = height / numTiles;

  // Initialize colors array with bright colors
  for (let y = 0; y < numTiles; y++) {
    colors[y] = []; // Create a nested array for each row
    for (let x = 0; x < numTiles; x++) {
      colors[y][x] = color(random(255), random(255), random(255), 255);
    }
  }

  frameRate(10);
}

function draw() {
  for (let y = 0; y < numTiles; y++) {
    for (let x = 0; x < numTiles; x++) {
      // Randomly change the color of each tile to mimic the dance floor lighting effect
      if (random() < 0.1) { // 10% chance to change color each frame
        colors[y][x] = color(random(255), random(255), random(255), 255);
      }
      
      fill(colors[y][x]);
      rect(x * tileWidth, y * tileHeight, tileWidth, tileHeight);
    }
  }
}

I would say the effect function confused me so often when it came to understanding it because I didn’t want the colors to change so frequently. Still, also the issue that came up was the sketches I had taken down in class did not fully explain how things worked when it came to the randomness part and how quickly it would change, so hopefully, in the upcoming classes, I will get better at note taking so that when it comes to coding, I get to understand it better when I go back and take a look at it.

Concept:

My initial Idea was to create a realistic picture of a self-portrait of how I look in the traditional clothes I would wear when I am out.

Reflection and ideas for future work or improvements:

I would say that in the future, I would truly write down the numbers I try when it comes to centering things on the sketch because I kept going around in circles trying to center everything and because I kept placing the same numbers for the different heights and length due to me constantly forgetting what numbers I already tried so It just unnecessarily prolonged the process.

Code Implementation:

I have never used Javascript before, and my understanding of coding is somewhat simple. I had a tough time managing to create hair that looked normal at first, so I tossed that Idea out and wanted to create something else without knowing it was going to be a more complex idea in terms of coding, which was the Ghutra, thinking I would have to create a rectangle and be done with it. However, it did not look like anything close to what I wanted it to be, so I had to use a circle to show that the portrait was wearing it while using three different rectangles layered at different heights so that it shows the way I would personally tie it around my head. But now, looking back at the finished sketch, I would say that I was glad to take the long road of creating a Ghutra to showcase a more realistic portrait of the whole look I have going on.

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {
  
  // Body
  fill("white")// Body base color.
  ellipse(200,420,240,300)// Body base.
  
  // Face
  fill(210, 180, 140); // skin color
  ellipse(200, 200, 160, 200); // head shape
  
  // Ghutra
  fill("white");
  arc(200, 130, 130, 90, PI, 0); 
  rect(125, 120, 150, 30); 
  rect(125, 110, 150, 25);
  rect(125, 130, 150, 10);
  
  // Eyebrows
  fill("black"); 
  rect(150, 160, 40, 10); // left eyebrow
  rect(215, 165, 40, 10); // right eyebrow
  
    // Eyes
  fill("white");
  ellipse(170, 190, 40, 20); // left eye white
  ellipse(230, 190, 40, 20); // right eye white
  fill("black");
  ellipse(170, 190, 20, 20); // left pupil
  ellipse(230, 190, 20, 20); // right pupil
  
  // Mustache
  fill("black");
  arc(200, 248, 80, 30, PI, TWO_PI);

  // Beard
  fill("black");
  arc(200, 245, 140, 120, 0, PI);
  
  // Mouth
  fill("white");
  arc(200, 250, 50, 20, 0, PI);

  // Hair
  fill("white");
  
  noLoop(); // Stops draw loop
}