This project consisted of creating a self-portrait based on basic shapes we learned in class. We tried basic shapes such as line, ellipse, rectangle, and circle to create a basic face.
Challenges:
Throughout this project, I faced numerous challenges that I had to overcome. When working with processing one of the greatest challenges for me is thinking about the plane and space to work. Generally, people are used to working with the first quadrant in a Cartesian plane. However, Processing uses the fourth quadrant as space. At first, it was difficult to locate and determine when to write a minus or plus sign. However, after practicing, I could think faster about the space we are using. Another challenge I faced was the location itself. I mostly hardcoded my code as I added specific numbers for each line. I tried to avoid Hardcoding in some parts such as when I use faceCenterX and faceCenterY and I think I was able to work well with this. In the future, I hope I will be able to avoid hardcoding in every part of my code.
Process:
For this project, I learned several new features for processing such as the use of triangles and the arc. The use of arc was challenging as it required me to think about angles. The use of triangles was much simpler once I got used to thinking about space and location. While doing this project I made several sketches to see how I wanted the drawing to look. After several attempts, I realized it was challenging to make the hair for my portrait. I realized that I like wearing caps and I thought it would be a good idea to include this in my portrait. After drawing the character in processing, I felt the portrait lacked vividness. Therefore in the end I decided to use the fill() function to add color.
Conclusion:
Overall I think I learned a lot through this project; however, I still think there is much more to learn. This project helped me plan something before actually doing it and it made me realize that most of the time the project does not come out to be as I expected. Still, the project also helped me get experience in calculating space and determining location.
The first assignment was about experimenting with shapes and Processing functions in order to create a self-portrait. I decided to add some flavour to it through a representation of my tongue touching my nose, something I am extremely proud of. And yes, this is exactly how the rest of my face looks like when I try showcasing my talents.
I have learnt a lot about the use of shapes during this process of making the self-portrait. Some of the shapes I used were triangle(), rect(), arc(), ellipse(), circle() and line(). I used functions for different parts of the face which made it easier for me to work with them individually.
The most challenging part for me was experimenting with the coordinates so that everything could appear in the right place. Some of the features of coding using Processing really helped me here, such as using a circle to represent the ears. Although I have used full circles to represent the ears, they do not appear as full circles because the colour used was the same as that of the rest of the face, leading to an overlap.
Also, I used two different hairstyles (one of them is commented). Once again, allowing the hair to appear over the face (because code is executed line by line) helped me avoid dealing with awkward shapes.
For the first assignment, I want to explore the various drawing functions in the Processing library for Java. Here’s a glimpse at my product:
Processes
I found out that the function createShape() can be used to define a new shapes on the basis of other primitive shape functions like ellipse(), rect(), arc(), etc. Each of the shape created this way can be stored in a PShape object and will later be drawn with the function shape(). I find this to be a particularly neat way of organizing different components of the sketch without having to construct new classes.
So, utilizing createShape(), I organize my drawing into different components: face, hair, mouth, and eyes. Each of these component is constructed from one or more PShape objects which are all included in one big object called portrait.
The face is a simple, classic ellipse. Nothing much to see here.
The hair is a bit more complex. I divide it into four objects: upperHair, lowerHair, leftFringe, and rightFringe.
The upper part of the hair is also a simple ellipse like the face, just slightly bigger. For the lower hair, I use a rectangle with a specified radius value to make the corners round. The top of the rectangle overlaps with the lower half of the upper hair ellipse to create a view of consistency.
The fringe, even though I have chosen to stick to primitive shapes, proves to be quite tricky. I first try to construct a curve using the edge of an ellipse.
The problem is that with this, I expected to be able to use the contour function to remove the unwanted part of the ellipse, keeping only the part that overlaps with the back hair. It turns out that beginContour() and endContour() cannot be used on an ellipse. There might be a way to get around this so I hope I can return to this problem later.
So instead of drawing a big ellipse hoping to cut out unwanted part, I try to draw a smaller ellipse with approximately the same fringe curve that fits right into the head. For this, I find rotate() really useful. One thing to note is that the coordinates are always rotated around their relative positive to the origin (from Processing reference page), so it will be best to create the shape at the origin (0, 0), move it to the desired position using translate(), then rotate().
arc() is very handy for drawing half an ellipse for the mouth.
For the eyes, I want something a little different from ellipses, so I turn to rect() instead with high radius value so that the eyes (and the eyeballs) will look rounded instead of sharp.
Development
First, as I mentioned above, I want to explore contour a bit more to see if there is a way to resolve the fringe problem without compromising the shapes.
Second, I would want to add some animations to the drawing. I was working on a blinkEyes() function (code at the end) but it is not finished. Right now the blinking motion looks very un-blinking-like, so I want to improve the piece of code too.
Code
PShape portrait, face, upperHair, lowerHair, leftFringe, rightFringe, mouth, leftEye, rightEye, leftEyeball, rightEyeball;
int faceWidth = 180;
int faceHeight = 230;
int leftXOfFace;
int rightXOfFace;
color skinColor = color(255, 181, 159);
int hairWidth = faceWidth + 20;
int hairHeight = faceHeight + 20;
color hairColor = color(102, 58, 37);
int roundFactor = 30;
color mouthColor = color(165, 69, 68);
float eyeWidth;
float eyeHeight;
PShape drawEye(int x, int y) {
/*
* @param x,y coordinates of the upper left corner of the eye
* @return PShape object of the eye
*/
PShape eye = createShape(RECT, x, y, eyeWidth, eyeHeight, roundFactor);
return eye;
}
PShape drawEyeball(int x, int y) {
/*
* @param x,y coordinates of the upper left corner of the eyeball
* @return PShape object of the eyeball
*/
PShape eyeball = createShape(RECT, x, y, eyeWidth*.5, eyeHeight*.5, roundFactor);
return eyeball;
}
void setup() {
size(640, 480);
frameRate(30);
leftXOfFace = width/2 - faceWidth/2;
rightXOfFace = width/2 + faceWidth/2;
eyeWidth = faceWidth*.2;
eyeHeight = faceHeight*.2;
portrait = createShape(GROUP);
face = createShape(ELLIPSE, width/2, height/2, faceWidth, faceHeight);
face.setFill(skinColor);
face.setStroke(false);
upperHair = createShape(ELLIPSE, width/2, height/2, hairWidth, hairHeight);
upperHair.setFill(hairColor);
upperHair.setStroke(false);
lowerHair = createShape(RECT, leftXOfFace-10, height/2, hairWidth, faceHeight, 0, 0, roundFactor, roundFactor);
lowerHair.setFill(hairColor);
lowerHair.setStroke(false);
leftFringe = createShape(ELLIPSE, 0, 0, hairWidth*.75, hairHeight*.3);
leftFringe.translate(width/2-faceWidth*.2, height/2-faceHeight*.28);
leftFringe.rotate(-PI*.23);
leftFringe.setFill(hairColor);
leftFringe.setStroke(false);
rightFringe = createShape(ELLIPSE, 0, 0, hairWidth*.6, hairHeight*.2);
rightFringe.translate(width/2+faceWidth*.27, height/2-faceHeight*.28);
rightFringe.rotate(PI*.28);
rightFringe.setFill(hairColor);
rightFringe.setStroke(false);
mouth = createShape(ARC, width/2, height/2+faceWidth*.25, faceWidth*.5, faceHeight*.3, 0, PI, CHORD);
mouth.setFill(mouthColor);
mouth.setStroke(false);
leftEye = drawEye(0, 0);
leftEye.translate(width/2-faceWidth*.25-eyeWidth/2, height/2-faceHeight*.15);
leftEye.setStroke(false);
leftEyeball = drawEyeball(0, 0);
leftEyeball.setFill(color(0, 0, 0));
leftEyeball.translate(width/2-faceWidth*.25, height/2-faceHeight*.15+eyeHeight*.3);
leftEyeball.setStroke(false);
rightEye = drawEye(0, 0);
rightEye.translate(width/2+faceWidth*.25-eyeWidth/2, height/2-faceHeight*.15);
rightEye.setStroke(false);
rightEyeball = drawEyeball(0, 0);
rightEyeball.setFill(color(0, 0, 0));
rightEyeball.translate(width/2+faceWidth*.25-eyeWidth/2, height/2-faceHeight*.15+eyeHeight*.3);
rightEyeball.setStroke(false);
// .addChild(): object added later will be placed on top
portrait.addChild(upperHair);
portrait.addChild(lowerHair);
portrait.addChild(face);
portrait.addChild(leftEye);
portrait.addChild(rightEye);
portrait.addChild(leftEyeball);
portrait.addChild(rightEyeball);
portrait.addChild(leftFringe);
portrait.addChild(rightFringe);
portrait.addChild(mouth);
}
void draw() {
background(255);
shape(portrait);
}
My task was to sketch a self-portrait using basic 2-D shapes available to me in Processing. Building upon the short exercise we did in class, I played more with the different shapes and colors to try and make my portrait as close as possible to a real person than the stick figure it was looking like initially. I focused on the smallest of the details, from lines in the bangs to reflection in the eyes; each and every element in the portrait contributing towards the overall look of the sketch. My sketch mostly uses the following drawing features:
line
ellipse
circle
rectangle
arc
PROCESS
I first started out with sketching a basic idea of what I wanted my sketch to look like (see below).
I chose the second look as I wear my hair more often like that.
The next step was to start coding it using Processing. I started with the basic things or the ones that were most important first and then kept on building upon it, adding more features as and when required. The poster below outlines my step-by-step process:
As per my vision, I first created an outline for my sketch, which included adding a face and hair. I wanted to make the layout first and then focus on details, so I coded the clothes, hands, and gave the round neck effect. Then came the detailing on the face which was quite difficult initially, keeping the proportions in mind. It really challenged the mathematician in me but was very fun to accomplish. Using the arc function was particularly hard as its parameters were confusing to understand and implement initially. Next came adding accessories like ears, earrings, blush lines, and design on clothes.
I then fine-tuned a few things here and there (like increasing the hand width, rounding the shoulders more, adjusting the lines in the bangs, adding eyebrows, etc.) to make the drawing more proportionate. I decided against adding the specs as my drawing was looking crowded and was taking away from the aesthetics.
After I was happy with how my portrait was looking, I added a little pattern in the background to make it more appealing. This is the final version of my sketch:
The key element of my code is that my portrait is dynamic with respect to the canvas. I have not hardcoded any of the values required to build my sketch. Every position, length, width mentioned in the code is in reference to the canvas size chosen. The reference point for the portrait (x0, y0 in the code) is the middle of the canvas and the portrait remains in the center irrespective of the canvas size. In fact, one can change the coordinates of x0 and y0 to make the reference point of the figure higher up/ down, a little left/right, and the entire portrait shifts (video attached later). It does not get disproportionate at all. For sketching the girl, I used face length (faceL) and face width (faceW) which are in proportion to the canvas size as standard measures to draw the other elements. This ensures my portrait does not disfigure.
Softcoding my program also made it easier for me to fine-tune, edit, and change aspects in my code as I did not have to calculate a number and put it, calculate again, and put it. I was just using variables which values and I had to adjust those values.
Commenting out the code and breaking it into blocks made it easier for me to go back and edit it.
Below you can see a short video of how my portrait behaves when a few reference points are changed:
This week I finished my first assignment of this class – making a self-portrait using Processing. During the class, we played with shapes and even tried to draw the simplest version of the face using geometrical figures such as circles, rectangles, and ellipses. For this assignment, I’ve decided to take it to the next level and attempted to make a cartoon version of myself.
I started by researching the proportions of a human’s face so the drawing would look like me.
Then, I made few sketches of the portrait and decided on the color scheme. [I won’t put them here because they are messy]
The final version is here. I added blush to my cheeks, and the color changes to more intense when the mouse points to it. Also, the hairstyle and eye shape resemble me. For the background, I asked my friends to choose the color they associate with me, and they chose this shade of purple.
Most of the time I used beginShape() and endShape() to draw any shape I needed and to be able to color it with fill(). bezierVertex() and bezier() helped to draw curves with appropriate parameters. I used strokeWeight() to change the width of some lines and emphasize my eyes.
Even though I hard-coded numbers, I did it based on my faceCenter X and Y coordinates. In future work, I will avoid hard-coding. This assignment has shown me how useful https://processing.org/ site is and that there are many interesting things available in processing. Now I’m inspired to know how to use them!
For this first assignment, I tried to utilize the principles learned in class to best create a portrait of myself using Processing. This involved the use of Processing’s 2D Primitive shapes, including quads, triangles, arcs, lines and ellipses. I tried to stay within the bounds of what we have done thus far, but made extensive use of the basic coding principles we have covered including the use of variables to accomplish scaling and parameter specification.
Process:
For this assignment I took the warm up exercise we finished in class and continued on to make it an entire portrait. I first chose which shapes I wanted to utilize to compose a feature such as a nose or a mouth, and placed them in a 640×480 canvas. Once I was happy with how the face looked at this point I replaced everything with variables that could be easily adjusted to tweak certain features such as size or placement, as well as make it easily scalable to any 4×3 resolution just by changing the canvas size.
Code:
In my code I made sure to divide everything out into clear sections with comments so that I could easily find and tweak features as needed. This allowed me to easily manipulate what I had already done. You will note that I initialize all my variables before running anything. These parameters define the face and could easily be tweaked to make any sort of face, not just one that looks like me! This gives futures possibilities for a UI that would allow a simple character creature.
Once all my parameters were defined I went ahead and created a larger 4×3 canvas, set certain position variables, and then continued on to draw my face with the parameters defined initially. I took advantage of how Processing layers shapes to create features such as the shirt, neck line, and ears with far less math by letting other features simple draw over the top as necessary instead of needing more complex shapes.
As mentioned previously, there is a lot more that could be done with this project. The goal was to use simplistic shapes and drawing techniques to make the best portrait we could. Using future techniques such as loops I would create more complex shapes such as eye lashes, or control statements to create a UI. This would all allow greater customizability overall.
For our first week of classes, we were given the task of making a self portrait using processing. In order to tackle this problem, I had to first understand the resources at my disposal and then figure out a way to use them in the best way possible in order to render my vision of the self portrait.
Apart from the functions we learnt in class, the circle( ), arc( ) and ellipse( ), I found the beginShape( ) – endShape( ) and curve( ) functions to be extremely helpful. However during my use of them I had run into some difficulties and then had resolved them thanks to the suggestion given by Professor Aaron. The following is a list of some of those difficulties followed by their resolution.
Difficulties:
The curve functions work on the principle of a bezeir curve which involves the use of control points and anchor points. The curve function comprises of the coordinates of four points in which the second and third points depict the beginning and end points of the curve and the first and fourth refer the control points. It was thus difficult to predict the location of the curve point in order to get the right curve and this was highly tiresome since the structure of the portrait involved the use of a lot of curves.
Even after getting the curves done, figuring out how to fill them was a task in itself. Since I had initially made shapes using a combination of curves and lines, using the fill function simply did not solve the task. An example of this is if i would make a shape like → )__| then the fill function would fill up the curve and the line joining its beginning and end points, instead of filling up the shape.
Resolution:
The resolution to the first problem was actually suggested by Professor Aaron, in which I used mouseX and mouseY as arguments in the curve function. This allowed me to see how the curve would change according to the mouse coordinates. I would then keep a track of the mouse coordinates using the following line of code.
After finding the appropriate coordinate, I would then write it in the curve function.
In order to tackle the fill problem, I learnt to implement the beginShape() and endShape() functions. Using my preliminary figures of curves and lines, I would get an estimate of the vertices needed to create the shape and then I would jot them down and put it in between the beginShape() and endShape() functions. This way I would generate a shape of my own and then the fill process would be easier.
Workflow:
My workflow for this task primarily involved the following:
Ideation
Creation
Addition
Ideation:
For the Ideation, process., I had actually started browsing through some of my portraits in order to find a picture that does not emphasis a lot on the details and would be simple to represent through arcs and lines.
After finding a picture like that, I drew a simple sketch of it on my iPad. During sketching my portrait, I made sure to identify components that could be made by curves and lines so that I could recreate them in processing.
Portrait and Sketch
Creation:
After reviewing the sections of the portrait, I started implementing them in processing. The first step was to get a basic structure done which comprised of the hair, face, eyes, ear and smile. After that details such as the eyebrows, nostrils, neck and shirt were added. These were then filled with the appropriate colors
Basic Structure
Portrait Skeleton
Final
Addition:
After the portrait was done, I felt the project required some amount of interactivity and I added three interactive features.
An emoticon option which provides you with three ways to change your characters smile – he can grin, he can be sad, he can smile with his teeth. I implemented this by assigning an if function which would display the correct emoticon when clicked.
Size change buttons which could alter the size of the portrait among small, medium and large. This was easy to implement as I had kept the faceSize a variable and had not hard coded the project.
A hair color palette which could toggle the portrait’s hair color from blond to light brown to dark brown and to black. In order to do this I had kept the rgb values of the fill function as variables.
A dynamic background of expanding circles. I actually got this idea from a previous post in the IM Website (Sarah Al-Yahya, 13 September 2020) and found it really cool. Hence, I implemented this in my own project.
Concepts Learned:
This project taught me how to play with shapes and how one can use the crazy amount of possibilities to experiment with them.
It taught me to think out of the box in order to find creative solutions to problems.
Project Video:
Thought of doing something that would connect IM to another passion of mine, Film!
So, this is the first episode of 3 minutes or less! A short vlog series in which I describe my experiences with IM Projects in 3 minutes or less.
I really hope I can carry this throughout the semester, although midterm and final weeks can be a bit scary 🙁
PS: Will try fixing the background audio next time!
In class this week, we played around with the coordinate system and making shapes in Processing.
Processing sketch from Wednesday’s class.
For our practice this week, I wanted to experiment with pixel art but the prospect of measuring and coloring every little rectangle filled me with dread. I remember watching a Coding Train video a while ago where Dan Shiffman used a .get() method to get the color from an image, so I decided to create the rectangles based on an image.
In terms of the pseudocode:
Load an image (keep in same sketch folder)
Define the canvas size.
Pick a random x and y coordinate from the photo.
Get the color of the photo at that x,y point.
Create a rectangle at that x,y point with the fill of the color.
Here is my sketch:
Some of the design choices I thought about were the size of the rectangles (how pixellated should the portrait be?), the fill of the rectangles (should they be the same as the image or should there be different colors, alphas, brightnesses?), the framerate of the drawing (how fast should the rectangles be created?).
An interesting part of the code to me was the .get() method I learned about in the Coding Train video. This method essentially gets the color of the image at the x,y point. You can see the code below.
PImage me;
//define size of the rectangle
int pixelSize = 20;
void setup() {
size(600,715);
me = loadImage("me.jpg");
//controls speed of drawing pixels
frameRate(300);
}
void draw() {
//create random x,y point within the sketch
float x = random(width);
float y = random(height);
//learned about .get() from from Daniel Shiffman's Processing tutorial on pixels https://www.youtube.com/watch?v=NbX3RnlAyGU
//get color from image at the x,y point
color c = me.get(int(x), int(y));
fill(c);
noStroke();
//draws rectangle at the x,y point with the color from the image
rect(x, y, pixelSize, pixelSize);
}
