Author: Alreem AlAbbas

Assignment 1: Self-Portrait

My name in Arabic (الريم) means deer, so for this assignment, I decided to code a deer as a self-portrait.

It was particularly challenging to place the ears in the right position. For that, I had to use the translate and rotate functions. This is something that I am proud of as we have not covered this concept in class yet.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
push();
translate(130, 355);
rotate(HALF_PI + QUARTER_PI);
arc(0, 0, 30, 25, 45, TWO_PI, PIE);
pop();
fill('rgb(161,92,92)');
ellipse(180, 300, 30, 110);
push();
translate(180, 360);
rotate(QUARTER_PI);
fill('rgb(105,27,27)');
arc(0, 0, 20, 20, 45, TWO_PI, PIE);
pop();
ellipse(220, 300, 30, 110);
push();
translate(220, 360);
rotate(QUARTER_PI);
fill('rgb(105,27,27)');
arc(0, 0, 20, 20, 45, TWO_PI, PIE);
pop();
push(); translate(130, 355); rotate(HALF_PI + QUARTER_PI); arc(0, 0, 30, 25, 45, TWO_PI, PIE); pop(); fill('rgb(161,92,92)'); ellipse(180, 300, 30, 110); push(); translate(180, 360); rotate(QUARTER_PI); fill('rgb(105,27,27)'); arc(0, 0, 20, 20, 45, TWO_PI, PIE); pop(); ellipse(220, 300, 30, 110); push(); translate(220, 360); rotate(QUARTER_PI); fill('rgb(105,27,27)'); arc(0, 0, 20, 20, 45, TWO_PI, PIE); pop();
  push();
  translate(130, 355);
  rotate(HALF_PI + QUARTER_PI);
  arc(0, 0, 30, 25, 45, TWO_PI, PIE);
  pop();
  fill('rgb(161,92,92)');
  ellipse(180, 300, 30, 110);
  push();
  translate(180, 360);
  rotate(QUARTER_PI);
  fill('rgb(105,27,27)');
  arc(0, 0, 20, 20, 45, TWO_PI, PIE);
  pop();
  ellipse(220, 300, 30, 110);
  push();
  translate(220, 360);
  rotate(QUARTER_PI);
  fill('rgb(105,27,27)');
  arc(0, 0, 20, 20, 45, TWO_PI, PIE);
  pop();

For improvements, I could make the deer stand up if it is hovered on for interactivity. I could also try making it run sideways with additional sprites or make it move with the user’s mouse movement.