Author: agusman@andrew.cmu.edu

sketch.js

/*
* Anna Gusman
* agusman@andrew.cmu.edu
* Section A
*
* This program draws a self portrait out of intersecting circles and lines.
*/
  // Constants
var color1;
var color2;

function setup() {
  createCanvas(770, 830); //sets the canvas size//
  color1 = color(230, 38, 42);
  color2 = color(251, 95, 41);
  background(239, 94, 8);
  angleMode(DEGREES);
}

function draw() {
  //var backgroundcolor = color(239, 94, 8);
  //uses a orange rectangle as the background//
  //fill(backgroundcolor);
  noStroke();
  setGradient(0, 0, 770, 830, color1, color2);
  //rect(0, 0, 770, 800);

  //largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(136 + 156,189 + 156,315,314);

  var a = color(255);
  stroke(a);
  noFill();
  arc(136 + 156,189 + 156,315,314, 44, 87);

  //hair tucked behind ear, second largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(315 + 142,124 + 142,282,282);

  var a = color(255);
	stroke(a);
  noFill();
  arc(315 + 142,124 + 142,282,282, 97, 168);

  //thirds largest circle//
  stroke(255, 255, 255, 30);
  noFill();
  ellipse(331 + 125,140 + 125,248,248);

  //fourth largest circle//
  stroke(255, 255, 255, 10);
  noFill();
  ellipse(351 + 107,158 + 107,212,212);

  //top of head, fifth largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(243 + 116,289 + 116,234,234);

  var a = color(255);
	stroke(a);
  noFill();
  arc(243 + 116,289 + 116,234,234, 250, 333);

  //sixth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(415 + 67,544 + 67,133,133);

  //eyebrow curve, seventh largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(277 + 51,350 + 54,91,96);

  //mouth curve, eigth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(251 + 29,413 + 29,56,57);

  var a = color(255);
	stroke(a);
  noFill();
  arc(251 + 29,413 + 29, 56,57, 0, 70);

  //face curve, largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(281 + 192,180 + 225,384,453);

  //neck//
  var neck = color(255, 40);
  stroke(neck);
  line(439, 415.26, 439, 544.5);

  //right shoulder//
  var rightcollar = color(255, 40);
  stroke(rightcollar);
  line(439, 544, 481, 544);

  var rightshoulder = color(255, 200);
  stroke(rightshoulder);
  arc(415 + 67,544 + 67,133,133, 270, 0);

  //neck curve, second largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(120 + 133,355 + 133,209,267);

  var a = color(255);
	stroke(a);
  noFill();
  arc(120 + 133,355 + 133,209,267, 0, 90);

  //nose, curve is third largest ellipse//
  stroke(255, 255, 255, 40);
  ellipse(144 + 70,235 + 117,141,234);

  //nosecurve//
  var a = color(255);
	stroke(a);
  noFill();
  arc(144 + 70,235 + 117,141,234, 31, 60);

  //nosebase//
  stroke(255, 255, 255, 200);
  line(262, 437, 282, 437);

  //hair//
  var hairbase = color(255, 40)
  stroke(hairbase)
  line(647.78, 503, 286.35, 503);

  var sidehair = color(255, 200);
  stroke(sidehair);
  line(439, 406.71, 438.89, 504.29);

  var slanthair = color(255, 200);
  stroke(slanthair);
  line(463, 352, 547, 504);
  line(546.83, 504, 439.71, 504); //bottom of hair//

  //eye//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(292 + 24,366 + 24,47,47);
  var a = color(255);
	stroke(a);
  fill(255);
  //arc(292 + 24,366 + 24,47,47, 0, PI - QUARTER_PI, OPEN);

  //eyeliner//
  var diagonalline = color(255);
	stroke(diagonalline);
  line(301.36, 406.64, 344, 377);

  //ear//
  var c = color(255, 40);
  stroke(c)
  line(406, 410.26, 406, 451);

  stroke(255, 255, 255, 40);
  noFill();
  ellipse(406 + 14.5,395 + 15,28,28);

}

function setGradient(x, y, w, h, color1, color2) {

  noFill();

   //Left to right gradient
   for (var i = y; i <= y+h; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(color1, color2, inter);
      stroke(c);
      line(i, y, i, y+h);
  }
}

Using and familiarizing myself with the p5 library for this assignment was an absolute blast. Having very little experience with it, I expected to feel the complete opposite as I’d cowered in fear of programming for years. Instead, setting up this composition felt oddly and incredibly satisfying, from design to debugging.

I composed my portrait from a series of intersecting ellipses and lines. Where these objects overlap is where the features of my profile are formed. I drew arcs atop the objects to highlight the important and recognizable features. I also added a slight horizontal gradient to add a smidgeon of depth.

In hindsight, it would’ve been nice to figure out how to increase the opaqueness of the parts of the objects that form the features rather than redrawing separate arcs on top. I also wish that I iterated further to explore other color relationships. Looking forward, I’d like to make this sketch respond to mouse position, specifically to have the highlighted arc areas glide around the ellipses they are based on, deconstructing and reforming my profile.