Assignment 1 – self portrait

Concept

I used p5js to make a self-portrait for this project. Although no prior experience in that sort of coding, I drew a portrait of myself using ellipses, triangles, and arcs among other shapes. The color-changing rows in the background were made to make the illustration more fun, making it user interactive. When the cursor moves over a certain block in the background it changes color from blue to pink. This portrait seems to be taken at an Egyptian wedding in which the colors are pink and blue and rhythms with the suites.

Code

The most challenging part of the code was understanding and modifying code that I brought from the internet. The background was split into various cells and blocks; However, I wanted it to be in rows instead of blocks. Hence, I tried to figure out what code does what by hiding some of the codes and see the changes it does and sometimes manipulate the numbers to explore even further.

There are two main parts that needed to be changed:

The first one was in the setting up function. I wanted the color pink to appear on different sites randomly in the rows form. I realized that instead of assigning a random value to each column in a certain row, I can assign the same random value to all columns in the same row, making the blocks seem like a one-piece although it is cut into numerous parts.

for (let r = 0; r < rows; r++) {
    cells[r] = [];
    let ran = random(255)
    for (let c = 0; c < columns; c++) {
      cells[r][c] = ran;
    }
  }

On the other hand, in the drawing function, I need to know the Y coordinate (row) and highlight all the blocks in that row by the pink color, and that can be done by a for loop that goes through all of the blocks in the row and changing them all.

if (mouseX > 0 && mouseX < width &&
    mouseY > 0 && mouseY < height) {
  const mouseR = floor(rows * (mouseY / height));
  const mouseC = floor(columns * (mouseX / width));
  for(let i = 0; i < columns;i++){
    cells[mouseR][i] = 255;
  }
  
}

One of the most challenging things in coding as well was to understand how arcs work and how to manipulate them while coding the eyebrows and the mouse. By watching youtube videos, I figured out which coordinate does what and how can I use them to fill full my desires.

//eyebrows
 arc(245, 202,50,20,PI,TWO_PI,OPEN);
 arc(345, 202,50,20,PI,TWO_PI,OPEN);
//mouth
  arc(295,330,70,70,0,PI);

The whole code:

const rows = 20;
const columns = 20;
const fadeSpeed = 2;
let cells = [];



function setup() {
  createCanvas(600, 600);
  
  for (let r = 0; r < rows; r++) {
    cells[r] = [];
    let ran = random(255)
    for (let c = 0; c < columns; c++) {
      cells[r][c] = ran;
    }
  }
  
}

function draw() {
  background(255);
  
  //modified from: https://happycoding.io/examples/p5js/arrays/fading-grid 
  cellWidth = width / columns;
  cellHeight = height / rows;

  if (mouseX > 0 && mouseX < width &&
      mouseY > 0 && mouseY < height) {
    const mouseR = floor(rows * (mouseY / height));
    const mouseC = floor(columns * (mouseX / width));
    for(let i = 0; i < columns;i++){
      cells[mouseR][i] = 255;
    }
    
  }

  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < columns; c++) {
      cells[r][c] -= fadeSpeed;
      cells[r][c] = constrain(cells[r][c], 0, 255);

      const y = height * (r / rows);
      const x = width * (c / columns);

      fill(cells[r][c], 0, 128);
      noStroke()
      rect(x, y, cellWidth, height);
    }
  }
  
  
  // faces basis  
  noStroke();
  fill(240, 220, 215);
  arc(295,250,230,350, radians(-50), radians(-130),OPEN);
  
  //hair
  fill(35, 20, 20);
  ellipse(300,110,100);
  ellipse(300,90,100);
  ellipse(250,100,110);
  ellipse(330,90,110);
  ellipse(220,120,110);
  ellipse(370,100,110);
  
  //Eyes
  ellipse(245, 240, 35, 40);
  ellipse(345, 240, 35, 40);
  fill(255);
  ellipse(240, 230, 10, 15);
  ellipse(340, 230, 10, 15);
  stroke(35, 20, 20);
  strokeWeight(5);
  noFill();
  arc(245, 202,50,20,PI,TWO_PI,OPEN);
  arc(345, 202,50,20,PI,TWO_PI,OPEN);
  
  //nose
  fill(140, 120, 115);
  noStroke();
  triangle(295, 270, 305, 300, 285, 300);
  
  //mouth
  fill(255, 50, 50);
  arc(295,330,70,70,0,PI);
  
  //neck
  fill(240, 220, 215);
  rectMode(CENTER);
  rect(295,435,40,60);
  
  //suite
  fill(0);
  rect(295,580,250,300,30);
  
  fill(150);
  triangle(275,430,315,430,295,580);
  
  fill(255);
  ellipse(310,465,10,10);
  ellipse(308,497,10,10);
  ellipse(304,530,10,10);
  
  stroke(255);
  strokeWeight(6);
  line(200, 490, 240,490);
  
  //glass
  stroke(0);
  strokeWeight(4);
  noFill();
  ellipse(245, 240, 75, 80);
  ellipse(345, 240, 75, 80);
  line(282,240,307,240);
  
  
  rectMode(CORNER);
  noStroke();
}

Reflections:

Overall, I’m pleased with this initial design since I feel like I was able to exercise my creativity and produce something that was distinctly me. Even though my portrait isn’t flawless, I’m still happy with the project and eager to work on this course’s more challenging coding in the future, and I believe that using this approach helped me to focus less on the details and more on my favorite aspects, like the form of my eyes, the suite, the harmony of the colors, and the basic shapes. Although making the static sketch and manipulating the background aspect was a challenge for me, I would have loved to try to make the illustration even more dynamic like what I saw with my classmates or even make the illustration more detailed, and I wished I could have made the whole background by myself as It would have boosted my self-confidence in coding drastically, But I think we all have to start somewhere.

The sketch