Author: keuchuka@andrew.cmu.edu

keuchuka – project – 07

project7

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-07

var nP = 100;

var colorR;
var colorG;
var colorB;

var add = 0;
var plus = 0
var value = 0;


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

}


function draw() {
	
	//random color values for background
	var rColor1 = random(150, 255)
	var rColor2= random(200, 255)

	// mapping colors to mouseX for the three blobs and blobs that radiate
   	var mC = map(mouseX, 0, 400, 0, 300)

   	var bOne = map(mC, 0, 400, 80, 90) 
	var bTwo = map(mC, 0, 400, 45, 48)
	var bThree = map(mC, 0, 400, 90, 100)

	var bBehind = map(mC, 0, 200, 0, 100)

	//setting background to random colors
    background(255, rColor1, rColor2, mouseX/50);
    
    // blobs that radiate
	Curve(bBehind, 0+value, 255, 0+value, 255, 10+add, 0, 0, 300, mouseY/130);
	Curve(bBehind, 255, 255,0+value, 255, 10+add, 0, 150, 0, mouseY/170);
	Curve(bBehind, 0+value, 255, 255, 255, 10+add, 0, 400, 250, mouseY/150);

	//blobs 
	Curve(bOne, 255-value, 255, 255-value, 255, 100-plus, 0, 0, 300, mouseY/140);
	Curve(bTwo, 255, 255, 255-value, 255, 100-plus, 0, 150, 0, mouseY/170);
	Curve(bThree, 255-value, 255, 255, 255, 100-plus, 0, 400, 250, mouseY/150);

	//if mouse is pressed, the whites and colors are flipped
	if (mouseIsPressed){
		plus = 70;
		value = 255
		add = 10

		} else {
		plus = 0 
		value = 0 
		add=0
	}


}


//function to build blob

function Curve(a, colorR, colorG, colorB, Scolor, trans, sW, mX, mY, ph) {

    var x;
    var y;
    
    // setting variables to change size, blob shape, and rotation
    var b = a / 2.0;
    var k = constrain(mouseX, 0, 400)
    var h = map(k, 0, width, 0, b-10);

    strokeWeight(sW);
    stroke(Scolor);

    //colors are parametric
    fill(colorR, colorG, colorB, trans);
    
    // blobs are variable in size, blob shape, rotation, and location
    beginShape();
    for (var i = 0; i < nP; i++) {
        var t = map(i, 0, nP, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(mX+ x,  mY+ y);
    }
    endShape();   
}

With this project, I wanted to create “blobs” that move in subtle ways. The example that looked like some bacteria inspired this sort of movement, therefore I decided to go with polar curve for my project. I realize that the few parameters I could work with were rotation, size, color, location, and the small changes of the shape. I have the mouse react to some of these parameters so they look like they are changing but in a very subtle, bacteria like way. These blobs also had potential coming together, so I had them change in size to look like they “radiate” color to mix and become a gradient. The last layer was to have the colors flip when the mouse is clicked, but otherwise it works the exact same way. The two states I captured were the colors, as I think this is the main change, most obvious change. But the change of the curve is what gives the sensibility to the whole project.

keuchuka looking outwards 07

This “Chromogram” made in 2007 by Fernanda Viégas and Martin Wattenberg investigates how participants in Wikipedia allocate their time. The visualization technique can display very long textual sequences through a color coding scheme. The first 3 letters of a string determine the color in the Chromogram. The fist letter determines the hue, the second the saturation, and the third the brightness. Numbers become shades of gray. This system seems arbitrary but reveals some subtle patterns in Wikipedia editing. Wikipedians tend to engage in systematic activities by preserving a sustained related sequence of edits. Some editors concentrate on particular topic areas – which reveals a relatively constant color throughout the Chromogram. In other cases, users have completing a task that spans a variety of Wikipedia articles, such as categorizing and alphabetizing. This shows up as various colors or rainbows on the Chromogram. Chromogram reveals an organized systematic activities that help us understand the self-allocation of effort in Wikipedia.

keuchuka project 6

project6

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Project-06

//defining arrays for X and Y of gold coins
var A = [196,210,227,141,156,168,183,245,260,204,190,177,222,239, 163, 150, 250, 199, 186, 213, 231, 172, 243, 159, 195, 209, 229, 182, 239, 168, 204, 220, 190, 176, 233, 205, 221, 191, 177, 235,195, 211, 181, 224,199, 213, 184, 226, 210, 198, 184, 202, 190, 217, 186, 199, 213, 191, 206, 200]

var B = [327,327,327,327,327,327,327,327,327,324,324,324,324,324,324,324,324, 319,319,319,319,319,319,319, 314, 314,314,314,314,314, 310,310,310,310,310, 305,305,305,305,305, 303,303,303,303, 298,298,298,298, 294,294,294, 290,290,290, 285,285,285, 280,280, 275];

function setup() {
	createCanvas(400, 400);
}

function draw() {

    background(255);
    
    //putting time functions in variables
    var S = second();
    var M = minute();
    var H = hour();

    //values to shake increase as seconds get higher as it nears one minute
    var mShake = map(S, 0, 60, 0, 1.5);
    var shake = random(-mShake, mShake)

    //map for cloak to expand according to minute value
    expandX = map(M, 0, 60, 0, 100 )
    expandY = map(M, 0, 60, 0, 30)

    //map for cloak to change brightness/darkness according to hour of the day
    if (H >= 0 & H <= 12){
    hourMap = map(H, 0, 12, 0, 255)
    }

    if (H >= 12 && H <= 24){
    hourMap = map(H, 12, 24, 255, 0)
    }

    //cloak
    beginShape();
    fill(hourMap);
    noStroke();
    curveVertex(91-expandX, 400);
    curveVertex(91-expandX, 400);
    curveVertex(111-expandX*0.8, 217);
    curveVertex(129-expandX*0.65, 96);
    curveVertex(178-expandX*0.4, 57-expandY);
    curveVertex(218+expandX*0.4, 59-expandY);
    curveVertex(270+expandX*0.65, 96);
    curveVertex(286+expandX*0.8, 217);
    curveVertex(309+expandX, 400);
    curveVertex(309+expandX, 400);
    endShape();

    //face
    push();
    beginShape();
    fill(221, 231, 229)
    noStroke();
    curveVertex(136, 112);
    curveVertex(136, 112);
    curveVertex(157, 83);
    curveVertex(190, 69);
    curveVertex(239, 85);
    curveVertex(259, 131);
    curveVertex(241, 254);
    curveVertex(182, 275);
    curveVertex(146, 237);
    curveVertex(131, 167);
    curveVertex(136, 112);
    curveVertex(136, 112);
    endShape();
    pop();

    //inner face
    beginShape();
    fill(255)
    noStroke();
    curveVertex(196, 80);
    curveVertex(196, 80);
    curveVertex(228, 92);
    curveVertex(249, 139);
    curveVertex(244, 203);
    curveVertex(235, 240);
    curveVertex(226, 256);
    curveVertex(202, 272);
    curveVertex(174, 270);
    curveVertex(150, 240);
    curveVertex(139, 205);
    curveVertex(135, 161);
    curveVertex(139, 120);
    curveVertex(161, 85);
    curveVertex(196, 80);
    curveVertex(196, 80);
    endShape();

    //right eyebrow
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(160, 105);
    curveVertex(160, 105);
    curveVertex(165, 105)
    curveVertex(168, 118);
    curveVertex(170, 129)
    curveVertex(168, 137);
    curveVertex(161, 140);
    curveVertex(153, 138);
    curveVertex(150, 133)
    curveVertex(151, 125);
    curveVertex(154, 117);
    curveVertex(160, 105);
    curveVertex(160, 105);
    endShape();


    //left eyebrow
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(230, 105);
    curveVertex(230, 105);
    curveVertex(237, 112)
    curveVertex(245, 131);
    curveVertex(242, 139)
    curveVertex(236, 141);
    curveVertex(230, 140);
    curveVertex(225, 136);
    curveVertex(225, 123)
    curveVertex(226, 113);
    curveVertex(230, 105);
    curveVertex(230, 105);
    endShape();

    //left eye
    fill(0);
    beginShape();
    push();
    noStroke();
    frameRate(1);
    curveVertex(146+shake, 152);
    curveVertex(146+shake, 152);
    curveVertex(152+shake, 149);
    curveVertex(163+shake, 147);
    curveVertex(172+shake, 151);
    curveVertex(175+shake, 157);
    curveVertex(170+shake, 162);
    curveVertex(159+shake, 164);
    curveVertex(145+shake, 159);
    curveVertex(146+shake, 152);
    curveVertex(146+shake, 152);
    pop();
    endShape();

    //right eye

    beginShape();
    fill(0);
    frameRate(1);
    noStroke();
    curveVertex(233+shake, 147);
    curveVertex(233, 147+shake);
    curveVertex(249+shake, 149);
    curveVertex(254, 159+shake);
    curveVertex(244+shake, 164);
    curveVertex(232, 164+shake);
    curveVertex(224+shake, 159);
    curveVertex(222, 154+shake);
    curveVertex(225+shake, 150);
    curveVertex(233, 147+shake);
    curveVertex(233+shake, 147);
    endShape();

    //left under eye
    beginShape();
    fill(131);
    noStroke();
    curveVertex(161, 170);
    curveVertex(161, 170);
    curveVertex(171, 168);
    curveVertex(172, 168);
    curveVertex(164, 175);
    curveVertex(149, 172);
    curveVertex(148, 170);
    curveVertex(161, 170);
    curveVertex(161, 170);
    endShape();

    //right under eye
    beginShape();
    fill(131);
    noStroke();
    curveVertex(235, 169);
    curveVertex(235, 169);
    curveVertex(246, 169);
    curveVertex(247, 171);
    curveVertex(235, 174);
    curveVertex(227, 173);
    curveVertex(223, 170);
    curveVertex(225, 168);
    curveVertex(235, 169);
    curveVertex(235, 169);
    endShape();

    //left cheek
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(151, 188);
    curveVertex(151, 188);
    curveVertex(153, 182)
    curveVertex(157, 180);
    curveVertex(169, 185)
    curveVertex(170, 210);
    curveVertex(170, 218);
    curveVertex(168, 226);
    curveVertex(165, 226);
    curveVertex(158, 214);
    curveVertex(151, 188);
    curveVertex(151, 188);

    endShape();

    //right cheek
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(242, 190);
    curveVertex(242, 190);
    curveVertex(239, 207)
    curveVertex(231, 226);
    curveVertex(226, 224)
    curveVertex(224, 190);
    curveVertex(230, 180);
    curveVertex(238, 181);
    curveVertex(242, 190);
    curveVertex(242, 190);
    endShape();

    //chin mark

    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(198, 256);
    curveVertex(198, 256);
    curveVertex(208, 255)
    curveVertex(210, 256);
    curveVertex(199, 263)
    curveVertex(189, 261);
    curveVertex(185, 257);
    curveVertex(186, 255);
    curveVertex(198, 256);
    curveVertex(198, 256);
    endShape();

    //heart comes up near end of minute
    if (S>57){
        push();
        heart(0,0);
        heart(77, 0);
        pop();
    }

    //mouth eating
    var mouthExpandx= 0;
    var mouthExpandy= 0;

    //mouth gets wider at end of minute
    if (55 < S & S < 60){
    mouthExpandx = map(S, 50, 57, 0, 10);
    mouthExpandy = map(S, 50, 57, 0, 50);
    }
    
    //mouth shuts at end of minute
    if (S > 59){
    mouthExpandx = map(S, 58, 60, 10, 0);
    mouthExpandy = map(S, 58, 60, 50, 0);
    }

    //mouth
    fill(0);
    beginShape();
    frameRate(10);
    noStroke();
    curveVertex(197+shake, 237+shake);
    curveVertex(197, 237+shake);
    curveVertex(211+shake, 236)
    curveVertex(218, 239+shake);
    curveVertex(220+shake, 244+shake)
    curveVertex(214+mouthExpandx, 249+shake+mouthExpandy);
    curveVertex(190+shake, 250+mouthExpandy);
    curveVertex(179+shake-mouthExpandx, 248+shake+mouthExpandy);
    curveVertex(175, 244+shake);
    curveVertex(177+shake, 239+shake);
    curveVertex(185, 236+shake);    
    curveVertex(197+shake, 237+shake);
    curveVertex(197, 237+shake);
    endShape();


    //bowl top
    fill(120, 18, 20)
    arc(198, 329, 186, 54, 0, PI)

    //bowl bottom
    fill(239, 59, 57)
    ellipse(198, 329, 184, 5)


    //calling array values for gold coins every second plus jitter
    for (var i = 0; i < S; i++){
        frameRate(20);
        var shakeX = A[i] + random(-0.5,0.5)
        var shakeY = B[i] + random(-0.5 ,0.5)
        coin(shakeX, shakeY);
    }

}

//gold coin
function coin(x, y) {
    push();
    translate(x, y);
    fill(226, 156, 37);
    ellipse(0, 0, 22, 8);
    fill(252, 207, 117);
    ellipse(0, 0, 19, 5);
    fill(255, 232, 192);
    ellipse(0, -1, 10, 2);
    pop();
}

 //heart
 function heart(x,y) {
    beginShape();
    noStroke();
    translate(x,y);
    fill(255, 0 ,0);
    curveVertex(160, 161)
    curveVertex(160, 161)
    curveVertex(157, 157)
    curveVertex(155, 152)
    curveVertex(158, 151)
    curveVertex(159, 154)
    curveVertex(160, 152)
    curveVertex(162, 150)
    curveVertex(165, 151)
    curveVertex(163, 157)
    curveVertex(160, 161)
    curveVertex(160, 161)
    endShape();
}

I wanted to create a clock based on a toy that is based on a character from a Ghibli movie. The seconds are the most apparent from the coins, the size of the cloak follows the minute, and the color of the cloak is based on the hour. I wasn’t too concerned with being able to tell time. Overall this was satisfying to make even though there are issues with the smoothness of animation.

keuchuka looking outwards 6

Tyler Hobbs is a generative artist from Austin, Texas. Tyler writes a custom computer program specially designed to create an abstract image for each work. His work focuses on the interplay of randomness and order, and draws inspiration from paint, vegetation, and naturally occurring patterns. For Continuity series begins by generating semi-random quadrilaterals. Intersections between quadrilaterals become negative space. The positive space builds up in iterative layers. Proximity to an attractor point controls the transparency, brightness, and sharpness of the positive space. The generative aspect (pseudo randomness) is interesting to see as Hobbs allows the shapes to become harmonious as they relate arbitrarily, yet in a fully controlled way. Because chance provides a good foundation to the structure of these works, they can generate an entire series of images. Each work could be completely different from previous instances, providing an element of freshness and surprise.

keuchuka proj 5

//Fon Euchukanonchai
//15-104 SECTION A
//keuchuka@andrew.cmu.edu

function setup() {
    createCanvas(480, 480);
    background(255);
    var angle1 = 0;
    var angle2 = 2;

// setting up for loops for x and y values
    for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 6; x++) {
        	// if the row is even then angle of arc, the circle poxition changes
       		if (x % 2 == 0){
    			angle1 = 3;
    			angle2 = 5;
    			pop=60
    			arcStroke=(50);
    			circleX = -30

    		// conditions if row is odd
   			} else {
    			angle1 = 0;
    			angle2 = 2;
    			arcStroke=(0);
    			circleX =0
    		}

    		// array of arcs
        	stroke(255, arcStroke, 255);
        	strokeWeight(5);
        	noFill();
        	arc(90+x*60, 50+ y*120, 80, 80, angle1, angle2);

        	// array of circles with gradient
        	var circstrokeMap = map(x, pop+90+x*105, width, 230, 255);
        	stroke(255, circstrokeMap, 0);
        	strokeWeight(4);
        	ellipse(x*90+190, y*120+circleX+30, 50, 50);

        	// array of rectangles with gradient
        	var rectstrokeMap = map(x, x*100+240, width, 220, 230);
        	strokeWeight(6);
        	stroke(0, rectstrokeMap, 255);
        	rect(x*100+240, y*94+80, 50, 30, 3);
        	}
        }
    noLoop();    
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

I wanted to experiment with how different arrays of shapes interacting with each other would look with different colors and gradients in a minimal setting.

keuchuka Looking Outwards 05

DIFFUSION from Kouhei Nakama on Vimeo.

Kouhei Nakama is a visual art director. He also works for a company that does work for big corporations. For this project, he uses a variety of generative and particle based animation to bring 3D figures to life in this motion graphics short piece titled diffusion. Nakama has a series of work blending the human form with the geometric nature of 3D graphics. He blends them seamlessly, and at times the body mutates into other forms because of this blending. In this particular piecce, the body is blended with different textures that range from organic to more alien and computer like. The human’s flesh and body is stretched and elongated to its maximum capacity. It changes colors and patterns while questions about evolution are revoked.

keuchuka-project4

project4

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Projedt-04


function setup () {
	createCanvas(400, 300);
	background(0);
}

function draw () {


	var w60 = width/60; //increment variable

	background(255);

	conMouseX = constrain(mouseX, 0, 310); //constrain mouse to desired point of stopping movement
	tlRatio = map(conMouseX, 0, width, 0, width/30); //remaps mouseX point for for loop


	for (var x = 0; x < 30; x ++){
		
		//pink lines

		stroke(255, 0 , 255);
		strokeWeight(1);
		//left half pink lines
		line(x*w60, height/2, width/2, x*tlRatio)
		//right half pink lines
		line(x*w60+width/2+5, height/2, width/2, x*tlRatio)
		

		//blue lines

		strokeWeight(1)
		stroke(0, 255, 255)

		//right half blue lines
		line((x*w60)+width/2, height/2, width/2, x*tlRatio)
		//left half blue lines
		line(x*w60, height/2, width/2, x*tlRatio+5)
		//most left blue lines
		line(x*width/60, 0, 0, height/2)

		//yellow lines
		stroke(255, 255, 0)

		//left half yellow lines
		line(x*w60+5, height/2, width/2, height-x*tlRatio)
		//most left yellow lines
		line(0, x*w60+height/2, width/2, height)
		
		//lighter pink lines
		stroke(255, 100, 255)

		//left half pink lines
		line(x*w60, height/2, width/2, height-x*tlRatio)
		
}


}

I wanted to experiment with how string art and particularly moving string art would affect color composition when they interact, as they come together and fall apart, mix and divide.

keuchuka-lookingoutwards-04

Nightingale and Canary from Andy Thomas on Vimeo.

Nightingale and Canary

Andy Thomas, an Australian artist, creates “audio life forms”. He creates 3D animations that respond to audio inputs. For this project, he used archival bird recordings in order to visualize digital sound sculptures that animate in reaction the songs of each bird. I found crossing the boundary between constructing visual thoughts and sound thoughts interesting and attractive in his work. There is a sensible and lifelike touch in translating bird sounds into bird like forms. Thomas is interested in literally casting technology’s impact on nature into a visualized form, and has recently been diving into audio software. Through this new path of artistic investigation Thomas once again finds a way to create works in which nature and technology combine.

project3-keuchuka

project 3

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Project-03

//variables for face
var eyeX = 314;
var righteyeY = 132;
var lefteyeY = 305;
var eyeWidth = 100;

var smileAngle1 = -50;
var smileAngle2 = smileAngle1 - 260;

//variables for bankground
var leftrectX = 128;
var rightrectX = 384;
var rectY = 0;
var rectWidth = 148;
var rectHeight = 480;



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

// constraining eye width, right eye and left eye Y and X axis positions, 

	var eyeWidth = constrain(mouseX/100, 20, 150);
	var conrighteyeY = constrain(righteyeY, 190, 220);
	var conlefteyeY = constrain(lefteyeY, 280, 300);
	var coneyeX = constrain(eyeX, 40, 600);
	var conmouseX = constrain(mouseX, 40, 450);

// base yellow background

	background(255, 233, 141);


// when mouse moves past first recteangle to the right, the eyes increase in size and the
// distance between them increases, but is constrained to not fall of the canvas

 	if (mouseX>256) {
 		eyeWidth = eyeWidth + mouseX/10;
 		righteyeY = conrighteyeY - mouseX/300;
 		lefteyeY = conlefteyeY + mouseX/300;
 		lefteyeY = conlefteyeY - mouseX/200;
 	}
 		
 // configures the smile arc angle runs freely wehn mouse is moving in between the two ends
 	if (256<mouseX<600) {
 		smileAngle1 = mouseX;

 	}

// fixes larger smile arc angle when mouse is on the right

 	if (mouseX>600) {
 		smileAngle1 = -50;
 	}
 	
 // fixes smaller smile arc angle when mouse is on the left

 	if (mouseX<130) {
 		smileAngle1 = 165;
 		smileAngle2 = 195;
 	}

 // when mouse moves past the rectangle to the left

 	if (mouseX<256) {
 		eyeWidth = eyeWidth - mouseX/100;
  		righteyeY = conrighteyeY + mouseX/200;
 		lefteyeY = conlefteyeY - mouseX/200;

 	}


// variables to change colors on face and rectangle
	
 	R=(480-mouseX)/3;
	G=(mouseY)/3;
	B=mouseY*(100,255);


//eye graphic configurations
	strokeWeight(10);
	stroke(R, G, B, 150);
	fill(R, G, B, 150); 

//left eye
 	ellipse(eyeX, lefteyeY, eyeWidth/2, eyeWidth/2);

//right eye
 	ellipse(eyeX, righteyeY, eyeWidth/2, eyeWidth/2);

//mouth graphic configurations
	angleMode(DEGREES)
	noFill();
	strokeWeight(25);

//mouth
	stroke(R, G, B, 150);
	arc(330, 240, 480, 480, smileAngle1, smileAngle2);

//rectangle graphic configurations
	strokeWeight(25);
	stroke(R, B, G, 100);
	fill(B, R, G, 150);

//rectangles
	rect(leftrectX, rectY, rectWidth, rectHeight);
	rect(rightrectX, rectY, rectWidth, rectHeight);

//eyes move 
 	eyeX = conmouseX;
 	smileAngle2 = smileAngle1 - 260;


}

I wanted to create an understandable narrative using primitive shapes, which led to me to using the arc command. With the set idea of turning a frown upside down, I then proceeded to vary different variables within the face itself as well as the background.

keuchuka-lookingoutwards-03


Underwood Pavilion / Muncie, Indiana / 2014

Construction Sequence

Pavilion and Human Scale

Underwood Pavilion

This project, created in 2014, located in Muncie, Indiana, is by professors Gernot Riether and Andrew Wit, working in a digital design build studio in Ball State State University in Indiana. The structure is composed of fifty-six three-strut tensegrity modules. By parametrically adjusting their dimensions, the designers were able to control both the curvature of the pavilion and the size and shape of several openings that frame views of the site. The structure is made of fifty-six three-strut tensegrity modules. The designers were able to control both the curvature of the pavilion and the size and shape of openings that frame views of the site by parametrically adjusting their dimensions (i think this is done through a 3d modelling program like Rhino and a parametric controller like Grasshopper). The tensile material wrapped over the rigid parametric structure, which makes it look more delicate and balanced as a space that considers the climate and users. It’s interesting to see how flexible this structure is, as it is made of modules, therefore it is easy to transport and change according to different sites or purposes; it is also capable of being moved and set up in other sites quickly, therefore creating destinations promptly.