Category: SectionC

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

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

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/

Project 02

Left Side = :|, Right Side = :), Middle = : , Click the Shirt to Change Colors/Scale, Click and Hold on Face = ???

sketch
//Brody Ploeger
//Section C


var faceWidth = 175;
var faceHeight = 200;
var backcolor1 = 2;
var backcolor2 = 10;
var backcolor3 = 20;
var backrectcolor1 = 215;
var backrectcolor2 = 210;
var backrectcolor3 = 240;
var backrectcolor2 = 200
var circlecolor1 = 110;
var circlecolor2 = 150;
var circlecolor3 = 190;
var shirtcolor1 = 250;
var shirtcolor2 = 200;
var shirtcolor3 = 215;



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

function draw() {
    background(backcolor1, backcolor2, backcolor3)

    strokeWeight()

    //background rect
    fill(backrectcolor1, backrectcolor2, backrectcolor3, 75)
    rect(640/2,0,640/2,480)

    
    //shirt
    fill(shirtcolor1,shirtcolor2,shirtcolor3);
    circle(640/2, 480/2+faceHeight, faceHeight*1.5)
   

    //right side of face
    fill(circlecolor1, circlecolor2, circlecolor3)
    ellipse(640/2, 480/2, faceWidth, faceHeight)
    
    //left side of face
    fill(200, 75)
    beginShape();
    vertex(640/2-faceWidth/2, 480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/10);
    vertex(640/2-faceWidth/10,480/2+faceHeight/6);
    vertex(640/2,480/2+faceHeight/2);
    vertex(640/2-faceWidth/2,480/2+faceHeight/2);
    endShape();

    //right eye
    fill(backcolor1, backcolor2, backcolor3);
    rect(640/2+faceWidth/8,480/2-faceHeight/10, faceWidth/5, faceHeight/5);

    //right pupil
    fill(backrectcolor1, backrectcolor2, backrectcolor3)
    ellipse(640/2+faceWidth/4.5,480/2, faceWidth/10, faceHeight/10)

    //left eye
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    ellipse(640/2-faceWidth/4,480/2, faceWidth/4, faceHeight/4);

    //left pupil
    stroke(backcolor1, backcolor2, backcolor3) ;  
    strokeWeight(faceWidth/40+faceHeight/40);
    line(640/2-faceWidth/3.25, 480/2, 640/2-faceWidth/5, 480/2);

if (mouseX<640/4){

    //straight mouth
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/5, 480/2+faceHeight/3.5, 640/2+faceWidth/5, 480/2+faceHeight/3.5);  

    //left straight eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //right straight eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/5);
} else if(mouseX>640*3/4){
    
    //mouth smile
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    strokeWeight(faceWidth/50+faceHeight/50);
    arc(640/2, 480/2+faceHeight/4, faceWidth/2, faceHeight/4,0,PI,PIE);
    
 // left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/4);

    //right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/4);
}

    if(mouseIsPressed){
    if (dist(mouseX, mouseY, 640/2,480/2)<faceHeight/3+faceWidth/5){
   
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);
    


    strokeWeight(faceWidth/50+faceHeight/50)
    noFill();
    beginShape();
    vertex(640/2-faceWidth/5, 480/2+faceHeight/4);
    vertex(640/2-faceWidth/5.5, 480/2+faceHeight/3.5)
    vertex(640/2-faceWidth/10, 480/2+faceHeight/4)
    vertex(640/2-faceWidth/15, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/15, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/10, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/5.5, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/5, 480/2+faceHeight/3.5);
    endShape();

    // other left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/4, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //other right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/4, 640/2+faceWidth/7, 480/2-faceHeight/5);

    faceWidth += 10;
    faceHeight += 10;

}
}

print(faceHeight)


}


function mousePressed() {

//if circle clicked, shape of head changes
if (dist(mouseX, mouseY, 640/2, 480/2+faceHeight)<faceHeight/2+faceWidth/2){
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);

 
}
 
}

Project-02: Variable Faces

I enjoyed figuring out different relationships between each variable and being able to write them as expressions to create drawings. In creating two figures on one canvas, I realized the importance of organizing my code and adding necessary comments for particular lines to remind myself about key information.

sketch
// Angela Yang 
// Section C - Project 02

// Variables are set for each facial element. 
var eyeSizeW = 100;
var eyeSizeH = 100;
var eyeSizeW2 = 70;
var eyeSizeH2 = 70;
var pupilSizeW = 50;
var pupilSizeH = 50;
var pupilSizeW2 = 30;
var pupilSizeH2 = 30;
var faceWidth = 200;
var faceHeight = 200;
var faceWidthB = 350;
var faceHeightB = 250;  
var mouthType = 2;
var noseType = 1;
var r = 200; 
var g = 100;
var b = 150;
var on = false; 


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

function draw() {
  if(on) {
    background(243, 200, 174);
  } else {
    //background changes from yellowish-green to a pink tone with 30% transparency. 
    background(219, 226, 175, 30);
  }
  

   
//LEFT FIGURE
    //Body
    fill(r, g, b);
    stroke("white");
    ellipse(width/4, height/2 + 200, width/1.5, height/1.5);
  
    // Face base
    noStroke();
    fill(r, g, b);
    ellipse(width / 4, height / 2, faceWidth,  faceHeight);
  
    // Eyes
    stroke(r, g, 50);
    strokeWeight(1);
    fill(255);
    var eyeLX = width / 4 - faceWidth * 0.25;
    var eyeRX = width / 4 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH);
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH);
    fill(r-100, g+50, b+50);
    var pupilLX = width / 4 - faceWidth * 0.25;
    var pupilRX = width / 4 + faceWidth * 0.25;
    ellipse(pupilLX, height/2, pupilSizeW, pupilSizeH);
    ellipse(pupilRX, height/2, pupilSizeW, pupilSizeH);

  
    //Nose Variations
    fill("white");
  
    if (noseType >= 0 & noseType <= 1.5){
       noStroke();
       rect(width/4 - faceWidth*0.03, height/2 + faceHeight*0.1, 10, 20);
       //When the value of nose type is >= to 0 and <= 1.5, a rectangular nose is drawn. 
      
    } else if(noseType > 1.5 & noseType <= 3){
        noStroke();
        ellipse(width/4, height/2 + faceHeight*0.1, faceWidth/5, faceHeight/10);
        //When the value of nose type is greater than 1.5 and smaller+equal to 3, 
        //a circular nose is drawn. 
      
    } else if(noseType > 3 & noseType <= 4.5){
        stroke("white");
        strokeWeight(4);
        line(width/4, height/2, width/4+15, height-230);
        //When the value of nose type is greater then 3 and smaller+equal to 4.5, 
        //a linear nose is drawn. 
      
    } else{
        noStroke();
        triangle(width/4, height/2, width/4+15, height-230, width/4-15, height-230);      
      //When the value of nose type is equal to all other numbers in the range of 0~6, 
      //a triangular nose is drawn. 
    }

  
   // Mouth Variations   
    if (mouthType >= 0 & noseType <= 1.5){
       stroke("white");
       fill(r-60, g, b);
       rect(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, 20, 5);
       // A confusing mouth is drawn. 
      
    } else if(mouthType > 1.5 & mouthType <= 3){
        stroke("white");
        strokeWeight(1);
        fill(r, g, b+80);
        ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/6, faceHeight/10);
        //A shocking mouth is drawn. 
      
    } else if(mouthType > 3 & mouthType <= 4.5){
        noStroke();
        triangle(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, width/4+15, height-190, width/4-15, height-190); 
        //A happy mouth is drawn. 
      
    } else{
        stroke("white");
        strokeWeight(1);
        fill(r, g+60, b);
        ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/2, faceHeight/8);
        //A shocking mouth is drawn. 

    }
  
  
  
// RIGHT FIGURE 
    //Body
    fill(0, g, b+50);
    stroke("white");
    ellipse(width/1.4, height/2 + 200, width/1.5, height/1.5);
  
    // Face base
    noStroke();
    fill(0, g, b+50);
    ellipse(width/1.4, height/2, faceWidthB, faceHeightB);
  
    // Eyes
    stroke(r, g, 100);
    strokeWeight(1);
    fill(255);
    var eyeLX2 = width / 1.4 - faceWidthB * 0.25;
    var eyeRX2 = width / 1.4 + faceWidthB * 0.25;
    ellipse(eyeLX2, height / 2, eyeSizeW2, eyeSizeH2);
    ellipse(eyeRX2, height / 2, eyeSizeW2, eyeSizeH2);
    fill(r-100, g+50, b+50);
  
    var pupilLX2 = width / 1.4 - faceWidthB * 0.25;
    var pupilRX2 = width / 1.4 + faceWidthB * 0.25;
    ellipse(pupilLX2, height/2, pupilSizeW2, pupilSizeH2);
    ellipse(pupilRX2, height/2, pupilSizeW2, pupilSizeH2);

  
    //Nose Variations
    fill("white");
  
    if (noseType >= 0 & noseType <= 1){
       noStroke();
       ellipse(width/1.4, height/2 + faceHeightB*0.1, faceWidthB/5, faceHeightB/10);
      
    } else if(noseType > 2 & noseType <= 4){
       noStroke();
       fill("white");
       rect(width/1.4 - faceWidthB*0.03, height/2 + faceHeightB*0.1, 30, 10);
      
    } else if(noseType > 4 & noseType <= 5.5){
        stroke("white");
        strokeWeight(5);
        line(width/1.4, height/2, width/1.4+15, height-230);
      
    } else{
        noStroke();
        triangle(width/1.4, height/2, width/1.4+50, height-220, width/1.4+50, height-220);      
    }
  
  
     // Mouth Variations   
    if (mouthType >= 0 & noseType <= 1.5){
       stroke("white");
       fill(r-60, g, b);
       rect(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, 20, 5);
      
    } else if(mouthType > 1.5 & mouthType <= 3){
        stroke("white");
        strokeWeight(1);
        fill("black");
        ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/6, faceHeightB/10);
      
    } else if(mouthType > 3 & mouthType <= 4.5){
        noStroke();
        triangle(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, width/1.4+15, height-190, width/1.4-15, height-190); 
      
    } else{
        stroke("white");
        strokeWeight(1);
        fill(r, g+60, b);
        ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/10, faceHeightB/8);
}
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 100 and 300.
    faceWidth = random(100, 300);
    faceHeight = random(100, 400);
    faceWidthB = random (100, 300);
    faceHeightB = random (200, 450);
    noseType = random(0, 6);
    mouthType = random(0, 8);
    eyeSizeW = random(10, 80);
    eyeSizeH = random(10, 80);
    eyeSizeW2 = random(30, 70);
    eyeSizeH2 = random(30, 70);
    pupilSizeW = random(5,30);
    pupilSizeH = random(5,20);
    pupilSizeW2 = random(10, 30);
    pupilSizeH2 = random (5, 30);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    if(mouseX > 250 & mouseX < 350 && mouseX);
    on = !on;

}

LO2: Generative Art

Work Title: Quantum Fluctuations

Artist: Markos R. Kay

https://www.mrkism.com/

This work is made from multi-layered virtual experiments that demonstrate the fundamental and transient nature of the quantum world that we all live in. What fascinates me the most is the work’s visual impact. Although the quantum world is a difficult object to measure, this drawing allows me to see things that are not visible to the naked eye, which also resonates with the value of art: allows one to visualize imaginative ideas. In this art piece, parallel to those experiments conducted in the laboratory, the particles are simulated as brush strokes in order to paint the image of a proton collision. The algorithms behind this artwork consist of rigorous data collection of the proton beams, particle analysis, time, etc. According to the artist’s website, the visualizations of these processes are created with “input from scientists working on Large Hadron Collider at the CERN, Geneva. Beyond algorithms, the artist uses color combinations to create depth that draws our attention to its innermost point. The colors are stacked together with different alpha values to create blurriness and reflections. The realistic effects of the shapes and their splashing particles bring the artwork to life as if it was a standing painting.

Project-02

I started off using the baseline template for a generative face that was given. I then used multiple if else statements to randomize the use of the nose, round mouth, curved mouth, curved eyes, square eyes, and colors of the inner and outer shapes.

sketch

// Sowang Kundeling Section C Project 02

var r = 141;
var g = 35;
var b = 173;
var r2 = 210;
var g2 = 250;
var b2 = 233;
var eyeColor = 0
var faceWidth = 250;
var faceHeight = 300;
var eyeSize = 25;
var mouthWidth = 15;
var mouthPosition = 240;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(166, 215, 227);
    noStroke();

    fill(r, g, b);
    ellipse(width/2, height/2, faceWidth+130, faceWidth+130); // hair

    if(faceHeight <= 125) {
        fill(r2, g2, b2);
        ellipse(width / 2, height / 2, faceWidth*.5, faceHeight*1.5); // cross ellipses
        ellipse(width / 2, height / 2, faceWidth*1.5, faceHeight*.5);
    }   

    fill(r2, g2, b2);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); // face shape
    var eyeLX = width / 2 - faceWidth / 4; // eye variables
    var eyeRX = width / 2 + faceWidth / 4;

    
    if(r <= 100) {
        fill(eyeColor);
        ellipse(eyeLX, (height / 2) - 5, eyeSize, eyeSize); // eye
        ellipse(eyeRX, (height / 2) - 5, eyeSize, eyeSize);
        fill(r2, g2, b2);
        ellipse(eyeLX, height / 2, eyeSize, (eyeSize / 2) + 9); // under eye shape to make arc
        ellipse(eyeRX, height / 2, eyeSize, (eyeSize / 2) + 9);
    } else {
        fill(eyeColor);
        rect(eyeLX -8, (height / 2) - 13, eyeSize/2, eyeSize/2); // square eye
        rect(eyeRX -8, (height / 2) - 13, eyeSize/2, eyeSize/2);
    }

    if(eyeColor <= 50) {
        fill(eyeColor);
        ellipse(width / 2, mouthPosition + 30, mouthWidth, mouthWidth); // round mouth
    } else {
        fill(eyeColor)
        ellipse(width / 2, mouthPosition + 30, mouthWidth + 5, mouthWidth); // arc mouth
        fill(r2, g2, b2);
        ellipse(width / 2, mouthPosition + 25, mouthWidth + 8 , mouthWidth +3); // shape to make arc
    }

    if(mouthPosition >= 240) { // nose
        fill(eyeColor);
        triangle(width/2, height/2, width/2 + 8, height/2 + 18, width/2 - 8, height/2 + 18);
    }
}
 
function mousePressed() {
    r = random(0, 199);
    g = random(0, 199);
    b = random(0, 199);
    r2 = random(200, 255);
    g2 = random(200, 255);
    b2 = random(200, 255);
    eyeColor = random(0, 100);
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(20, 35);
    mouthWidth = random(10, 25);
    mouthPosition = random(220, 250);
}