Author: Ily

Project 2: My (Variable) Self Portrait

I took my original self portrait and modified it to be variable, as that’s what I thought originally we were supposed to do. My bad for misinterpreting, if I did. But the idea here is that the hair length and color, as well as skin and eye color will change randomly as you click. You may also notice some weird little ditties in the code, as well as the fact that the eyes follow your mouse. Those are the animations I thought we were supposed to do (again, my bad for misinterpreting!) that are now just fun little easter eggs to play with!

sketch
let leftbrowx = 210; //x coordinate of the original vertex of the left brow
let browY = 185; //y coordinate of both brows
let rightbrowx = 273; //x coordinate of the original vertex of the right brow
haircenterX = 225; //x coordinate of the point around which hair rotates and from which it originates
haircenterY = 170; //y coordinate of the point around which hair rotates and from which it originates

let lefteyex = 262; //x coordinate of the center of the left eye
let righteyex = lefteyex-40; //x coordinate of the center of the right eye
let eyey = 198; //y coordinate of the center of both eyes
let mouthY = 225; //y coordinate of the vertices of the mouth
let eyeRed = 33; //Red tint of the iris
let eyeGreen = 6; //Green tint of the iris
let eyeBlue = 4; //Blue tint of the iris
let hairRed = 40; //Red tint of the hair
let hairBlue = 26; //Green tint of the hair
let hairGreen = 34; //Blue tint of the hair
let skinRed = 255; //Red tint of the skin
let skinGreen = 233; //Green tint of the skin
let skinBlue = 199; //Blue tint of the skin
let hairLen = 50; //Length of hair in the back of the head
performingAnim = false; //determines whether or not an animation is occurring, and retains the face until the animation has stopped and the face returns to default (not default color, as in expression)


function setup() {
    createCanvas(500, 500);
    background(255,138,120);
}
function draw() {
    background(255,138,120);

    //behind head hair
    noStroke();
    fill(hairRed, hairGreen, hairBlue);
    beginShape();
    vertex(haircenterX,haircenterY);
    curveVertex(haircenterX,haircenterY);
    curveVertex(haircenterX-20,haircenterY+hairLen/2)
    vertex(haircenterX-10-10,haircenterY+40+(hairLen-30));
    vertex(haircenterX-5-10,haircenterY+53+(hairLen-30));
    vertex(haircenterX+1+10,haircenterY+60+(hairLen-30)+10);
    vertex(haircenterX+4+10,haircenterY+60+(hairLen-30)+10);
    vertex(haircenterX+45+15,haircenterY+62+(hairLen-20));
    vertex(haircenterX+55+15,haircenterY+55+(hairLen-20));
    vertex(haircenterX+63+15,haircenterY+50+(hairLen-20));
    vertex(haircenterX+45+35.5,haircenterY+40+(hairLen-20));
    curveVertex(haircenterX+75,haircenterY+hairLen/2);
    curveVertex(haircenterX+40,haircenterY);
    curveVertex(haircenterX+20,haircenterY-10);
    endShape();
    stroke(hairRed+100, hairGreen+50, hairBlue+50);
    strokeWeight(1)
    arc(haircenterX-10,haircenterY+40+(hairLen-30),30,hairLen,8.5,4.5); //15
    arc(haircenterX+63,haircenterY+50+(hairLen-30),40,hairLen+10,6,8,OPEN); //20
    arc(haircenterX+45,haircenterY+40+(hairLen-30),75,hairLen+10,5.7,6.6,OPEN); //37.5
    arc(haircenterX+55,haircenterY+55+(hairLen-30),40,hairLen+10,6.1,8,OPEN); //20
    arc(haircenterX+45,haircenterY+62+(hairLen-30),40,hairLen+10,6.2,8,OPEN); //20
    arc(haircenterX-5,haircenterY+53+(hairLen-30),30,hairLen,7.6,3.7); //15
    arc(haircenterX+1,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
    arc(haircenterX+4,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
    push();
    rotate(0.1);
    arc(haircenterX+40,haircenterY+40+(hairLen-30),30,hairLen,7.6,3);
    pop();


    //cranium and fillings
    angleMode(RADIANS);
    fill(skinRed,skinGreen,skinBlue);
    noStroke();
    ellipse(246.8,500/2.195-12,71.5,55.8);
    stroke(0);
    arc(249,500/3+8.5,92,90,2.5,7.05,OPEN);
    noStroke();
    ellipse(221,500/2.45,20,30);
    ellipse(282,500/2-42,10,10);
    stroke(0);
    noStroke();
    fill(222, 0, 111);
    ellipse(262,270,100,20);
    triangle(160,500,260,260,388,500);
    stroke(0);
    arc(262,270,100,20,3.2,6.2);

    //neck
    noStroke();
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(239,258);
    curveVertex(240,268);
    curveVertex(285,266);
    curveVertex(281,250);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape();
    noFill();
    stroke(0);
    arc(230,245,20,50,5.5,8);
    arc(290,225,20,80,7.8,10);
    fill(skinRed,skinGreen,skinBlue);

    //clothes (it's just a blanket)
    fill(222, 0, 111);
    beginShape();
    vertex(240,258);
    vertex(225,255);
    vertex(205,257);
    vertex(190,280);
    vertex(180,350);
    vertex(150,470);
    vertex(162,500);
    vertex(180,520);
    endShape(OPEN);
    beginShape();
    vertex(200,400);
    vertex(240,256);
    vertex(250,268);
    vertex(260,258);
    vertex(300,255);
    vertex(320,257);
    vertex(350,285);
    vertex(365,350);
    vertex(400,440);
    vertex(398,500);
    vertex(360,530);
    endShape(OPEN);
    curve(245,264,240,268,197,270,200,220);
    curve(245,264,240,268,183,340,200,220);
    curve(220,390,208,420,160,460,130,420);
    curve(260,265,255,268,335,270,330,220);
    curve(260,265,255,268,365,350,330,220);
    curve(220,370,200,400,365,440,330,220);
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    vertex(239,255);
    vertex(235,278);
    vertex(275,256);
    endShape(OPEN);
    line(200,400,240,500);

    //chin segments
    fill(skinRed,skinGreen-50,skinBlue-20);
    noStroke();
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(250,253);
    curveVertex(260,249);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    stroke(0);
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    curveVertex(215,231);
    curveVertex(215,231);
    curveVertex(228,243);
    curveVertex(250,244);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    push();
    translate(215, 216.43);
    rotate(-0.2);
    arc(3,0,15,42,8,4.45,OPEN);
    pop();

    //ear
    push();
    translate(284,500/2-32);
    rotate(0.3);
    arc(0,-5,13,26,4.1,8.1,OPEN);
    arc(1,-5,7,15,8,4.6,OPEN);
    pop();
    arc(284.9,500/2-35,4,8,4,7,OPEN);

    //left eye (of body)
    noStroke();
    fill(255);
    ellipse(lefteyex,eyey+1,20,16);
    fill(240);
    arc(lefteyex,eyey-2,20,10,3.2,6.3);
    fill(eyeRed,eyeGreen,eyeBlue);
    noStroke();
    if (mouseY > 208) {
        irisY = eyey+2;
    } else{
        irisY = eyey;
    }
    if (mouseX > 255 & mouseX < 267) {
        leftposX = mouseX
    }
    if (mouseX > 267){
        leftposX = lefteyex+5
    }
    if (mouseX < 255) {
        leftposX = lefteyex-5
    }
    ellipse(leftposX,irisY,10,14) //iris
    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
    ellipse(leftposX,irisY+4,6,5); //under-pupil highlight
    fill(0);
    ellipse(leftposX,irisY,5,8); //pupil
    fill(255);
    ellipse(leftposX-2,irisY-2,3,6); //over pupil highlight
    stroke(0);
    noFill();
    ellipse(leftposX,irisY,9,13);
    
    arc(222,196,20,10,3.2,6.3)

    //right eye (of body)
    noStroke();
    fill(255);
    ellipse(righteyex,eyey+1,20,16);
    fill(240);
    arc(righteyex,eyey-2,20,10,3.2,6.3);
    fill(eyeRed,eyeGreen,eyeBlue);
    noStroke();
    if (mouseX > 218 & mouseX < 230) {
        rightposX = mouseX;
    }
    if (mouseX > 230){
        rightposX = righteyex+6;
    }
    if (mouseX < 218) {
        rightposX = righteyex-4;
    }
    ellipse(rightposX,irisY,10,14) //iris
    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
    ellipse(rightposX,irisY+4,6,5); //under-pupil highlight
    fill(0);
    ellipse(rightposX,irisY,5,8); //pupil
    fill(255);
    ellipse(rightposX-2,irisY-2,3,6); //over-pupil highlight
    stroke(0);
    noFill();
    ellipse(rightposX,irisY,9,13);

    arc(262,196,20,10,3.2,6.3);
        

    //mouth
    stroke(0);
    if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //frowning action
        while(mouthY < 245){
            mouthY = mouthY+1;
        }
        curve(228, mouthY, 233, 230, 240, 230, 245, mouthY);
        performingAnim = true;
    } 
    else {
        curve(228, 225, 233, 230, 240, 230, 245, 225);
        performingAnim = false;
    }
    if(mouseX > 230 & mouseX < 240 && mouseY > 220 && mouseY < 235 && mouseIsPressed === true){ //makes my mouth open and close randomly, for no good reason.
        stroke(0);
        fill(227, 85, 66);
        ellipse(236.5, 230,10,8);
        performingAnim = true;
    } 

    //nose
    fill(skinRed,skinGreen-50,skinBlue-20);
    noStroke();
    triangle(240,215,232,215,235,218);
    stroke(0);
    noFill();
    arc(226,208,18,20,6.1,7.1);
    arc(240,213,15,10,8.8,9.2);

    //eyebrows
    noStroke();
    fill(hairRed, hairGreen, hairBlue);
    if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //eyebrow furrowing action
        while (leftbrowx < 215 && browY < 190 && rightbrowx > 268) {
            leftbrowx = leftbrowx+1
            rightbrowx = rightbrowx-1
            browY = browY+1

            push();
            rotate(0.01);
            beginShape();
            curveVertex(leftbrowx,browY);
            curveVertex(leftbrowx+7,browY-5);
            curveVertex(leftbrowx+18,browY-1);
            curveVertex(leftbrowx+25,browY-2);
            curveVertex(leftbrowx+20,browY-8);
            curveVertex(leftbrowx+7,browY-8);
            endShape(CLOSE);
            pop();

            push();
            rotate(-0.02);
            beginShape();
            curveVertex(rightbrowx,browY);
            curveVertex(rightbrowx-7,browY-1);
            curveVertex(rightbrowx-18,browY+3);
            curveVertex(rightbrowx-25,browY+2);
            curveVertex(rightbrowx-20,browY-4);
            curveVertex(rightbrowx-7,browY-4);
            endShape(CLOSE);
            pop();
            performingAnim = true;
        }
        if (leftbrowx >= 215 & browY >= 190 && rightbrowx <= 268){
            push();
            rotate(0.01);
            beginShape();
            curveVertex(leftbrowx-6,browY-5);
            curveVertex(leftbrowx-0,browY-3);
            curveVertex(leftbrowx+15,browY-0);
            curveVertex(leftbrowx+22,browY-1);
            curveVertex(leftbrowx+17,browY-6);
            curveVertex(leftbrowx+4,browY-6);
            endShape(CLOSE);
            pop();

            push();
            rotate(-0.02);
            beginShape();
            curveVertex(rightbrowx-2,browY+2);
            curveVertex(rightbrowx-8,browY+4);
            curveVertex(rightbrowx-19,browY+7);
            curveVertex(rightbrowx-26,browY+6);
            curveVertex(rightbrowx-21,browY+1);
            curveVertex(rightbrowx-8,browY+1);
            endShape(CLOSE);
            pop();
            performingAnim = true;
        }
    } else {
        let leftbrowx = 210;
        let browY = 185;
        let rightbrowx = 273;
        beginShape();
        curveVertex(leftbrowx,browY+3);
        curveVertex(leftbrowx+7,browY+2);
        curveVertex(leftbrowx+18,browY+4);
        curveVertex(leftbrowx+25,browY+3);
        curveVertex(leftbrowx+20,browY-1);
        curveVertex(leftbrowx+7,browY-1);
        endShape(CLOSE);
        beginShape();
        curveVertex(rightbrowx,browY+3);
        curveVertex(rightbrowx-7,browY+2);
        curveVertex(rightbrowx-18,browY+4);
        curveVertex(rightbrowx-25,browY+3);
        curveVertex(rightbrowx-20,browY-1);
        curveVertex(rightbrowx-7,browY-1);
        endShape(CLOSE);
        performingAnim = false;
    }
    

    //hair
    fill(hairRed, hairGreen, hairBlue);
    beginShape();
    vertex(200,175);
    vertex(220,140);
    vertex(228,127);
    vertex(290,139);
    vertex(295,160);
    vertex(295,190);
    vertex(285,190);
    vertex(235,162);
    vertex(225,170);
    endShape();

    stroke(hairRed+100, hairGreen+50, hairBlue+50);
    strokeWeight(1)
    arc(haircenterX-15,haircenterY+10,20,50,8,3.5);
    noStroke();
    rect(haircenterX-16,haircenterY+5,5,5);
    stroke(hairRed+100, hairGreen+50, hairBlue+50);

    beginShape();
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-28,haircenterY+2);
    curveVertex(haircenterX-47,haircenterY-9);
    curveVertex(haircenterX-28,haircenterY-7);
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-15,haircenterY-10);
    endShape();

    beginShape();
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-12,haircenterY+8);
    curveVertex(haircenterX-25,haircenterY+10);
    curveVertex(haircenterX-40,haircenterY);
    curveVertex(haircenterX-30,haircenterY+3);
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-20,haircenterY-2);
    endShape();

    beginShape();
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX-1,haircenterY+2);
    curveVertex(haircenterX-5,haircenterY+8);
    curveVertex(haircenterX-15,haircenterY+14);
    curveVertex(haircenterX-27,haircenterY+15);
    curveVertex(haircenterX-16,haircenterY+8);
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-8,haircenterY);
    endShape();

    beginShape();
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-28,haircenterY-7);
    curveVertex(haircenterX-50,haircenterY-12);
    curveVertex(haircenterX-35,haircenterY-16);
    curveVertex(haircenterX-15,haircenterY-35);
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX,haircenterY-30);
    endShape();

    beginShape();
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX-15,haircenterY-35);
    curveVertex(haircenterX-24,haircenterY-50);
    curveVertex(haircenterX-15,haircenterY-40);
    curveVertex(haircenterX,haircenterY-40);
    curveVertex(haircenterX,haircenterY-40);
    endShape();

    arc(haircenterX+36,haircenterY+5,90,90,5.3,6.9,OPEN);
    arc(haircenterX+28,haircenterY-5,90,90,4,5.8,OPEN);

    beginShape();
    curveVertex(haircenterX+55,haircenterY+28);
    curveVertex(haircenterX+55,haircenterY+28);
    curveVertex(haircenterX+64,haircenterY+33);
    curveVertex(haircenterX+65,haircenterY+45);
    curveVertex(haircenterX+72,haircenterY+35);
    curveVertex(haircenterX+75,haircenterY+28);
    curveVertex(haircenterX+75,haircenterY+28);
    endShape();

    //sideburn
    push();
    rotate(-0.2);
    arc(haircenterX+10,haircenterY+88,10,30,8,5.5,CLOSE);

    //sideswoop
    pop();
    push();
    rotate(-1.4);
    arc(haircenterX-365,haircenterY+145,15,30,7.8,4.8,CLOSE);
    rotate(-0.1);
    arc(haircenterX-390,haircenterY+130,15,30,7.8,4.8,CLOSE);
    arc(haircenterX-385,haircenterY+125,15,30,7.8,4.8,CLOSE);
    pop();

    beginShape();
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+20,haircenterY-2);
    curveVertex(haircenterX+28,haircenterY+6);
    curveVertex(haircenterX+40,haircenterY+14);
    curveVertex(haircenterX+65,haircenterY+25);
    curveVertex(haircenterX+48,haircenterY+10);
    curveVertex(haircenterX+40,haircenterY);
    curveVertex(haircenterX+35,haircenterY-8);
    curveVertex(haircenterX+35,haircenterY-8);
    endShape();

}
function mousePressed() {
    if (performingAnim === false) { //runs the code which changes all the variables
        eyeBlue = random(0,100);
        eyeRed = random(0,100);
        eyeGreen = random(0,100);
        hairRed = random(0,80);
        hairGreen = random(0,80);
        hairBlue = random(0,80);
        skinBlue = random(155,215);
        skinGreen = random(skinBlue,245);
        skinRed = random(skinGreen,255);
        hairLen = random(10,100);
    } else { //prevents it from doing that while the mouse is pressed down over the two animation spots
        eyeBlue = eyeBlue;
        eyeRed = eyeRed;
        eyeGreen = eyeGreen;
        hairRed = hairRed;
        hairGreen = hairGreen;
        hairBlue = hairBlue;
        skinBlue = skinBlue;
        skinGreen = skinGreen;
        skinRed = skinRed;
        hairLen = hairLen;
    }
    
}

I misinterpreted the original directions of the project and instead of making the face change, I made it interactive. Because (in all honesty) I was too lazy and didn’t want all my hard work to go to waste, I just left it and incorporated it into the portrait.

LO: “Hidden Order” Generative Muslim Geometric Art and Music

As a Muslim American I’ve had the privilege of coming from an artistic heritage of geometric graphic art. From the Alhambra to the niche at the CFA, Muslim geometric art is one of the most amazingly simple yet dazzlingly complicated art forms I’ve ever studied. (historical studies, of course. I’m not good enough at drawing it yet!) So naturally I went looking for some Muslim generative geometric art, and I found this amazing project called A Hidden Order, a cross disciplinary collaboration between traditional Muslim-British geometer Sama Mara, and English musician Lee Westwood. 

By combining sound and geometry they have created a generative art process where the music and sound informs the composition of the piece. First, Lee Westwood (and co) play a pre-composed piece. This is then run through algorithms and code to generate a colorful geometric image which assembles itself over the course of the piece. Some of them could then be photographed and turned into prints like these:

Octagon III – Conga – Variation I. 80 by 80cm

I’m not sure how exactly they might have even approached the algorithms to this. Just the concept boggles my mind. To see them actually performing and having the piece assemble as they play is even more astounding. This was what was said of the project by the author of the Islamic Digital Arts blog: “Each key or note was interpreted by a program that would then convert the sound to form part of a colour and shape system.” And yes, while some might think it looks like a kaleidoscope, it isn’t so simple. These forms are not just refractions of glass but are a part of a sacred geometry which has influenced the architecture and art of large parts of the world for over a millennia. If these were ceramic tiles, I could see them decorating the walls of grand mosques from Morocco to Indonesia. Were they carved stone, I could imagine them as the dazzling domes of the mosques in Isfahan. Not only is there a mathematical and artistic significance here, but a cultural one as well.

At the end of the day, I’m not so concerned with the algorithm as with the intersections and overlap of Western, Islamic, musical and visual arts and math. It’s really a gorgeous representation of how so many seemingly different things can come together to create beautiful art!

Project 1: My Self Portrait

sketch
function setup() {
    createCanvas(500, 500);
    background(255,138,120);
}
function draw() {
    let borpX = 225;
    let borpY = 170;
    //behind head hair
    noStroke();
    fill(40, 26, 34);
    beginShape();
    vertex(300,195);
    vertex(303,200);
    vertex(305,210);
    vertex(302,240);
    vertex(280,245);
    vertex(270,220);
    stroke(80, 40, 54);
    endShape();
    strokeWeight(1)
    arc(borpX-10,borpY+40,30,50,8.5,4.5);
    arc(borpX+63,borpY+50,40,60,6,8,OPEN);
    arc(borpX+45,borpY+40,75,60,5.7,6.6,OPEN);
    arc(borpX+55,borpY+55,40,60,6.1,8,OPEN);
    arc(borpX+45,borpY+62,40,60,6.2,8,OPEN);
    arc(borpX-5,borpY+53,30,50,7.6,3.7);
    arc(borpX+1,borpY+60,30,50,7.6,3);
    arc(borpX+4,borpY+60,30,50,7.6,3);
    push();
    rotate(0.1);
    arc(borpX+40,borpY+40,30,50,7.6,3);
    pop();


    //cranium and fillings
    angleMode(RADIANS);
    fill(255,233,199);
    noStroke();
    ellipse(246.8,500/2.195-12,71.5,55.8);
    stroke(0);
    arc(249,500/3+8.5,92,90,2.5,7.05,OPEN);
    noStroke();
    ellipse(221,500/2.45,20,30);
    ellipse(282,500/2-42,10,10);
    stroke(0);

    noStroke();
    fill(222, 0, 111);
    ellipse(262,270,100,20);
    triangle(160,500,260,260,388,500);
    stroke(0);
    arc(262,270,100,20,3.2,6.2);
    fill(255,233,199);

    //neck
    noStroke();
    fill(255,233,199);
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(239,258);
    curveVertex(240,268);
    curveVertex(285,266);
    curveVertex(281,250);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape();
    noFill();
    stroke(0);
    arc(230,245,20,50,5.5,8);
    arc(290,225,20,80,7.8,10);
    fill(255,233,199);

    //clothes
    fill(222, 0, 111);

    beginShape();
    vertex(240,258);
    vertex(225,255);
    vertex(205,257);
    vertex(190,280);
    vertex(180,350);
    vertex(150,470);
    vertex(162,500);
    vertex(180,520);
    endShape(OPEN);

    beginShape();
    vertex(200,400);
    vertex(240,256);
    vertex(250,268);
    vertex(260,258);
    vertex(300,255);
    vertex(320,257);
    vertex(350,285);
    vertex(365,350);
    vertex(400,440);
    vertex(398,500);
    vertex(360,530);
    endShape(OPEN);

    

    curve(245,264,240,268,197,270,200,220);
    curve(245,264,240,268,183,340,200,220);
    curve(220,390,208,420,160,460,130,420);
    curve(260,265,255,268,335,270,330,220);
    curve(260,265,255,268,365,350,330,220);
    curve(220,370,200,400,365,440,330,220);
    fill(255,233,199);
    beginShape();
    vertex(239,255);
    vertex(235,278);
    vertex(275,256);
    endShape(OPEN);
    line(200,400,240,500);

    //chin segments
    fill(255,233,199);
    beginShape();
    curveVertex(215,231);
    curveVertex(215,231);
    curveVertex(228,243);
    curveVertex(250,244);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    //arc(246.2,500/2.195-10,69.5,55.8,6.5,9,OPEN);
    push();
    translate(215, 216.43);
    rotate(-0.2);
    arc(3,0,15,42,8,4.45,OPEN);
    pop();
    //ear
    push();
    translate(284,500/2-32);
    rotate(0.3);
    arc(0,-5,13,26,4.1,8.1,OPEN);
    arc(1,-5,7,15,8,4.6,OPEN);
    pop();
    arc(284.9,500/2-35,4,8,4,7,OPEN);
    //eye1
    let lefteyex = 262;
    let lefteyey = 198;
    noStroke();
    fill(255);
    ellipse(lefteyex,lefteyey+1,20,16);
    fill(240);
    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);
    fill(33,6,4);
    noStroke();
    ellipse(lefteyex+4,lefteyey,10,14)
    fill(255,164,128);
    ellipse(lefteyex+4,lefteyey+4,6,5);
    fill(0);
    ellipse(lefteyex+4,lefteyey,5,8);
    fill(255);
    ellipse(lefteyex+2,lefteyey-2,3,6);
    stroke(0);
    noFill();
    ellipse(lefteyex+4,lefteyey,9,13);
    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);
    //eye2
    let righteyex = 222;
    let righteyey = 198;
    noStroke();
    fill(255);
    ellipse(righteyex,righteyey+1,20,16);
    fill(240);
    arc(righteyex,righteyey-2,20,10,3.2,6.3);
    fill(33,6,4);
    noStroke();
    ellipse(righteyex+4,righteyey,10,14)
    fill(255,164,128);
    ellipse(righteyex+4,righteyey+4,6,5);
    fill(0);
    ellipse(righteyex+4,righteyey,5,8);
    fill(255);
    ellipse(righteyex+2,righteyey-2,3,6);
    stroke(0);
    noFill();
    ellipse(righteyex+4,righteyey,9,13);
    arc(righteyex,righteyey-2,20,10,3.2,6.3);
    //mouth
    stroke(0);
    curve(228, 225, 233, 230, 240, 230, 245, 225);
    //nose
    fill(255, 195, 184);
    noStroke();
    triangle(240,215,232,215,235,218);
    stroke(0);
    noFill();
    arc(226,208,18,20,6.1,7.1);
    arc(240,213,15,10,8.8,9.2);
    //eyebrows
    let leftbrowx = 210;
    let leftbrowy = 185;
    let rightbrowx = 273;
    let rightbrowy = 185;
    noStroke();
    fill(26, 2, 20);
    beginShape();
    curveVertex(leftbrowx,leftbrowy+3);
    curveVertex(leftbrowx+7,leftbrowy+2);
    curveVertex(leftbrowx+18,leftbrowy+4);
    curveVertex(leftbrowx+25,leftbrowy+3);
    curveVertex(leftbrowx+20,leftbrowy-1);
    curveVertex(leftbrowx+7,leftbrowy-1);
    endShape(CLOSE);

    beginShape();
    curveVertex(rightbrowx,rightbrowy+3);
    curveVertex(rightbrowx-7,rightbrowy+2);
    curveVertex(rightbrowx-18,rightbrowy+4);
    curveVertex(rightbrowx-25,rightbrowy+3);
    curveVertex(rightbrowx-20,rightbrowy-1);
    curveVertex(rightbrowx-7,rightbrowy-1);
    endShape(CLOSE);
    //hair
    fill(40, 26, 34);

    beginShape();
    vertex(200,175);
    vertex(220,140);
    vertex(228,127);
    vertex(290,139);
    vertex(295,160);
    vertex(295,190);
    vertex(285,190);
    vertex(235,162);
    vertex(225,170);
    endShape();

    
    stroke(80, 40, 54);
    strokeWeight(1)
    arc(borpX-15,borpY+10,20,50,8,3.5);
    noStroke();
    rect(borpX-16,borpY+5,5,5);
    stroke(80, 40, 54);

    beginShape();
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-28,borpY+2);
    curveVertex(borpX-47,borpY-9);
    curveVertex(borpX-28,borpY-7);
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-15,borpY-10);
    endShape();

    beginShape();
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-12,borpY+8);
    curveVertex(borpX-25,borpY+10);
    curveVertex(borpX-40,borpY);
    curveVertex(borpX-30,borpY+3);
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-20,borpY-2);
    endShape();

    beginShape();
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX-1,borpY+2);
    curveVertex(borpX-5,borpY+8);
    curveVertex(borpX-15,borpY+14);
    curveVertex(borpX-27,borpY+15);
    curveVertex(borpX-16,borpY+8);
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-8,borpY);
    endShape();

    

    beginShape();
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-28,borpY-7);
    curveVertex(borpX-50,borpY-12);
    curveVertex(borpX-35,borpY-16);
    curveVertex(borpX-15,borpY-35);
    curveVertex(borpX,borpY-30);
    curveVertex(borpX,borpY-30);
    endShape();

    beginShape();
    curveVertex(borpX,borpY-30);
    curveVertex(borpX,borpY-30);
    curveVertex(borpX-15,borpY-35);
    curveVertex(borpX-24,borpY-50);
    curveVertex(borpX-15,borpY-40);
    curveVertex(borpX,borpY-40);
    curveVertex(borpX,borpY-40);
    endShape();

    beginShape();

    endShape();

    arc(borpX+36,borpY+5,90,90,5.3,6.9,OPEN);
    arc(borpX+28,borpY-5,90,90,4,5.8,OPEN);

    beginShape();
    curveVertex(borpX+55,borpY+28);
    curveVertex(borpX+55,borpY+28);
    curveVertex(borpX+64,borpY+33);
    curveVertex(borpX+65,borpY+45);
    curveVertex(borpX+72,borpY+35);
    curveVertex(borpX+75,borpY+28);
    curveVertex(borpX+75,borpY+28);
    endShape();

    //sideburn
    push();
    rotate(-0.2);
    arc(borpX+10,borpY+88,10,30,8,5.5,CLOSE);

    //sideswoop
    pop();
    push();
    rotate(-1.4);
    arc(borpX-365,borpY+145,15,30,7.8,4.8,CLOSE);
    rotate(-0.1);
    arc(borpX-390,borpY+130,15,30,7.8,4.8,CLOSE);
    arc(borpX-385,borpY+125,15,30,7.8,4.8,CLOSE);
    pop();

    beginShape();
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+20,borpY-2);
    curveVertex(borpX+28,borpY+6);
    curveVertex(borpX+40,borpY+14);
    curveVertex(borpX+65,borpY+25);
    curveVertex(borpX+48,borpY+10);
    curveVertex(borpX+40,borpY);
    curveVertex(borpX+35,borpY-8);
    curveVertex(borpX+35,borpY-8);
    endShape();

   // stroke(255);
   // strokeWeight(4);
   // point(235,268);
   // point(240,245);
   // point(287,264);
   // point(280,223);

    

    noLoop();
}

I found the adjusting of the vertices of the custom shapes to be extremely time consuming and frankly agonizing. Were I to do this again, I would try to take more intuitive approaches.

LO: My Inspiration

My inspiration for this portrait came mostly from the video game and anime art of the 1970s-1990s. Games like Policenauts and shows like Urusei Yatsura have been a consistent source of inspiration for me in my art. (In terms of storyline? Ask me about Ursula K. LeGuin.)

Policenauts (Kojima, 1994)
Urusei Yatsura (Takahashi 1981)

In particular, when it comes to digital art I’ve always been inspired by the pixel-art mastery of the PC 98 games. (yeah yeah I’m a nerd) Shallow romance novella games aside, the PC 98 series has one game which really interested me, the aforementioned Policenauts.

A digital visual novel from 1994, it is probably one of my favorite examples of pixel-art character design out there. This game was developed by Konami and the storyline was written by Hideo Kojima. Kojima had worked on other projects like Snatcher before Policenauts, and this heavily influenced his characters and storyline. Additionally he drew from real life and television to come up with his plot points and other story and design aspects. Despite having never played any of these PC98 games, I’ve watched run throughs and have always been amazed at their quality and how it’s held up over time. The pixel-art graphics rival those employed by contemporary retro callback games, and the character design is full of color and life! (despite only existing in pixelated format) To me the plot isn’t as relevant as the art, so the pixel=art scenes, given the limitations of tech at the time, are really fascinating to me even if I find the dialogue and the plotline boring. Kojima also created a new scripting engine for the story aspects of the game. (the reasons for which are irrelevant but humorous if you look into it)

The game wasn’t as popular as some of his other work, but it got an overhaul in the early 2000s when it transferred to other consoles and had cel animation grafted onto it instead of the pixel-art. I however prefer the pixel-art, as it leaves some of the more shocking colors and gives a rougher quality to the linework.