lee chu – project 02 – variable face

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 02

var eyeSize = 20;
var eyeColor = 24;
var mouthWidth = 20;
var faceR = 60;
var faceH = 120;
var hairH = 20;
var R = 229;
var browL = 12;
var browT = 0;

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

function draw() {
    background(color(R, 208, 227));
    fill(color(231, 229, 229));

    // head
    strokeWeight(0.7);
    beginShape();
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - faceR, height/2);
    curveVertex(width/2 - 0.8 * faceR, height/2 - 0.3 * faceH);
    curveVertex(width/2 - 0.3 * faceR, height/2 - 0.5 * faceH);
    curveVertex(width/2 + 0.3 * faceR, height/2 - 0.5 * faceH);
    curveVertex(width/2 + 0.8 * faceR, height/2 - 0.3 * faceH);
    curveVertex(width/2 + faceR, height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    endShape();

    // cheeks
    beginShape();
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.1 * faceR, 1.14 * height/2);
    curveVertex(width/2 + faceR, 1.2 * height/2);
    curveVertex(width/2 + 0.7 * faceR, 1.25 * height/2);
    curveVertex(width/2 + 0.35 * faceR, 1.28 * height/2);
    curveVertex(width/2 - 0.35 * faceR, 1.28 * height/2);
    curveVertex(width/2 - 0.7 * faceR, 1.25 * height/2);
    curveVertex(width/2 - faceR, 1.2 * height/2);
    curveVertex(width/2 - 1.1 * faceR, 1.14 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    endShape();

    // eyes
    var eyeRX = width/2 + faceR * 0.5;
    var eyeLX = width/2 - faceR * 0.5;
    var eyeRH = height/2 + 0.05 * faceH;
    var eyeLH = height/2;
    strokeWeight(0);
    fill('black');
    ellipse(eyeRX, eyeRH, eyeSize, 0.9 * eyeSize);
    ellipse(eyeLX, eyeLH, eyeSize, 0.9 * eyeSize);
    fill(color(184, 24, eyeColor));
    ellipse(eyeRX, eyeRH + 0.1 * eyeSize, 0.8 * eyeSize, 0.7 * eyeSize);
    ellipse(eyeLX, eyeLH + 0.1 * eyeSize, 0.8 * eyeSize, 0.7 * eyeSize);
    fill('white');
    ellipse(eyeRX + 0.25 * eyeSize, eyeRH - 0.2 * eyeSize, 0.3 * eyeSize, 0.25 * eyeSize);
    ellipse(eyeLX + 0.25 * eyeSize, eyeLH - 0.2 * eyeSize, 0.3 * eyeSize, 0.25 * eyeSize);

    // eyebrows
    strokeWeight(0.7);
    beginShape();
    curveVertex(eyeRX - 0.5 * browL, eyeRH - 0.75 * eyeSize - browT);
    curveVertex(eyeRX - 0.5 * browL, eyeRH - 0.75 * eyeSize - browT);
    curveVertex(eyeRX, eyeRH - 0.85 * eyeSize);
    curveVertex(eyeRX + 0.5 * browL, eyeRH - 0.75 * eyeSize + browT);
    curveVertex(eyeRX + 0.5 * browL, eyeRH - 0.75 * eyeSize + browT);
    endShape();
    beginShape();
    curveVertex(eyeLX - 0.5 * browL, eyeLH - 0.75 * eyeSize + browT);
    curveVertex(eyeLX - 0.5 * browL, eyeLH - 0.75 * eyeSize + browT);
    curveVertex(eyeLX, eyeLH - 0.85 * eyeSize);
    curveVertex(eyeLX + 0.5 * browL, eyeLH - 0.75 * eyeSize - browT);
    curveVertex(eyeLX + 0.5 * browL, eyeLH - 0.75 * eyeSize - browT);
    endShape();

    // mouth
    strokeWeight(0);
    fill('gray');
    beginShape();
    curveVertex(width/2 - 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 - 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 - 0.3 * mouthWidth, height/2 + 0.15 * faceH);
    curveVertex(width/2 + 0.3 * mouthWidth, height/2 + 0.15 * faceH);
    curveVertex(width/2 + 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 + 0.4 * mouthWidth, height/2 + 0.22 * faceH);
    curveVertex(width/2 + 0.4 * mouthWidth, height/2 + 0.22 * faceH);
    endShape();

    // hair
    strokeWeight(0.5);
    noFill();
    beginShape();
    curveVertex(width/2, height/2 - 0.45 * faceH);
    curveVertex(width/2, height/2 - 0.45 * faceH);
    curveVertex(width/2 - 0.1 * faceH, height/2 - 0.5 * faceH - 0.85 * hairH);
    curveVertex(width/2 - 0.2 * faceH, height/2 - 0.5 * faceH - hairH);
    curveVertex(width/2 - 0.2 * faceH, height/2 - 0.5 * faceH - hairH);
    endShape();

}

function mousePressed() {
    R = random(180, 255);
    faceR = random(30, 85);
    faceH = random(80, 170);
    eyeSize = random(8, 30);
    eyeColor = random(0, 255);
    mouthWidth = random(10, 40);
    hairH = random(10, 90);
    browT = random(-3, 3);
    browL = random(5, 14);
}

I experimented with curveVertex() to create a blob-like face with variable pupils, mouth, eyebrows, and hair.

Jina Lee – Project – 02

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-02

//variables
var headW = 290;
var headH = 290;
var LeftBrow = 250;
var RightBrow = 250;
var noseW = 50;
var noseH = 50;
var mouth = 80

function setup() {
    createCanvas(480, 640);
//Random Colors
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    background(80, 182, 226);
    noStroke();
//body
    noStroke();
    fill(255, 153, 153);
    ellipse(100, 600, headW * 1.5, headH * 1.5);
//head
    fill("beige");
    ellipse(240, 320, headW, headH);
//nose
    fill(190, 90, 90);
    ellipse(240, 320, noseW, noseH);
//eye whites
    fill("white");
    circle(170, 280, 60);
    circle(310, 280, 60);
//pupils
    fill(r, g, b, 127);
    circle(170, 280, 40);
    circle(310, 280, 40);
//eyebrows
    strokeWeight(20);
    stroke(180, 90, 90);
    line(140, LeftBrow, 200, RightBrow);
    line(340, LeftBrow, 280, RightBrow);
//mouth
    noFill();
    strokeWeight(10);
    arc(230, 380, mouth, mouth, PI / 7, PI);
//ear
    noStroke();
    fill("beige");
    ellipse(100, 300, 30, 40);
    noStroke();
    fill("beige");
    ellipse(380, 340, 30, 40);
}

function mousePressed() {
    var d = dist(mouseX, mouseY, 400, 400);
    if (d < 400) {
        r = random(255);
        g = random(255);
        b = random(255);
        noseW = random(20, 80);
        noseH = random(70, 100);
        headW = random(260, 300);
        headH = random(260, 300);
        LeftBrow = random(200, 250);
        RightBrow = random(200, 250);
        mouth = random(80, 100);
    }
}

When I first started this project, I wasn’t sure where to start. At first, I had a hard time understanding the codes that were used to change the drawing when your mouse clicked on it. I made multiple different iterations, because I was unable to understand the formula correctly for a while. Later, I was finally able to grasp the concept and make my face. I used primitive shapes for the face so that I could focus more on the variabilities. I tried making all the parts of the face have variability. Afterwards, I tried having variability in the eye color which I went to the p5.JS reference page to understand better.

Claire Lee – Looking Outwards 02

I was really inspired by the work of artist and programmer Jessica Rosencrantz, which explores and mimics the relationships in natural processes with computer-generated visuals. Although I couldn’t find much about the algorithm that she uses to generate her pieces, I think that nature does follow a general pattern with a bit of randomness to it, and her algorithms probably do something similar to that. Her current pieces, which she produces under a company she co-founded with Jesse-Louis Rosenberg, are pieces of jewelry or household items that simulate nature-made patterns like leaf skeletons, fingerprints, or coral.

Floraform, 2013, Jessica Rosencrantz

I really liked that she took her knowledge of biology and programming and turned it into art. Not only is her work a very interesting juxtaposition of subjects, but it is also quite beautiful.

Sammie Kim- Project – 02 – Variable Faces

sketch

// global variables
var faceWidth=225
var faceHeight=210
var earW=70
var earH=230
var innerW=30
var innerH=100
var eyeW=20
var eyeH=20
var mouthW=40
var mouthH=50

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

function draw() {
  background(253, 255, 172);
  //ear
  stroke(255);
  fill(254,170,221);
  ellipse(210,200,earW,earH);
  ellipse(285,200,earW,earH);
  fill(255);
  ellipse(210,200,innerW,innerH);
  ellipse(285,200,innerW,innerH);
  //face
  noStroke();
  fill(254,170,221);
  ellipse(width/2, height/2, faceWidth, faceHeight);
  //eyebrow
  fill(0);
  triangle(190,270,180,280,230,300);
  rect(260,290,25,10);
  //nose
  fill(0);
  ellipse(245,355,25,20);
  //eyes
  stroke(0);
  strokeWeight(4);
  fill("black");
  ellipse(210,320,eyeW,eyeH);
  ellipse(270,320,eyeW,eyeH);
  //mouth
  fill(0);
  arc(245,385,mouthW,mouthH,0,PI,CHORD);
 }

function mousePressed() {
    faceWidth=random(225,290);
    faceHeight=random(210,280);
    eyeW=random(20,40);
    eyeH=random(20,40);
    mouthW=random(40,70);
    mouthH=random(30,50);
}

I struggled initially figuring out how to correctly utilize the variables in order to differ the facial expressions. Still, this assignment was helpful for understanding the mousePressed and random function.

Mihika Bansal-Project 02-Variable Face

sketch

/*
Mihika Bansal 
Section E 
mbansal@andrew.cmu.edu
Project-01
*/

var faceWidth=120; 
var faceHeight=150; 
var faceColorR=234; 
var faceColorG=213; 
var faceColorB=200; 
var hairLength=200; 
var neckLength=100; 
var neckWidth= 75; 
var noseY= 220;
var eyeWidth=15; 
var mouthX=20; 
var mouthY=10; 
var earWidth= 15; 
var earHeight= 17; 
var colorR= 230; 
var colorG=211; 
var colorB=152; 

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

function draw() {
    background(231, 231, 253); 
  
    //neck
    fill(faceColorR, faceColorG, faceColorB); 
    rectMode(CENTER); 
    rect(width/2, (height / 2 - 50)+(0.5*faceHeight)+0.2*neckLength, neckWidth, neckLength);
    
    //hair 
    fill("black");
    arc(width/2+0.68*(0.5*faceWidth), height/2-20, 100, hairLength, 3*PI/2, PI/2);
    arc(width/2-0.68*(0.5*faceWidth), height/2-20, 100, hairLength, PI/2, 3*PI/2);
    
     //face +ears 
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2 - 50, faceWidth,  faceHeight);
    arc(width/2+(0.5*faceWidth), height/2-0.20*faceHeight, earWidth, earHeight, 3*PI/2, PI/2);
    arc(width/2-(0.5*faceWidth), height/2-0.20*faceHeight, earWidth, earHeight, PI/2, 3*PI/2);
    //hair 
    fill("black");
    arc(width/2, height/2-65, faceWidth*1.3, faceHeight, PI-0.40, QUARTER_PI-0.45 , PIE);
    //nose 
    fill(faceColorR, faceColorG, faceColorB);
    triangle(width/2, noseY, width/2-5, noseY*0.97, width/2+5, noseY*0.97);

    //eyes 
    fill("white"); 
    ellipse(width/2-20, height/2-40, eyeWidth, eyeWidth*0.65);
    ellipse(width/2+20, height/2-40, eyeWidth, eyeWidth*0.65);
    fill("black"); 
    ellipse(width/2-18, height/2-42, eyeWidth*0.45, eyeWidth*0.45);
    ellipse(width/2+22, height/2-42, eyeWidth*0.45, eyeWidth*0.45);

    //mouth
    fill(123, 30, 30); 
    arc(width/2, height/2+faceHeight*0.04, mouthX, mouthY, 0, PI,OPEN);

    //earrings 
    fill(colorR, colorG, colorB); 
    ellipse(width/2+(0.52*faceWidth), height/2-0.18*faceHeight, 5, 5);
    ellipse(width/2-(0.52*faceWidth), height/2-0.18*faceHeight, 5, 5);
    fill(colorR*1.2, colorB*1.2, colorG*1.2);
    rect(width/2+(0.52*faceWidth), height/2+0.04*faceHeight, 5, hairLength*0.2);
    rect(width/2-(0.52*faceWidth), height/2+0.04*faceHeight, 5, hairLength*0.2);
     
}

function mousePressed() {
    faceWidth = random(100, 150);
    faceHeight = random(140, 180);
    eyeWidth = random(10, 25);
    faceColorR= random(150, 250);
    faceColorG= random(102, 245);
    faceColorB= random(55, 236);
    hairLength= random(100, 250);
    neckLength= random(85, 150); 
    neckWidth= random(50, 120);
    noseY=random(215, 230);
    mouthY=random(5,20); 
    mouthX=random(15, 30);
    earWidth=random(10, 25);
    earHeight=random(13, 30);
    colorR=random(0,255); 
    colorG=random(0,255);
    colorB=random(0,255);

}

For this project, I worked with the same style of my self portrait to create faces that changed multiple facets. I changed the eye size, skin color, face width and height, neck size and length, hair length, earring size and color, etc, to create unique faces with a distinct style. It was interesting to see faces that were made that I typically would not have made, but still worked visually.

Steven Fei – Project – 02


steven fei variable face

function setup() {
    createCanvas(600, 600);
       
}
var shirtColor1 = 255
var faceRound = 300; /*100, 300*/
var hairX = 130; /*120, 135*/
var noseHeight = 295; /*295, 315*/
var noseTip = 20; /*10, 25*/
var mouth1 = 120; /*30, 120*/
var mouth2 = 30; /*1, 30*/
var eyebrow1 = 250; /*220, 255*/
var eyebrow2 = 230; /*200, 240*/
var eyeHeight = 60; /*50 , 80*/
var eyeballX = 230; /*210, 250*/
var eyeballY = 290; /* 290-eyeHeight/2-15, 290 + eyeHeigh/2 + 15*/
function draw() {
    background(227,252,207);
    
    //body
    noStroke();
    fill(shirtColor1,14,14);
    rect(100, 450, 400, 140, 100, 100, 0,0);
    noStroke();
    fill(199,158,95);
    triangle(240, 450, 300, 530, 360, 450);
    
    //ear
    noStroke();
    fill(252,226,177);
    circle(130, 300, 50);
    noStroke();
    fill(252, 226,177);
    circle(470, 300, 50);
    
    
    
//    face
    noStroke();
    fill(240,210,180);
    rect(130,200, 340, 300, 0,0,faceRound, faceRound);
    noStroke();
    fill(252,226,177);
    rect(150,200,300,290,0,0,faceRound, faceRound);
    
//    hat
    strokeWeight(1);
    stroke(20);
    fill(135,171,230);
    arc(300, 200, 340, 250, PI, TWO_PI, PIE);
    strokeWeight(1);
    noStroke();
    fill(93,129,186);
    arc(300, 200, 300, 225, PI, TWO_PI,PIE);
    
//    hat rim
    strokeWeight(8);
    stroke("black");
    fill(240,217,180);
    arc(300,210, 200,80, PI, TWO_PI, OPEN);
    
//    eyes
    noStroke();
    fill("white");
    ellipse(220, 290, 95, eyeHeight);
    noStroke();
    fill("white");
    ellipse(380, 290, 95, eyeHeight);
    
    //eyeball
    stroke(100);
    strokeWeight(3);
    fill("black");
    circle(eyeballX, eyeballY, 30);
    stroke(100);
    strokeWeight(3);
    fill("black");
    circle(eyeballX + 140, eyeballY, 30);
    
    //hair
    stroke(50);
    strokeWeight(3);
    fill(30);
    triangle(130,200, 175, 200, hairX, 300);
    stroke(50);
    strokeWeight(3);
    fill(30);
    triangle(470,200, 425,200, 600-hairX ,300);

//    eyebrow
    stroke("black");
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(150, 245);
    curveVertex(150,245);
    curveVertex(190, eyebrow2);
    curveVertex(210, eyebrow2);
    curveVertex(240, eyebrow1);
    curveVertex(240, eyebrow1);
    endShape();
    stroke("black");
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(450, 245);
    curveVertex(450,245);
    curveVertex(410, eyebrow2);
    curveVertex(390, eyebrow2);
    curveVertex(360, eyebrow1);
    curveVertex(360, eyebrow1);
    endShape();
    
    //nose
    fill(209,173,107);
    noStroke();
    triangle(300, noseHeight - 8, 280, 350, 320, 350);
    fill(237,225,183);
    noStroke();
    triangle(300, noseHeight, 280, 350, 320, 350);
    fill(237,225,183);
    stroke(217,187,132);
    strokeWeight(1);
    arc(300, 350, 40, noseTip, 0, PI, OPEN);
    
//    mouth
    noStroke();
    fill(217,108,102);
    arc(300, 390, 180, mouth1, 0, PI, PIE);
    noStroke();
    fill(252,226,177);
    arc(300, 390, 180, mouth2, 0, PI, PIE);
    
    

}

function mousePressed(){
shirtColor1 = random(10, 255);
faceRound = random(100,300); /*100, 300*/
hairX = random(120,135); /*120, 135*/
noseHeight = random(295,315); /*295, 315*/
noseTip = random(10,25); /*10, 25*/
mouth1 = random(30,120); /*30, 120*/
mouth2 = random(1,30); /*1, 30*/
eyebrow1 = random(220,255); /*220, 255*/
eyebrow2 = random(200,240); /*200, 240*/
eyeHeight = random(50,80); /*50 , 80*/
eyeballX = random(210,250); /*210, 250*/
eyeballY = random(290 - (eyeHeight/2) + 15, 290 + (eyeHeight/2) - 15); /* 290-eyeHeight/2-15, 290 + eyeHeigh/2 + 15*/
}

Ilona Altman – Project 01 – Face

sketch

function setup() {
    createCanvas(200, 20);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    createCanvas(600,600);
    fill(255,255,255);
    noStroke();
    rect(0,0,width, height);
   
    //triangle 1 blue
    fill(100,120,200);
    noStroke();
    triangle(0,0,width,0,width,height);

    //triangle 2 green
    fill(100,150,150);
    noStroke();
    triangle(0,0,0,height,width,height);

    //semi-circle 1
    fill(190,80,50);
    noStroke();
    arc(width/2, height/2, width, height, PI/4, 5*PI/4, CHORD);

    //semi circlen 2
    fill(230,170,100);
    noStroke();
    arc(width/2, height/2, width, height, 5*PI/4,PI/4, CHORD);

    //semi circle 1 small
    fill(100,150,150);
    noStroke();
    arc(width/2, height/2, 3*width/4, 3*height/4, PI/4, 5*PI/4, CHORD);

    //semi circle 2 small
    fill(100,120,200);
    noStroke();
    arc(width/2, height/2, 3*width/4, 3*height/4, 5*PI/4, PI/4, CHORD);

    // eye circle 1
    fill(230,190,180);
    noStroke();
    arc(width/4, height/4, width/5, height/5, 0, 2*PI,CHORD);

    // eye circle 2
    fill(200,140,210);
    noStroke();
    arc(3*width/4, 3*height/4, width/5, height/5, 0, 2*PI,CHORD);

    // eye circle 1
    fill(235,235,236);
    noStroke();
    arc(width/4, height/4, width/5, height/5, PI/4, 5*PI/4,CHORD);

    // eye circle 2
    fill(70,80,130);
    noStroke();
    arc(3*width/4, 3*height/4, width/5, height/5, PI/4, 5*PI/4,CHORD);



}

I wanted to make a smile/face something dynamic with two sides, but whole, almost like a ying and yang. Identity as both hidden and revealed.

The colors are based off a favorite Matisse painting of mine.

Kristine Kim- Project 01

sketch

/*Kristine Kim
15104-section D
younsook@andrew.cmu.edu
Project-01*/

function setup() {
    createCanvas(600, 600);
    background('#fae');
    
    //seaweed
    //noStroke();
    fill('green');    
    strokeWeight(5.0);   
    ellipse(100,40,81,81);
    ellipse(100,100,81,81);
    ellipse(100,160,81,81);
    ellipse(100,220,81,81);
    ellipse(100,280,81,81);
    ellipse(100,340,81,81);
    ellipse(100,400,81,81);
    ellipse(100,460,81,81);
    ellipse(100,520,81,81);
    ellipse(100,580,81,81);
    ellipse(300,400,81,81);
    ellipse(300,460,81,81);
    ellipse(300,520,81,81);
    ellipse(300,580,81,81);
    ellipse(525,220,81,81);
    ellipse(525,280,81,81);
    ellipse(525,340,81,81);
    ellipse(525,400,81,81);
    ellipse(525,460,81,81);
    ellipse(525,520,81,81);
    ellipse(525,580,81,81);

    //fins
    noStroke();
    strokeCap(ROUND);
    colorMode(HSB);
    strokeWeight(4);
    fill('yellow');
    triangle(504,306,476,376,591,469);
    

    //body
    noStroke();
    strokeCap(ROUND);
    fill('blue');
    ellipse(434,287,221,448);
    ellipse(458,149,162,155);
    triangle(344,21,313,80,463,80);
    triangle(344,21,380,300,463,80);
    quad(344,21,187,287,197,370,430,511);

    //freckles
    fill('navy');
    ellipse(480,251,8,8);
    //ellipse(500,290,8,8);

    ellipse(480,220,8,8);
    ellipse(480,250,8,8);


    ellipse(460,251,8,8);
    ellipse(460,290,8,8);

    ellipse(470,226,8,8);
    ellipse(470,260,9,9);
    ellipse(450,270,8,8);
    ellipse(480,290,8,8);
    ellipse(490,275,8,8);

    ellipse(440,230,6,6);
    ellipse(440,245,9,9);
    ellipse(440,230,9,9);


    ellipse(440,280,8,8);
    ellipse(420,258,9,9);


    //circle
    fill('yellow');
    ellipse(292,284,43,111);
    stroke(126);

    //necklace
    line(239,325,461,421);
    line(461,421,535,370);
    line(461,421,461,465);
    line(446,440,476,440);

    //lips
    noStroke();
    fill('black');
    quad(548,309,477,319,548,323,573,313);   
    fill('red');
    triangle(544,284,463,327,548,309);
    quad(548,323,544,344,463,327,477,319);
    triangle(548,323,544,344,573,313);
    triangle(544,284,548,309,573,313);

   
    //eyes
    fill('white');
    ellipse(503,168,69,89); 
    ellipse(383,187,86,97);  
    fill('brown');
    ellipse(497,168,57,57);
    ellipse(396,190,61,61);
    fill('black');
    ellipse(488,173,36,36);
    ellipse(405,190,38,38);
    fill('white');
    ellipse(501,149,14,14);
    ellipse(396,168,14,13);
   
    //tail/fin
    fill('yellow');   
    quad(39,209,102,478,197,370,187,287);
    quad(197,370,187,287,244,303,251,344);
    triangle(412,360,332,396,356,556);
  } 

My mom often told me that I look like a fish so for my project, I decided to do Dori from Finding Nemo as my self portrait. This assignment was a little bit challenging for me because I had to simplify inorganic shapes into geometric shapes but I used ellipse, triangles, and polygons to purse it. To make my design more interesting, I added more details such as, my daily cross necklace, freckles, seaweed, pupil, etc.

Alec Albright – Project 01

sketch

// ALec Albright
// Section A
// Project 01


function setup(){
    height = 600
    width = 600
    createCanvas(width, height);
    angleMode(DEGREES);
}

function draw(){
    // background color change
    if(mouseIsPressed) {
        background("black");
    } else {
        background("blue");
    }

    // forehead
    fill(0, 255, 255);
    noStroke();
    rect(140, 160, 320, 160);

    // lower half of face
    noStroke();
    fill("magenta");
    quad(125, 310, 475, 310, 370, 510, 250, 510);

    // mouth
    fill("black");
    arc(300, 400, 100, 40, -10, 170, PIE);

    // nose
    fill(153, 51, 255);
    triangle(300, 270, 325, 360, 300, 370);

    // eyes
    fill("white");
    ellipse(240, 215, 45, 80);
    ellipse(350, 240, 60, 95);
    if (mouseX < width/2) {
        fill('black');
        ellipse(230, 230, 15, 30);
        ellipse(340, 261, 23, 40);
    } else {
        fill('black');
        ellipse(250, 230, 15, 30);
        ellipse(360, 261, 23, 40);
    }

    // hair
    fill("orange");
    rect(120, 40, 365, 130, 200, 40, 60, 0);

    // jaw
    stroke('yellow');
    strokeWeight(30);
    line(150, 360, 250, 510);
    stroke("red");
    line(200, 485, 435, 485);
    stroke('limegreen');
    line(450, 335, 350, 545);
}

In creating this project, I wanted to experiment with both understanding the coordinate system and using imperfection and variety in shapes and color to provide character in the work. I certainly encountered some struggles in accurately placing objects initially, but I got better at it as I progressed through the assignment.

Looking Outwards 01

One piece of interactive computational art I interacted with that helped shape my interest in design more than anything else is the browser game by developer Orteil called Nested. When loaded, the program generates a universe via the creation of hundreds of folders titled “galaxy”. Clicking into one of these folders reveals more folders containing descriptions of solar systems, planets, and going further shows the life and geological forms on each one. When I was twelve, I spent recesses with some of my friends looking into the procedurally generated descriptions and translating them onto paper, drawing detailed creatures from just knowing their individual body parts. This type of computer generated art, with the extra steps of our own transitions of text to images. When I read about this class, I was reminded of Nested, and how it inspired me to create art with nothing more than randomly generated text. With the knowledge from this class, I want to take that idea further and learn to wed coding and art.