After my first not-so-successful-exposure to Processing this summer, I was terrified to play around with it ever again. All these numbers and pixel-counting seemed nothing but confusing. However, three months later, here I am: sitting in front of my laptop and trying to battle Processing by drawing a whole self-portrait, now in Java!
With all of my courage and creativity, I decided to first draw (more like draft?) what I was about to code:
The main challenge was to figure out which features to use, which functions to include, and…count the pixels to place everything where it should be. For my hair and face, I decided to go with circles, triangles, and rectangles in the draw() function. From the previous class, I got a little curious about the pressedKey() color-changing feature and have decided to try it in my portrait. As a result, I got a portrait of myself that changes the color of the shirt whenever the ‘c’ button is pressed.
It was a fun experience mastering the RGB-color system, the shapes syntax for Processing, and counting pixels for the frame. As there is still a lot for me to learn, coming into the future and having more time to work on the assignment, I would have made several improvements to the portrait by:
eliminating hardcoding numbers for the pixels/dimensions;
implementing different movement features with mouseX and mouseY functions, such as closing the eyes or smiling;
using more advanced programming concepts and syntax, not just filling my code with shapes like rect(), triangle(), and circle();
doing more research about Processing features and focusing on quality than quantity – thanks to my classmates who posted here now I know about arc(), strokeWeight(), vertex().
I am glad that I finally am becoming more comfortable using Processing and cannot wait to improve building on the present experience. Next time, I will try to be more careful with pre-assignment research and will pay close attention to the quality of my code.
I started working by looking for inspiration, I looked through the old blog posts here, openprocessing.org (which is a great source to look at the works of people from all over the world and different age and skill levels), and youtube.
A snapshot of the results you get when searching “self-portrait” on OpenProcessing
This research helped me find new tools I could use for the more complex shapes such as the beginShape(), endShape() function. Additionally, thanks to Jana from last(?) year, I found a cursor tracker code that helped a lot in finding the coordinates of certain points on the screen. You can find that code at the end of my work.
Next, I sketched a really rough draft to brainstorm and figure out the geometric shapes and functions needed to create my portrait. I then realized that some elements of the portrait will use the arc function, so I spent some time playing around with it and inserting different values and angles.
I got to coding the static elements of my portrait. I tried my best to make it resemble me somehow and I found that giving it a half-bun would be perfect to mark that resemblance.
Finally, I wanted to add a factor of animation and thought that going for a moving background could be cool. I settled for making something that makes my character look like she’s in a state of hypnosis…? I drew multiple circles in the code and created an “expand” variable that was added with every iteration of the draw function until the circle width and height reached a specific value which corresponds to the screen size (or the previous circle). Then, it restarts from the default width and height. When you hover over the eyes, you get a similar effect which was done using the same logic.
This is my self-portrait.
My first thought was about which shapes to use to create the hair. My initial plan was to use lines, but then I was worried that filling out the final hair shape would become an issue. So, after some research, I found the beginShape() and endShape() method using vertices.
I proceeded to sketch out a rough desired shape on a piece of paper (as shown below),
then went on to coding and figuring out where each vertex should be.
This included a lot of hardcoding and needed a lot of messing around with the positions, but it was, in my opinion, easier to hardcode in this case specifically, since there were a lot of points/vertices to consider.
The shape I started with was the hair. The head shape (ellipse) and neck(rectangle) followed, and then I added another shape to cover the top of the head with more hair.
I kept the background, the eyes, mouth, and nose simple, by using basic shapes and colors. And I finally decided to add some “animation”, by making each eye close or the mouth smile if the mouse pointer hovers over them.
void setup(){
size (400,400);
}
void draw(){
//background color
background(0,153,153);
//drawing the hair first to be on the bottom layer
fill(53,36,23);
stroke(0);
strokeWeight(1.5);
beginShape();
vertex(222,76);
vertex(192,50);
vertex(130,48);
vertex(40,126);
vertex(68,122);
vertex(58,174);
vertex(82,208);
vertex(57,250);
vertex(57,350);
vertex(310,350);
vertex(310,204);
vertex(329,225);
vertex(314,114);
vertex(270,74);
vertex(222,76);
endShape();
//drawing the face shape and the neck
fill(208, 167, 136);
stroke(0);
strokeWeight(1.5);
rect(175,170,45,160);
ellipse(190,180,160,200);
//drawing the hair piece to cover the top of the head
fill(53,36,23);
noStroke();
beginShape();
vertex(110,79);
vertex(110,170);
vertex(205,115);
vertex(280,170);
vertex(277,79);
endShape();
//drawing the nose:
stroke(0);
strokeWeight(3);
noFill();
line(180, 210,178,220);
line(178,220,188,220);
//drawing the mouth without a smile:
strokeWeight(5);
stroke(205, 115, 115);
line(180, 245, 200, 245);
//making the mouth smile:
if (mouseX > 180-5 && mouseX < 200+5){
if (mouseY > 245-5 && mouseY < 245 +5){
//this covers the previous mouth with the skin color
strokeWeight(5);
stroke(208, 167, 136);
line(180, 245, 200, 245);
//this draws on the new smile
strokeWeight(5);
stroke(205, 115, 115);
bezier(170,240,180,250,215,240,215,240);
}
}
//drawing the eyes open:
noStroke();
fill(255);
ellipse(160, 180, 35, 35);
ellipse(220, 180, 35, 35);
fill(155, 115, 84);
ellipse(160, 180, 23, 23);
ellipse(220, 180, 23, 23);
noStroke();
fill(0);
ellipse(160, 180, 10, 10);
ellipse(220, 180, 10, 10);
//closing the left eye:
if(mouseX > 160-(35/2) && mouseX < 160+(35/2))
{
if(mouseY > 180-(35/2) && mouseY < 180+(35/2))
{
//this covers the previous open eye
fill(208, 167, 136);
ellipse(160, 180, 38, 38);
//this draws on the closed eye
strokeWeight(5);
stroke(0);
line(150, 180, 170, 180);
}
}
//closing the right eye:
if(mouseX > 220-(35/2) && mouseX < 220+(35/2))
{
if(mouseY > 180-(35/2) && mouseY < 180+(35/2))
{
//this covers the previous open eye
fill(208, 167, 136);
ellipse(220, 180, 38, 38);
//this draws on the closed eye
strokeWeight(5);
stroke(0);
line(210, 180, 230, 180);
}
}
}
For the first assignment for Intro To IM for Fall 2020, we were required to create a self portrait using processing. At the beginning the process seemed a bit daunting as I only had experience create visuals for the web or for print using design tools like Adobe Photoshop and Illustrator. I completed this project by breaking up the feature of the portrait into in different parts and then break up those features [if required] into more parts.
Feature of the face [or the further broken down feature] was a function. I opted to make my the self portrait this way because it made it easy to layer features since I would only have move one line of code to this since a feature is encapsulated as a single function.
The main components of the self portraits were the face neck and hair. Each of these features were different functions and were called from the “draw” function.
The face was further broken down into components. These were forehead, chin, eyes, eyesbrows, nose and lips.
Starting this self portrait was easy. I started off with a rouned rectangle to create the top half of my face, then added an ellipse at the bottom, to closely resemble my face shape.
Moving on to the eyes, I added two ellipses in their respected positions, then added irises, pupils, and my personal favorite, small white circles for highlights. I made the eyes looking to the right to reduce the creepiness of the image, because I’m not sure someone could stomach having this portrait directly staring at them.
I had greater aspirations for the nose, but unfortunately had to settle for two lines that meet to form a pointed nose, as well as the mouth. It was a bit of a hassle trying to understand the arc enough to create a mouth shape, but I finally managed to get it. In my defense, I haven’t taken math in a long time, and was a bit rusty on how pi and radians worked.
Lastly, I had to figure out how to do my hair. After a lot of research, the most I could settle for was creating a sine curve four times. I found a template code online (Cited in the code) on how the sine code was translated to sketch and had to spend some time playing around with it so I could fix the curves and position. After doing this, I was very happy with my curls, but scared for my life, because this was how it looked:
I was determined to keep some curls in, so I decided to add a sort of background hair, and create some bangs. I fiddled with some arcs and pulled out a protractor and finally created some bangs. I also messed around with some rectangle shapes to create a more cohesive bang and background. This leaves the curly strands looking like highlights. It still looks strange, but less creepy, i’ll say.
void setup () {
size (500, 500);
}
void draw (){
// hair- background
//hair, the background
stroke(105,80,45);
fill(105,80,45);
rect(125, 100, 250, 275, 150, 150, 50, 50);
//drawing the face
//pushStyle();
noStroke();
fill(224, 172, 105);
rect(150, 100, 200, 200, 150, 150, 50, 50);
fill(224, 172, 105);
ellipse( 250, 250, 200, 275);
//noStroke();
//popStyle();
// drawing the eyes
// white part
fill(255, 255, 255);
ellipse(200, 225, 50, 30);
ellipse(300, 225, 50, 30);
// iris
fill(50,30,20);
ellipse(207, 225, 28, 28);
ellipse(307, 225, 28, 28);
//pupil
fill(0,0,0);
ellipse(207, 225, 18, 18);
ellipse(307, 225, 18, 18);
//highlight
fill(255,255,255);
ellipse(202, 220, 5, 5);
ellipse(302, 220, 5, 5);
//attempting the nose
stroke(112,86,53);
strokeWeight(3);
//arc(250, 250, 20, 30, 50, QUARTER_PI);
line(255, 245, 270, 275);
line(270, 275, 255, 277);
//mouth
noFill();
arc(250, 310, 80, 60, 0, PI);
// hair -- bangs
fill(105,80,45);
stroke(105,80,45);
rect(160, 100, 180, 50, 600, 300, 0, 0);
stroke(112,86,53);
strokeWeight(30);
noFill();
arc(335, 100, 160, 120, HALF_PI, PI);
arc(150, 100, 160, 120,radians(0), radians(90));
// hair -- Trying to make it curly
// Citation; got this from a online discussion, edited it to make it horizontal
//https://stackoverflow.com/questions/2395434/create-a-sin-wave-line-with-processing
strokeWeight(30);
float a = 0.0;
float inc = TWO_PI/25.0;
float prev_y = 150, prev_x = 130, y, x;
for(int i=0; i<100; i=i+4) {
y = i +150;
x = 130 + sin(a) * 30.0;
line(prev_x, prev_y, x, y);
prev_x = x;
prev_y = y;
a = a + inc;
}
strokeWeight(30);
float prev_yy = 250, prev_xx= 130;
for(int i=0; i<100; i=i+4) {
y = i +250;
x = 130 + sin(a) * 30.0;
line(prev_xx, prev_yy, x, y);
prev_xx = x;
prev_yy = y;
a = a + inc;
}
float prev_yyy = 160, prev_xxx = 380;
for(int i=0; i<100; i=i+4) {
y = i +160;
x = 380 + sin(a) * 30.0;
line(prev_xxx, prev_yyy, x, y);
prev_xxx = x;
prev_yyy = y;
a = a + inc;
}
strokeWeight(30);
float prev_yyyy = 260, prev_xxxx= 380;
for(int i=0; i<100; i=i+4) {
y = i +260;
x = 380 + sin(a) * 30.0;
line(prev_xxxx, prev_yyyy, x, y);
prev_xxxx = x;
prev_yyyy = y;
a = a + inc;
}
}
This is my first processing project, a self portrait, and being a rather crafty person it felt just like using different paper cutouts and somehow putting them together to create a portrait of myself – well somewhat. Getting to know how to create different 2D shapes in Processing, I thought about which shapes to use to create a face and how I will take advantage of the fact that I am not limited by paper cutouts but could actually add some movement and interaction. While experimenting in class, at some point the eyes I had created where not static anymore but moving and creating a pattern behind the head which I thought would be a cool repetition of a visual element in the portrait and add some fun. I kept the face, eyes and mouth simple while trying to remember radian values from high school to create a semi-circle for the mouth. When looking for a somewhat realistic blonde tone RGB value I realized that the color would not match with the skin tone I used. That is how my favorite part of the portrait was added, the color changing hair. To make the code work took another reflection because my approach was too narrow minded thinking about our class example where the color of a rectangle would only change when clicking on it. The simple solution was to define mouseX and mouseY within the whole area of my “artwork” so you can click anywhere within the window and the hair color will change. Hope you enjoy!
P.S. I have not died my hair yet.
Here you can see two confused eyes, no smile, and a portrait in progress.Here you see two happy eyes, an enthusiastic smile, and hair in NYU violet – the final portrait.
//portrait
//for animated reference
int x;
int y;
int xSpeed = 9;
int ySpeed = 9;
//for static reference
int a;
int b;
//to change hair color
float red = 255;
float green = 0;
float blue = 0;
int value = 0;
void setup () {
size(640, 480);
x = width/2;
y = height/2;
a = width/2;
b = height/2;
}
void draw () {
noStroke();
//eyes background animation
noFill();
ellipseMode(CENTER);
//white part/sclera
fill(252);
ellipse(x-35, y-10, 30, 30);
ellipse(x+35, y-10, 30, 30);
//black part/iris
fill(0);
ellipse(x-35, y-10, 10, 10);
ellipse(x+35, y-10, 10, 10);
if (x >= width || x <= 0) {
xSpeed *= -1;
}
if (y >= height || y <= 0) {
ySpeed *= -1;
}
x = x + xSpeed;
y = y + ySpeed;
//hair: behind body
fill(red, green, blue); //hair changes color
rectMode(CENTER);
rect(a, b+40, 180, 0.7*b);
//body shape behind face
fill(0); //clothes color
rectMode(CENTER);
rect(a, 1.5*b, 80, b);
//face shape
fill(235, 221, 188);
ellipse(a, b, 180, 220);
//static eyes
//white part/sclera
fill(252);
ellipse(a-35, b-10, 30, 30);
ellipse(a+35, b-10, 30, 30);
//black part/iris
fill(0);
ellipse(a-35, b-10, 10, 10);
ellipse(a+35, b-10, 10, 10);
//nose
fill(209, 156, 50);
ellipse(a-8, b+20, 6, 6);
ellipse(a+8, b+20, 6, 6);
//mouth
arc(a, b+40, 80, 80, 0, PI, PIE);
//hair
//bangs
fill(red, green, blue); //hair changes color
arc(a, b-40, 180, 180, PI, 2*PI);
//sides
rectMode(CORNER);
rect(a-90, b-50, 20, 0.7*b);
rect(a+70, b-50, 20, 0.7*b);
//arms
stroke(0);
strokeWeight(20);
noFill();
arc(a, b+100, 300, 180, 0, PI, OPEN);
}
void mousePressed () {
if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
red = random(255);
green = random(255);
blue = random(255);
}
}
In my first assignment I really wanted to incorporate some form of animation. I decided to focus on blinking eyes. I used arc() function to draw arcs and changed their start points as well as the endpoints with respect to other parts of the eye. I decided to split the animation into 3 parts: the eyelid, the iris and the pupil. The eyelid and the iris animate at the same intervals, but the iris needed a small adjustment, as the arc length of a circle did not correspond directly to that of an ellipse of the eyelid. The last part, the pupil, comes into play only when the eyelid is almost closed.
float eyelidPosition = 40;
float irisPosition = 40;
float pupilPosition = 5;
float speed = 0.3;
int skinColor = #FEB186;
int mouthColor = #C18E74;
void setup() {
size(640, 360);
background(255);
}
void draw() {
background(255);
drawFace(200, 200);
}
void drawEye(int x, int y) {
//EyeShape
ellipse(x, y, 60, 40);
//Eyelid
fill(skinColor);
arc(x, y, 60, 40, PI, 2*PI);
fill(255);
//Eyelid animation
arc(x, y, 60, eyelidPosition, PI, TWO_PI);
arc(x, y, 40, 40, -irisPosition*PI/80, PI+irisPosition*PI/80);
//Pupil
fill(0);
arc(x, y, 5, 5, -pupilPosition*PI/5, PI+pupilPosition*PI/5);
fill(255);
eyelidPosition = eyelidPosition+speed;
irisPosition = eyelidPosition-3*PI;
if (eyelidPosition < 5) {
pupilPosition = pupilPosition+speed;
}
if (eyelidPosition < 0) {
delay(int(random(7)*100));
eyelidPosition=0;
speed=random(0.1,0.5);
} else if (eyelidPosition > 40) {
delay(int(random(5)*1000));
eyelidPosition=40;
speed=-random(0.1,0.5);
}
if (irisPosition < 0) {
irisPosition=0;
}
if (pupilPosition < 0) {
pupilPosition=0;
}
}
void drawSmile(int x, int y) {
fill(mouthColor);
arc(x, y, 150, 60, 0, PI);
arc(x, y, 150, 20, 0, PI);
fill(255);
}
void drawFace(int x, int y) {
fill(skinColor);
ellipse(x, y, 200, 250);
fill(255);
drawSmile(x, y+50);
drawEye(x-50, y-30);
drawEye(x+50, y-30);
}
