David’s Portrait

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:

//David's self portrait

float x;
float y;
int xspeed = 2;
int yspeed = 2;
float c1 = random(255);
float c2 = random(255);
float c3 = random(255);

void setup(){
  size(500, 300);
  x = width/2;
  y = height/2;

void draw(){
  background(c1, c2, c3);
  if (x >= width-80 || x<=50) {
    xspeed *= -1;
  if (y >= height-80 || y<=50) {
    yspeed *= -1;
  x += xspeed;
  y += yspeed;

void face(float x, float y){
  ellipse(x+15, y+15, 130, 150);
  ellipse(x-10, y, 30, 20);
  ellipse(x+40, y, 30, 20);
  ellipse(x-10, y, 10, 10);
  ellipse(x+40, y, 10, 10);
  arc(x+15, y+40, 80, 50, 0, 3.14);
  line(x-25, y+40, x+55, y+40);
  arc(x+40, y-10, 30, 20, 3.14+0.3, TWO_PI-0.3);
  arc(x-10, y-10, 30, 20, 3.14+0.3, TWO_PI-0.3);
  arc(x-50, y+10, 30, 20, HALF_PI, PI+2*QUARTER_PI);
  arc(x+80, y+10, 30, 20, PI+2*QUARTER_PI,TWO_PI+2*QUARTER_PI); 
  arc(x+15, y+20, 30, 15, HALF_PI, PI+2*QUARTER_PI);
  //NYU Cap
  fill(101, 101, 252);
  arc(x+15, y-25, 110, 100, 3.14, TWO_PI);
  fill(101, 101, 252);
  line(x+70, y-25, x+100, y-25);
  text("NYU", x-10, y-40);
  text("David", x-16, y+120);

void mousePressed () {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    c1 = random(255);
    c2 = random(255);
    c3 = random(255);


Leave a Reply