Within the process of creating my self portrait , I struggled with a lot of different things ranging from simple writings and ordering of codes to changing various colors, shapes and sizes of different figures, and many more. I have absolutely zero experience with coding, therefore I was only able to create this five-year-old-like-drawing of mine. However, I hope to be able to get better at coding in the future and it would be really appreciated if any of you guys could give me tips or recommendations for websites that could help me with my coding skills so I wouldn’t have to look like a snowman.
For the first assignment in this course, we each had to make a self-portrait using Processing. The way I see it, self-portrait shows the way you want yourself to be presented to other people rather than how you precisely look on the exterior. Having grown in numerous different places I call home as a third-culture kid, I have always perceived myself as someone who has a spectrum of colors. Adapting was something that I grew accustomed to almost as if I became a chameleon. So even in this project I have incorporated an effect where my cartoon-like self-portrait is bouncing around the screen and, at the same time, changing colors (when a mouse is pressed). The change in color does not only happen in one area of the frame but rather everywhere in different variations. So when the background color changes, the color of my face, the color of my pupils, and the color of my name all change asynchronously. All of these animations were put into place so that I could illustrate how I adapt to the capricious environment. The following are the video of my animated self-portrait and code:
I struggled at first to actually start doing anything that is meaningful because I like to plan things ahead and foreseeing how the coding will go is quite difficult. I took inspiration from my Snapchat Bitmoji, knowing it’s just for ideas not copying.
my bitmoji avatar
I made some quick research on Processing’s Reference pages and decided that the beginShape() might be a very suitable method for drawing the face, hair, and eyes (basically figures I thought would require complex drawing to be perfected).
I tried out the function and this is what I was able to do before realizing that the shape of the face can just be an ellipse for the sake of simplicity and because beginshape() will take a very long time to draw a curved shape.
The closest thing to a face I did using the functionAfter spending a very long time, I decided the ellipse was much better
I then started to master the small operations that I code for each part of the portrait, and I drew a very detailed eye which contains the eye itself, the brown iris, the white sclera, the pupil, and dark brown eyebrows.
Even though the eye was on point, I realized that making the portrait realistic will just make it weird and ugly so the rest of the face should just be more cartoon-like.
the face before adding the mouth, ears, hair, etc.
I drew a simple nose with just one outline from the right and some detail at the bottom, and I made a very simplistic but appropriate slightly-smiling mouth. The main function used was the “arc” function and I also struggled at first to understand how the radian angles calculations were carried out but I got things right simply by very long trial and error.
After completing most of the face, I decided to draw the hair using the beginShape() function which I struggled with earlier, and it turned it to be extremely useful for irregular shapes. By now, I was almost blindly typing numbers and automatically making calculations of dimensions and distances.
I made the ears using another arc function, and I decided to make the background a still photo of something that represents me; squash. I played squash for 5 years and even though I stopped playing years ago, I adore the sport and still play for fun until today.
Lastly, I decided to make use of the clicking of mouse function in a simple creative way where if you click the mouse the colors of the eyes and the clothing randomly change simultaneously.
My Final Piece
Randomized colors of the portraitanother randomized version
//Assignment 1 Yahia Beethoven Tayel self portrait
//Initializing the variables before any function
//In case the image doesn't load
int backgroundColor = 255;
//dimesnions of the portrait
float x;
float y;
//randomized variables for the color of the clothes when mouseclicked
float r = 0;
float g = 0;
float b = 0;
float r1 = 96;
float g1 = 49;
float b1 = 1;
//setting up the plane on which the portrait is drawn
void setup() {
size(500, 640);
x = width/2;
y = height/2;
PImage img;
img = loadImage("squash_background.PNG");
img.resize(500, 640);
background(backgroundColor);
background(img);
}
//the main draw function that makes the face
void draw() {
//draws neck
fill(241, 194, 125);
stroke(205, 133, 63);
rect(x - 43, y+180, 90, 60);
//draws the face
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);
ellipse(x, y, 6.5*x/5, 7*y/6);
//draws the hair
strokeWeight(3);
fill(45, 23, 13);
stroke(0);
beginShape();
vertex(x/4 + 24, y - 25);
vertex(3*x/8, 2*y/3);
vertex(x/2, y/2.3);
vertex(5*x/8, y/3);
vertex(3*x/4, y/3.75);
vertex(7*x/8, y/4.45);
vertex(x, y/4.5);
vertex(x+10, y/4.7);
vertex(9*x/8, y/4.45);
vertex(5*x/4, y/4);
vertex(11*x/8, y/3);
vertex(3*x/2, y/2.3);
vertex(13*x/8, 2*y/3.2);
vertex(x+3*x/4 - 24, y - 25);
vertex(13*x/8 - 20, 2*y/3 +20);
vertex(3*x/2 - 30, y/2.3 +55);
vertex(11*x/8 - 5, y/3 +60);
vertex(5*x/4 +15, y/2.3 +55);
vertex(11*x/8 - 10, y/3 +50);
vertex(9*x/8 +15, y/2.3 +25);
vertex(9*x/8 - 15, y/2.3 +35);
vertex(x- 15, y/2.3 +33);
vertex(7*x/8, y/2.3 +30);
vertex(5*x/8 +30, y/2.3 +25);
vertex(5*x/8 +15, y/2.3 +20);
vertex(x/2, 2*y/3);
endShape(CLOSE);
//draws the eyes
strokeWeight(4);
fill(255);
stroke(0);
ellipse(3*x/4, 4*y/5, x/3.5, y/8);
ellipse(5*x/4, 4*y/5, x/3.5, y/8);
//draws the iris
strokeWeight(3);
fill(r1, g1, b1);
stroke(0);
ellipse(3*x/4, 4*y/5, x/7, y/9);
ellipse(5*x/4, 4*y/5, x/7, y/9);
//draws the pupil
fill(0);
stroke(0);
ellipse(3*x/4, 4*y/5, x/13, y/15);
ellipse(5*x/4, 4*y/5, x/13, y/15);
//draws the white spot
strokeWeight(1);
fill(255);
stroke(255);
ellipse(3*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);
ellipse(5*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);
//draws the eyebrows
strokeWeight(1);
fill(43, 29, 14);
stroke(43, 29, 14);
arc(3*x/4 - 3, 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI + 0.4, TWO_PI+QUARTER_PI/2 +0.4);
arc(5*x/4 -3 , 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI, TWO_PI+QUARTER_PI/2 - 0.4);
//draws the nose
noFill();
stroke(205, 133, 63);
strokeWeight(4);
//arc(x+12, 5*y/6 + 10, 7, y/2.5, 0, HALF_PI);
arc(x-18, 5*y/6 + 75, 7, y/2.5, PI, PI+QUARTER_PI+0.5);
//took the two nostrils idea from aysha of this class
arc(x - 23, y+30, 21, 21, HALF_PI-QUARTER_PI/3, PI+2*QUARTER_PI);
arc(x+16, y+30, 21, 21, -HALF_PI, HALF_PI+QUARTER_PI/2);
arc(x-3, y+40, 30, 21, 0, PI);
//draws the mouth
noFill();
stroke(0);
arc(x, y+95, 95, 21, 0, PI);
strokeWeight(7);
point(x+47.5, y+95);
point(x-47.5, y+95);
//draws the ears
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);
arc(x/4 + 26, y - 10, x/4, y/3.5, HALF_PI, PI+HALF_PI );
arc(x+3*x/4 - 26, y - 10, x/4, y/3.5, -HALF_PI, PI-HALF_PI);
//draws shoulders
fill(r, g, b);
stroke(0);
beginShape();
vertex(0, 2*y);
vertex(x/4, y+240);
vertex(x+3*x/4, y+240);
vertex(2*x, 2*y);
endShape();
}
//functions that are called when the mouse is clicked to randomly change the colors of both the eyes and the clothes simultaneously
void mousePressed() {
r = random(255);
g = random(255);
b = random(255);
r1 = random(255);
g1 = random(255);
b1 = random(255);
}
I learned a lot through this simple assignment and I look forward to future assignments which will help develop my skills in programming much more.
For this project, we were supposed to use coding to make a portrait of ourselves, or other versions of ourselves (cartoon, anime, avatars, etc). I call her Avatar Aysha.
I started off with a simple sketch for my simple portrait. I just wanted it to be an avatar that I could play with in a video game. I think that growing up, I got used to my xbox avatar, which is where I got some of my inspiration from.
An example of an Xbox avatarSketch! And me trying to make sense of the line function.
Aysha’s Avatar
This is my avatar in her NYUAD violet T-shirt. It may not look on camera, but my eye color matches both my eyebrow and hair color so I added that to my portrait. I would also NEVER forget my glasses. I added some freckles, nostrils, and teeth.
I also wanted to add a simple interaction for the sake of experimenting and having fun. By pressing the keys from 1-7, a background from NYUAD campus appears, considering we’re all in quarantine :(. Choose your background and say cheese!
Here’s a simple demonstration.
This project really helped me improve my visual skills and visual imagination. At the beginning, I mainly struggled with drawing a line and with the function beginShape(). I mostly nailed the shapes by multiple trial and errors. However, later on, with enough practice I started to understand the x and y axes and their four quadrants. Moreover, creating the nostrils was a challenge for me as I needed to fully understand the angles in radians for the arcs. I also learned new functions such as arc(), strokeWeight(), beginShape() and endShape().
Personally, “Find in Reference” was a life-saver. I was also often inspired from the processing website itself, and its option for finding “related” functions.
Overall, I had so much fun doing this assignment! Hopefully more is yet to come!
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.
