Looking Outwards-07- Information Visualization-sehenry

The project that I chose was an interactive program that allows you to pick personal sources of information based on what you are interested in. So for me, I browsed through their choices and found a category called Life, The Universe, and Everything. Within the category, I chose weather and it relocated me to a weather map showing where wind, all over the country, is headed, in an interactive artistic weather map. Small white/grayish lines would follow a path deduced by the internet in multiple places, all over the U.S. The real art comes from the template where you are allowed to choose which subject to learn about. As your mouse travels around the screen different portions of the screen grow, shrink, and shift. The site kind of looks like a bookshelf full of album covers that you can flip through.That is why I like it. It looks very similar to something we know but is too abstract to label it as such.
Moebio Labs is a team of data scientists, developers, and designers and they work on projects that tie together large amounts of usable information.
Category Selection
moebio

Wind Map
moebio-2

Creator: Moebio
Website: Moebio.com

Assignment-07-C Epicycloid Evolute-sehenry

Working on this was a bit tricky, but once I understood the concepts and structure behind making these shapes, it became easier. The hardest part for me was using the equations from the website and implementing it into my code. I had to browse through a few posts of other students to get a rough idea of what to do. From the start I wanted to do an epicycloid evolute because it looked really appealing and looked similar to a flower.

epicycloid-evolute-screenshot

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Assignment: Project 7 Composition with Curves (Epicycloid Evolute)


//Global Variables
var nPoints = 400;
var conX;
var scale;
var n=10


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


function draw() {
    background(100,50,mouseX); //changes background color based on the mouse position
    fill(mouseX,100,mouseY); //changes the epicycloid color based on the mouse position
    var a = 150.0 //radius a
    var b = 50.0 //radius b
    var angle = map(conX,0,width,0,6*TWO_PI); //rotate around the constraint (conX)
    conX = constrain(mouseX, 0, width); //constrain around mouseX and mouseY
    scaleA = map(conX,0,width,0,3);
    

    push();
    translate(width/2,height/2);
    rotate(angle); //rotate clockwise
    scale(scaleA,scaleA); //change the size of the epicycloid outer portion
    beginShape();

    //Epicycloid Outer
    for (var i=0; i<200; i++){ 
        var theta = map(i,0,nPoints,0, 4*TWO_PI);
        x=(a/(a+2*b))*(a+b)*cos(theta)+b*cos(((a+b)/b)*theta); //xpetal of epicycloid
        y=(a/(a+2*b))*(a+b)*sin(theta)+b*sin(((a+b)/b)*theta); //ypetal of epicycloid
        rect(x-5,y-5,30,30);
    }
    endShape();
    pop();


    push();
    translate(width/2,height/2);
    rotate(-angle); //rotate the opposite way of the outer epicycloid
    beginShape();
    //No Rotate
    //Epicycloid Inner
    for (var i=0; i<200; i++){
        var theta = map(i,0,nPoints,0, 4*TWO_PI); 
        x=(a/(a+2*b))*(a+b)*cos(theta)+b*cos(((a+b)/b)*theta); //xpetal of epicycloid
        y=(a/(a+2*b))*(a+b)*sin(theta)+b*sin(((a+b)/b)*theta); //ypetal of epicycloid
        rect(x-5,y-5,30,30);
    }
    endShape();
    pop();

    push();
    translate(width/2,height/2);
    rotate(angle); //rotate same direction of epicycloid
   
    beginShape(); //The evolute portion of the flower

        for (var i=0; i<200; i++){
        a=100;
        var theta = map(i,0,nPoints,0, 5*TWO_PI);
        var petalX = a * (((n-1)*cos(theta)+cos((n-1)*theta))/n) //Xpetal of evolute
        var petalY = a * (((n-1)*sin(theta)+sin((n-1)*theta))/n) //ypetal of evolute
       rect(petalX-5,petalY-5,30,30); //draws the inside petals  
}
    endShape();
    pop();


}
    
   

LookingOutwards-Randomness-sehenry

While searching through different forms of random art, I happened to stumble upon one that peaked my interest. I always believed that random art could mean something to someone and mean something different to a different person. So when I was browsing through all the neat and wonderful art that was generated through the theme of randomness, I was impressed to say the least. The one that I found and was really interested by is called Tsunami by Hailei Wang. She talks about how she uses python to create her artwork and just looking through her different pieces of art makes me want to be more expressive and more random and less “planned out” in certain circumstances.
tsunami_1
tsunami_2

tsunami_3

tsunami_4

tsunami_5

tsunami_6

Painting :Tsunami
Artist: Hailei Wang

Painting With Code

Project 06 – Abstract Clock-sehenry

For this project, a ton of ideas came to my mind but one of them stuck. The idea that a shape could increase in increments as a representation of seconds intrigued me. I then just played around with how I wanted the hour and minute things to go. I started sketching what it could look like and realized that the other two sets of time would be relatively easy to make. I love the way the clock turned out. I used the normal settings of my normal clock for this one as well so it took less time than I originally thought. abstract-clock-sketch

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Abstract Clock Project 6


//Global Variables
var sCount = 0
var mCount = 0
var hCount = 0


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

function draw() {

var centerX = width/2 //center w
var centerY = height/2 //center h
var s = second(); //second
var h = hour()%12; //24hrs/2
var m = minute(); //minutes

    background(100,100,s*2); //changes color as time goes on. 
    
    push();
    for(sCount=0;sCount<=s;sCount+=1){ //counts seconds
        var secondPos = sCount*6
       }
    fill(20,secondPos,secondPos); //different colors as different seconds appear.
    ellipse(centerX,centerY,secondPos,secondPos); //circle that increases until it reaches 60 seconds
    translate(centerX,centerY); //translates the origin to (0,0)
    rotate(millis()/800); //Random rotation of rectangles 
    rectMode(CENTER);
    fill(100,100,secondPos);
    rect(0,0,secondPos,50); //inside rectangle

    push();
    fill(100,secondPos-60,100);
    rotate(millis()/900); //rotate slower than first rectangle
    rectMode(CENTER);
    rect(0,0,secondPos,50); //Second rectangle inside ellipse
    pop();
    pop();

    line(0,70,500,70); //upper boundary for circle and line for hour representation
    line(0,430,500,430);//lower boundary for circle and line for minute representation



    strokeWeight(2);
    for(mCount=0;mCount<m;mCount+=1){ //counts minutes
        var minutePos = mCount*6
        fill(minutePos,secondPos,secondPos);
        ellipse(minutePos+76.5,430,5,5);
    }
    push();
     for(hCount=0;hCount<h+1;hCount+=1){ //counts hours
        var hourPos = hCount*32.5+65
        strokeWeight(3); 
        rectMode(CENTER);
        rect(hourPos,70,28,28)
         }
    pop();

    textSize(30) //text for hours
    textAlign(CENTER);
    var htext=hour()%12;
    text(htext,hourPos,120);

    textSize(15) //text for minutes
    textAlign(CENTER);
    var mtext=minute();
    text(mtext,minutePos+76.5,425);
    
}



   


LookingOutwards-05-sehenry

pink-rhino

pink-sumo

pink-tornado

Duracell Print Campaign Europe/Asia
Ogilvy & Mather Paris
Digital illustration : Full Computer Generated Image.
2010 Cannes Shortlisted
2009 Eurobest Bronze Award

Behance Nikopicto Site

Nikopicto is a Hong Kong based 3d production company that has an enormous portfolio of 3d projects. As I was browsing through their projects, one particular one that caught my eye was one they had made a few years ago called DURACELL. They took the cartoon animation from DURACELL and turned it into a masterpiece. By using a large amount of small pink bunnies, they were able to create a pink stampeding rhino, a pink tornado, and a large pink sumo-wrestler. And if you look closely you can see various bunnies all in different poses. I like when something so small can make up something even bigger and that is exactly what Nikopicto did. The agency that sponsored the full computer generated images was Ogivly and Mather for the client Proctor and Gamble as a part of the Duracell Print Campaign 2009 Europe and Asia.

Wallpaper-05-sehenry

sketch

//Seth Henry

//Tuesday at 10:30

//sehenry@andrew.cmu.edu

//Assignment-05 Wallpaper




function setup() {
    createCanvas(660, 340);
    }

function draw() {
	  background(128, 0, 32); //Burgundy
	  blackDot(); 
	  fill('orange'); //Color of Ball
	  Bball();
	  fill(240, 248, 255); //Color of Diamonds
	  diamond();

	 }


function Bball(){ //Basketball Layout
	var x = 90;
	var y = 50;
	for(x = 90; x < 660; x += 120){
	
	for(y = 50; y < 340; y += 80){
		ellipse(x, y, 60, 60)
		
	  beginShape(); // left curve on basketball
	  
	  curveVertex(x - 19.5, y - 22.5);
	  curveVertex(x - 19.5, y - 22.5);
	  curveVertex(x - 12.5, y - 10);
	  curveVertex(x - 12.5, y + 10);
	  curveVertex(x - 19.5, y + 22.5);
	  curveVertex(x - 19.5, y + 22.5);
	  endShape();
   	  beginShape(); // right curve on basketball
	  
	  curveVertex(x + 19.5, y - 22.5);
	  curveVertex(x + 19.5, y - 22.5);
	  curveVertex(x + 12.5, y - 10);
	  curveVertex(x + 12.5, y + 10);
	  curveVertex(x + 19.5, y + 22.5);
	  curveVertex(x + 19.5, y + 22.5);
	  endShape();
		line(x, y + 30, x, y-30); //vertical line on basketball
		line(x - 30, y, x + 30, y); //horizontal line on basketball
}

}
noLoop();
}


function diamond(){ //Diamond Layout Plus Number 4 Text

var a = 0; //starter variables
var b = 0;


for(a = 0; a < 650; a += 120){ //moves over the diamonds/4 in rows
for(b = 0; b < 340; b += 50){ //moves over the diamonds/4 in columns
quad(a + 30, b + 5, a + 45, b + 20, a + 30, b + 35, a + 15, b + 20);
textAlign(CENTER);

text("#4", a + 30, b + 50); //#4
}	
} 
noLoop(); //end loop
}

function blackDot(){ //Makes black dots behind the balls, numbers, and diamonds
	var v = 0;
	var w = 0;

	for(v=0; v<660; v+=5){ //moves over the dots in rows
		for(w=0; w<340; w+=5){ //moves over the dots in columns
		ellipse(v,w,1,1);
		}
		
	}
	noLoop();
}

	


I decided to cut off one row of the basketballs because when I embed the wallpaper into my post, it cannot capture all of the extra row. So I decided to just remove it from the preview even though it is in my code.

Making this project would have actually been finished relatively fast if I didn’t have a hard time with the curves on the basketball and getting the diamonds to move over by certain amounts without distorting their shape. I drew a sketch to begin with and toyed with the idea of having basketballs all over the picture. I later added the number 4 to the wallpaper because it is my current number on the basketball team and I decided to add the black dots because I thought it would make the wallpaper pop out even more! I had fun with this project and it showed me that I am actually getting better at coding.

wallpaper-sketch

Looking Outwards-04-sehenry

I really like this week’s subject of computational soundscapes for many reasons. For one, I love it because I think it is so neat that we can bring digital substance into reality by converting it into many ways, sound being one of them. The other reason why I love this weeks LookingOutwards, is because I myself make digital music on numerous platforms like Fl Studio, Garage Band, and Pro Tools! Being able to look and see what you are changing and being able to manipulate something artificial so that something real takes form, is a wonder upon itself. The Tilt Brush took another step into digital reality by creating a new combination of music, art, and animation. They have allowed a person to equip themselves with the ability to paint in virtual reality and as a result, create sound. The video below can paint a better picture than I can but it truly is incredible that some people can see what others cannot. Drawing sound is a concept that I had never even thought of until I saw this video. Now I am even more intrigued and I want to do more research on it even after this week.
Creator: Tilt Brush
Article by: The Creators Project

String Art-04-sehenry

While working on this project, I became very comfortable with the for() function in p5.js. I started off just writing random for() functions but then saw how easy it was to manipulate the distances and lengths and positions of my shapes and variables. I spent a little too long on this because I wanted to make an eye in the middle of the frame but it was fun!

CLICK ON THE EYE!

sketch

//Seth Henry

//Section B 10:30 Tuesday

//sehenry@andrew.cmu.edu

//Assignment-String Art


function setup() {
    createCanvas(640, 480);
   
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
	background(220);
	fill('violet blue'); //randomcolors
	rect(0, 0, width, height); //background rectangle
	if (mouseIsPressed) {
	fill(255);
	strokeWeight(2);
	ellipse(width/2, height/2, 250, 250); //eyeball
	fill(0);
	ellipse(width/2, height/2, 100, 100); //pupil
	fill(255);
	ellipse(width/2+20, height/2-30, 10, 10);//whiteball
	strokeWeight(2);
	line(width/2-75, height/2-100, width/2+75, height/2-100); //top eyelid
	line(width/2-75, height/2+100, width/2+73, height/2+100); //bottom eyelid
	line(width/2-40, height/2-100, width/2-40, height/2-120); //eyelashes
	line(width/2, height/2-100, width/2, height/2-125);
	line(width/2+40, height/2-100, width/2+40, height/2-120);
	}
	
 	else {
 	strokeWeight(3);
 	fill(102,51,150);
	ellipse(width/2, height/2, 250, 250); //eyeball
	strokeWeight(3);
	line(195, 240, 444, 240); //eyelid
	line(220, 240, 180, 260); //eyelashes
	line(260, 240, 230, 280);
	line(380, 240, 410, 280);
	line(420, 240, 460, 260);
	for (var ln = 280; ln < 380 ; ln+=40){ //middle eyelashes
		line(ln, height/2, ln, height/2 + 50);
	}
	
	
	}
	strokeWeight(1)
	stroke(random(255), random(255), random(255));
	// for(var i = 1; i<640; i+=10){ //Makes a sequence of straight lines from the top left to the bottom right
	// line(i,50,50,i);	
	// }
	for(var e = 1; e < 640; e += 5){ //Makes a curve arching to the top left of the screen
	line(width-e, 50, 50, e);
	}
	for(var a = 1; a < 640; a += 10){ //Makes a curve arching to the top right 
	line(a, 50, width - 50, a);
	}
	for(var o = 1; o < 640; o += 10){ //Makes a curve arching to bottom right
	
	line(width-o, height -50, width - 50, o);
	}
	for(var p = 1; p < 640; p += 10){ //Makes a curve arching to the bottom left. 
	
	line(p, height - 50, 50, p);
	}

	
}
	//Previous curves that I decided to exclude

// 	for(var y = 1; y<640; y+=10){
// 		line(y,height-y, width-50,y);
// 	}
// 	for(var x = 1; x < 640; x+=5){
// 		line(width-x, height-x, 50, x);
// }

	
	

LookingOutwards-3 sehenry

The reason why I chose the project below as my focal point for LookingOutwards-3 is because the sculpture speaks to me. It is a computer generated sculpture of 4 separate but aligned pieces. Each piece has ripples through and through and when you take a step back and look at the sculpture as a whole, it looks very similar to a blanket or sheets on a bed. The ripples within each piece look to be randomly placed so I would have to guess that the algorithm used for this portion of the sculpture would have had a lot of random variables include. Just like I can make a background produce random colors with background(random(30,200), 50, random(40,150)). I also admire how simple this sculpture is. Not every computer generated piece of work has to be filled to the brim with colors and shapes. This one was simple with complicated algorithms. If you click on the link you will actually see that the sculpture is made of tiny little bristles. This really shows the artist’s sensibilities. There is more to see, the closer you get.

lookingoutwards-3

Creator: BREAD
Project Name: Cilia

Dynamic Drawing – sehenry

While working on this project, I had a lot of trouble figuring out what the boundaries and positions of my shapes would be and which actions should they do. With a couple of restarts, I finally decided what my art would look like and I am very happy with the result. It took me a little bit but I got it done!

sketch

//Seth Henry

//Section B 10:30 Tuesday

//sehenry@andrew.cmu.edu

//Assignment- Dynamic Drawing





var cirDiam = 200
var sqLength = 200
var B = 100
var sizeR = 60
var sizeE =60



function setup() {
    createCanvas(640, 480);
    
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
	colR = map(mouseX, 0, width, 0, 100); //sliding left and right will change background from black to blue
	colG = map(mouseX, 0, width, 20, 150);
	colB = map(mouseX, 0, width, 10, 200);
	background(colR, colG, colB);


	if (mouseX > width/2) { //if mouse is on the right half of the screen, an ellipse will apear
		fill(B);
		ellipse(width/2, height/2, cirDiam, cirDiam);
	} 

	if (mouseX < width/2){ //if mouse is on the left half of the screen, a rect will appear
	fill(B); 
	rectMode(CENTER);
	rect(width/2, height/2, sqLength, sqLength);
	}


push(); //small circle spinning clockwise
	fill(random(0,255));
	rotate(millis()/1000);
	ellipse(160, 360, sizeE, sizeE);
	pop(); 

	push(); //small circle spinning counterclockwise
	fill(random(0,255));
	rotate(-millis()/1000);
	ellipse(480, 360, sizeE, sizeE);
	pop();
	  

	var oppositeX = width-mouseX //Similar to old project (Allows circles and rectangles to be placed opposite of one another)
	var oppositeY = height -mouseY
 
    fill(255); //opposite X rectangle
    rect(mouseX, height/2, sizeR, sizeR);
 
    fill(0); //opposite X ellipse
    ellipse(oppositeX, height/2, sizeE, sizeE);

    
    fill(255); //opposite Y rectangle
   	rect(width/2, mouseY, sizeR, sizeR);
	

    fill(0); //opposite Y ellipse
    ellipse(width/2, oppositeY, sizeE, sizeE);

    textAlign(CENTER); //allows my name to follow the mouse and grow or shrink depending on placement
    textStyle(BOLD);
    textSize(mouseY-mouseX);
    text("SethHenry", mouseX, mouseY);


    push(); //rotates the rectangle found in the middle
    fill(B);
    translate(width/2, height/2);
    rotate(radians((mouseX/2)%180));
    rect(0,0, 50, 50);
    pop();

}

function mousePressed() { //if mouse is pressed...
	if (dist(mouseX, mouseY, width/2, height/2) < 100 ) {
		B=random(0,255); //the color of the non spinning circles and the rectangles will change color
		sizeR=random(10,100); // the size of the opposite rectangle will change size
		sizeE=random(10,100); // the size of the opposite ellipse will change color


		
	}

}