Portrait assignment

This assignment was pretty straightforward, but I did not know what level of accuracy is expected from the portrait. So first I looked up a way to insert an image to processing and then I thought about doing something with pixels in order to reveal the image.

I found about pointillism function, which looks really nice, and what it does is it reveals an image by selecting random coordinates on a page, and revealing those coordinates one by one. But I wanted to have some level of interactivity, so what I did at first is I inserted my image, and thought it would be cool to reveal it using the mouse. So the coordinates are no longer picked randomly, but followed the mouse, which looked like a reverse process of erasing something.

But then, however, I was told that we had to draw our portrait line by line in code, so then I immediately thought about simple interactions and basic shapes.

First, I made the face, using ellipses and bezier curves for the most part, and then, once the face was done, I started working on the interactive part of changing the smile, closing the eyes, and pulling the hair. It was fairly simple, except for the part where I had to adjust bezier anchor points to the mouse position, and putting them within a certain range that would limit the mouse move the bezier curve to the edge of the canvas. I did that in order not to let people distort the face with an interactive function I put in, as I mean the function to be interactive, not intended to ruin the initial image 🙂

This is the code I used:

int w;
int h;
int xcoord = 300;
int ycoord = 550;
int haircoordx1 = 390;
int haircoordy1 = 10;
int haircoordx2 =250;
int haircoordy2 = 50;
int haircoordx3 = 300;
int haircoordy3 = 20;
int haircoordx4 = 200;
int haircoordy4 = 100;
int haircoordx5 = 500;
int haircoordy5 = 50;
int haircoordx6 = 400;
int haircoordy6 = 50;
void setup(){
size(600,600);
smooth();
h=height;
w=width;
}

void draw(){
background(30,30,255);

//ears

noStroke();
fill(255, 225, 190);
ellipse(150, h/2, 50, 70);
ellipse(450, h/2, 50, 70);
fill(255, 170, 150);
ellipse(150, h/2, 30, 45);
ellipse(450, h/2, 30, 45);


//face
noStroke();
fill(255, 225, 190);
ellipse(w/2,h/2, 300,350);


//mouth
stroke(255,170,150);
strokeWeight(5);


if(mousePressed && mouseX<400 && mouseX>200 && mouseY>300 && mouseY<550){
bezier(200, 330, 200,330, mouseX, mouseY, 400, 330);
xcoord = mouseX;
ycoord = mouseY;
}

else {
bezier(200, 330, 200,330, xcoord, ycoord, 400, 330);
}

//eyes
noStroke();
fill(255, 255, 255);
ellipse(240, 250, 70, 80);
ellipse(350, 250, 70, 80);
fill(122,150,255);
ellipse(240, 250, 50, 60);
ellipse(350, 250, 50, 60);
fill(0);
ellipse(240, 250, 20, 30);
ellipse(350, 250, 20, 30);


//eyes close
if(mousePressed && mouseX > 205 && mouseX < 385 && mouseY>210 && mouseY<290)
{

noStroke();
fill(255, 225, 190);
ellipse(240, 250, 72, 82);
ellipse(350, 250, 72, 82);
strokeWeight(10);
stroke(0);
noFill();
bezier(205, 260, 205, 305, 275, 305, 275, 260);
bezier(315, 260, 315, 305, 385, 305, 385, 260);

}
//nose
strokeWeight(5);
stroke(255, 170, 150);
noFill();
bezier(290, 330, 305, 345, 325, 325, 310, 310);


//hair

fill(255,240,0);
stroke(255,200,0);
if(mousePressed && mouseX<500 && mouseX>120 && mouseY>50 && mouseY<190){
bezier(260, 130, mouseX, mouseY, 300, 1, 320, 130);
bezier(190, 190, mouseX, mouseY, 10, 80, 280, 130);
bezier(200, 170, mouseX, mouseY, 180, 50, 320, 130);
bezier(240, 150, mouseX, mouseY, 120, 50, 280, 130);
bezier(300, 150, mouseX, mouseY, 400, 50, 400, 170);
bezier(270, 140, mouseX, mouseY, 300, 50, 380, 160);
haircoordx1 = mouseX;
haircoordy1 = mouseY;
haircoordx2 = mouseX;
haircoordy2 = mouseY;
haircoordx3 = mouseX;
haircoordy3 = mouseY;
haircoordx4 = mouseX;
haircoordy4 = mouseY;
haircoordx5 = mouseX;
haircoordy5 = mouseY;
haircoordx6 = mouseX;
haircoordy6 = mouseY;
}

else{
bezier(260, 130, haircoordx1, haircoordy1, 300, 1, 320, 130);
bezier(190, 190, haircoordx2, haircoordy2, 10, 80, 280, 130);
bezier(200, 170, haircoordx3, haircoordy3, 180, 50, 320, 130);
bezier(240, 150, haircoordx4, haircoordy4, 120, 50, 280, 130);
bezier(300, 150, haircoordx5, haircoordy5, 400, 50, 400, 170);
bezier(270, 140, haircoordx6, haircoordy6, 300, 50, 380, 160);}
//fill(255,240,0);
//stroke(255,200,0);
//bezier(260, 130, 390, 10, 300, 1, 320, 130);
//bezier(190, 190, 250, 50, 10, 80, 280, 130);
//bezier(200, 170, 300, 20, 180, 50, 320, 130);
//bezier(240, 150, 200, 100, 120, 50, 280, 130);
//bezier(300, 150, 500, 50, 400, 50, 400, 170);
//bezier(270, 140, 400, 50, 300, 50, 380, 160);
}