Month: September 2022

Project 02

For our second project of the semester, I chose to edit the self-portrait from the first project, changing parts of the figure like the height of the face, shape of the mouth and eyebrows, and even added the ability to switch through some accessories. The self-portrait, after this process, feels much more lively due to the use of the mousePressed function.

fom Project 02Download
// Francesca Menendez, fom, Section C

var mouth = 1;
var faceHeight = 365;
var eyebrows = 1;
var accessory = 1;

function setup() {
    createCanvas(480, 640);
    background(252, 181, 104); // background orange
}

function draw() {
	// background ornament
	strokeWeight(3);
	stroke(255);
	fill(116, 203, 200); //teal stripe
	rect(220, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(79, 141, 241); // blue stripe
	rect(127, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 190, 214); // pink stripe
	rect(32, 0, 45, 700);
	strokeWeight(3);
	stroke(255);
	fill(192, 226, 148); // green stripe
	rect(315, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 246, 140); // yellow stripe
	rect(410, 0, 45, 700);

	// hair
	noStroke();
	fill(40, 24, 15); // hair color
	ellipse(240, 280, 380, 420); // furthest back ellipse
	noStroke();
	fill(40, 24, 15);
	rect(51, 295, 378, 400); // extension rectangle
	noStroke();
	fill(40, 24, 15);
	triangle(0, 640, 90, 640, 90, 540); // left triangle
	noStroke();
	fill(40, 24, 15);
	triangle(480, 640, 390, 640, 390, 540); // right triangle

	// ears
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(90, 340, 60, 80); // left ear
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(390, 340, 60, 80); // right ear

	// neck
	strokeWeight(5);
	stroke(247, 150, 107); // shadow color edge
	fill(244, 218, 188); // shadow color
	rect(180, 365, 125, 300);

	// body and shirt
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	triangle(70, 650, 200, 650, 200, 550);

	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	triangle(410, 650, 280, 650, 280, 550);

	noStroke();
	fill(244, 218, 188);
	rect(183, 500, 119, 200);

	strokeWeight(7)
	stroke(0);
	line(150, 585, 150, 690); // left top strap

	strokeWeight(7)
	stroke(0);
	line(335, 585, 335, 690); // right top strap


	// face (between 310 and 375)
	strokeWeight(5);
	stroke(247, 150, 107); // skin color edge
	fill(255, 237, 213); // skin color
	ellipse(240, 320, 300, faceHeight); //EDIT OUT ellipse: (center x,y), width, height

	// eyes
	strokeWeight(3);
	stroke(0, 34, 68); // eye color edge
	fill(238, 239, 248); // eye color
	ellipse(170, 280, 75, 55); // left eye
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(238, 239, 248); 
	ellipse(310, 280, 75, 55); // right eye

	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1); // iris color
	circle(170, 275, 45); // left
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1);
	circle(310, 275, 45); // right

	noStroke();
	fill(0); // pupil color
	circle(170, 275, 15); // left
	noStroke();
	fill(0);
	circle(310, 275, 15); // right

	strokeWeight(10);
	stroke(255); // reflection color
	point(175, 270);
	strokeWeight(10);
	stroke(255);
	point(315, 270);

	strokeWeight(7);
	stroke(0, 34, 68); // eyelash color
	line(170, 255, 170, 230);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(310, 255, 310, 230);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(155, 257, 155, 232);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(325, 257, 325, 232);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(185, 257, 185, 232);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(295, 257, 295, 232);

	// glasses
	strokeWeight(6);
	stroke(82, 76, 69); // glasses color
	noFill();
	ellipse(165, 285, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	noFill();
	ellipse(315, 285, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	line(230, 285, 254, 285);

	// bangs
	noStroke();
	fill(40, 24, 15); // bang color
	square(200, 110, 100, 15); // center

	noStroke();
	fill(40, 24, 15);
	square(125, 130, 80, 15); // left

	noStroke();
	fill(40, 24, 15);
	square(275, 130, 80, 15); // right

	noStroke();
	fill(40, 24, 15);
	rect(155, 105, 190, 60);

	// normal brow
	if (eyebrows == 1) {
		noStroke();
		fill(0); // eyebrow color
		triangle(200, 230, 200, 200, 110, 230);
		noStroke();
		fill(0);
		triangle(280, 230, 280, 200, 365, 230);

	// angry brow
	} else if (eyebrows == 2) {
		noStroke();
		fill(0);
		circle(210, 215, 20); // left angled brow
		noStroke();
		fill(0);
		triangle(204, 223, 150, 195, 221, 209);
		noStroke();
		fill(0);
		circle(270, 215, 20); // right angled brow
		noStroke();
		fill(0);
		triangle(276, 223, 330, 195, 259, 209);

	// suspicious brow
	} else if (eyebrows == 3) {
		noStroke();
		fill(0);
		circle(210, 215, 20); // left curved brow
		noStroke();
		fill(0);
		triangle(204, 223, 170, 190, 221, 209);
		noStroke();
		fill(0);
		triangle(170, 190, 130, 210, 190, 200);
		noStroke();
		fill(0);
		circle(270, 215, 20); // right angled brow
		noStroke();
		fill(0);
		triangle(276, 223, 330, 195, 259, 209);

	}

	//nose
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(220, 355, 24);
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(260, 355, 24);

	strokeWeight(5);
	stroke(247, 150, 107);
	fill(255, 237, 213);
	circle(240, 355, 27);

	noStroke();
	fill(255, 237, 213);
	ellipse(240, 345, 30, 40);

	// happy mouth
	if (mouth == 1) {
		strokeWeight(8);
		stroke(229, 162, 153); // lip color
		fill(255); // teeth color
		arc(240, 395, 155, 100, 0, HALF_PI)
		strokeWeight(8);
		stroke(229, 162, 153);
		fill(255);
		arc(240, 395, 155, 100, HALF_PI, PI);
		strokeWeight(8);
		stroke(229, 162, 153);
		line(165, 395, 319, 395);

	// surprised mouth
	} else if (mouth == 2) {
		strokeWeight(8);
		stroke(229, 162, 153); // lip color
		fill(255); // teeth color
		arc (240, 430, 125, 90, 0, 0, 0);

	// nervous mouth
	} else if (mouth == 3) {
		strokeWeight(8);
		stroke(229, 162, 153); // lip color
		fill(255);
		rect(167, 400, 150, 45, 10);

	}

	// earrings
	strokeWeight(3);
	stroke(224, 135, 73); // earrings edge color
	fill(232, 190, 64); // earrings color
	rect(70, 350, 25, 60, 20); // left earring
	strokeWeight(3);
	stroke(224, 135, 73);
	fill(232, 190, 64);
	rect(385, 350, 25, 60, 20); // right earring

	strokeWeight(4);
	stroke(255); // earrings reflection color
	fill(255);
	rect(77, 360, 2, 32, 10); // left
	strokeWeight(4);
	stroke(255);
	fill(255);
	rect(392, 360, 2, 32, 10); // right

	// accessories
	// collar
	if (accessory == 1) {
		noStroke();
		fill(0); // collar color
		rect(170, 520, 145, 50);

	// bow
	} else if (accessory == 2) {
		strokeWeight(4);
		stroke(10, 44, 84); // bow stroke color
		fill(30, 45, 110); // bow color
		triangle(295, 160, 245, 110, 230, 150);
		strokeWeight(4);
		stroke(16, 44, 84); // bow stroke color
		fill(30, 45, 110); // bow color
		triangle(295, 160, 373, 200, 320, 220);
		strokeWeight(4);
		stroke(16, 44, 84); // bow stroke color
		fill(30, 45, 110); // bow color
		circle (295, 160, 35);

	// pearl earring addition
	} else if (accessory == 3) {
		strokeWeight(3);
		stroke(202, 196, 176);
		fill(255);
		circle(83, 410, 30); // left pearl
		strokeWeight(3);
		stroke(202, 196, 176);
		fill(255);
		circle(397, 410, 30); // right pearl

	}
}

function mousePressed() {
	faceHeight = random (310, 375);
	mouth = round(random (1, 3));
	eyebrows = round(random (1, 3));
	accessory = round(random (1, 3));
}

Project 2: Variable Face

sketch

//Name: Hari Vardhan Sampath
//Section: E

var x = 80;
var y = 160;
var eyeSize = 50;
var faceWidth = 200;
var faceHeight = 300;
var backgroundColor = 180
var chinWidth = 15
var mouthHeight1 = 20
var mouthHeight2 = 20 
var noseHeight = 100

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

function draw() {
    background(backgroundColor);

    // outline of face
    fill(210,180,140);
    beginShape();
    curveVertex(x*2, y);
    curveVertex(x*2, y);
    curveVertex(x, y*2);
    curveVertex(x*2 + chinWidth, y*3 + x/2);
    curveVertex(x*4 - chinWidth, y*3 + x/2);
    curveVertex(x*5, y*2);
    curveVertex(x*4, y);
    curveVertex(x*2, y);
    curveVertex(x*2, y);
    endShape();

    // mouth
    noFill();
    beginShape();
    vertex(x*2 + 30, y*3);
    bezierVertex(x*2 + 60, y*3 + mouthHeight1, 
        x*4 - 60, y*3 + mouthHeight2, x*4 - 30, y*3);
    endShape();

    // eyes
    fill(255,248,220);
    ellipse(x*2 + 10, y*2, eyeSize, eyeSize+5);
    ellipse(x*4 - 10, y*2, eyeSize, eyeSize+5);
    fill(0,0,0);
    ellipse(x*2 + 10, y*2, eyeSize/2, eyeSize/2);
    ellipse(x*4 - 10, y*2, eyeSize/2, eyeSize/2);

    // hair 
    fill(5,5,0);
    beginShape();
    curveVertex(x*2, y + x);
    curveVertex(x*2, y + x);
    curveVertex(x, y*2);
    curveVertex(x, y*2 - x);
    curveVertex(x*2, y - 15);
    curveVertex(x*4, y - 15);
    curveVertex(x*5, y*2 - 25);
    curveVertex(x*2, y + x);
    curveVertex(x*2, y + x)
    endShape();

    // nose
    fill(210,180,140);
    beginShape();
    curveVertex(x*3 - 30, y*2 + noseHeight - 20);
    curveVertex(x*3 - 30, y*2 + noseHeight - 20);
    curveVertex(x*3 - 30, y*2 + noseHeight - 10);
    curveVertex(x*3 - 15, y*2 + noseHeight - 15);
    curveVertex(x*3, y*2 + noseHeight);
    curveVertex(x*3 + 15, y*2 + noseHeight - 15);
    curveVertex(x*3 + 30, y*2 + noseHeight - 10);
    curveVertex(x*3 + 30, y*2 + noseHeight - 20);
    curveVertex(x*3 + 30, y*2 + noseHeight - 20);
    endShape();

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'backgroundColor' gets a random value between 160 and 200.
    x = random(75, 95);
    y = random(150, 170);
    eyeSize = random(30, 70);
    backgroundColor = random(160, 200);
    chinWidth = random(0, 25);
    mouthHeight1 = random(-30, 40);
    noseHeight = randon(90, 110);
}

LO 02: Memo Akten – Circa 2018/2019

Memo Akten is a computational artist whose work revolve around converting data into speculative videos through generative design. One of his projects titled Cicra is a video essay that revolves around interconnectedness of algorithms and human existence in this world. Most of the generative artists work with video and sound to produce an atmosphere. The most I admire about Akten’s work is the storytelling along with the stitched snippets of videos which are algorithmically generated, which emphasizes the human-machine relationship.

Memo Akten is a computational artist whose work revolve around converting data into speculative video through generative design. One of his projects titled Cicra is a video essay that revolves around interconnections of algorithms and human existence in this world. Most of the generative artists work with video and sound to produce an atmosphere. The most I admire about Akten’s work is the storytelling along with the stitched snippets of videos which are algorithmically generated, which emphasizes the human-machine relationship.

A selection of (camera friendly) work in 4 minutes with voice-over (as of 2020) from Memo Akten on Vimeo.

Blog 02

I looked into Edward Zajec’s paintings. Though they seem basic at first glance, I was drawn to the order and systematic organization of the geometries in the paintings. I admire the commentary on the reality of computers in our lives. In the earlier days when computers were being introduced, Zajec decided to turn to these hand painted graphics that emulate the construction a computer generates. Additionally, the rules the Zajec assigns to the composition remains simple. Though with only two rules, there are almost an infinite amount of repetitions and unique compositions that the logic can produce. The act of producing the painting by hand though, makes the art work feel more local to “reality” or to the way humans were before the complex algorithms of the digital world took over basic needs in our lives.

https://www.atariarchives.org/artist/sec16.php

project 02 – click it!

sketch
//Jaden Luscher
//jluscher@andrew.cmu.edu
//Section A

var eyeSize = 40;
var r;
var g;
var b;

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

function draw() {
  background(157, 102, 31); //brown "hair" is the background
  noStroke();

  //generates random color values for flashing background)
  r = random(200);
  g = random(100,200);
  b = random(100);

  if (mouseIsPressed){  //surprised face
    background(r,g,b);  //flashing background

    fill(255, 120, 100);  //blushing skin color
    ellipse(random(118,122),random(98,102),120,150); //jittering face

    fill(255);
    ellipse(100,90, eyeSize, eyeSize);  //wide eyes
    fill(120, 50, 50);
    ellipse(random(99,101),random(89,91),eyeSize/4);  //small iris

    fill(255);
    rect(random(120,122),140,6,8);
    rect(random(128,130),140,6,8);
    rect(random(136,138),140,6,8);
    rect(random(144,146),140,6,8);
    rect(random(152,154),140,6,8);  //jittering teeth

    noFill();
    stroke(115, 74, 21);
    strokeWeight(2);
    arc(100,90,eyeSize*1.5,eyeSize*2,4,5,OPEN);   //raised eyebrow
    stroke(0);
    line(120,140,160,140); //flat mouth


  } else {  //resting face
    fill(40, 110, 154);
    quad(120,0,186.666,200,200,200,200,0); //blue: 2nd background color

    fill(236, 196, 163);
    ellipse(120,100,120,150); //still face

    fill(255);
    ellipse(100,90, eyeSize, eyeSize/2);  //resting eyes
    fill(120, 50, 50);
    ellipse(constrain(mouseX,95,105),constrain(mouseY,85,95),eyeSize/2.5);
    //iris follows mouse

    fill(213, 152, 133);
    triangle(160,150,145,145,120,150);  //top lip
    triangle(160,151,145,156,120,151);  //bottom lip

    noFill();
    strokeWeight(5);
    stroke(115, 74, 21);
    ellipse(100, constrain(mouseY,90,100),eyeSize*1.75);  //large glasses lens
    ellipse(175, constrain(mouseY,75,85),eyeSize);  //small glasses lens
    strokeWeight(2);
    arc(100,90,60,40,3.7,5.8,OPEN);   //eyebrow
  }
  //the earring and nose do not change
  noStroke();
  fill(213, 152, 133);
  ellipse(55,177,10);
  ellipse(55,190,10);
  fill(40, 110, 154);
  triangle(50,170,55,120,60,170);   //earring

  strokeWeight(2);
  stroke(0);
  noFill();
  line(120,0,160,120);
  line(160,120,145,125);  //lines for nose
}

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);


}

anabelle’s project 02

My project is based on a video game I like called “Omori.” Click on the upper left corner to control eyes, upper right to control eyebrows, lower left for accessories, and lower right for mouths. Click on the purple button to get a completely randomized face. @.@

sketch
// kayla anabelle lee <3
// section c
// kaylalee

let radiusHead = 125;
let shoulderWidth = 175;

let counterEye = 0;
let counterBrow = 0;
let counterMouth = 0;
let counterExtra = 0;


function happyMouth(x, y, w, h, color) {
    var r = (w / 8);

    //rectangle
    fill(50, 230);
    noStroke();
    rect(x-w/2+r, y-r, w-2*r, r);

    // bottom arc
    arc(x, y, w, h, 0, radians(180));

    // right quarter circle
    arc((x-(w/2)+r), y, 2*r, 2*r, radians(180), radians(270));

    // left quarter circle
    arc(x+(w/2)-r, y, 2*r, 2*r, radians(270), 0);
    line(x-(w/2)+r, y-r, x+(w/2)-r, y-r); 
}

function curvyStar(x, y, r) {
    noStroke();
    push();
    translate(x, y);
    angleMode(DEGREES);
    beginShape();
    for(var i = -90; i < 0; i += 1) {
        vertex( r*cos(i), 
                -r*sin(i) );
    } for(var i = 0; i < 90; i += 1) {
        vertex(r*cos(i), 
               2*r - r*sin(i));
    } for (var i = 90; i < 180; i += 1) {
        vertex(2*r + r*cos(i),
               2*r - r*sin(i));   
    } for(var i = 180; i < 270; i += 1) {
        vertex(2*r + r*cos(i), 
               0 - r*sin(i));
    } endShape();
    pop();

    angleMode(RADIANS);
}

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

function draw() {
    background(230);
    stroke(50, 255);
    strokeWeight(1);
    noFill();

    // head
    stroke(50, 230);
    strokeWeight(5);
    noFill();

    beginShape();
    curveVertex(width/2 - radiusHead, height/2 - 100);
    curveVertex(width/2 - radiusHead, height/2 - 100);
    curveVertex(width/2 - 100, height/2 + 20);
    curveVertex(width/2, height/2 + 80);
    curveVertex(width/2 + 100, height/2 + 20);
    curveVertex(width/2 + radiusHead, height/2 - 100);
    curveVertex(width/2 + radiusHead, height/2 - 100);
    endShape();

    // ears
    arc(width/2 - radiusHead, height/2 - 40, 50, 50, radians(60), radians(290));
    arc(width/2 + radiusHead, height/2 - 40, 50, 50, radians(250), radians(110));

    // neck and shoulders
    beginShape(); //left side
    curveVertex(width/2 - 35, height/2 + 75);
    curveVertex(width/2 - 35, height/2 + 75);
    curveVertex(width/2 - 35, height/2 + 150);
    curveVertex(width/2 - 85, height/2 + 175);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    endShape();  

    beginShape();
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - 210, height/2 + 200);
    curveVertex(width/2 - 225, height/2 + 250);
    curveVertex(width/2 - 230, height/2 + 350);     
    curveVertex(width/2 - 230, height/2 + 350); 
    endShape();   

    beginShape(); //right side
    curveVertex(width/2 + 35, height/2 + 75);
    curveVertex(width/2 + 35, height/2 + 75);
    curveVertex(width/2 + 35, height/2 + 150);
    curveVertex(width/2 + 85, height/2 + 175);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    endShape();

    beginShape();
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + 210, height/2 + 200);
    curveVertex(width/2 + 225, height/2 + 250);
    curveVertex(width/2 + 230, height/2 + 350);     
    curveVertex(width/2 + 230, height/2 + 350); 
    endShape();   

    //hair
    fill(50, 240);
    arc(width/2+90, height/2-140, 150, 200, radians(250), radians(70), OPEN);
    arc(width/2-20, height/2-95, 300, 310, radians(150), radians(300), OPEN);
    noStroke();
    triangle(300, 88, 140, 249, 318, 135);
    quad(318, 134, 350, 203, 268, 217, 266, 167);
    quad(212, 201, 207, 236, 270, 210, 266, 167);

    //bangs
    stroke(50, 230);
    beginShape();
    curveVertex(width/2-130, height/2-50);
    curveVertex(width/2-130, height/2-50);
    curveVertex(width/2-100, height/2-50);
    curveVertex(width/2-65, height/2-70);
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-120);
    endShape();

    beginShape();
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-100);
    curveVertex(width/2-40, height/2-75);
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-60, height/2-55);
    endShape();

    beginShape();
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-30, height/2-60);
    curveVertex(width/2-10, height/2-80);
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-130);
    endShape();

    beginShape(); 
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-100);
    curveVertex(width/2-10, height/2-60);
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2-25, height/2-45);
    endShape();

    beginShape();
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2+10, height/2-70);
    curveVertex(width/2+25, height/2-100);
    curveVertex(width/2+30, height/2-130);
    curveVertex(width/2+30, height/2-130);
    endShape();

    arc(width/2+125, height/2-120, 200, 150, radians(90), radians(170));

    // tank top
    noFill();
    line(width/2-150, height/2+180, width/2-150, height/2+350);
    line(width/2+150, height/2+180, width/2+150, height/2+350);
    arc(width/2, height/2+180, 200, 180, radians(0), radians(180));

    // collarbones
    strokeWeight(2);
    bezier(width/2-20, height/2+220, width/2-70, height/2+190, width/2-70, height/2+200, width/2-85, height/2+200);
    bezier(width/2+20, height/2+220, width/2+70, height/2+190, width/2+70, height/2+200, width/2+85, height/2+200);

    // nose
    line(width/2-1, height/2-1, width/2+1, height/2+1);

    //this section is to control eye-type from the first quadrant
    if (counterEye == 1) {
        fill(50, 230);
        circle(width/2 - 65, height/2 - 50, 35);
        circle(width/2 + 65, height/2 - 50, 35);

        strokeWeight(8);
        noFill();
        arc(width/2 - 65, height/2 - 15, 175, 105, radians(240), radians(300));
        arc(width/2 + 65, height/2 - 15, 175, 105, radians(240), radians(300));

    } if (counterEye == 2) {
        strokeWeight(4);
        fill(50, 230);
        circle(width/2 - 65, height/2 - 50, 35);
        circle(width/2 + 65, height/2 - 50, 35);

        fill(253, 253, 150, 200);
        curvyStar(165, 258, 10);
        curvyStar(295, 258, 10);

        noFill();
        strokeWeight(4);
        stroke(50, 230);
        bezier(width/2-100, height/2-55, width/2-90, height/2-70, width/2-65, height/2-85, width/2-50, height/2-70); 
        bezier(width/2+100, height/2-55, width/2+90, height/2-70, width/2+65, height/2-85, width/2+50, height/2-70);
   
    } if (counterEye == 3) {
        strokeWeight(4);
        noFill();
        bezier(width/2-100, height/2-63, width/2-90, height/2-65, width/2-65, height/2-65, width/2-45, height/2-65);
        arc(width/2 - 70, height/2 - 55, 50, 30, radians(10), radians(120));
        bezier(width/2+100, height/2-63, width/2+90, height/2-65, width/2+65, height/2-65, width/2+45, height/2-65);
        arc(width/2 + 70, height/2 - 55, 50, 30, radians(60), radians(170));

        arc(width/2 - 65, height/2 - 53, 30, 25, radians(120), radians(240));
        arc(width/2 - 60, height/2 - 55, 20, 20, radians(300), radians(60));
        arc(width/2 + 65, height/2 - 53, 30, 25, radians(240), radians(120));
        arc(width/2 + 60, height/2 - 55, 20, 20, radians(100), radians(220));

        strokeWeight(3);
        arc(width/2 - 65, height/2 - 50, 100, 50, radians(240), radians(300));
        arc(width/2 + 65, height/2 - 50, 100, 50, radians(240), radians(300));

        line(width/2 - 45, height/2 - 40, width/2 - 55, height/2 - 35);
        line(width/2 - 60, height/2 - 20, width/2 - 45, height/2 - 35);
        line(width/2 + 45, height/2 - 40, width/2 + 55, height/2 - 35);
        line(width/2 + 60, height/2 - 20, width/2 + 45, height/2 - 35);
    }

// this section is to control eyebrow type from quadrant 2
        noFill();
        strokeWeight(2);

        if (counterBrow == 1) {
            strokeWeight(3);
            arc(width/2 - 65, height/2 - 75, 80, 30, radians(210), radians(330));
            arc(width/2 + 65, height/2 - 75, 80, 30, radians(210), radians(330));

        } if (counterBrow == 2) {
            bezier(width/2-95, height/2-80, width/2-80, height/2-80, width/2-50, height/2-80, width/2-20, height/2-95);
            bezier(width/2+95, height/2-80, width/2+80, height/2-80, width/2+50, height/2-80, width/2+20, height/2-95);

        } if (counterBrow == 3) {
            line(width/2-80, height/2-100, width/2-30, height/2-80);
            line(width/2+80, height/2-100, width/2+30, height/2-80);    
        }

// this section is to control mouth type from quadrant 3
    noFill();
    strokeWeight(3);

    if (counterMouth == 1) {
        strokeWeight(2);
        arc(width/2, height/2 + 40, 40, 20, radians(210), radians(330));
    } if (counterMouth == 2) {
        bezier(width/2 - 20, height/2 + 25, width/2, height/2 + 40, width/2, height/2 + 40, width/2 + 20, height/2 + 25);
    } if (counterMouth == 3) {
        noStroke();
        happyMouth(width/2, height/2 + 20, 80, 60, 100); 
    }

// this section is to control accessories from quadrant 4

    if (counterExtra == 1) {
        fill(50, 255);
        noStroke();

        beginShape(); 
        curveVertex(width/2 - radiusHead, height/2 - 100);
        curveVertex(width/2 - radiusHead, height/2 - 100);
        curveVertex(width/2 - 115, height/2 - 50);
        curveVertex(width/2 - 100, height/2 + 10);
        curveVertex(width/2, height/2 - 20);
        curveVertex(width/2 + 100, height/2 + 10);
        curveVertex(width/2 + 115, height/2 - 50);
        curveVertex(width/2 + radiusHead, height/2 - 100);    
        curveVertex(width/2 + radiusHead, height/2 - 100); 
        endShape(); 

    } if (counterExtra == 2) {
        strokeWeight(2);
        line(width/2 - 70, height/2 - 10, width/2 - 60, height/2 - 20); 
        line(width/2 - 90, height/2 - 12, width/2 - 85, height/2 - 20);
        line(width/2 - 50, height/2 - 12, width/2 - 40, height/2 - 20);
        line(width/2 + 70, height/2 - 10, width/2 + 80, height/2 - 20); 
        line(width/2 + 90, height/2 - 12, width/2 + 95, height/2 - 20);
        line(width/2 + 50, height/2 - 12, width/2 + 60, height/2 - 20);
    }

    if (counterExtra == 3) {
        fill(50, 230);
        strokeWeight(3);
        arc(width/2+15, height/2-250, 100, 100, radians(240), radians(30), CHORD);
    }

// this section is to make a randomized button for all features
    fill(176, 156, 217);
    noStroke();
    circle(50, 50, 75);
}

function mousePressed() {
    if (mouseX < width/2 & mouseY < height/2) {
        if (counterEye < 3) {
            counterEye += 1;
        } else {
            counterEye = 1;
        } 
    }  

    if (mouseX > width/2 & mouseY < width/2) {
        if (counterBrow < 3) {
            counterBrow += 1;
        } else {
            counterBrow = 1;
        }
    }

    if (mouseX > width/2 & mouseY > height/2) {
        if(counterMouth < 3) {
            counterMouth += 1;
        } else {
            counterMouth = 1;
        }
    }

    if (mouseX < width/2 & mouseY > height/2) {
        if(counterExtra < 3) {
            counterExtra += 1;
        } else {
            counterExtra = 1;
        }
    }

    if (25 < mouseX & mouseX < 125 && 25 < mouseY && mouseY < 125) {
        counterEye = round(random(1,3));
        print(counterEye);

        counterBrow = round(random(1,3));
        counterMouth = round(random(1,3));
        counterExtra = round(random(1,3));



    }
}

Blog 02

Roman Verostko, originally a traditional painter, moved to generative art using simple programming techniques and pen plotting tools. Since then, he has spent his artistic career expanding upon these tools which he deems “elementary,” and has built a vast portfolio of pieces with many differences in techniques that make them look visually different, but are all developed from the same principles. His work, Epigenesis: The Growth of Form, shows off, in a 40 foot long mural, the range in aesthetics his algorithmic process can create. From pen marks that create almost blurry-looking works to clear, contrasting, brushstrokes, the mural uses symmetry and subtle changes in color and orientation to create eleven panels of artworks. Though it is possible this work could be created by hand, Verostko’s passion lies in the mastery of one ultimately, simple, technique that can be expanded upon to create a body of work that shows off its range through changes in material, but not in process.

Epigenesis: The Growth of Form

LookingOutwards-02

Sifting through the reference projects on the assignment sheet, I was very intrigued by the work of Leander Herzog. The projects from Herzog that really stood out to me were Very Large Array and Gerhard. Although Herzog has programmed an algorithm for the pieces and has a vague idea of what the piece will look like, there is an infinite number of possibilities as to what can be produced because the user is the one generating the art. I really enjoyed how involved I felt contributing to the art work. Both pieces had a similar effect where the art work generated based on how you click on the screen; however, the addition of sound in Very Large Array was fascinating as the sounds looked like they were creating the art with me. From what I understand so far, I believe the program has to be using lots of randomization, but this randomization is constricted by a series of rules and code that Herzog has layed out.

https://leanderherzog.ch/

https://leanderherzog.ch/2022/gerhard/

https://leanderherzog.ch/2022/vla/