SectionB – Page 15 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Bhaboo’s Looking Outwards

Looking through insanely cool “Johnny Cash Project” was really interesting and fun for me. I admired how it used generative art to create a story told by real people, real fans across the world that were touched by this person. Aaron Koblin and the team were able to create an interactive website that helped make a crops-sourced music video. Any visitor on the website was able to paint their vision on any frame of the music video. This was then turned into an animated music video which garnished many awards and honors. I think it’s interesting to see how generative art can take the place in so many forms. Aaron Koblin is known for his work using data visualization in which he did a phenomenal job with this project remembering a great artist. Something really interesting is that the music video continues to grow as more people continue to participate.

To learn more: Johhny Cash Project

The Johnny Cash Project from Chris Milk on Vimeo.

Looking Outwards 02: Generative Art

Link: http://sansumbrella.com/works/2011/drawing-water/
David Wicks
Drawing Water
Spring 2011

I think the project “Drawing Water” by David Wicks is a very impressive and amazing work.

1. Regarding the project, what do you admire about it, and why do you admire these aspects of it?

Firstly, on the aspects of aesthetics, the works are very visually impressive and pleasing. The images have so many details–The strokes are so delicate and look like the strokes of pencils. The combination of colors, shades and the background is very comfortable as well–blue and white, or blue and black. They present the pattern of the flow of water nicely. What’s more, what makes it admirable is that the visual representations are dynamic. That is to say, the patterns or colors can change according to the amount of rainfall.

2. What do you know (or what do you suppose) about the algorithm that generated the work?

The algorithm that the artist used is related to water resources (“the amount of rainfall”, “where waterfalls” and “where it is consumed within the United States”). The further the rainfall, the darker or whiter the color.

3. In what ways are the creator’s artistic sensibilities manifest in their algorithm?

The paths are created based on real-life data of waterfalls, but the creator also adds his imagination when trying to show the pattern of the flow of water. That is to say, David Wicks turns the data of rainfalls into visual representations–by showing the flowing patterns of water and showing the number of rainfalls through those beautiful lines.

Project-02: Variable Faces; Face Variables

//Xinyi Du 
//15104 Section B

var eyes = 20;
var mouth = 20;
var face = 100;
var ears = 20;
var r // red
var g // green
var b // blue
var hairDeco = 20; //hair decorations
var hair = 30; //hair
var cloth = 200;

function setup() {
    createCanvas(300, 300);

}
 
function draw() {
    background(80);
    noStroke();

    // clothing
    fill(255-r, 255-g, 255-b);
    triangle(width / 2, height / 2, width/2-cloth/2, height/2+cloth, width/2+cloth/2, height/2+cloth);

    fill(255, 229, 204);
    ellipse(width / 2, height / 2, face, face); // face

    fill(255, 229, 204);
    ellipse(width / 2 - face / 2, height / 2, ears, ears); // left ear
    fill(255, 229, 204);
    ellipse(width / 2 + face / 2, height / 2, ears, ears); // right ear
    fill(255, 102, 102);
    ellipse(width/2, height/2+face/4, mouth,); // mouth

    var eyeL = width/2 - face/4; // left eye
    var eyeR = width/2 + face/4; // right eye
    fill(64, 64, 64);
    ellipse(eyeL, height/2, eyes, eyes+5);
    ellipse(eyeR, height/2, eyes, eyes+5);

    //hairstyle
    fill(r, g, b);
    ellipse(width/2, height/2-face/2, hairDeco, hairDeco); // hair decorations 1
    fill(r, g, b);
    // hair 1
    var x1 = width/2-hair/2;
    var y1 = height/2-face/2-hairDeco-hair;
    var x2 = width/2+hair/2;
    var y2 = height/2-face/2-hairDeco-hair;
    var x3 = width/2;
    var y3 = height/2-face/2-hairDeco/2;
    triangle(x1, y1, x2, y2, x3, y3);
    fill(r-30, g-30, b-30);
    ellipse(width/2-face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 2
    ellipse(width/2+face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 3

    // hair 2
    var x1 = width/2-face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2-face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2-face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

    // hair 3
    var x1 = width/2+face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2+face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2+face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

}
 
function mousePressed() {
    face = random(80, 150);
    eyes = random(10, 20);
    ears = random(12, 30);
    mouth = random(10, 25);
    hairDeco = random(10, 30);
    hair = random(20, 50);
    r = random(10, 250);
    g = random(10, 250);
    b = random(10, 250);
    cloth = random(150, 300);
    //
}

Project 2: Variable Face

Hi here are my faces! The hardest part of the project is to create all these different options for hair, eyes, mouth etc. Then linking those to the random function.

sketch

//Tracy Meng
//Section B

// GLOBAL VARIABLES
var eyeSize = 20;
var mouthSize = 50;
var earringSize = 30;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 20;
var noseSize = 30;
var pupSize = 10;
var noseType = 1;
var hairType = 1;
var eyeType = 1;
var earringType = 1;
var mouthType = 1;
var backgroundType = 1;


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

function draw() {
//BACKGROUND
    //background types
    if (backgroundType == 1) {
        background(225,246,255); //light blue background
    }

    else if (backgroundType == 2) {
        background(255,164,216); //light pink background
    }

    else {
        background(247,255,165); //light yellow background
    }


//HAIR
    // hair types    
    if (hairType == 1) {
        strokeWeight(15);
        stroke(127,82,0); //brownhair
        fill(127,82,0);
        arc(width / 2, height / 2, faceWidth, faceHeight, PI, 0); //straight long hair
        rect(width/2 - faceWidth/2, height/2, faceWidth, height);
    }

    else if (hairType == 2) {
        strokeWeight(45);
        stroke(209,209,20); //blondehair
        fill(209,209,20);
        arc(width / 2, height / 2, faceWidth, faceHeight, PI-PI/4, PI/4); //pom-poms
        ellipse(width/2 - faceWidth/2, height/2 + faceHeight/4, faceHeight/2); //pom-pom left
        ellipse(width/2 + faceWidth/2, height/2 + faceHeight/4, faceHeight/2); //pom-pom right
    }

    else {
        strokeWeight(80);
        stroke(27,6,0); //blackhair
        arc(width / 2, height / 2, faceWidth, faceHeight, PI-PI/8, PI/8); //short hair
    }


//EARS
    //local variable of EARS
var earLX = width / 2 - (faceWidth/2); // earLX = horizontal coordinate of LEFT ear
var earRX = width / 2 + (faceWidth/2); // earLX = horizontal coordinate of LEFT ear

    //left ear
    noStroke();
    fill(255,220,177); //nude color
    ellipse(earLX, height/2, earSize/2, earSize);

    //right ear
    ellipse(earRX, height /2, earSize/2, earSize); 

    //left ear hole
    strokeWeight(2);
    stroke(230,145,20); //dark nude stroke
    arc(earLX, height/2, earSize/4, earSize/2, -PI/2, -PI+PI/2); 
    
    //right ear hole
    arc(earRX, height /2, earSize/4, earSize/2, PI/2, -PI-PI/2);


//FACE / HEAD
//strokeWeight(1);  
    strokeWeight(0);
    fill(255,220,177); //nude color  
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


//EARRINGS
    //earring types
    if (earringType == 1) {
        strokeWeight(5);
        stroke(167,0,239); //purple
        noFill();
        ellipse(earLX, height/2 + earSize/2, earringSize/6, earringSize); //left ear
        ellipse(earRX, height/2 + earSize/2, earringSize/6, earringSize); // right ear
    }

    else if (earringType == 2) {
        noStroke();
        fill(27,255,255); //teal
        ellipse(earLX, height/2 + earSize/2, earringSize/2, earringSize); //left ear
        ellipse(earRX, height/2 + earSize/2, earringSize/2, earringSize); // right ear


        fill(0,159,11); //green - smaller circle
        ellipse(earLX, height/2 + earSize/2, earringSize/3, earringSize/1.5); //smaller cirlcle left
        ellipse(earRX, height/2 + earSize/2, earringSize/3, earringSize/1.5); //smaller circle right
    }

    else {
        fill(255,277,80); //orange
        rect(earLX-earringSize/4, height/2 + earSize/2, earringSize/2, earringSize,5); //left ear
        rect(earRX-earringSize/4, height/2 + earSize/2, earringSize/2, earringSize,5); // right ear
    }


//NOSE
    //local variables of NOSE
var noseX = width /2; // horizontal coordinates for NOSE
var noseY = height /2 + (faceHeight/8); // vertical coordinates for NOSE

noStroke();
fill(255,198,122); //nose color darker nude
    //nose types
    if (noseType == 1) {
        ellipse(noseX, noseY, noseSize, noseSize); // nose circle
    }

    else if (noseType == 2) {
        rect(noseX - (noseSize/4), noseY - (noseSize/2), noseSize/2, noseSize, 30); // nose rectangle
    }

    else {
        triangle(noseX, noseY - (noseSize/2), noseX - (noseSize/2), noseY + (noseSize/4), noseX + (noseSize/2), noseY + (noseSize/4)); // nose triangle
    }


//EYES    
    //local variable of EYES
var eyeLX = width /2 - (faceWidth * 0.25); //eyeLX = horizontal coordinate of LEFT eye
var eyeRX = width /2 + (faceWidth * 0.25); //eyeRX = horizontal coordinate of RIGHT eye


//eye type 1 - eye open  
    if (eyeType == 1) {

    //overall eyeball
        fill(255); //white eyeballs
        ellipse(eyeLX, height /2, eyeSize + eyeSize/4, eyeSize); //left eye
        ellipse(eyeRX, height /2, eyeSize + eyeSize/4, eyeSize); //right eye

    //eye color
        fill(0,176,203); //eye color - blue
        ellipse(eyeLX, height /2, eyeSize/2, eyeSize/2); // left eye color
        ellipse(eyeRX, height /2, eyeSize/2, eyeSize/2); // right eye color

    //eye pupils
        fill(0); //black pupils
        ellipse(eyeLX, height /2, pupSize, pupSize); // left eye pupil
        ellipse(eyeRX, height /2, pupSize, pupSize); // right eye pupil
    }

//eye type 2 - shut
    else if (eyeType == 2) {
        strokeWeight(2);
        stroke(230,145,20); //dark nude outline
        noFill();

    //LEFT EYE
        arc(eyeLX, height /2, eyeSize/2, eyeSize, 0, PI);

    //RIGHT EYE
        arc(eyeRX, height /2, eyeSize/2, eyeSize, 0, PI);
    }

//eye type 3 - sunglasses
    else {
        strokeWeight(4);
        stroke(250,145,164); //rim color hot pink
        fill(0); //glass of sunglasses is black

    //LEFT EYE SUNGLASSES
        rect(eyeLX - eyeSize/2, height /2 - eyeSize/2, eyeSize, eyeSize, 1);

    //RIGHT EYE SUNGLASSES
        rect(eyeRX - eyeSize/2, height /2 - eyeSize/2, eyeSize, eyeSize, 1);

    //LINE CONNECTION
        line(eyeLX + eyeSize/2, height /2 - eyeSize/4, eyeRX - eyeSize/2, height /2 - eyeSize/4);

    //GLARE
        strokeWeight(8);
        stroke(255);
        point(eyeLX + eyeSize /8, height /2 + eyeSize/4); //left eye
        point(eyeRX + eyeSize /8, height /2 + eyeSize/4); //right eye

    }

//MOUTH

    //local variable of MOUTH
var mouthX = width /2; //mouthX = horizontal coordinate of MOUTH
var mouthY = height /2 + (faceHeight/3); //mouthY = vertical coordinate of MOUTH

//mouth type 1 - surprised with tongue
    if (mouthType == 1) { 
        strokeWeight(2);
        stroke(225,0,37); //lip liner color - red
        fill(255);
        ellipse(mouthX, mouthY, mouthSize, mouthSize/2); //surprised

        //tongue
        noStroke();
        fill(255,144,159); //tongue color - pink
        ellipse(mouthX, mouthY + mouthSize/8, mouthSize/1.5, mouthSize/4); //tongue
    }

//mouth type 2 - smile
    else if (mouthType == 2) {
        noFill();
        strokeWeight(3);
        stroke(201,0,40); //lip liner color - red
        arc(mouthX, mouthY, mouthSize, mouthSize/2, 0, PI); //happy
    }

//mouth type 3 - frown
    else {
        stroke(94,53,0); //sad mouth color - dark brown
        strokeWeight(3);
        noFill();
        arc(mouthX, mouthY, mouthSize, mouthSize/2, PI, 0); //sad   
    }

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.

//CREATE RANDOM DIMENSIONS
    faceWidth = random(100, 400);
    faceHeight = random(100, 400);
    earSize = random(10, 80);
    eyeSize = random(10, 65);
    noseSize = random(10,50);
    pupSize = random(8,15);
    earringSize = random(20,60);

//CREATE RANDOM TYPES & OPTIONS
    noseType = random (1,3);
    noseType = round(noseType);

    hairType = random (1,3);
    hairType = round(hairType);

    eyeType = random (1,3);
    eyeType = round(eyeType);

    earringType = random (1,3);
    earringType = round(earringType);

    mouthType = random(1,3);
    mouthType = round(mouthType);

    backgroundType = random(1,3);
    backgroundType = round(backgroundType);


}

Project 02 – face generator – srauch

This face generator makes lots of cool folks to chill with! About half of the characteristics of each person — for instance, the shirt size and color, the background, and the skin tone — are completely random, while other components such as the eye color or headwear/hairstyle are randomly selected from a list of options. Writing this code really dusted off the ol’ middle school algebra. Some of said algebra is visible in the positively chicken-scratch notebook hieroglyphs I made while figuring out some of the first few variables. Once I had those established, though, I found I wasn’t writing anything down, instead just relying on the variables I’d already defined to write the next ones–quite the departure from how I worked through last week’s homework.

sketch

var width = 480;
var height = 640;

//background color
var backgroundR = 100;
var backgroundG = 0;
var backgroundB = 0;

//shirt color and size
var shirtR = 200;
var shirtG = 200;
var shirtB = 0;
var shirtWide = 400;
var shirtTall = 100;

//skintone
var skinR = 47;
var skinG = 39;
var skinB = 32;

//neck
var neckTall = 250;
var neckWide = 100;
var neckY = 200;

//head
var headWide = 250;
var headTall = 300;
var headX = width/2;
var headY = 200;

//ears
var earSize = 40;

//eyes
var eyeColor = 1;
var eyeSize = 30;
var eyeDistance = 30;

//nose
var noseLong = 20;
var noseWide = 10;

//mouth
var mouthSelector = 1;

//eyebrows
var eyebrowTall = 30;
var eyebrowWide = 30;
var eyebrowColorSelector = 1;
var eyebrowWeight = 10;

//hair
var hairstyle = 1;

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

function draw() {
    noStroke();
    background(backgroundR, backgroundG, backgroundB);

    // sleeve location variables -- have to be here (not global) so will update with new shirtWide values 
    var shirtCornerStar = ((width-shirtWide)/2)+((shirtWide/4)/2); //x coord of starboard sleeve
    var shirtCornerPort = width-shirtCornerStar; //x coord of port sleeve

    //shirt
    fill(shirtR, shirtG, shirtB);
    //rect(((width-shirtWide)/2), (height-shirtTall), shirtWide, shirtTall); 
    rect(shirtCornerStar, (height-shirtTall), (shirtWide-(shirtWide/4)), shirtTall);

    //sleeves
    fill(shirtR-20, shirtG-20, shirtB-20); //makes sleeves slightly darker than shirt
    triangle(shirtCornerStar, (height-shirtTall), shirtCornerStar, height, (shirtCornerStar-((shirtWide/4)/2)), height); //starboard sleeve
    triangle( shirtCornerPort, (height-shirtTall), shirtCornerPort, height, (shirtCornerPort+((shirtWide/4)/2)), height); //port sleeve

    //neck
    neckWide = shirtWide/3
    neckY = height-neckTall-shirtTall+(shirtTall/6);
    fill(skinR-20, skinG-20, skinB-20);
    rect(width/2-neckWide/2, neckY, neckWide, neckTall);
    ellipse(width/2, neckY+neckTall, neckWide, neckTall/4);

    //head
    headX = width/2
    headY = neckY
    fill(skinR, skinG, skinB);
    ellipse(headX, headY, headWide, headTall);

    //ears
    fill(skinR-10, skinG-10, skinB-10);
    ellipse(headX-(headWide/2), headY, earSize, earSize*1.5); //starboard ear
    ellipse(width-(headX-(headWide/2)), headY, earSize, earSize*1.5); //port ear

    //redraw head to cover ears, theres prob a better way to do this but ears rely on the head variables
    fill(skinR, skinG, skinB);
    ellipse(headX, headY, headWide, headTall);

    //nose (length and width)
    strokeWeight(noseWide);
    stroke(skinR, skinG-20, skinB-20);
    line(headX, headY, headX, headY+noseLong);
    noStroke();

    //eyes (color and distance from center of head)
    if (eyeColor <= 1) {
        fill(54, 43, 17); //brown
    } else if (eyeColor <= 2) {
        fill(52, 95, 45); //green
    } else if (eyeColor <= 2.8) {
        fill(13, 200, 200); //blue
    } else {
        fill(255, 20, 0); //red!
    }
    ellipse((width/2)-eyeDistance, headY, eyeSize);
    ellipse((width/2)+eyeDistance, headY, eyeSize);


    //mouth (arc of different size and stroke color)
    if (mouthSelector <= 1) { //open smile
        fill(61, 32, 31);
        arc(headX, headY+noseLong*2, headWide/3, headTall/4, radians(0), radians(180));
    } else if (mouthSelector <= 2) { //closed smile
        noFill();
        stroke(skinR+20, skinG-20, skinB-20);
        strokeWeight(20);
        arc(headX, headY+noseLong*2, headWide/3, headTall/5, radians(10), radians(170));
        noStroke();
    } else { //bubblegum
        fill(40, 0, 0);
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 30); //mouth
        fill(238, 168, 234, 70); //pink transparent
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 175, 175); //bubble1
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 180, 180); //bubble 2
        fill(255, 240, 240, 90);
        ellipse(headX+40, headY+(headTall/2)-headTall/3, 30, 30); //highlight
    }

    //and finally, hair!
    if (hairstyle <=1) { //bald
        //do nothing
    } else if (hairstyle <=2) { //beanie
    strokeWeight(12);
    strokeCap(ROUND);
        if (hairstyle <= 1.3){
            fill(168, 47, 47); //red hat
            stroke(168-10, 47-10, 47-10);
        } else if (hairstyle <=1.6) {
            fill(200 , 120, 218); //pink hat
            stroke(200-10, 120-10, 218-10);
        } else {
            fill(86, 93, 200); //perriwinkle hat
            stroke(86-10, 93-10, 200-10);
        }
        arc(headX, headY-(headTall/2)+40, headWide+5, headTall-60, radians(180), radians(360));
        rect(headX-(headWide/2)-10, headY-(headTall/2)+40, headWide+20, 60);
    } else { //bowl cut
        if (hairstyle <= 2.3){
            fill(45, 40, 30); //dark brown
            stroke(45, 40, 30);
        } else if (hairstyle <=2.8) {
            fill(130, 96, 57); //light brown
            stroke(130, 96, 57);
        } else if (hairstyle <=2.9 & skinR > 80 && skinG > 80 && skinB >30) {
            fill(222, 129, 25); //red
            stroke(222, 129, 25);
        } else {
            fill(25, 183, 222); //blue
            stroke(25, 183, 222);
        }
        arc(headX, headY-headY/4, headWide+5, headTall-60, radians(180), radians(360));
    }

    //eyebrows
    if (eyebrowColorSelector <=1) {
        stroke(40, 35, 20); //dark brown
    } else if (eyebrowColorSelector <=2) {
        stroke(230, 230, 138); //blonde
    } else {
        stroke(140, 230, 200); //blue
    }

    noFill();
    strokeWeight(eyebrowWeight);
    arc((width/2)-eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
    arc((width/2)+eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
    noStroke();

}

function mousePressed() {
    //background color change
    backgroundR = random(0, 255);
    backgroundG = random(0, 255);
    backgroundB = random(0, 255);

    //shirt color and size change
    shirtR = random(0, 255);
    shirtG = random(0, 255);
    shirtB = random(0, 255);
    shirtWide = random((width-(width/3)), (width-20));
    shirtTall = random((height/6), (height/4));

    //neck and skin changes
    skinR = random(60, 200);
    skinG = random(skinR, skinR-10);
    skinB = random(skinR-20, skinR-30);
    neckTall = random(200, 250);

    //head
    headWide = random(neckWide+100, neckWide+150);
    headTall = random(headWide, headWide*1.4);
    earSize = random(50, 60);

    //eyes
    eyeColor = random(0,3); 
    eyeSize = random(20, 40);
    eyeDistance = random(30, headWide/2-30);

    //nose
    noseLong = random(headTall/10, headTall/6);
    noseWide = random(25, 40);

    //mouth
    mouthSelector = random(0, 3);

    //eyebrows
    eyebrowColorSelector = random(0,2.1);
    eyebrowWeight = random(10, 18);
    eyebrowTall = random(20, 40);

    //hair
    hairstyle = random(0,3);
}

Project-02: Variable Faces; Face Variables

This project displays monkey’s emotions and also uses animations like the monkey’s eyes shaking and the monkey shedding tears.

sketch

//Alicia Kim
//Section B

var w = 26+(1/3);
var h = 26+(1/3);
var eyeWidth = 52+(2/3)
var eyeHeight =79
var v= 1
var r=255
var g=223
var b= 196
var change =0
var tear=0
var eyew=0
var eyeh=0


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

function draw() {
    // background(180);
//normal happy
    if (v==1){
    tear=0
    background(245,245,220);// pastel yellow
    //ears
        fill(255,223,196); //skin
        ellipse(3.7*w, 11*h, 4*w, 3*h);
        ellipse(14.2*w,11*h, 4*w, 3*h);

    //inner ears //pink
        fill(222,165,164);
        ellipse(4*w, 11.2*h, 2*w, 2*h);
        ellipse(14*w,11.2*h, 2*w, 2*h);
        r=255;
        g=223;
        b=196;
    }
//surprised
    else if (v==2){
        background(153,153,204);// purple
    //ears
        fill(255,223,196); //skin
        ellipse(3.7*w, 11*h, 6*w, 1.5*3*h);
        ellipse(14.2*w,11*h, 6*w, 1.5*3*h);

    //inner ears //pink
        fill(222,165,164);
        ellipse(4*w, 11.2*h, 3*w, 3*h);
        ellipse(14*w,11.2*h, 3*w, 3*h);
        r=255;
        g=223;
        b=196;

    }
// shy
    else if (v==3){
        background(250,218,221); //shy pink
    //ears
        fill(255,204,203); //baby pink
        ellipse(3.7*w, 11*h, 4*w, 3*h);
        ellipse(14.2*w,11*h, 4*w, 3*h);

    //inner ears //pink
        fill(222,165,164);
        ellipse(4*w, 11.2*h, 2*w, 2*h);
        ellipse(14*w,11.2*h, 2*w, 2*h);

        r=252;
        g=202;
        b=191;

    }
// sad
    else if (v==4){
        background(100);
    //ears
        fill(255,223,196); //skin
        ellipse(3.7*w, 11*h, 4*w, 3*h);
        ellipse(14.2*w,11*h, 4*w, 3*h);

    //inner ears //pink
        fill(222,165,164);
        ellipse(4*w, 11.2*h, 2*w, 2*h);
        ellipse(14*w,11.2*h, 2*w, 2*h);

        r=255;
        g=223;
        b=196;

    }

//face outline
    strokeWeight(1);
    fill(155,103,60);
    beginShape();
  
    curveVertex(7*w,2*h);
    curveVertex(7*w,2*h);
    curveVertex(8*w,4.5*h);
    curveVertex(10*w,4.6*h);
    curveVertex(13*w,5*h);
    curveVertex(15.5*w,7*h);
    curveVertex(14*w,11*h);
    curveVertex(16*w,14*h);
    curveVertex(13*w,16*h);
    curveVertex(9.5*w,16.5*h);
    curveVertex(5*w,16*h);
    curveVertex(2*w,14*h);
    curveVertex(4*w,11*h);
    curveVertex(2.8*w,8.5*h);
    curveVertex(3*w,6*h);
    curveVertex(5*w,4.5*h);
    curveVertex(5.5*w,2.5*h);
    curveVertex(6.5*w,4.5*h);
    curveVertex(7*w,2*h);
    curveVertex(7*w,2*h);
    endShape();   


//inner face outline
    strokeWeight(1);
    fill(r,g,b);
    beginShape();
    curveVertex(9.5*w,8*h);

    curveVertex(9.5*w,8*h);
    curveVertex(11.3*w,7*h);
    curveVertex(13.3*w,8.5*h);
    curveVertex(12.8*w,12.5*h);
    curveVertex(14*w,14*h);
    curveVertex(12.5*w,16*h);
    curveVertex(5.7*w,15.9*h);
    curveVertex(4.4*w,14*h);

    curveVertex(5.5*w,12.5*h);

    curveVertex(5*w,8.5*h);
    curveVertex(7*w,7*h);
    curveVertex(9.5*w,8*h);

    curveVertex(9.5*w,8*h);
    endShape();

//normal happy
    if (v==1){
        eyeh=0
        eyew=0
        //eyes
        fill (255,255,255); //white
        ellipse(7.5*w,11.2*h, eyeWidth, eyeHeight);
        ellipse(11*w, 11.2*h, eyeWidth, eyeHeight);

        //mouth
        fill(255,120,144); //dark pink
        arc (9.25*w, 15*h, 2*w,1.5*h , 0, PI, CHORD);

        //blush
        fill(222,165,164); //pink
        ellipse(7.1*w,14.2*h,1*w,0.5*h);
        ellipse(11.4*w,14.2*h,1*w,0.5*h);

        // inner eyes
        fill(0,0,0);
        ellipse(7.8*w, 11.5*h, 0.5*eyeWidth, (2/3)*eyeHeight);
        ellipse(10.7*w, 11.5*h, 0.5*eyeWidth, (2/3)*eyeHeight);

        //nose
        fill(0,0,0);
        ellipse(9*w, 13.5*h, 0.3*w, 0.5*h);
        ellipse(9.5*w, 13.5*h, 0.3*w, 0.5*h);

    }
//surprised
    else if (v==2){
        //eyes
        fill (217,33,33); //red
        ellipse(7.5*w,11.2*h, eyeWidth*1.5, eyeHeight*1.5);
        ellipse(11*w, 11.2*h, eyeWidth*1.5, eyeHeight*1.5);

        //mouth
        fill(255,120,144); //dark pink
        arc (9.25*w, 15*h, 4.5*w,3*h , 0, PI, CHORD);

        // inner eyes
        // fill(0,0,0);
        // ellipse(7.8*w, 11.5*h, eyeWidth, (4/3)*eyeHeight);
        // ellipse(10.7*w, 11.5*h, eyeWidth, (4/3)*eyeHeight);

        fill(0,0,0);
        if (eyew<eyeWidth){
            eyew+=.4
        }
        
        if (eyeh<eyeHeight){
            eyeh+=.4
        }
        ellipse(7.8*w, 11.5*h, eyew, eyeh);
        ellipse(10.7*w, 11.5*h, eyew, eyeh);
        
        //nose
        fill(0,0,0); //black
        ellipse(8.9*w, 13.5*h, 0.7*w, 1*h);
        ellipse(9.7*w, 13.5*h, 0.7*w, 1*h);
    }

//shy
    else if (v==3){
        //eyes
        fill (255,255,255); //white
        ellipse(7.5*w,11.2*h, eyeWidth, eyeHeight);
        ellipse(11*w, 11.2*h, eyeWidth, eyeHeight);

        //heart eyes

        //mouth
        fill(255,120,144); //dark pink
        arc (9.25*w, 15*h, 2*w,1.5*h , 0, PI, CHORD);

        //blush
        fill(255,204,203); //baby pink
        ellipse(7.1*w,14.2*h,3*w,1.5*h);
        ellipse(11.4*w,14.2*h,3*w,1.5*h);

        // inner eyes
        fill(0,0,0);
        if (change>7){
            change=-2
        }
        else if (change<=-10){
            change=2
        }
        else {
            change+=0.5
        }

        ellipse(7.8*w+change, 11.5*h, 0.5*eyeWidth, (2/3)*eyeHeight);
        ellipse(10.7*w+change, 11.5*h, 0.5*eyeWidth, (2/3)*eyeHeight);

        //nose
        fill(0,0,0);
        ellipse(9*w, 13.5*h, 0.3*w, 0.5*h);
        ellipse(9.5*w, 13.5*h, 0.3*w, 0.5*h);
    }
//sad
    else if (v==4){
        //eyes
        fill (0,255,255); //cyan
        ellipse(7.5*w,11.2*h, eyeWidth, eyeHeight);
        ellipse(11*w, 11.2*h, eyeWidth, eyeHeight);

        //mouth
        fill(255,120,144); //dark pink
        arc (9.25*w, 15*h, 2*w,1.5*h , PI, 2*PI, CHORD);

        // inner eyes
        fill(0,0,0);
        ellipse(7.8*w, 11.5*h, 0.3*eyeWidth, (2/3)*eyeHeight);
        ellipse(10.7*w, 11.5*h, 0.3*eyeWidth, (2/3)*eyeHeight);

        //nose
        fill(0,0,0);
        ellipse(9*w, 13.5*h, 0.3*w, 0.5*h);
        ellipse(9.5*w, 13.5*h, 0.3*w, 0.5*h);
        //tears

        tear+=2
        fill (0,255,255); //cyan
        ellipse(11*w, 13*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);
        ellipse(11*w, 13.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);
        ellipse(11*w, 14*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);
        ellipse(11*w, 12.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);
        ellipse(7.5*w, 13*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);
        ellipse(7.5*w, 13.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);
        ellipse(7.5*w, 14*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);
        ellipse(7.5*w, 12.5*h+tear, 0.1*eyeWidth, 0.1*eyeHeight);

    }
   
   






 
 }
 function mousePressed(){
   
    v+=1;
    if (v>4){
        v=1;
    }

    }   
.

Blog 02 – Generative Art – srauch

I’m inspired by the landscape-generating algorithm Minecraft uses to build its maps. Each Minecraft world has a completely unique map, but they are generated piecemeal rather than all in one go–the map is built one 16×16 block “chunk” at a time under the player as they wander. The worlds are built a layer at a time, using a 64-bit random number called a seed that determines the shape, biome, and finally content of each chunk, though the game also relies on “smoothing” functions that ensure biomes blend logically into one another–for example, there won’t be a snowy forest next to a desert.

The landscape-generating algorithm Minecraft is the soul of the game. It creates in the player a sense of thrill and wonder about exploring a completely unknown landscape spreading out around them – a feeling that’s hard to come by in a highly connected 21st-century world. In a more technical sense, it’s also nifty in that it allows the game itself to be quite small–the whole thing, fresh out of the box (so to speak), takes up less than a gigabyte, making for an easy download.

Looking Outwards 02: Generative Art _Alicia Kim

The generative art piece that inspired me was Aaron Koblin’s project called Flight Patterns. This piece of art is created by parsing FAA data and creates different lines and colors according to flight paths. This project is impressive not only because of the technology and algorithm put into it but also the presentation of different colors and how he made multiple days worth of flights into one photo. Especially the intersections between flight paths generate a big spectrum of colors of light and as well as more tones. I suppose that he parsed multiple days of FAA data and made it into a single data piece and the colors represent different time, generating a large spectrum of colors. The different colors for different time was very intentional and generated a beautiful combination of brightness and tone. The creator’s ability to program and analyze data boosted his artistic ability to create this great piece.

http://www.aaronkoblin.com/project/flight-patterns/

LookingOutwards-02, SectionB

Project-02: Variable Faces

My variable faces are all completely computer generated and unique. Every feature is drawn from a set of randomly generated variables. I like the variation in emotions they can express.

sketch

// Evan Stuhlfire
// estuhlfi, Section B
// Project-02: Variable Faces; Face Variables

// Declare global variables


// variable controling head dimensions and shape
var headX = 0; // x value of head center
var headY = 0; // y value of head center
var minHead = 100;
var maxHeadW = 500; //max head width
var maxHeadH = 420; // max head height
var headHeight = 300;
var headWidth = 350;

// variables controling face dimensions and attributes
var eyeSize = 25;
var percentEyeW = 1; // value to adjust eye shape and position
var percentEyeH = 1; // value to adjust eye shape and position
var eyeVert = 2;
var lookAdjustLeft = .25; // Controls eye placement for look direction
var lookAdjustRight = .25;
var lookMax = .45;

// variable to control nose
var nose1 = 1;
var nose2 = 1.1;
var nose3 = 1.1;
var nose4 = 1;
var noseEnd = 1;
var noseLeft1 = 1;
var noseLeft2 = .9;
var noseLeft2 = 1;

// mouth variables
var noseMouthGap = 10;
var mouthStart = 1;
var mouth1 = 1.05;
var mouth2 = 1;
var mouthIncrease = 1.02;

//  color variables
var color1 = 0;
var color2 = 0;
var color3 = 0;

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

    // set head center
    centerX = width/2;
    centerY = height/2;

    // get initial colors
    getRandomColors();
}

function draw() {
    var colorChange = .4; // factor to modify color

    background(color1, color2, color3); // draw background from color variables

    // calculate eyes
    var eyeLeftX = centerX - headWidth * lookAdjustLeft; // x coordingate of left eye
    // x coordinate of right eye, can look different directions
    var eyeRightX = centerX + headWidth * lookAdjustRight; 
    var eyeHeight = min(eyeSize * percentEyeH, headHeight * .90);
    var eyeWidth = eyeSize * percentEyeW;
    var eyePositionY = height / eyeVert; // calculate vertical position of eyes 

    
    // calculate pupils
    var pupilSize = .2;
    var pupilLook = 4;
    var pupilX = eyeLeftX;
    var pupilY = eyeRightX;

    if (lookAdjustLeft > lookAdjustRight){ // looking left move pupils left
        pupilX -= pupilLook;
        pupilY -= pupilLook;
    } else { // looking right move pupils right
        pupilX += pupilLook;
        pupilY += pupilLook;
    }

    // variables for nose
    var maxNose = .90;

    var nose1X = (eyeLeftX + eyeRightX)/2;
    var nose1Y = eyePositionY; 
    if (lookAdjustLeft > lookAdjustRight) { 
        // looking left point nose left
        var nose2X = nose1X * noseLeft1;
        var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
        var nose3X = nose2X * noseLeft2;
        var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
        var nose4X= nose1X * noseLeft3;
        var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);
    } else { 
        // looking right point nose right 
        var nose2X = nose1X * nose1;
        var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
        var nose3X = nose2X * nose3;
        var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
        var nose4X= nose1X * noseEnd;
        var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);   
    }

    // calculate mouth
    var maxMouth = .98;
    var mouth1X = centerX * mouthStart;
    var mouth1Y = min(nose4Y * mouth1, (centerY + headHeight/2) - noseMouthGap);
    // keep mouth on face
    if (headHeight > headWidth){
        mouth1X = centerX - noseMouthGap;
    }
    var mouth2X = mouth1X * mouthIncrease;
    var mouth2Y = mouth1Y * mouth2;
    var mouth3X = mouth2X * mouthIncrease;
    var mouth3Y = mouth2Y;
    var mouth4X = mouth3X * mouthIncrease;
    var mouth4Y = mouth1Y;



    // draw head
    fill(color1 * colorChange, color2, color3);
    ellipse(centerX, centerY, headWidth,  headHeight);

    // draw eyes
    fill(color1, color2 * colorChange, color3);
    ellipse(eyeLeftX, eyePositionY, eyeWidth, eyeHeight);
    ellipse(eyeRightX, eyePositionY, eyeWidth, eyeHeight);

    // draw pupils
    fill(10);
    ellipse(pupilX, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);
    ellipse(pupilY, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);

    // draw mouth
    beginShape();
    curveVertex(mouth1X, mouth1Y);
    curveVertex(mouth1X, mouth1Y);
    curveVertex(mouth2X, mouth2Y);
    curveVertex(mouth3X, mouth3Y);
    curveVertex(mouth4X, mouth4Y);
    curveVertex(mouth4X, mouth4Y);
    endShape();

    // draw nose 
    fill(color1 * colorChange, color2, color3);
    beginShape();
    curveVertex(nose1X, nose1Y);
    curveVertex(nose1X, nose1Y);
    curveVertex(nose2X, nose2Y);
    curveVertex(nose3X, nose3Y);
    curveVertex(nose4X, nose4Y);
    curveVertex(nose4X, nose4Y);
    endShape();
}

function mousePressed() {
    // When the mouse is clicked random values are generated to control the 
    // dimensions, position, and color of a face

    // randomly generate head value
    headWidth = random(minHead, maxHeadW);
    headHeight = random(minHead, maxHeadH);

    // randomly generate eye values
    eyeSize = headWidth * random(.1, .3);
    percentEyeW = random(.5, 1); 
    percentEyeH = random(.5, 1);
    eyeVert = random(2, 2.25); // vertical position of eyes
    lookAdjustLeft = random(.01, lookMax);
    lookAdjustRight = lookMax - lookAdjustLeft;

    // generate nose values
    nose1 = random(1, 1.1);
    nose2 = random(1, 1.2);
    nose3 = random(1.1, 1.15);
    nose4 = random(.98, 1.05);
    noseEnd = random(.95, 1.05);
    noseLeft1 = random(.95, 1);
    noseLeft2 = random(.85, 1);
    noseLeft3 = random(1, 1.12);

    // generate mouth values
    mouthStart = random(.95, 1.05);
    mouth1 = random(1.05, 1.2);
    mouth2 = random(.98, 1.02);
    mouthIncrease = random(1.02, 1.03);

    // randomly generate a new color combination
    getRandomColors();
}

function getRandomColors(){
    // function generates a random number for color variables
    color1 = random(80, 255); 
    color2 = random(80, 255);
    color3 = random(80, 255);
}

Project 02 – Variable Faces

My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.

sketch

//Favour Adesina Section B

var faceWidth = 300;
var lipHeight = 20;
var lipWidth = 60;
var BlipWidth = 100;
var eyeWidth = 70;
var eyeHeight = 100;
var pupSize = 60;
var faceHeight = 400;


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

function draw() {
    noStroke()
    background(247, 195, 218);

    //SHOULDER
    fill(255, 67, 89);
    ellipse(width/2, height/2 + faceHeight/2, 2*faceWidth, faceHeight);

    //EARS
    fill(141, 75, 36);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/4, faceHeight/4); //right ear outer
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/4, faceHeight/4);  //left ear outer
    fill(34, 20, 13);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //right ear inner
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //left ear inner
    //FACE
    fill(141, 75, 36);
    ellipse(width/2, height/2, faceWidth, faceHeight);    // face

    //EARRINGS
    fill(255, 255, 0);
    triangle((width/2 - (faceWidth/2 + faceWidth/50)), height/2 + faceHeight/4, width/2 - faceWidth/2, height/2 + faceHeight/16, width/2 - faceWidth/1.5, height/2 + faceHeight/4);
    triangle((width/2 + (faceWidth/2 - faceWidth/100)), height/2 + faceHeight/4, width/2 + faceWidth/2, height/2 + faceHeight/16, width/2 + faceWidth/1.55, height/2 + faceHeight/4);


    //EYES
    var LXeye = width/2 - faceWidth * 0.26;          
    var RXeye = width/2 + faceWidth * 0.26;
    fill(255, 255, 255);
    ellipse(LXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites 
    ellipse(RXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites
    fill(104, 54, 37);
    ellipse(LXeye, height/2, pupSize, pupSize);    //Pupils 
    ellipse(RXeye, height/2, pupSize, pupSize);     //pupils 
    fill(0);
    ellipse(LXeye, height/2, 20, 20);                //inner pupils 
    ellipse(RXeye, height/2, 20, 20);                //inner pupils
       
    //NOSE
    stroke(35, 31, 32);
    strokeWeight(7);
    line(width/2, height/2, width/2, (height/2)+ eyeHeight/3);                         //Nose bridge
    ellipse((width/2)-5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose 
    ellipse((width/2)+5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose

    //LIPS
    strokeWeight(2);
    var BlipY = height/2 + faceHeight * 0.27 + lipHeight/2;
    fill(122, 22, 25);
    ellipse(width/2, BlipY, BlipWidth, lipHeight);
    noStroke();
    fill(173, 69, 87);                                   //light pink 
    ellipse(width/2, BlipY, lipWidth/2, lipHeight/2);  //inner mouth

    


    //HAIR
    fill(34, 20, 13);
    ellipse(width/2, height/2 - faceHeight/2, width/7, height/6);
    ellipse(width/2 - 55, height/2 - faceHeight/2, width/8, height/7);
    ellipse(width/2 + 55, height/2 - faceHeight/2, width/8, height/7);
 

        }

function mousePressed() {

    faceWidth = random(300, 500);
    faceHeight = random(260, 400);
    lipHeight = random(10, 50);
    pupSize = random(20, 70);
    lipWidth = random(10, 60);
    BlipWidth = random(30, 100);
    eyeWidth = random(20, 150);
    eyeHeight = random(80, 170);

}