Author: Dana

danakim-LookingOutwards-06

“Flux” is a particle system based generative display typeface created by Gabriel Comym. The program generates 1,000 particles at a random location within a limited masking area, the type. Each particle behaves singularly and follows a random direction and velocity based on values from sine and cosine mathematical sequences. Each particles’ time, point size, and transparency value is randomized. Line segments are created between the particle’s starting point and the different points along the path the particle follows.

Gabriel Comym is a visual designer who specializes in interface design, which explains his use of typeface to explore the possibilities of computational design. I admire how simple the process actually is and how he makes such simple geometries come together to create a complex whole.

Flux; Gabriel Comym

Flux; Gabriel Comym

danakim-Project-05

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-05

function setup() {
  createCanvas(480, 480);
  background(256);
}

function draw() {
   for ( var i = 0; i < 480; i+=240){ //repeats pattern in y-direction
      for (var x = 0; x < 500; x+=48){ //repeats shapes in x-direction
        var h1 = random(30, 90); //randomized height for lines going down
        var h2 = random(130, 190); //randomized height for lines going up

        stroke((x+20)/.5, x/1.5, x/3);
        strokeWeight(48);
        line(x, 0+i, x, h1+i); //first row of lines
        line(x, 240+i, x, h2+i); //second row of lines

        stroke((x+20)/.5, x/1.5, x/3);
        strokeWeight(1);
        fill(256);
        ellipse(x, (h2-10)+i, 48, 35); //circles that rest on lines
        }
      }
    noLoop();
}

This project was fairly easy. I had the most trouble with figuring out how to get the line colors to be a gradient. I had originally wanted to make each line have a gradient color to make it seem more like cylinders. Instead, I made each line a solid color so it would be easier to distinguish each cylinder. The heights of each cylinder was randomized.

danakim-LookingOutwards-05

Insomnia; Tomasz Artur Bolek

Insomnia by Tomasz Artur Bolek, a 3D artist/ animator, is a typographic study where he externalizes his interest in urban structures. Bolek used 3D rendering and animation softwares, Blender and Keyshot, to articulate this typographic study.

I’m an architecture student so this project immediately caught my eye while I was looking through Behance. I found Bolek’s use of negative space to establish the shapes of the letters quite clever. I also like that he uses the lights shining through the windows as a way of creating contrast and making the letters pop. I admire the balance he was able to create between simplicity and detail.

Tomasz Artur Bolek; Insomnia

I, J, K, L; Tomasz Artur Bolek

danakim-Project-04

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-04

function setup() {
  createCanvas(400, 300);
  background(247, 196, 195);
}
function draw() {
  //midpoints of edge of canvas
  var x1 = width/2;
  var y1 = 0;
  var x2 = 0;
  var y2 = height/2;
  var x3 = width/2;
  var y3 = height;
  var x4 = width;
  var y4 = height/2;
  //outer corners
  var x5 = 0;
  var y5 = 0;
  var x6 = width;
  var y6 = 0;
  var x7 = width;
  var y7 = height;
  var x8 = 0;
  var y8 = height;

  stroke(0);
  strokeWeight(5);
  //midpoints of edges
  point(x1, y1);
  point(x2, y2);
  point(x3, y3);
  point(x4, y4);
  //outer corners
  point(x5, y5);
  point(x6, y6);
  point(x7, y7);
  point(x8, y8);

//midpoint of edge lines
  //lines from left midpoint of canvas to
  //points along the y-axis on top side of
  //canvas
  for(var i = 0; i <= 75; i+= 18.75){
    stroke(0);
    strokeWeight(1);
    line(0, height/2, width/2, i);
  }
  //lines from top midpoint of canvas to
  //points along the x-axis on left side of
  //canvas
  for(var i = 0; i <= 100; i+= 25){
    line(width/2, 0, i, height/2);
  }
  //lines from right midpoint of canvas to
  //points along the y-axis on top side of
  //canvas
  for(var i = 0; i <= 75; i+= 18.75){
    line(width, height/2, width/2, i);
  }
  //lines from top midpoint of canvas to
  //points along the x-axis on right side
  //of canvas
  for(var i = 400; i >= 300; i-= 25){
    line(width/2, 0, i, height/2);
  }
  //lines from left midpoint of canvas to
  //points along the y-axis on bottom side of
  //canvas
  for(var i = 300; i >= 225; i-= 18.75){
    line(0, height/2, width/2, i);
  }
  //lines from bottom midpoint of canvas to
  //points along the x-axis on left side of
  //canvas
  for(var i = 0; i <= 100; i+= 25){
    line(width/2, height, i, height/2);
  }
  //lines from right midpoint of canvas to
  //points along the y-axis on bottom side of
  //canvas
  for(var i = 225; i <= 300; i+= 18.75){
    line(width, height/2, width/2, i);
  }
  //lines from bottom midpoint of canvas to
  //points along the x-axis on right side
  //of canvas
  for(var i = 400; i >= 300; i-= 25){
    line(width/2, height, i, height/2);
  }

//outer corner lines
  //lines from top left corner to points
  // along top half of y-axis
  for(var i= 0; i <= 150; i += 18.75){
    stroke(0);
    strokeWeight(0.5);
    line(0, 0, width/2, i);
  }
  //lines from top left corner to points
  // along left half of x-axis
  for(var i= 0; i <= 200; i += 25){
    line(0, 0, i, height/2);
  }
  //lines from top right corner to points
  // along top half of y-axis
  for(var i= 0; i <= 150; i += 18.75){
    line(width, 0, width/2, i);
  }
  //lines from top right corner to points
  // along right half of x-axis
  for(var i= 200; i <= 400; i += 25){
    line(width, 0, i, height/2);
  }
  //lines from bottom left corner to points
  // along bottom half of y-axis
  for(var i= 150; i <= 300; i += 18.75){
    line(0, height, width/2, i);
  }
  //lines from bottom left corner to points
  // along right half of x-axis
  for(var i= 0; i <= 200; i += 25){
    line(0, height, i, height/2);
  }
  //lines from bottom right corner to points
  // along bottom half of y-axis
  for(var i= 150; i <= 300; i += 18.75){
    line(width, height, width/2, i);
  }
  //lines from top right corner to points
  // along right half of x-axis
  for(var i= 200; i <= 400; i += 25){
    line(width, height, i, height/2);
  }
}

This project was one of the easier ones we’ve had so far in my opinion. I used for() loops to generate the sets of lines. I kept it fairly simple by assigning the starting points to the corners of the canvas and to the midpoints of the edges of the canvas.

danakim-LookingOutwards-04

Howler Monkey by Meier & Erdmann is a music video created by Spanish visual artist, Victor Doval. He used the frequencies of the sounds in the music to define a landscape’s visual parameters algorithmically. This literally visualized the idea that music is a journey through a changing landscape that is interpreted through one’s ears.

Doval used Processing and Blender to create these visuals that are in sync with the music. This project was interesting to me because of the initial idea that music is a journey. I thought that this music video was a good example of what that could mean and demonstrating how that could be visualized. However, I do feel that it may interfere with other people’s interpretations.

Victor Doval; Howler Monkey

Victor Doval; Howler Monkey

sketch

//Dana Kim
// danakim@andrew.cmu.edu
//Section D
// Project-03

function setup() {
  createCanvas(640, 480);
  background(50);
}

var x = 320;
var y = 240;
var w = 4;
var angle = 0;

function draw() {
  //ColorChoice1
  if ((mouseY < y) & (mouseX < x)){
    c1 = "#FFA977"; //color for left cube
    c2 = "#FF3C38"; //color for top cube
    c3 = "#FF8D38"; //color for right cube
  }
  //ColorChoice2
  if ((mouseY > y) & (mouseX > x)){
    c1 = "#7A5C61";
    c2 = "#FF3C38";
    c3 = "#A23E48";
  }
  //ColorChoice3
  if ((mouseY > y) & (mouseX < x)){
    c1 = "#BB7279";
    c2 = "#68282E";
    c3 = "#A23E48";
  }

  //Rectangles change size, angle, and color
  push();
  noStroke();
  fill(c1);
  rotate(radians(angle));
  rect(318, 225, w, 30);
  translate(0, 100);
  fill(c2);
  rect(318, 225, w, 30);
  translate(0, -200);
  fill(c3);
  rect(318, 225, w, 30);
  pop();
  angle = angle + 50;

  //width of rectangles change
  if(mouseX>320){
    w = mouseX-300;
  }
  //circles change color and size
  if(mouseX < 320){
  fill(mouseX-200, mouseX+100, mouseY-200);
  stroke(265);
  ellipse(160, mouseY, mouseX-10, mouseX-10);
  }



}

I had originally planned on making a sandwich that would come apart and rotate. However, due to time constraints I decided to go with something simpler. The only problem I really bumped into was that the script kept redrawing the shapes. However, I thought it looked better with the redrawn parts.

danakim-LookingOutwards-03

Michael Hansmeyer; L-Systems in Architecture

Michael Hansmeyer’s L-Systems in Architecture explores the possibilities that L-Systems can open up in architecture. L-Systems is a string-rewriting algorithm that was created by biologist Aristid Lindenmayer. Lindenmayer created this algorithm to model simplified plants and their growth processes. Hansmeyer’s is an architect and programmer. His interests lie in the idea that architecture should be judged by the experiences that it produces. He takes advantage of computational methods to enhance these experiences intellectually and sensually.

There are two parts to the project. The first half explores which qualities of a design are essential to the logic of the algorithm. It considers methods for visualizing L-Systems. The second half incorporates aspects of parametric systems to expand the algorithm’s language. This part of the project explores the different ways that the L-System can react to its environment and how these adaptations can physically be applied to architectural design.

Nature has been the muse of many architects due to it’s forms and geometries. Many times the product of nature’s inspiration is executed too literally. Hansmeyer utilizes these characteristics as ways to improve the function of a building rather than to solely determine it’s form.

Michael Hansmeyer; L-Systems

Michael Hansmeyer; L-Systems
Michael Hansmeyer; L-Systems

 

danakim_Project-02

danakim_Project02

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-02

//Background Colors
var b1= "#E87B3D";
var b2= "#F37C90";
var b3= 265;
var colors= [b1, b2, b3];

//Face colors
var fc1= "#AA723F";
var fc2= "#3A3A3A";
var facecolors= [fc1, fc2];

//eyes
var eyecolor1= "#A91E22";
var eyecolor2= "#2C1A0E";
var eyecolor3= "#FFFFFF";
var eyecolors= [eyecolor1, eyecolor2, eyecolor3];
var eyes= 1;
var eyetype= [1,2];

//ears; iec= interior ear color
var iec1= 0;
var iec2= "#FF8DB0";
var iec3= "#4C330F";
var intearcolors= [iec1, iec2, iec3];

//piercings
var pierce= 1;
var plocation= [1,2];

//Nose
var n1= "#1E1D1D";
var n2= "#70411B";
var nosecolor= [n1, n2];


function setup() {
    createCanvas(640, 480);
}

function draw() {
    //determines background color
    background(b3);

    //Head
    noStroke();
    fill(fc2);
    ellipse(315, 232, 278, 232);

    beginShape();
    curveVertex(401, 208);
    curveVertex(439, 225);
    curveVertex(458, 246);
    curveVertex(465, 267);
    curveVertex(466, 283);
    curveVertex(464, 304);
    curveVertex(457, 318);
    curveVertex(446, 334);
    curveVertex(440, 343);
    curveVertex(433, 352);
    curveVertex(423, 369);
    curveVertex(418, 381);
    curveVertex(410, 402);
    curveVertex(397, 419);
    curveVertex(377, 432);
    curveVertex(359, 438);
    curveVertex(327, 443);
    curveVertex(311, 442);
    curveVertex(288, 441);
    curveVertex(264, 435);
    curveVertex(241, 423);
    curveVertex(223, 401);
    curveVertex(217, 386);
    curveVertex(211, 371);
    curveVertex(196, 347);
    curveVertex(180, 329);
    curveVertex(172, 317);
    curveVertex(167, 295);
    curveVertex(167, 277);
    curveVertex(180, 244);
    curveVertex(207, 223);
    endShape(CLOSE);

    //Nose
    fill(n1);
    beginShape();
    curveVertex(318, 327);
    curveVertex(322, 327);
    curveVertex(330, 327);
    curveVertex(333, 327);
    curveVertex(337, 328);
    curveVertex(340, 329);
    curveVertex(344, 329);
    curveVertex(348, 331);
    curveVertex(354, 333);
    curveVertex(357, 335);
    curveVertex(360, 337);
    curveVertex(363, 338);
    curveVertex(367, 341);
    curveVertex(371, 344);
    curveVertex(374, 347);
    curveVertex(376, 350);
    curveVertex(383, 358);
    curveVertex(389, 364);
    curveVertex(392, 369);
    curveVertex(393, 371);
    curveVertex(396, 377);
    curveVertex(399, 383);
    curveVertex(401, 388);
    curveVertex(402, 392);
    curveVertex(403, 394);
    curveVertex(403, 401);
    curveVertex(404, 406);
    curveVertex(404, 409);
    curveVertex(402, 415);
    curveVertex(400, 418);
    curveVertex(395, 425);
    curveVertex(387, 431);
    curveVertex(380, 435);
    curveVertex(371, 438);
    curveVertex(359, 440);
    curveVertex(348, 441);
    curveVertex(335, 442);
    curveVertex(327, 442);
    curveVertex(316, 442);
    curveVertex(299, 441);
    curveVertex(285, 440);
    curveVertex(273, 439);
    curveVertex(264, 437);
    curveVertex(261, 435);
    curveVertex(255, 433);
    curveVertex(249, 430);
    curveVertex(243, 426);
    curveVertex(239, 423);
    curveVertex(233, 416);
    curveVertex(229, 409);
    curveVertex(227, 403);
    curveVertex(227, 395);
    curveVertex(228, 388);
    curveVertex(230, 379);
    curveVertex(235, 369);
    curveVertex(238, 364);
    curveVertex(243, 358);
    curveVertex(251, 351);
    curveVertex(261, 343);
    curveVertex(270, 339);
    curveVertex(383, 334);
    curveVertex(294, 331);
    curveVertex(301, 329);
    curveVertex(310, 327);
    endShape(CLOSE);

    //nostrils
    fill(0);
    //left nostril
    beginShape();
    curveVertex(302, 378);
    curveVertex(299, 381);
    curveVertex(290, 385);
    curveVertex(283, 386);
    curveVertex(276, 386);
    curveVertex(268, 384);
    curveVertex(263, 381);
    curveVertex(258, 375);
    curveVertex(256, 368);
    curveVertex(260, 360);
    curveVertex(267, 356);
    curveVertex(274, 359);
    curveVertex(278, 362);
    curveVertex(283, 367);
    curveVertex(288, 373);
    curveVertex(295, 376);
    endShape(CLOSE);
    //right nostril
    beginShape();
    curveVertex(336, 378);
    curveVertex(337, 377);
    curveVertex(340, 377);
    curveVertex(343, 376);
    curveVertex(346, 375);
    curveVertex(348, 374);
    curveVertex(350, 373);
    curveVertex(352, 371);
    curveVertex(354, 369);
    curveVertex(356, 366);
    curveVertex(357, 364);
    curveVertex(361, 361);
    curveVertex(364, 358);
    curveVertex(366, 357);
    curveVertex(367, 356);
    curveVertex(369, 356);
    curveVertex(371, 356);
    curveVertex(374, 357);
    curveVertex(375, 358);
    curveVertex(377, 359);
    curveVertex(378, 361);
    curveVertex(379, 362);
    curveVertex(381, 365);
    curveVertex(381, 366);
    curveVertex(381, 370);
    curveVertex(381, 373);
    curveVertex(380, 375);
    curveVertex(378, 377);
    curveVertex(376, 380);
    curveVertex(374, 381);
    curveVertex(372, 383);
    curveVertex(370, 384);
    curveVertex(366, 384);
    curveVertex(362, 386);
    curveVertex(358, 386);
    curveVertex(354, 386);
    curveVertex(349, 384);
    curveVertex(345, 384);
    curveVertex(342, 383);
    curveVertex(339, 381);
    endShape(CLOSE);

    //eyes
    fill(eyecolor1);
    //eyes1
    if(eyes == 1){
      //right eye
      ellipse(402, 296, 45, 45);
      //left eye
      ellipse(227, 297, 45, 45);
      //"eyebrows"
      stroke(eyecolor1);
      strokeWeight(6);
      line(374, 283, 432, 264);
      strokeWeight(6);
      line(256, 284, 198, 266);
    }
    //eyes2
    if(eyes == 2){
      //Left eye
      beginShape();
      curveVertex(261, 299);
      curveVertex(254, 297);
      curveVertex(247, 297);
      curveVertex(237, 301);
      curveVertex(229, 302);
      curveVertex(222, 300);
      curveVertex(217, 296);
      curveVertex(214, 290);
      curveVertex(213, 283);
      curveVertex(215, 277);
      curveVertex(219, 271);
      curveVertex(224, 267);
      curveVertex(231, 265);
      curveVertex(237, 264);
      curveVertex(243, 266);
      curveVertex(249, 270);
      curveVertex(254, 276);
      curveVertex(259, 286);
      curveVertex(261, 295);
      endShape(CLOSE);
      //right eye
      beginShape();
      curveVertex(370, 299);
      curveVertex(369, 294);
      curveVertex(372, 286);
      curveVertex(374, 280);
      curveVertex(376, 276);
      curveVertex(382, 270);
      curveVertex(388, 266);
      curveVertex(394, 265);
      curveVertex(399, 265);
      curveVertex(406, 267);
      curveVertex(412, 271);
      curveVertex(416, 276);
      curveVertex(418, 283);
      curveVertex(417, 290);
      curveVertex(413, 296);
      curveVertex(408, 300);
      curveVertex(402, 302);
      curveVertex(393, 301);
      curveVertex(384, 297);
      curveVertex(377, 297);
      endShape(CLOSE);
    }

      //horns
      fill(265);
      stroke(0);
      strokeWeight(5);
      //right horn
      beginShape();
      curveVertex(524, 29);
      curveVertex(532, 47);
      curveVertex(536, 70);
      curveVertex(535, 97);
      curveVertex(529, 117);
      curveVertex(519, 135);
      curveVertex(505, 150);
      curveVertex(475, 166);
      curveVertex(429, 184);
      curveVertex(420,185);
      curveVertex(412, 182);
      curveVertex(397, 169);
      curveVertex(384, 144);
      curveVertex(384, 130);
      curveVertex(391, 124);
      curveVertex(434, 125);
      curveVertex(464, 122);
      curveVertex(490, 115);
      curveVertex(506, 106);
      curveVertex(513, 98);
      curveVertex(517, 91);
      curveVertex(522, 67);
      curveVertex(522, 41);
      endShape(CLOSE);
      //left horn
      beginShape();
      curveVertex(104, 33);
      curveVertex(106, 47);
      curveVertex(107, 76);
      curveVertex(115, 101);
      curveVertex(127, 113);
      curveVertex(142, 120);
      curveVertex(165, 125);
      curveVertex(196, 128);
      curveVertex(232, 187);
      curveVertex(240, 128);
      curveVertex(244, 133);
      curveVertex(244, 145);
      curveVertex(237, 162);
      curveVertex(226, 177);
      curveVertex(216, 185);
      curveVertex(206, 188);
      curveVertex(169, 176);
      curveVertex(153, 169);
      curveVertex(122, 152);
      curveVertex(109, 138);
      curveVertex(99, 119);
      curveVertex(93, 100);
      curveVertex(92, 73);
      curveVertex(97, 46);
      endShape(CLOSE);

    //ears
    noStroke();
    fill(fc2);
    beginShape();
    //exterior right ear
    curveVertex(566, 194);
    curveVertex(562, 211);
    curveVertex(550, 225);
    curveVertex(533, 239);
    curveVertex(510, 251);
    curveVertex(490, 257);
    curveVertex(472, 259);
    curveVertex(454, 257);
    curveVertex(441, 249);
    curveVertex(428, 234);
    curveVertex(422, 218);
    curveVertex(423, 206);
    curveVertex(429, 195);
    curveVertex(446, 186);
    curveVertex(471, 179);
    curveVertex(496, 176);
    curveVertex(514, 177);
    curveVertex(546, 184);
    curveVertex(560, 189);
    endShape(CLOSE);
    //exterior left ear
    beginShape();
    curveVertex(67, 202);
    curveVertex(75, 216);
    curveVertex(88, 229);
    curveVertex(101, 239);
    curveVertex(114, 247);
    curveVertex(140, 256);
    curveVertex(162, 259);
    curveVertex(176, 258);
    curveVertex(193, 249);
    curveVertex(205, 236);
    curveVertex(212, 218);
    curveVertex(211, 206);
    curveVertex(206, 198);
    curveVertex(195, 189);
    curveVertex(162, 179);
    curveVertex(143, 176);
    curveVertex(126, 176);
    curveVertex(88, 184);
    curveVertex(75, 188);
    curveVertex(67, 194);
    endShape(CLOSE);
    //interior right ear
    fill(iec1);
    beginShape();
    curveVertex(457, 249);
    curveVertex(453, 235);
    curveVertex(456, 220);
    curveVertex(465, 209);
    curveVertex(473, 204);
    curveVertex(487, 200);
    curveVertex(510, 199);
    curveVertex(527, 198);
    curveVertex(546, 195);
    curveVertex(562, 194);
    curveVertex(567, 196);
    curveVertex(565, 206);
    curveVertex(562, 211);
    curveVertex(555, 221);
    curveVertex(530, 241);
    curveVertex(508, 251);
    curveVertex(490, 257);
    curveVertex(476, 260);
    curveVertex(466, 259);
    endShape(CLOSE);
    //interior left ear
    beginShape();
    curveVertex(66, 196);
    curveVertex(72, 194);
    curveVertex(89, 196);
    curveVertex(123, 199);
    curveVertex(146, 200);
    curveVertex(152, 201);
    curveVertex(162, 205);
    curveVertex(171, 212);
    curveVertex(177, 220);
    curveVertex(179, 228);
    curveVertex(180, 236);
    curveVertex(178, 245);
    curveVertex(173, 254);
    curveVertex(167, 259);
    curveVertex(159, 260);
    curveVertex(144, 257);
    curveVertex(115, 247);
    curveVertex(94, 235);
    curveVertex(79, 221);
    curveVertex(71, 211);
    curveVertex(66, 202);
    endShape(CLOSE);

    //piercings
    fill(239, 202, 44);
    //piercing1
    if(pierce == 1){
      strokeWeight(6);
      strokeCap(SQUARE);
      stroke(239, 202, 44);
      noFill();
      arc(317, 403, 69, 69, QUARTER_PI, PI+QUARTER_PI);
    }

    //piercing2
    if(pierce == 2){
      triangle(531, 216, 511, 250, 551, 250);
      ellipse(531, 216, 20, 20);
    }


}

function mousePressed() {
    // when the user clicks the mouse, these variables are reassigned
    // to preset values at random.
    b3= random(colors);
    fc2= random (facecolors);
    eyecolor1= random(eyecolors);
    eyes= random(eyetype);
    n1= random(nosecolor);
    iec1= random(intearcolors);
    pierce= random(plocation);

}

 

The process took a bit of time because I used curveTexture() to create a lot of the shapes I needed. It was a very inefficient process and I’m sure that there is a more efficient and concise way that I could have executed the script. Overall, the project itself was really fun. I wasn’t able to execute all the features I wanted to put into it but I’m still pleased with the overall outcome. Below are the reference drawings that I had made before starting the script.

  

danakim-Section D-Looking Outwards-02

 

Ian Cheng; Emissary Sunsets The Self

Ian Cheng’s Emissary Sunsets The Self (2017) is the last work in his Emissaries trilogy (2015-2017). Emissary Sunsets The Self is an open ended live digital simulation that explores the complex themes of evolution, human behavior, and the history of consciousness. These themes were derived from Cheng’s background in cognitive science. Cheng utilizes a video game engine to create unpredictable animated worlds. He employs computer generated simulations, similar to those used in predictive technologies, to create these complex settings. Each character in this simulated world is equipped with custom AI that reacts to the surrounding environment as well as other characters within the simulated world.

The idea that a computer generated simulation could basically react to itself is very compelling yet a bit disturbing. The artist himself does not even know what outcomes would be produced from this simulation. Being able to learn more about the human condition through this technology is ironic. This irony gives the simulation an even more mysterious personality.

Watch live video from MoMA on www.twitch.tv

iancheng.com

 

 

 

danakim-Project-01-face

danakim_project01

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Self Portrait

function setup() {
    createCanvas(400, 400);
    background(170, 200, 192);
}

function draw() {
    //Background grid stroke properties
    stroke(244, 205, 44);
    strokeWeight(5);

    //Background grid
    line(100, 0, 100, 400);
    line(200, 0, 200, 400);
    line(300, 0, 300, 400);
    line(0, 100, 400, 100);
    line(0, 200, 400, 200);
    line(0, 300, 400, 300);

    //Hair
    noStroke();
    fill(33, 23, 12);
    ellipse(216, 147, 105, 71);
    ellipse(157, 168, 54, 61);
    ellipse(146, 250, 47, 212);
    ellipse(250, 250, 52, 200);
    ellipse(200, 250, 30, 200);
    ellipse(190, 250, 35, 200);
    ellipse(175, 250, 42, 205);
    ellipse(215, 250, 25, 203);
    ellipse(225, 250, 30, 206);

    //Face
    noStroke();
    fill(228, 195, 173);
    ellipse(200, 210, 130, 137);

    //eyes
    fill(265);
    ellipse(230, 200, 25, 23);
    ellipse(168, 200, 25, 23);

    fill(114, 67, 6);
    ellipse(234, 200, 16, 18);
    ellipse(172, 200, 16, 18);

    //eyebrows
    noFill();
    stroke(33, 23, 12);
    strokeWeight(5.0);
    strokeJoin(ROUND);
    beginShape();
    vertex(217, 172);
    vertex(243, 165);
    vertex(251, 174);
    endShape();

    line(149, 174, 185, 174);

    //Nose
    stroke(33, 23, 12);
    strokeWeight(1);
    line(200, 205, 196, 230);
    line(196, 230, 200, 230);

    //Lips
    noStroke();
    fill(227, 157, 143);
    triangle(189, 247, 197, 240, 209, 247);
    triangle(199, 247, 209, 240, 216, 247);

    fill(211, 132, 116);
    arc(200, 247, 27, 15, 0, PI, CHORD);

    //neck
    fill(228, 195, 173);
    rect(185, 270, 30, 50);

    //body
    fill(44, 59, 134);
    rect(150 ,320, 100, 20);

    fill(90, 100, 149);
    quad(160, 340, 240, 340, 235, 400, 165, 400);
}

I can barely draw people by hand let alone coding. However, the coding aspect of the project was not difficult. If anything it was a bit time consuming figuring out coordinates.