Author: Hanna Jang

Project-07-Curves

sketch.js

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project-07

var numberPoints=200; 

function setup() {
	createCanvas(420, 420); 
	frameRate(15); 
}

function draw() {
	 
//map the color background changes using r, g, b  and mouse
	var r=map(mouseX, 0, width, 0, 255); 
	var g=map(mouseY, 0, height, 0, 90); 
	var b=map(mouseX, 0, width, 0, 250); 
	background(r, g, b, 30); 
	
	//stroke
	stroke(240, 174, 231); 
	strokeWeight(0.3); 
	
	translate(width/2, height/2); 
	drawEpitrochoid(); 
}

function drawEpitrochoid() {
	var x; 
	var y; 
	var h=100; 
	var theta; 
	
//variables to help modify change using mouse 
	var a=map(mouseX, 0, width, 0, 20); 
	var b=map(mouseY, 0, height, 0, 40); 
	
//draw outer epitrochoid 
	beginShape(); 
	for(var i=0; i<numberPoints; i++) {
		theta=map(i, 0, width/2, 0, 360); 
		x = (a + b) * cos(theta) - h * cos(((a + b)/b) * theta);
       y = (a + b) * sin(theta) - h * sin(((a + b)/b) * theta);
 
 vertex(x, y); 
	}
endShape(); 
}

I started this project by looking through the different mathematical curves on the Mathworld curves site. I stumbled upon a specific curve named Epitrochoid that I really liked. It reminded me of a shape of a flower, which is why my project is themed around pink, to give it a pink flower look.

I wanted the background to also change as according to the mouse movement, which is why I also made maps for the different R, G, B variables. It was a bit hard to understand how I wanted the mouse to interact with the different variables of the functions, but once I made maps to form relationships with the mouse and variables a and b, I was set.

(Shown above are examples of different Epitrochoid patterns and sizes according to the movement of mouse)

hannajan-lookingoutwards-07

(Above are pictures of the Vorograph of Cody Dunne, Michael Muller, Nicola Perra, Mauro Martino, 2015)

Since this week’s topic was on computational information visualization, I tried to find a project where a custom software was made to collect and/or visualize a dataset, while still being colorful and fun. I stumbled upon the Vorograph of Cody Dunne, Michael Muller, Nicola Perra, and Mauro Martino.

The Vorograph presents three visualizations from IBM research that was developed to facilitate the research of epidemiologists through a combination of representations in population, movement, and disease spread at a local scale while also matching with a zoomable global scale.  Although I don’t know the exact algorithms behind the artistic representation that is shown above, I do know that the data was put through a specific programming that rendered those images.

I admire the very intricate patterns and color detail that went into making those specific patterns. Each of the different circles have a simple yet unique pattern of its own. I admire this because the uniqueness shows the extra effort that was put into making all the different circles. The patterns also show the artists’ artistic sensibilities in how they chose to represent their different data, and the final presentation.

 

hannajan-LookingOutwards06

For this Looking Outward Post, I found an artist who made beautiful quilts based on randomness. Susan of SKquiltlabs made the particular quilt (pictured above named “Random Vector”) from a layout that is based on a random number generator for pattern orientation.

A lot is not said on the site I found Susan’s works, about the algorithms used for randomness. However, it does mention a random number generator is involved in some way.

The creator’s artistic sensibilities are manifest in the final form through the way the randomly generated pieces fall together so effortlessly. There are no signs of messiness or lack of care, although that sometimes may be assumed when “randomness” is involved. There is a natural pattern in her art through the randomness.

This reminds me that although future assignments in this class may require some level of randomness generating, the artist has a certain level of control over how the final art piece turns out. It is ultimately up to the artist in how much control they choose to exert.  

hannajan-Project06-Abstract Clock

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 6: Abstract Clocks 

var thehead=80; 
var offset=50; 
var offset2=30; 
var offset3=130; 


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

function draw() {
	background(197, 216, 184); 
	noStroke(); 
	
	//race paths 
	for (var j=1; j<4; j++) {
	fill(233, 176, 77); 
	rect(0, j*100, width, height/6); 
		}
	
	//race signs 
	fill(255); 
	rect(width/17, height/10, width/6, width/10); 
	rect(width*14/18, height/10, width/6, width/10); 
	
	//race sign letters
	strokeWeight(2); 
	fill(0); 
	text("START", width/11, height/6); 
	text("FINISH", width*9/11, height/6); 
	
	//character names 
	fill(0); 
	text("Second the Rabbit", width/4+8, offset3); 
	text("Minute Man", width/4+8, offset3*2-offset2); 
	text("Hour the Panda", width/4+8, offset3*3-offset); 
	
	//Fetch the current Time 
	var H=hour(); 
	var M=minute(); 
	var S=second(); 
	
	//track clock paths for racers 
	if (H<13) {
	var mappedH=map(H, 0, 11, 0, width-thehead/2); 
} else {
	var mappedH=map(H-12, 0, 11, 0, width-thehead/2);
}
	var mappedM=map(M, 0, 59, 0, width-thehead/2); 
	var mappedS=map(S, 0, 59, 0, width-thehead/2); 
	
	//Second the Rabbit 
	//head 
	fill(255); 
	ellipse(mappedS, width/3, thehead, thehead); 
	//ears 
	ellipse(mappedS-offset2, width/3-offset, thehead/4, thehead*4/5); 
	ellipse(mappedS+offset2, width/3-offset, thehead/4, thehead*4/5); 
	//eyes 
	fill(0); 
	ellipse(mappedS-thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	ellipse(mappedS+thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	
	//Minute the Man 
	//head 
	fill(255, 222, 168); 
	ellipse(mappedM, width/2+offset2, thehead, thehead); 
	//hair 
	fill(123, 79, 8);
	arc (mappedM, width/2+offset2, offset2*3, offset2*3, PI, TWO_PI ); 
	//eyes 
	fill(0); 
	ellipse(mappedM-thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	ellipse(mappedM+thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	
	//Hour the Panda 
	//ears 
	fill(0); 
	ellipse(mappedH-offset2, width/2+offset*2, thehead/3, thehead/3); 
	ellipse(mappedH+offset2, width/2+offset*2, thehead/3, thehead/3); 
	//head 
	fill(255); 
	ellipse(mappedH, width/2+offset3, thehead, thehead); 
	//eyes 
	fill(0); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	fill(255); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	
	
	//text showing clock time on top. 	
	//If the Hours value is higher than 12, then 12 is subtracted. 
	fill(255); 
	if (H<13) {
	text(H, width/4, 20); 
} else {
	text(H-12, width/4, 20); 
	}
	text(":", width/4+15, 20); 
	text(M, width/3-9, 20); 
	text(":", width/3+8, 20); 
	text(S, width/3+15, 20); 
}

 

I thought of how the seconds clock moves faster than the minute and the hours is the slowest. I then thought of different symbols to represent this difference in speed. I came up with Second the Rabbit, Minute Man, and Hour the Panda. I am quite pleased with the outcome and the race my symbols are running.

hannajan-LookingOutwards-05

I discovered and looked at the art of Gustavo Soares. He is a 3D artist that works with archivz and characters. His art especially appealed to me because his aesthetic involved drawing faces that had a cute “clay” like 3-D appearance.

Since this Looking-Outwards theme was about the production of 2D images that depict 3D scenes and objects, I thought his clay-like art was perfect to explore. I am not completely sure which algorithms or the computation methods he used, but in terms of his art, he uses a lot of shadows and highlighting to achieve his 3-D clay effect.

His artistic sensibilities are manifest in the final form through his acute attention to detail. Without this key necessity, his art would not have achieved the perfect 3-D appearance it displays. His art inspires me to pay more attention to the small details that may completely alter the way a whole image is displayed. For example, in my project for this week, I added some simple shadow an highlighting features to give my 2-D like egg a more 3-D look appearance.

 

hannajan-05-Wallpaper

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 05

var space1=10; 
var space2=40; 
var space3=30; 
var area=80; 
var area2=5
var px; 
var py; 

function setup () {
	createCanvas(400, 400); 
	background(255, 201, 227);
	noStroke(); 
	}

function draw() {
for (var y=0; y<5; y++) {
		for (var x=0; x<5; x++) {
		
		//plate shadows
		px=space1+x*area;
		py=space1+y*area; 
		fill(102, 20, 79); 
		rect(px, py, space3*2+7, space3*2+7); 
		
		//plates  
		fill(255, 128, 159); 
		rect(px, py, space3*2, space3*2); 
		
		//egg white circle 1
		px=space3+x*space2*2;
		py=space3+y*space2*2; 
		fill(255); 
		ellipse(px, py, space3, space3); 
		
		//egg white circle 2
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(255); 
		ellipse(px, py, space2+3, space2+3); 
		
		//egg white circle 3
		px=space3+3+x*area;
		py=space3+3+y*area; 
		fill(255); 
		ellipse(px, py, space3+2, space3+2); 
		
		//yolk shadows 
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(203, 141, 15); 
		ellipse(px, py, 3+area2*4, 3+area2*4); 
		
		//yolk
		px=space2+3+x*area;
		py=space2+3+y*area; 
		fill(255, 181, 75); 
		ellipse(px, py, area2*4, area2*4); 
		
		//yolk shine 
		px=space2+x*area;
		py=space2+y*area; 
		fill(255); 
		ellipse(px, py, area2, area2); 
		
		}
	}
}

For this project, I wanted to make patterns with one of my favorite foods: eggs. I first sketched out a basic grid design I wanted to use as plates for the eggs (as seen in the image above). I was also inspired by the theme for this week’s Looking Outwards and wanted to give a 2-D image a more 3-D look. I did this using some simple shadows to also add a 3-D element and am quite happy with the repeated pattern overall.

 

 

LookingOutwards-04

For this particular Looking-Outwards post, I looked at an artistic piece of Otobong Nkanga named Wetin You Go Do?. In this particular artistic piece, a distinctive sound can be heard from three of the balls. The sound is very carefully edited and layered in a specific way. The sound is edited to portray a part narrative and part song, with shifts between stream of consciousness and profound statements in English, French and Nigerian Pidgin, an English-based Creole language widely spoken across Nigeria.

Symbolism plays a part where each sphere represents a different imaginary character. The ropes connecting the spheres suggest networks within society.

I admire the simplicity yet the strong importance of symbolism behind this artistic piece. Additionally, the sound editing plays an essential role in conveying this symbolic message. The algorithms behind the sound editing is a bit hard for me to guess but I assume that there is definitely a distinct pattern between the usage of different languages and sounds.

The artist’s artistic sensibility especially shines in the simple way he successfully conveys a very distinct, clear, and “loud” message. The message can be loud without having to be physically loud by sound.

Project-04-String-Art

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 04

function setup() {
	createCanvas (400, 300); 
    strokeWeight(1); 
    
}

function draw() {
	background(0); 
	var x1= 200; 
	var accum= 2; 
	var space= 40; 
	
 	for (var i = 0; i < 300; i += 40) {
    	//white lines start on left and spread out
    	stroke(255); 
      line (0, 0, width, i); 
      //white lines start on right and spread out 
      line(width, 0, 0, i)
      
      //pink lines start on left and spread out
      stroke(255, 183, 221); 
      line(0, space, width, i); 
      //pink lines start on right and spread out 
     line(width, space, 0, i); 
     
      //yellow lines start on left and spread out 
      stroke(255, 241, 150); 
      line(0, space*2, width, i); 
      //yellow lines start on right and spread out 
      line(width, space*2, 0, i); 
      
      //blue lines start on left and spread out 
      stroke(183, 222, 255); 
      line(0, space*3, width, i); 
      //blue lines start on right and spread out 
      line(width, space*3, 0, i); 
      
      //aqua lines start on left and spread out
      stroke(183, 253, 255); 
      line(0, space*4, width, i); 
      //aqua lines start on right and spread out
      line(width, space*4, 0, i); 
      
      //green lines start on left and spread out
      stroke(151, 231, 182); 
      line(0, space*5, width, i); 
      //green  lines start on right and spread out
      line(width, space*5, 0, i); 
      
      //purple lines start on left and spread out
      stroke(161, 170, 245); 
      line(0, space*6, width, i); 
      //purple  lines start on right and spread out
       line(width, space*6, 0, i); 
       
       //hot pink line starts on left and spreads out
       stroke(243, 62, 150); 
       line(0, space*7, width, i); 
        //hot pink line starts on right and spreads out
      line(width, space*7, 0, i); 
      
    }
    
  
      

}

For this particular project, I was stuck at first on what I should do. I then wanted to try to make a visual illusion. The curves in my project are seen in the middle of the canvas where there are black spots. If you concentrate on the black spots only and move your eyes hori

hannajan-LookingOutwards-3

 

According to the artist Sui Park, SPUME presents “soft flows of evolving sentiment.” This gives a feeling of flow, and the artist herself likens her art to emotions and sentiments, which are not static.

The algorithms to create her art looks as if they are built upon each and every additional “stitch” or piece to make up a whole. Although, it is not specified what algorithm was used exactly.

This reminds me that in all the projects I do in the future, it is always important to remember which message I want to convey to all those who view it. Instead of always just worrying about the technical and aesthetic aspect of the art I am producing, I feel that the inside main message that the art is conveying is equally important. Although her art is technically static, it looks to be continuously flowing.

Project-03-Dynamic-Drawing

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project-03

var clocksize=300; 
var shorthand= 40; 
var textSze=20; 
var textszeadd= 100
var SunX= 600; 
var SunY= 130; 
var SunSize= 50; 
var SunRim=60; 
var MoonX= 40; 
var MoonY= 130; 

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

function draw() { 
	background(204, 232, 247);
	
	//Clock Color Changes  to Mouse Location 
	var point1 =mouseX; 
	var point2 =mouseY; 
	
	var Rx = map(point2, 0, height, 162, 218); 
	var Gx= map(point2, 0, height, 231, 218); 
	var Bx= map(point2, 0, height, 199, 231); 
	
		//clock 
	ellipse(width/2, height/2, clocksize, clocksize); 
	fill(Rx, Gx, Bx); 
	
	//clock numbers 
	//number 12 
	textSize(textSze); 
	text("12", width/2, height/2-textszeadd); 
	
	//number 3 
	textSize(textSze); 
	text("3", width/2+textszeadd, height/2); 
	
	//number 6 
	textSize(textSze); 
	text("6", width/2, height/2+textszeadd); 
	
	//number 6 
	textSize(textSze); 
	text("9", width/2-textszeadd, height/2); 
	
	
	//clock 
	strokeWeight(5); 
	stroke(0); 
	
	//White Hand
	if (dist(mouseX, mouseY, width/2, height/2)<clocksize/2) {
	//white hand	
	line(width/2, height/2, mouseX-shorthand, mouseY-shorthand);
	stroke(0); 
	//black hand
	var mx = width-mouseX; 
	var my = height-mouseY; 
	line(width/2, height/2, mx, my); 
	}
		//text of clock 
	if (dist(mouseX, mouseY, width/2, height/2)>clocksize/2) {
	text("Move Mouse Inside Clock", width/2+0.7*textszeadd, height/2-1.5*textszeadd); 
	 
	fill(245, 210, 242);
	
	//morning sun 
	if (mouseX>470) {
	noStroke(); 
	fill(252, 141, 0); 
	ellipse(SunX, SunY, SunRim, SunRim);
	fill(253, 230, 0); 
	ellipse(SunX, SunY, SunSize, SunSize); 
	}
	
	//evening moon
	if (mouseY< 170); 
	noStroke(); 
	fill(253, 215, 58); 
	ellipse(MoonX, MoonY, SunSize, SunSize); 
	}
	
	
	

}

I had a basic idea of making an interactive clock, but I think it was a bit hard to change the different features like the way I wanted them to. The hardest thing was to mix the hands together so that they would be pointing in different directions, and had to play around with some numbers to get the exact formula. I eventually got the hands to move the way I wanted them to after I tested them over and over again with different numbers. I also like how the colors came out to look like for the interactive color portion of the clock.