soyunk – project- 03 – Dynamic Drawing

sketch

var midWidth = 320;
var midHeight = 240;
var diam = 40;
var midWidthR = 480;
var midWidthL = 160;
var midHeightT = 120;
var midHeightB = 360;


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

function draw() {


    var ColorR = map(mouseY,0,midHeight,173,74);
    var ColorG = map(mouseY,0,midHeight,216,0);
    var ColorB = map(mouseY,0,midHeight,230,128);

    background(ColorR,ColorG,ColorB); //background changing color when mouse moves up and down

    
    var moonR = map(mouseY,0,midHeight,255,255); //colors for the center circle
    var moonG = map(mouseY,0,midHeight,102,255);
    var moonB = map(mouseY,0,midHeight,0,179);

    fill(moonR,moonG,moonB); // center circle
    noStroke();
    ellipse(midWidth,midHeight,diam*2,diam*2);
    

    if (mouseY >= midHeight) { //center circle increases size depending on mouseY
    	diam += (diam + 5) <= 120;
    } else {
    	diam -= (diam - 5) >= 20;
    }



    fill(255); //text 
    textSize(30);
    textFont("Britanic Bold");


    if (mouseY <= midHeight) { //text indicates changing time depending on mouseY
    	text("7:00 a.m.",midWidthR,midHeightT);
    } else {
    	text("11:59 p.m.",midWidthR,midHeightT);
    }

        //stars 
        //stars move in and out depending on mouseY by using variable diam.
    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthL,midHeightT-(diam/3),8,8);
    }
    
    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	}else {
    		stroke(0);
    	}
    	ellipse((midWidthL/2)-(diam/4),midHeightT/2,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthR,midHeightB+(diam/2),8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthR+(diam/2),midHeightT/2,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthL-(diam/2),midHeightB,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthL-diam,midHeight,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthR+diam,midHeight,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidth,midHeightT-(diam/2),8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidth,midHeightB+(diam/2),8,8);
    }

}


Creating each stars was a task but finding out that using my diam variable on the stars will move it inward and outward due to the previous code was an accident which helped me learned more.

Soyunk – Looking Outwards -03

ZArchitects challenged the idea of traditional masonry by combining digital fabrication and automated construction system, creating Smart Masonry. Traditionally, large heavy weighted stones are used for masonry with lack of natural light entering through the structure. But ZArchitects decided to use geometric mesh patterns to replace walls and columns which opened up a lot of space and save more money for the building. Using the mesh pattern I think was a great idea here because not only did it replace the  main parts of the building and created a cohesive environment, it also naturally created a portal for natural light to enter through the space and with the geometric and precise patterns due to robotic construction techniques, they were able to achieve a unique aesthetic. Another element which surprised me was that 3D printing was used to build this architecture by using prefabricated materials. Starting off with 3D printing, robotic art construction station was able to replicate and create a precise sized materials which reduced the cost of labor by fractions and the time it would’ve took by using only 3D printing method or by using human labor. This Smart Masonry technique, state off in Berlin, can be a start of a new way of building living and public space. Reduced price for labor and lighter material which contrast the traditional heavy weighted materials will decrease the price of buildings and houses if practiced further. 

http://www.archdaily.com/609108/digitized-bricks-zaarchitects-develop-smart-masonry

http://www.zaarchitects.com/en/public/125-smart-masonry.html

screen-shot-2016-09-15-at-5-28-32-pmscreen-shot-2016-09-15-at-5-28-52-pmscreen-shot-2016-09-15-at-5-29-07-pmscreen-shot-2016-09-15-at-5-29-14-pm

Soyun Kim – Looking Outwards – 02

I was intrigued by the Aaron Koblin and Janet Echelman’s collaboration, “Unnumbered Sparks”. Janet Echelman created a large soft sculpture made out of fiber and Koblin and his team created a system where people can “draw” and “paint” on Echelman’s sculpture. Using python, WebGL, Chrome and more, they were able to let people connect to their specific wifi near the sculpture and interactively create a digital mark and generate sounds by using their phone. Both artists believed that it was the public who created and finished the art work, not them and was aiming for an essentially a large scale collaboration with people. They broke people from their usual routine with their phone and invited them to participate in their art work.

From this project, I was able to physically see the creative side of coding. The process of creating the fiber sculpture was obviously a creative act but considering such curved and unique sculpture as an aerial canvas and creating a moment where people can interact with each other was something I  have never heard or seen before. Another thing which I have never heard of before is called WebGL. After a brief research, I learned that WebGL is a ‘web technology that bring hardware 3D graphics to the browser without installing additional software’ and ability for ultra fast graphic processing.

After seeing what they have done, collaboration between technology and art seems almost vital in our time and limitless.

https://www.youtube.com/watch?v=6JGzPLZrVFU

screen-shot-2016-09-09-at-6-07-55-pmscreen-shot-2016-09-09-at-6-08-29-pm

Soyun Kim – Project 02 – variable faces

newproject2

var faceWidth = 50; //w,h variables for face 
var faceHeight = 100;
var faceR = 172; //face color values
var faceG = 134;
var faceB = 94;

var eyes = 30; //variables for eyes
var eyesR = 102;
var eyesG = 178;
var eyesB = 102;

var earsWidth = 20; //variables for ears
var earsHeight = 40;
var earsR = 172;
var earsG = 134;
var earsB = 94;

var noseWidth = 15; //variables for nose
var noseHeight = 30;
var noseR = 188;
var noseG = 127;
var noseB = 126;

var pupil = 8; //variables for pupils
var pupilR = 66;
var pupilG = 16;
var pupilB = 16;

var mouthW = 60; //variables for mouth
var mouthH = 40;
var mouthR = 255;
var mouthG = 90;
var mouthB = 90;

var leftBrowX1 = 265; //variables for left eyebrow
var leftBrowY1 = 176;
var leftBrowX2 = 293;
var leftBrowY2 = 169;

var rightBrowX1 = 343; //variables for right eyebrow
var rightBrowY1 = 169;
var rightBrowX2 = 373;
var rightBrowY2 = 176;


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

}

function draw() {
    
	if (mouseX < width * 0.33) {      //background change colors depending on the mouse position
		background(129, 129, 255);
	} 
	else if (mouseX > width * 0.66) {
		background(206, 206, 102);
	} else {
		background(193, 132, 193);
	}



	var earA = width / 2.35 - faceWidth * 1.3;//left ear
	var earB = width / 1.75 + faceWidth * 1.3;//right ear
	noStroke();
	fill(earsR,earsG,earsB);
	ellipse(earA, height / 2.1, earsWidth*2, earsHeight*2);
	ellipse(earB, height / 2.1, earsWidth*2, earsHeight*2);


    noStroke();
	fill(faceR,faceG,faceB); //face
	ellipse(width/2, height/2, faceWidth*4, faceHeight*3);

	noStroke();
	fill(noseR,noseG,noseB);//nose
	ellipse(width/2, height/2.1, noseWidth, noseHeight*1.5);
	
	noStroke();
	var eyeA = width / 2 - faceWidth * 0.8;//left eye
	var eyeB = width / 2 + faceWidth * 0.8;//right eye
	fill(eyesR,eyesG,eyesB);
	ellipse(eyeA, height / 2.3, eyes, eyes);
	ellipse(eyeB, height / 2.3, eyes, eyes);
    
    var pupilA = width / 2 - faceWidth * 0.8;//left pupil
    var pupilB = width / 2 + faceWidth * 0.8;//right pupil
    fill(pupilR,pupilG,pupilB);
    ellipse(pupilA, height / 2.3, pupil, pupil);
    ellipse(pupilB, height / 2.3, pupil, pupil);

	fill(mouthR,mouthG,mouthB); //mouth
	arc(width/2, height/1.7, mouthW, mouthH, 0, PI); 

	strokeWeight(8);
	stroke(255,69,0);
	line(leftBrowX1,leftBrowY1,leftBrowX2,leftBrowY2);//left eyebrow
	line(rightBrowX1,rightBrowY1,rightBrowX2,rightBrowY2);//right eyebrow

}



function mousePressed() {
	
	faceWidth = random(40,95);
	faceHeight = random(50,150);
	faceR = random(190,165);
	faceG = random(150,127);
	faceB = random(110,87);

	eyes = random(15,48);
	eyesR = random(120,90);
    eyesG = random(198,158);
    eyesB = random(100,80);

	noseWidth = random(10,25);
	noseHeight = random(20,45);
	noseR = random(250,178);
    noseG = random(160,117);
    noseB = random(140,116);

    earsWidth = random(18,35);
    earsHeight = random(35,60);
    earsR = random(180,165);
    earsG = random(140,87);
    earsB = random(100,87);

    pupil = random(7,20);
    pupilR = random(170,80);
    pupilG = random(8,70);
    pupilB = random(7,100);

    mouthW = random(40,110);
    mouthH = random(25,83);
    mouthR = random(350,230);
    mouthG = random(50,130);
    mouthB = random(75,115);

    	
   
}

During this project, I realized the importance of organizing and commenting on my codes so it will not only be easier on others to see but for myself as well. Also, although it took awhile, I got familiar with the use of variables and random functions.

Soyunk – project 01 – face

sketch

//Soyun Kim
//Section D
//soyunk@andrew.cmu.edu
//Assignment-01

function setup() { 
   createCanvas(600,600);
   background(52,32,12);
}

function draw() {
    fill(206,178,92);
    strokeWeight(5);
    stroke(206,178,92);
    rect(190,500,220,100);
   
    fill(229,198,103);
    strokeWeight(5);
    stroke(229,198,103);
    ellipse(300,300,370,500);
    
    ellipse(110,315,55,105); //ear
    ellipse(488,315,55,105);
    fill(206,178,92);
    ellipse(110,308,30,50);
    ellipse(488,308,30,50);
   
    fill(52,32,12);
    quad(130,250,160,230,240,230,260,250);
    quad(335,250,355,230,440,230,465,250);
   
    fill('white');
    ellipse(195,285,90,42);
    ellipse(400,285,90,42);
   
    fill('black');
    ellipse(195,285,20,20);
    ellipse(400,285,20,20);

    fill(206,178,92);
    noStroke();
    triangle(276,363,302,258,329,363);
    ellipse(285,364,34,34);
    ellipse(318,364,34,34);

    fill(237,21,86);
    noStroke();
    triangle(230,430,287,412,311,430);
    triangle(295,430,319,412,376,430);
    quad(270,470,230,430,303,445,303,470);  
    quad(303,470,303,445,376,430,340,470);   

    fill(52,32,12);
    arc(43,47,596,370,0,HALF_PI); 
    arc(490,53,320,366,HALF_PI,PI);  

    


}

I wanted my background to be my hair and give a contrast to my round face and depict the lips and eyebrows pretty similar to my own. The main thing I struggled with the most was the process of creating the arcs to make my hair line.

I’m Google (Looking Outwards Week 1)

Dina Kelberman’s ‘I’m google’ is an example of computational and a collective art work.
She gathers various photos that anyone can find from google images and creates a train of connectivity between all the different images. This project is an ongoing project which Kelberman has been working on for about 5 years. Her project utilizes the limitless amount of data that is accessible to anyone and makes the viewers realize the overwhelmingly abundant amount of photos on internet. By using a public source to create a personal train of connectivity, she encourages the viewers to scroll through her seemingly endless tumblr page, which seems to resemble our situation after hours of internet browsing, wondering how we even got there.

http://dinakelberman.tumblr.com/Screen Shot 2016-09-01 at 9.31.53 PM