Author: Mirette Dahab

Concept:

This assignment was more exciting for me to create than the first one. At first, I couldn’t think of a specific idea I wanted to implement, so I just went in blindly. I started coding random stuff using for loops until it hit me what I actually wanted to do.

As I mentioned before in my previous blog post, I love colorful things, so I decided to create a color wheel that has some element of randomness in it. I wanted to make it messy, but also in a way organized. I designed it in a way that it changes size and arrangement according to where the mouse is. At first, it’s a rather small organized color wheel of lines centered in the canvas, but as you move the mouse to the right (along the x-axis), it increases in size, taking up the whole canvas but maintaining its organization, giving a visual of a train going through a tunnel at full speed, kind of. As you move the mouse downwards (along the y-axis), the lines become uncentered and spaced out giving a more chaotic visual. 

I wanted to add a dynamic background to my canvas because it looked too dull in my opinion. A very random thought was to make it somewhat resembling a fingerprint, But the curves were too much with the color wheel, so I decided to make it more low-key by replacing the curves with lines. The following picture was in a way what I had imagined the background to look like in the beginning. 

A highlight I’m proud of:

I am proud of the way I got the background to look. I did not have that much high expectations for it but it worked out perfectly. At first, I couldn’t figure out how to make parts of the diagonal lines change stroke weight without changing the whole line, but then I changed it to be various small lines instead of one long line. 

for(let i = 1; i<width; i += 10){
  for(let j = 1; j< height; j+= 10){
    stroke(0);
    frameRate(5);                                 
    strokeWeight(random(5));
    line(i,j,i+10,j+10);
  }
}

Reflection and ideas for future work or improvements:

For now, I am glad with the outcome, but I would like to practice creating more advanced sketches with more interactivity. Additionally, I would like to work on using other functions and techniques as well, because I tend to stick to the ones I already know.

On another note, for this assignment I tried my best to make my code as brief as possible while delivering a cool piece of artwork.

The Concept:

For this project I wanted to try to code something that reflects in any form or sense who I am as a person. I kept racking my brain for ideas but I didn’t have any that I particularly liked so I just started drawing random things. I started with ellipses, a big one, a smaller one, an even smaller one. I created them non concentric because I don’t like everything to be perfectly aligned. Then I decided why not make it the background and just draw a simple face that resembles me on top. Then I started thinking about colors; I was too indecisive to choose one color so I settled on three!

The three colors I used for the background represent the sun, sea and grass because one thing about me is that I enjoy being by the beach and going to parks since nature has a very calming effect on me. 

By clicking the mouse, not only does the background change but also my facial expressions do too. I go from happy to surprised to pissed off. I wish I could say that the expressions relate to the background color or something cool like that, but it was really just an attempt at challenging myself to experiment further with p5.js. 

I added AirPods to the portrait because I am almost always listening to music. Music has been such a big part of my life for so long, I couldn’t draw a self-portrait without including any element of music into it. However, the AirPods are missing in the “pissed off” version of myself, because I can never get pissed off while listening to music.

As you move the mouse around the screen, the eyes follow the movement of the mouse because I wanted to add an element of interactivity in the portrait, but you could also say it reflects my curious nature.

A highlight I’m proud of:

Although it may seem very trivial, I had such a hard time getting the eyebrows to look the way I wanted them to. So I am proud of the final result I reached.

//eyebrows
fill(hair);

if(option == 1){ //straight brows
    bezier((width/2)-15, (height/2)-30, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-25);
    bezier((width/2)+15, (height/2)-30, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-25);    
}
else{if(option == 2){ //surprised brows
          bezier((width/2)-15, (height/2)-40, (width/2)-35, (height/2)-45, (width/2)-45, (height/2)-40, (width/2)-50, (height/2)-35);
          bezier((width/2)+15, (height/2)-40, (width/2)+35, (height/2)-45, (width/2)+45, (height/2)-40, (width/2)+50, (height/2)-35); 
      } 
     else{if(option == 3){ //pissed off brows
          bezier((width/2)-15, (height/2)-25, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-30);
       
          bezier((width/2)+15, (height/2)-25, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-30);
          }
     }
}

Another part I am particularly proud of is the way I had the background colors change with every mouse click.

if(option == 1){ 
    
    let blue0 = color(59, 197, 255);
    let blue1 = color(135, 219, 255);
    let blue2 = color(110, 212, 255);
    let blue3 = color(161, 227, 255);
    
    //non concentric circles in the background
    background(blue0);
    noStroke();
    fill(blue1);
    ellipse(150,150,500);
    fill(blue2);
    ellipse(200,150,350);
    fill(blue3);
    ellipse(150,150,200);
  
    // changes option to 2 so that the frame changes with next mouse click
    option = 2;
    // drawMe() function is called todraw the face over the desired background
    drawMe(); 
}

// second mouse click, changes background from blue to green (along with other changes further described in drawMe() function)
else{if(option == 2){
      
      let green0 = color(67, 166, 60);
      let green1 = color(0, 139, 0);
      let green2 = color(76, 187, 23);
      let green3 = color(97, 194, 86);

      background(green0);
      noStroke();
      fill(green1);
      ellipse(150,150,500);
      fill(green2);
      ellipse(200,150,350);
      fill(green3);
      ellipse(150,150,200);
  
      option = 3;
      drawMe();
    }
    else{if(option == 3){
      
          let yellow0 = color(255, 191, 79);
          let yellow1 = color(255, 172, 28);
          let yellow2 = color(255, 209, 130);
          let yellow3 = color(255, 228, 181);

          background(yellow0)
          fill(yellow1);
          ellipse(150,150,500);
          fill(yellow2);
          ellipse(200,150,350);
          fill(yellow3);
          ellipse(150,150,200);
      
          drawMe();
      
          //resets option to 1 so that backgrounds can loop
          option = 1;
          }  
      } 
  }

 

Reflection and ideas for future work or improvements:

Working on this assignment was very fun, I kept pushing myself to try new things and I stuck into this loop of constantly wanting to add more features without complicating it too much. It was hard for me to decide where to draw the finish line. For future work, I would like to work on having more interactivity and creativity within my code. I would also like to work on making my code more efficient by removing redundant repetition of code.