Author: ijhong@andrew.cmu.edu

Isabella Hong – Project 07

ijhong-07

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-07 

//taken from example code 
var nPoints = 100; 


function setup() {  
	createCanvas(600, 600);
	noStroke(); 
	frameRate(15); 
}

function draw() {
	background(0, 0, 77); 	
	//draw evolutes in multiple spots on canvas 
	push(); 
	translate(width / 8, height / 2); 
	drawEllipseEvolute(); 
	pop();  
	push(); 
	translate(width / 3.25, height / 2); 
	drawEllipseEvolute(); 
	pop();
	push(); 
	translate(width / 2, height / 2); 
	drawEllipseEvolute(); 
	pop();
	push(); 
	translate(width / 1.45, height / 2); 
	drawEllipseEvolute(); 
	pop();
	push(); 
	translate(width / 1.15, height / 2); 
	drawEllipseEvolute(); 
	pop();
	
}

function drawEllipseEvolute() {
//http://mathworld.wolfram.com/EllipseEvolute.html
	//will be used for evolute drawing equations 
	var x; 
	var y; 
	//keep within canvas 
	var a = constrain((mouseX / width), 0.5, 1); 
	var b = constrain((mouseY / height), 0.5, 1);  
	//taken from example code  
	beginShape(); 
	for (var i = 0; i < nPoints; i++) {
		var t = map(i, 0, nPoints, 0, TWO_PI); 
		//fill evolute
		var colorR = map(mouseY, 0, height, 255, 192);
		var colorG = map(mouseY, 0, height, 215, 192);
		var colorB = map(mouseY, 0, height, 0, 192);
		fill(colorR, colorG, colorB); 
		//equation to draw evolute  
		x = ((Math.pow(a + (mouseX / 100), 2) - Math.pow(b, 2)) / a * (Math.pow(cos(t), 3))); 
		y = ((Math.pow(b + (mouseY / 100), 2) - Math.pow(a, 2)) / b * (Math.pow(sin(t), 3)));
		vertex(x, y); 
	}
	endShape(CLOSE); 
}

For this project, the most difficult thing was getting the curve to draw properly and figuring out how to code the curve properly. The ellipse evolute curve was the only one that I could get to work and appear in the correct manner.

My inspiration for this project were stars and the night sky. As the mouse is moved, the “stars” enlarge or shrink and change from a gold to silver color. When the mouse is moved all the way to the far left, the stars almost “disappear”, representing an ultra dark night sky.

Isabella Hong – Looking Outwards – 07

In April of 2016, Stamen, a design company based in San Francisco, collaborated with the Dalai Lama to create the “Atlas of Emotions“. The project visually represents the emotions enjoyment, disgust, anger, fear and sadness as continents and was created in an attempt to guide the emotionally distressed to a state of calm.

Preliminary sketches of emotional exploration.
Preliminary sketches of emotional exploration.

The five emotions were translated into visual continents via extensive sketching and brainstorming. The analogy of continents works such that each emotion also has a set of states which in turn can lead to triggers, actions and then moods. Here is an example of what everything looks like in combination.

"This is an example of a mood, a longer-lasting cousin of the emotion that causes the related emotion to be felt more frequently and intensely. It is not always apparent what triggers a mood."
“This is an example of a mood, a longer-lasting cousin of the emotion that causes the related emotion to be felt more frequently and intensely. It is not always apparent what triggers a mood.”

This project integrates the one common link of the human race – emotions. Emotions and their timing are what make us human. The “Atlas of Emotions” stresses the universality of feelings and represents them in an accessible manner. This task is extremely difficult and I admire the fact that Stamen was able to create a tangible representation of a vague concept.

Isabella Hong – Project – 06

For my abstract clock, I chose to visually declare the current hour, minute and second using different fruits. The large oranges signify the current hour based on a 12 hour rotation and the little apples and blueberries represent the minutes and seconds respectively.

ijhong-06

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-06

function setup() { 
	createCanvas(700, 500);
}

function draw() {
	//current hour, minute, and second of the day 
	var h = hour()%12; 
	var m = minute(); 
	var s = second(); 
	//light orange background 
	background(255, 250, 195);
	//loop orange function (hour) 
	var x = 32; 
	for (var i = 0; i < h; i++) {
		orange(x, 90); 
		x += 58;  
	}
	//loop apple function (min)
	var a = 0;
	for (var y = 175; y <= 275; y += 50) {
		for (var x = 17; x < width; x += 35) {
			if (a < m) {
				apple(x, y); 
			}
			else {
				break;
			}
			a += 1; 		
		}
		if (a == m) {
			break; 
		} 
	}
	//loop blueberries function (sec)
	var b = 0; 
	for (var y = 340; y <= 440; y += 50) {
		for (var x = 17; x < width; x += 35) {
			if (b < s) {
				blueberries(x, y);
			}
			else {
				break;
			}
			b += 1; 
		}
		if (b == s) {
			break;
		}
	}

}

//oranges represent the number of hours 
function orange(x, y) {
	//orange base 
	noStroke(); 
	fill(255, 165, 0); 
	ellipse(x, y, 50, 50);
	//orange leaf 
	noStroke(); 
	fill(0, 100, 0); 
	arc(x, y - 25, 50, 5, 270, 45, OPEN);
	//orange stem 
	stroke(101, 67, 33); 
	strokeWeight(5); 
	line(x, y - 25, x - 5, y - 35); 
}

//apples represent the number of minutes 
function apple(x, y) {
	//apple base 
	noStroke(); 
	fill(200, 0, 0);
	ellipse(x, y, 20, 20); 
	//apple leaf 
	noStroke(); 
	fill(0, 100, 0);
	arc(x, y - 13, 25, 3, 270, 45, OPEN); 
	//apple stem 
	stroke(101, 67, 33); 
	strokeWeight(2); 
	line(x, y - 10, x - 5, y - 15); 
}

//blueberries represent the number of seconds 
function blueberries(x, y) {
	//blueberry base 
	noStroke();  
	fill(0, 0, 103);	
	ellipse(x, y, 20, 20); 
	//highlight
	fill(255); 
	ellipse(x + 3, y - 3, 5, 5); 
	//leaves 
	noStroke(); 
	fill(0, 100, 0); 
	ellipse(x + 5, y - 10, 10, 5); 
	ellipse(x - 5, y - 10, 10, 5); 
}

My process work - I shuffled through a variety of objects that could potentially be used.
My process work – I shuffled through a variety of objects that could potentially be used.

Isabella Hong – Looking Outwards – 06

One of the many digital designs printed by Vassallo, Thorp and Watz in their collection “Random Number Multiples” (2011)

The series “Random Number Multiples” by artist Christina Vassallo done in collaboration with Jer Thorp and Marius Watz uses custom coded software and traditional methods of silkscreen printing to produce digital abstract pieces on paper.

Christina Vassallo completed both her undergraduate and masters degrees at New York University, gaining extensive knowledge in art, history, literature and visual arts administration during her time as a student. Particularly knowledgeable in print based artwork, Vassallo worked with coding artists Thorp and Watz to curate a collection focused on demonstrating the possibilities of digitizing traditional art using code and analog printing methods

The custom software created by Thorp and Watz generates random lines, curves, and shapes to create intricate geometric prints. Some of the pieces also include text on the outer portions, the placement of the text being randomized as well. All together, Vassallo, Thorp and Watz showed their audience that technology does not nullify the value of traditional art, but rather enhances it. As a student pursuing graphic design, I greatly appreciate any work that brings attention to this point.

Sources:

Computational Art, From Screen to Paper: Prints by Jer Thorp, Marius Watz

https://www.linkedin.com/in/christina-vassallo-4158993

 

Isabella Hong – Looking Outwards – 05

Andy Lomas is an artist and mathematician well versed in the art of computer graphics. His graphic projects are based on the bridge between the general characteristics of biological principles and nature. Lomas uses basic mathematical rules to render his images of cells and their various stages of mutation. The cells are not drawn based on biology but on Lomas’ vision and what he sees as fitting, letting his creative influence come through in a concept heavily rooted in biology.

What I find fascinating about Lomas’ work is the intricacy and detail of his renderings. “Hybrid Forms – Cell Differentiation” consists of 100,000,000 cells, a number so large that Lomas commented he had to select a few 1,000,000 cell seedlings to grow to full maturation to save his computer. Lomas also adds an abstract aspect to the seemingly concrete purpose of science, a twist that I haven’t seen before.

The following video is one of Lomas’ most recent projects. Illustrated is the competitive nature of cell growth based on form.

Sources:

http://www.andylomas.com/

https://vimeo.com/andylomas

Isabella Hong – Project 05 – Wallpaper

For this project, I imagined that I was creating a design that would be printed on canvas bags and pouches. The design is clean, simple, and whimsical. I could also see the design being used for stationary paper or stickers as well.

ijhong-05

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-05

function setup() { 
	createCanvas(600, 780);
	//save computation 
	noLoop(); 
}

function draw() {
	//tan 
	background(221, 198, 168); 
	//loop cawfee function 
	for (var x = -150; x < width + 200; x += 100) {
		for (var y = 0; y < height; y += 100) {
			cawfee(x, y);
		}
	}	
	//loop bean function 
	for (var x = -5; x < width; x += 97) {
		for (var y = 20; y < height + 100; y += 100) {
			bean(x, y); 
		}
	}
	}	

//coffee cup 
function cawfee(x, y) {
	noStroke();
	angleMode(DEGREES); 
	fill(54, 40, 21);
	ellipse(x + 50, y + 20, 60, 8);  
	fill(255); 
	arc(x + 50, y + 20, 60, 60, 0, 180, OPEN); 
	noFill();
	stroke(255);
	strokeWeight(2); 
	arc(x + 60, y + 30, 60, 15, 315, 100, OPEN); 	
}

//coffee bean 
function bean(x, y) {
	push();
	noStroke();
	angleMode(DEGREES); 
	fill(54, 40, 21); 
	arc(x + 20, y + 60, 15, 30, 250, 120, CHORD); 
	arc(x + 15, y + 60, 30, 30, 110, 250, CHORD); 
	pop(); 
}

I didn’t have much process work to show, just a page of initial doodles that I drew while brainstorming potential design ideas.

Doodles upon doodles (ijhong)
Doodles upon doodles (ijhong)

Isabella Hong – Looking Outwards – 04

For my Looking Outwards post this week, I decided to learn more about the album “Spicule” by Yaxu. Here’s the link to the article I read:

‘Spicule’ by Yaxu – Album as a live coding device on Pi Zero

Spicule is an album by Yaxu, also known as Alex McLean, that can be constantly edited using Pi Zero and the TideCycles live coding environment. This is not his first time working with sound and code – he has performed at festivals throughout Europe with artists Slub and Canute and has also helped pioneer the movement of live coding.

Yaxu’s music in terms of sound is all electronic, a very popular genre of music amongst today’s youth. His musical sound and method of creation align with each other and the audience that he is targeting at music festivals, another cultural craze amongst today’s youth.

I highly admire Yaxu for using code to produce his sound. It seems that these days anyone can create electronic music, presenting the idea that maybe it lacks a certain depth, meaning and intention. However, by manually controlling every aspect of the final sound, Yaxu demonstrates the amount of work that can go into producing this very popular sound.

Isabella Hong – Project 04 – String Art

It’s been hot for too long so I’m craving the sight of snow falling outside my window. Hence, my creation.

I coded this “blizzard” by creating my own “snow” function and using “for” loops in order to create the curves on the upper right and lower left corner that serve as my window frame. I think a difficult aspect of this project was getting the curves to look how I wanted and getting them to overlap in the corners. I’m quite pleased with the end result.

ijhong-04

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-01

//string star point size
var c = 10; 

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

function draw(){
	//midnight sky 
	background(0, 0, 52);
	//blizzard 
	for (var x = -75; x < width; x += 75){
		snow(x, 75);
		snow(x, 150); 
		snow(x, 225); 
		snow(x, 300); 
		snow(x, 375); 
	}
	//curve #1
	for (var a = 0; a < width; a += 5) {
		stroke(255);
		strokeWeight(1);
		line(a, 0, width, a); 
	}
	//curve #2
	for (var b = 0; b < height; b += 5) {
		stroke(150); 
		strokeWeight(1);
		line(b, 0, height - 100, b); 
	}
	//curve #3
	for (var c = 0; c < width; c += 5) {
		stroke(255);
		strokeWeight(2);
		line(c, 640, width - 640, c);
	}
	//curve #4
	for (var d = 0; d < height; d += 5) {
		stroke(150);
		strokeWeight(1); 
		line(d, 640, height - 640, d); 
	}

}

//draws all the elements that are being animated 
function snow(x, y) {
	push(); 
	translate(x, y);
	rotate(millis()/20); 
	push(); 
	angleMode(DEGREES); 
	stroke(150); 
	rotate(30); 
	line(100, 100, 25, 100);
	rotate(30); 
	line(100, 100, 175, 100);
	rotate(30); 
	line(100, 100, 100, 25);
	rotate(30);  
	line(100, 100, 100, 175);
	rotate(30);  
	line(100, 100, 75, 75);
	rotate(30);  
	line(100, 100, 125, 125);
	rotate(30);  
	line(100, 100, 125, 75);
	rotate(30);  
	line(100, 100, 75, 125); 
	stroke(255);
	strokeWeight(2); 
	fill(255); 
	rotate(20);
	ellipse(100, 100, 2 * c, 2 * c); 
	rotate(20); 
	ellipse(25, 100, c, c); 
	rotate(20); 
	ellipse(175, 100, c, c);
	rotate(20); 
	ellipse(100, 175, c, c);
	rotate(20); 
	ellipse(100, 25, c, c);
	rotate(20); 
	ellipse(75, 75, c / 2, c / 2); 
	rotate(20); 
	ellipse(125, 75, c / 2, c / 2); 
	rotate(20); 
	ellipse(125, 125, c / 2, c / 2);
	rotate(20);  	
	ellipse(75, 125, c / 2, c / 2); 
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	pop();
	pop(); 
}

Isabella Hong-Looking Outwards-03

Dot San is a design, model, and manufacturing company that works out of Edinburgh, Scotland. The product design company renders 3D models using software such as Rhino 3D and Maxwell Render to create photorealistic works to be used for marketing, 3D printing and manufacturing purposes. The company works with clientele all over the world and also has their own Etsy shop.

I scoped out Dot San’s merchandise on their Etsy page and was thoroughly intrigued by the types of work that they produce. I was particularly interested in the 3D keychains of astrological signs and chemical molecules that they sell. The keychains are all 3D printed out of nylon and steel metals, each one being unique due to the lack of mass manufacturing.

The whole initiative is called the “Wired Project” and is centered around the effort to experiment and push the limitations of 3D printing. Dot San creates personal and intricate merchandise that defies the traditionally negative perception of consumerism. I admire that their products are individualized, each one embodying it’s own little quirks, a result of the one time printing process. In addition, Dot San itself – the company and it’s mission is dedicated to testing the boundaries of technology that is currently available to us, something that is essential for advancement and progress.

My favorite piece they’ve produced is a standing mini sculpture of the famous Vitruvian Man. It’s an example of classic art done with a modern medium.

Dot San’s Etsy Store:

https://www.etsy.com/shop/DotSan/items

 

Isabella Hong- Project – 03 – Dynamic- Drawing

The most difficult aspect of this week’s project was making sure that all the elements I used were placed correctly. This would ensure that once the user starts moving the cursor, the elements would follow the path of the mouse properly.

ijhong-project-03

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-01

//cube dimensions 
var sx = 200;
var sy = 200;
var sz = 200;

//mini cube dimensions 
var mx = 50; 
var my = 50; 
var mz = 50; 

//direction of growth 
var dir = 1; 
var speed = 2; 

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

function draw() {
	//background color changing
	//range for background colors  
	var colorR = map(mouseY, 0, height, 250, 215);
	var colorG = map(mouseY, 0, height, 235, 230);
	var colorB = map(mouseY, 0, height, 215, 250);
	background(colorR, colorG, colorB);	

	//middle cube 
	rotateX(mouseX * 0.01); 
	rotateY(mouseY * 0.01); 
	ambientLight(0);
	ambientMaterial(50); 
	//grow 
	speed = mouseX / 10;
	box(sx + speed * dir, sy + speed * dir, sz + speed * dir);

	//small cube 1 
	translate(-width / 2, -height / 2); 
	push();
	rotateX(mouseX * 0.03); 
	rotateY(mouseY * 0.03); 
	ambientLight(250);
	ambientMaterial(255);
	box(sx / 2, sy / 2, sz / 2);
	pop();

	//small cube 2
	translate(620, 460);
	push();
	rotateX(mouseX * 0.04); 
	rotateY(mouseY * 0.04); 
	ambientLight(50);
	ambientMaterial(250); 
	box(sx / 2, sy / 2, sz / 2);
	pop();

	//mini cubes rotating 
	translate(300 , 460);
	push(); 
	rotateX(frameCount * 0.03); 
	rotateY(frameCount * 0.03); 
	ambientLight(50); 
	ambientMaterial(50);
	box(mx ,my, mz); 
	translate(width - 300, height -460);
	box(mx, my, mz); 
	pop();

}