Author: yinhuid@andrew.cmu.edu

Cathy Dong – Looking Outwards – 02

This ongoing project is called “Quantum Fluctuations: Experiments in Flux,” and created by Markos Kay. Markos Kay is a visual artist, creative director, illustrator, and lecturer in London. The artwork is made by enlarging and observing the quantum world. Kay “measures the spoils of a proton collision and compares the findings with data collected from supercomputer simulations.” Quantum simulations become the paint brush which helps visualize the proton collision, a process that cannot be seen with bare eyes. The art pieces are chaotic, ambiguous, and exciting.

With visual particle simulations, Kay records and documents the beauty by selecting moments with his own instinct. In this case, it is hard to say who is the real artist, Kay or the quantum.

source: http://www.mrkism.com/quantum.html

Cathy Dong – Project 2 – Variable Face


sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 2-Variable Face
*/

//Basics
var bodyG = 219;
var bodyB = 96;
var headW = 178;
var headH = 79;
var eyeW = 120;
var eyeH = 100;
var eyeR = 30;
var mX = 320;
var mY = 350;
var mW = 30;
var mH = 20;
var speedX = 1;
var startX = 0;
var speedY = 1;
var startY = 0;
var bananaX = 0;
var bananaY = 51;


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

function draw() {
	background(233, 229, 228);

	//hair variables
	hairLx = width / 2 - headW / 2;
	hairRx = width / 2 + headW / 2;
	hairY = headH + 20;

	//eye variables
	ballLx = 315 - eyeW / 2;
	ballRx = 325 + eyeW / 2;
	ballY = 213;

	//body shape
	stroke(0);
	strokeWeight(.5);
	fill(251, bodyG, bodyB);
	beginShape();
	curveVertex(146, 480);
	curveVertex(171, 349);
	curveVertex(174, 200);
	curveVertex(hairLx, hairY);
	curveVertex(width / 2, headH);
	curveVertex(hairRx, hairY);
	curveVertex(466, 200);
	curveVertex(469, 349);
	curveVertex(494, 480);
	curveVertex(494, 480);
	endShape(CLOSE);

	//cloth
	stroke(8, 30, 56);
	strokeWeight(1);
	fill(94, 126, 163);
	beginShape();
	curveVertex(211, 480);
	curveVertex(212, 448);
	curveVertex(186, 423);
	curveVertex(160, 385);
	curveVertex(167, 358);
	curveVertex(188, 394);
	curveVertex(221, 418);
	curveVertex(320, 429); //cloth mid point
	curveVertex(419, 418);
	curveVertex(452, 394);
	curveVertex(473, 358);
	curveVertex(480, 383);
	curveVertex(454, 423);
	curveVertex(441, 448);
	curveVertex(443, 480);
	curveVertex(443, 480);
	endShape(CLOSE);

	//pocket
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	beginShape();
	curveVertex(277, 480);
	curveVertex(276, 460);
	curveVertex(320, 468);
	curveVertex(364, 460);
	curveVertex(363, 480);
	curveVertex(363, 480);
	endShape(CLOSE);

	//button
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	circle(219, 435, 20);
	circle(219, 435, 10);
	circle(430, 435, 20);
	circle(430, 435, 10);

	//Left hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairLx, hairY);
	line(width / 2, headH, hairLx - 30, hairY + 20);
	line(width / 2, headH, hairLx + 50, hairY - 20);

	//Right Hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairRx, hairY);
	line(width / 2, headH, hairRx + 30, hairY + 20);
	line(width / 2, headH, hairRx - 50, hairY - 20);

	//Eye
	stroke(0);
	strokeWeight(.5);
	fill(225);
	ellipse(315 - eyeW / 2, 233, eyeW, eyeH);
	ellipse(325 + eyeW / 2, 233, eyeW, eyeH);

	//Eyeball
	ballLx = mouseX;
	ballLx = constrain(ballLx, 315 - eyeW + eyeR, 315 - eyeR);
	ballRx = mouseX;
	ballRx = constrain(ballRx, 325 + eyeR, 325 + eyeW - eyeR);
	ballY = mouseY;
	ballY = constrain(ballY, 233 - eyeH / 2 + eyeR, 233 + eyeH / 2 - eyeR);
	//dark
	noStroke();
	fill(80, 67, 60);
	circle(ballLx, ballY, eyeR);
	circle(ballRx, ballY, eyeR);
	//light
	noStroke();
	fill(53, 40, 33);
	circle(ballLx, ballY, eyeR / 2);
	circle(ballRx, ballY, eyeR / 2);

	//glass
	stroke(148, 148, 148);
	strokeWeight(20);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass shadow
	stroke(175, 174, 175);
	strokeWeight(10);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass belt
	stroke(96, 75, 58);
	strokeWeight(2);
	fill(62, 58, 54);
	rect(165, 230, 23, 27);
	rect(456, 230, 20, 27);

	//Mouse
	stroke(0);
	strokeWeight(.5);
	fill(225);
	triangle(mX, mY, mX - mW / 2, mY - mH, mX + mW / 2, mY - mH);

	//BANANA TEXT
	stroke(198, 143, 79);
	strokeWeight(3);
	fill(225, 181, 143);
	if (keyIsPressed) {
		if ((key == 'a') || (key == 'A')) {
			speedX = -1;
		}
		if ((key == 's') || (key == 'S')) {
			speedX = 1;
		}
		if ((key == 'w') || (key == 'W')) {
			speedY = -1;
		}
		if ((key == 'z') || (key == 'Z')) {
			speedY = 1;
		}
	} 

	textSize(100);
	text('BANANA', startX, startY);
	startX += speedX;
	startY += speedY;
	startX = constrain(startX, 0, width - 450);
	startY = constrain(startY, 80, height - 10);


	//Banana fruit
	bananaX = mouseX;
	bananaX = constrain(bananaX, 0, width - 107);
	bananaY = mouseY;
	bananaY = constrain(bananaY, 52, height - 27);
	stroke(206,154,8);
	strokeWeight(1);
	fill(255, 226, 0);
	beginShape();
	curveVertex(bananaX, bananaY);
	curveVertex(bananaX + 54, bananaY - 3);
	curveVertex(bananaX + 78, bananaY - 16);
	curveVertex(bananaX + 90, bananaY - 31);
	curveVertex(bananaX + 90, bananaY - 48);
	curveVertex(bananaX + 98, bananaY - 50);
	curveVertex(bananaX + 97, bananaY - 33);
	curveVertex(bananaX + 103, bananaY - 31);
	curveVertex(bananaX + 107, bananaY - 22);
	curveVertex(bananaX + 90, bananaY + 11);
	curveVertex(bananaX + 62, bananaY + 24);
	curveVertex(bananaX + 47, bananaY + 27);
	curveVertex(bananaX + 25, bananaY + 23);
	curveVertex(bananaX + 13, bananaY + 20);
	curveVertex(bananaX + 3, bananaY + 8);
	endShape(CLOSE);

}

function mousePressed(){
	bodyG = random(220, 95);
	bodyB = random(95, 220);
	headW = random(150, 200);
	headH = random(75, 100);
	eyeW = random(100, 130);
	eyeH = random(100, 110);
	eyeR = random(20, 40);
	mX = random(315, 325);
	mY = random(340, 380);
	mW = random(25, 50);
	mH = random(15, 45);
}

I had fun making minions. I sketched out the basic shapes based on a picture. The idea is to let his eye balls follow the banana, and make his face features and body color change with mouse click. The text “BANANA” move when pressing “w,” “a,” “z,” and “s,” capitalized or not.

Cathy Dong – Looking Outwards 01

This project is named “Breath of Light,” designed by Preciosa Group. The particular piece was displayed in Milan Design Week.

This project is named “Breath of Light,” designed by Czech lighting specialist, Preciosa Group. The particular piece was displayed in Milan Design Week 2018.

“Breath of Light” injects life into the traditional concept of a chandelier. The visitors interact with the art piece and become part of the display. Simply sharing a breath, they create a lighting and music effect. Therefore, it becomes something more than just a beautiful lighting device, but a social tool. When interacting with the design piece, they also work together to explore the different lighting possibilities.

Technically, the design has over 1000 individual opal crystal bubbles. Special sensors are installed in different corners of the project. The idea is developed based on the company’s generations of designers’ creativity since 1548. The number of designers and workers behind this art piece is unknown, but we know that the creative director is Michael Vasku. They are inspired by historical chandeliers and contemporary pendants. I am inspired to create more interactive lighting devices, furniture, and building parts in the future.

source:

https://www.preciosalighting.com/news-detail/discover-the-breath-of-light

Cathy Dong-Project-01-Face

sketch

function setup() {
    createCanvas(600,600);
    background(255,217,239);
}

function draw() {
    //background extra
    noStroke();
    fill("white");
    triangle(0,600,300,0,600,600);


    //neck
    noStroke();
    fill(249,215,196);
    rect(257,528,86,72);


    //neck outline
    stroke(130,65,57);
    strokeWeight(3);
    line(257,528,257,600);
    line(343,528,343,600);


    //Shirt
    noStroke();
    fill(176,209,255);
    rect(130,557,335,43,100,100,0,0);
    noStroke();
    fill(249,215,196);
    triangle(257, 557, 300, 600, 343, 557);



    //Face Basics
    noStroke();
    fill(249,215,196);
    beginShape();
    //Face
    curveVertex(385,145);
    curveVertex(430,190);
    curveVertex(450,288);
    curveVertex(450,400);
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    endShape(CLOSE);
    //face outline
    stroke(130,65,57);
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    endShape();


    // Right hair basics
    noStroke();
    fill(52,35,25);
    beginShape();
    //Left hair
    curveVertex(373,68);
    curveVertex(354,57);
    curveVertex(336,48);
    curveVertex(300,43);
    curveVertex(212,64);
    curveVertex(135,133);
    curveVertex(84,230);
    curveVertex(64,302);
    curveVertex(51,402);
    curveVertex(48,510);
    curveVertex(74,574);
    curveVertex(193,600);
    curveVertex(217,579);
    curveVertex(231,506);
    //left hair shaping face
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    //left hair
    curveVertex(388,120);
    curveVertex(385,100);
    curveVertex(373,67);
    endShape(CLOSE);


    // Right hair basics
    noStroke();
    fill(63,47,37);
    beginShape();
    //Right Hair
    curveVertex(388,120);
    curveVertex(385,110);
    curveVertex(373,67);
    curveVertex(408,76);
    curveVertex(453,106);
    curveVertex(500,182);
    curveVertex(530,300);
    curveVertex(538,430);
    curveVertex(515,543);
    curveVertex(404,590);
    //Right Hair shaping face
    curveVertex(370,514);
    curveVertex(435,440);
    curveVertex(450,400);
    curveVertex(450,288);
    curveVertex(420,190);
    curveVertex(385,145);
    endShape(CLOSE);

   
    //Eye
    fill("white");
    stroke("black");
    strokeWeight(1);
    beginShape();
    //Left
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);//turning point
    curveVertex(263,325);
    curveVertex(245,335);
    curveVertex(224,337);
    curveVertex(202,331);
    curveVertex(183,318);
    endShape(CLOSE); 
    //Right
    beginShape();
    curveVertex(413,318);
    curveVertex(413,318);
    curveVertex(394,331);
    curveVertex(372,337);
    curveVertex(353,335);
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    endShape(CLOSE);

    //Eye Line
    noFill();
    stroke("black");
    strokeWeight(3);
    //Left
    beginShape();
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);
    curveVertex(263,325);
    endShape();
    //Right
    beginShape();
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    curveVertex(413,318);
    endShape();


    //Eyeball
    //Left
    fill(82,63,51);
    strokeWeight(1);
    ellipse(227,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(227,318,20);
    fill("white");
    noStroke();
    ellipse(235,312,8);
    //Right
    fill(82,63,51);
    strokeWeight(1);
    ellipse(370,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(370,318,20);
    fill("white");
    noStroke();
    ellipse(378,312,8);


    //nose 1
    stroke(130,65,57);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(272,384);
    curveVertex(271,384);
    curveVertex(266,395);
    curveVertex(274,401);
    curveVertex(280,397);
    curveVertex(290,405);
    curveVertex(300,412);
    curveVertex(310,405);
    curveVertex(320,397);
    curveVertex(326,401);
    curveVertex(334,395);
    curveVertex(329,384);
    curveVertex(328,384);
    endShape();
    //nose 2
    stroke(130,65,57);
    strokeWeight(1);
    noFill();
    line(315,310,318,370);


    //lip
    //color
    fill(217,92,48);
    noStroke();
    beginShape();
    curveVertex(300,440);
    curveVertex(288,435);
    curveVertex(262,440);
    curveVertex(239,446);
    curveVertex(262,465);
    curveVertex(300,477); //midpoint
    curveVertex(338,465);
    curveVertex(361,446);
    curveVertex(338,440);
    curveVertex(312,435);
    curveVertex(300,440);
    endShape(CLOSE);
    //line
    noFill();
    stroke(130,65,57);
    strokeWeight(2);
    curve(232,380,232,445,368,445,368,380);
    //point
    fill(130,65,57);
    noStroke();
    ellipse(232,445,5);
    ellipse(368,445,5);


    //glass
    noFill();
    stroke("black");
    strokeWeight(3);
    ellipse(227,325,120,110);
    ellipse(370,325,120,110);
    stroke("black");
    strokeWeight(5);
    line(286,312,310,312);
    stroke(255,204,29);
    strokeWeight(3);
    line(286,310,310,310);

}

The very first thing is to draw a rough sketch of myself. I snap pixels with the “guide line” tool in Photoshop. The process is entertaining, even though it was a bit struggle to find the exact point that creates a smooth shape.