Assignment 1 : Self-portrait | Aadil

Concept

I wanted to create a simple image of myself with some level of user interaction . I started off by trying to use basic shapes to create the eyes, ears, nose and mouth of the self portrait . I realized knowing the coordinates accurately would save a lot of time spent in trial and error , so I added a small piece of code to display the mouse coordinates at the bottom of the canvas . This was very useful and saved a lot of time in positioning the shapes. For user interaction , I implemented two types of backgrounds – day and night –  that switch when mouse is clicked.

The Embedded Sketch is below :

 

Highlight of Code I am Proud of 

The code for generating stars in a different random pattern every time the scene shifts to night is something that I thought was cool to implement .

 //What happens when mouse is clicked
function mouseClicked(){
  isDay=!isDay;
  //The following piece of code ensures that the stars are at new positions 
  //everytime the mouse is clicked
  Stars=[];
  for(let i=0;i<50;i++){
    let x= random(height);
    let y=random(width);
    Stars.push(createVector(x,y));
  }
}

.
.
.
//draw() function
//Stars
    fill(250);
    noStroke();
    for(let i=0;i<Stars.length;i++){
      let Star=Stars[i]; //Star is variable of type Vector
      ellipse(Star.x,Star.y,2,2)
    }

Another Implementation that I am proud of is the drawClouds() function that takes cloud coordinates and size as inputs and draws clouds accordingly .

function drawCloud(x, y, size) {
  fill(255);
  noStroke();
  ellipse(x, y, size, size * 0.7);
  ellipse(x + size * 0.5, y, size, size * 0.7);
  ellipse(x - size * 0.5, y, size, size * 0.7);
  ellipse(x, y + size * 0.3, size, size * 0.7);
}

Reflections and Ideas for Future Work

Overall, I think it turned out to be a good initial exercise with p5 and I got a simplistic self image using basic geometry which is what  I had envisioned while starting with the project  . In future projects, I would love to add animations and even more user interaction . Maybe different backgrounds could also be added and something about the portrait itself can be changed when the background changes .

I look forward to improving my skills and making more realistic images /graphics  .