Assignment 1 : Self-portrait | Aadil – Introduction to Interactive Media

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)

}

//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) }

 //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);

}

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); }

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 .

Leave a Reply Cancel reply