Author: Tarek Nabih

Concept:

The sleep TV mode inspired this assignment. When I was a kid, my friends and I used to watch the TV when it was not even turned on but on sleeping mode, closely observing that rectangular white box on the TV hitting all edges of the black TV box till it perfectly hit the corners of the black TV screen. While I was brainstorming ideas for the art piece, I figured that this is what I want to do. However, later I figured that I should add more properties to that animation.

 

Code highlights:

I would say I spent most of time debugging this part of the code

function goAround(x,y,width,length,borderx,bordery, status, statuss){
  if( (cubex+( width /2)) < (cubexx+(borderx/2)) && status === true ) {
   cubex++;
  }else{
    right = false;
    cubex--;
    if((cubex-( width /2)) < (cubexx-(borderx/2))){
      right = true;
    }
  }
  
  if( (cubey+( width /2)) < (cubeyy+(borderx/2)) && statuss === true ) {
   cubey+=1.5;
  }else{
    left = false;
    cubey-=1.5;
    if((cubey-( width /2)) < (cubeyy-(borderx/2))){
      left = true;
    }
  }
  
}

What this code basically does is that it has a function that takes in a rectangle parameter and manipulates a rectangle to move around a certain border.

The first if condition continuously checks if the borders of the designated rectangle do not bypass the edge of the border and the function makes sure that what is being called is the “if” not the “else” by not changing the status of the rectangle. However, when the rectangle bypasses the border’s edge it goes to the “else” part. In the else part it changes the status into false and that makes the function when called not go to the “if” part, as there is a condition that checks if the status is true. Moreover, to not make the function not stuck in the “else” part, I made an if condition that checks if the rectangle hit the other border and when it does, it changes the status to true.

The second part of the function is basically the same thing, but instead of manipulating the x-coordinates, I manipulated the y-coordinates.

The draw function is basically making rectangles and changing their colors.

let a = random(255);
let b = random(255);
let c = random(255);

let aa = 255 - a;
let bb = 255 - b;
let cc = 255 - c;


fill(a,b,c);

I made the inverse of the color to each other by assigning a random color to some variables and then assigned the inverse colors to other variables then call the variables and their inverse in an order of that each square has a square with an inverse color in it.

Sketch & reflections:

I think what this art piece made me realize is that coding is not about the actual act of coding but about debugging as I spent more than 70% of the time making this piece checking what is wrong with the code rather than writing the actual code. Moreover, when I saw a previous classmate’s art pieces I thought it would be easy to make. However, when I made my piece it made me realize that they are much harder to make than seems, which made me respect their work even more.

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