Uncategorized – Page 9 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

Project 6 Lydia Jin

//Lydia Jin
//Section B
//jialuj@andrew.cmu.edu
//Project 6
var h;
var m;
var s;
function setup() {
    createCanvas(800, 800);
    
}

function draw() {
	background('black');
	angleMode(DEGREES);
	h = hour();
	m = minute();
	s = second();

	//draw arcs
	fill(0,0,0,0);
	push();
	translate(width/2, height/2);
	stroke(181, 32, 104);
	strokeWeight(45);
	//draw hour arc
	arc(0, 0, 407, 407, 0, 30*h);
	stroke(32,181,161);
	//draw minute
	strokeWeight(45);
	arc(0, 0, 520, 520, 0, 6*m);
	stroke(48,124,244);
	//draw second
	strokeWeight(45);
	arc(0, 0, 633, 633, 0, 6*s);
	pop();

	
	push();
	translate(width/2, height/2);
	//text for displaying time
	var posS = (s%60)/60*360;
	textSize(17);
	fill('black');
	text(s, 317*cos(posS), 317*sin(posS));

	var posM = (m%60)/60*360;
	textSize(17);
	fill('white');
	text(m, 258*cos(posM), 258*sin(posM));

	var posH = (h%24)/12*360;
	textSize(17);
	fill('black');
	text(h, 200*cos(posH), 200*sin(posH));
	pop();

	
	push();
	//draw in moon and sun
	translate(width/2, height/2);
	noStroke();
	if (h>12 & h == 0){
		fill('yellow');
	}
	else {
		fill('grey');
	}
	
	ellipse(-55, 0, 80, 80);
	fill('black');
	ellipse(-35, -5, 80,80);

	if (h<=12 & h != 0){
		fill('orange');
	}
	else {
		fill('grey');
	}
	ellipse(50, 0, 70,70);

	pop();
// return to original state
}

I have came up with this idea thinking about different yet simple ways to represent time. So I thought I can make the clock still look round but I replaced the hands by part of the circles to indicate time. I also wanted some differentiation between day and night so I drew in a moon and sun in the middle of the canvas and that they change colors accordingly to time. There is also text at each hand bar to indicate hour, minute and seconds. I previewed my post and apparently it’s not showing the entire canvas but my canvas size is below the 800 pixels limit. The part that didn’t show up is when the second hand reaches 60 then it resets and starts over again. Below is my rough sketch of the project:

801913011

Project 6: Abstract Clock

abstract clock

/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 6
*/

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

function draw() {
    background(0);

    var s = second();
    var m = minute();
    var h = hour();
    var space = 40;
    var startX = 5;
    var leftballX = 40;
    var leftballY = 240;
    var frameY = height/3.75
    var endX = 695;
    var rightballX = 660;
    var rightballY = 240;
    var outsideL = 270;
    var hballL = 240;
    var sballL = 190;
    var mballL = 215;
    var dir = 1;
    var speed = 3;
    var angle = 30;


    stroke(255);
    strokeWeight(4);
    line(startX, 5, endX, 5);//top border line

    for (var i = 1; i < 25; i++) {
        stroke(255);
        strokeWeight(1);
        line((i*25)+space, 5, (i*25)+space, hballL);//draws 24 lines connecting to balls

        if (h == i) {
        fill("blue");
        } else {
            fill(255);//fills the ball corrresponding to the hour as blue
        }
        noStroke();
        ellipse((i*25)+space, hballL, 15, 15); //draws 24 balls to represent 24 hours
    }

    for (var a = 1; a < 61; a++) {
        stroke(255);
        strokeWeight(1);
        line((a*11.6)-5, 5, (a*11.6)-5, mballL); //draws 60 lines connecting to balls

        if (m == a) {
            fill("green");
        } else {
            fill(255);//fills ball corresponding to minute as green
        }
        noStroke();
        ellipse((a*11.6)-5, mballL, 10, 10);//draws 60 balls to represent 60 minutes 
    }

    for (var b = 1; b < 61; b++) {
        stroke(255);
        strokeWeight(1);
        line((b*11.6)-5, 5, (b*11.6)-5, sballL);//draws 60 lines connecting to balls

        if (s == b) {
            fill("pink");
        } else {
            fill(255);//fills ball corresponding to second as pink
        }
        noStroke();
        ellipse((b*11.6)-5, sballL, 10, 10);//draws 60 balls to represent 60 seconds
    }
}

I originally had the idea to make a Newton’s cradle, with a colored ball within representing the hour in a 24-hour span, the outside ball bounces representing seconds, and the changing color of the bouncing balls representing minutes. Unfortunately, this idea did not pan out, but I nonetheless used the same sort of structure as the cradle and used sets of circles’ and having one circle in each set be a different color to make it easy for a viewer to tell time. The bottom row of circles represents the hour in a 24 span; the middle row of circles represents minutes in a 60 minute span, and the top row of circles represents seconds in a 60 second span.

Denise Jiang-Looking Outwards 06

Ramdom #1
Nicholas Hanna
2014

Nicholas Hanna is an artist and inventor who resides in Los Angeles. This piece of installation art called “Random #1” was created in 2014. All of the circles have a side that is black and the other white. They are joined to the structure frame by two pivot points. They are able to flip sides according to random algorithms.The motion of these circles flipping sides also make sounds according to the flipping rate. I think this piece is aesthetically satisfying that the circles are organized in a rational way but the movement is not. The randomness makes the whole piece interesting and the speed is just right to make noticeable changes without redundancy.

Nicholas Hanna

Christine Kim – Project-06

sketch

//Christine Kim
//Section A (9:00)
//haewannk@andrew.cmu.edu
//Project-06

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

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
    var mappedS = map(S,0,0.5,0,0.5);

    //fill("#D0E1F9");
    noStroke();
    background("#D0E1F9");
    //rect(0,0,width,730);
    fill("#BFDCCF")
    rect(0,730,width,height);

    //stem
    push();
    noFill();
    angleMode(DEGREES);
    stroke("#265C00");
    strokeWeight(8);
    arc(width/2,600,30,400,90,270);
    pop();

    //leaf
    push();
    angleMode(DEGREES);
    noStroke();
    fill("#265C00");
    strokeWeight(4);
    arc(343,700,90,50,0,190);
    arc(343,700,90,40,190,360);
    pop();


    //minutes
    //flower petal rotating every minute
    stroke(255);
    var w = 50;
    var h = 250;
    angleMode(DEGREES);
    push();
    translate(width/2,height/2);
    rotate(M/5*30);
    translate
    fill("#F69454"); //tells minutes
    ellipse(0,-h/2,w,h);
    rotate(45);
    fill("#FFBEBD"); //flower petals
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    pop();
    

    //seconds
    //center of the flower increasing in size
    for (var i=0; i<S;i++) {
    	fill("#E4EA8C");
    	ellipse(width/2,height/2,i+mappedS,i+mappedS);
    }
    
    //hours
    //the number of bees increasing each hour
    var beeX = 25;
    var stripeX = 15;
    var eyeL=20;
    var eyeR=30;
    var wing1=25;
    var wing2=25;
    var path1=25;
    var path2=25;
    var path3=25;
    var path4=25;
    
    for (var i=0; i<H; i++) {
    	noStroke();
    	fill("#00CFFA");
    	ellipse(wing1,48,38,9);
    	ellipse(wing2,58,38,9);
        wing1+=33;
        wing2+=33;

    	fill("yellow");
    	noStroke();
    	ellipse(beeX,50,22,40);
        beeX+=33;

    	stroke(0);
    	strokeWeight(3);
    	line(stripeX,50,stripeX+20,50);
    	line(stripeX+1,60,stripeX+18,60);
    	stripeX+=33;

    	ellipse(eyeL,35,1,1);
    	ellipse(eyeR,35,1,1);
    	eyeL+=33;
    	eyeR+=33;

    	strokeWeight(0.5);
    	noFill();
    	arc(path1,100,20,40,90,270);
    	arc(path2,111,19,19,0,90);
    	arc(path3,130,20,55,90,270);
    	arc(path4,112,19,19,270,360);
    	path1+=33;
    	path2+=33; 
    	path3+=33;  
    	path4+=33;  	
    }

//time
textSize(15);
fill("darkblue");
textFont("Comic Sans");

text(nf(H,[],0),80,750);
text(":",100,750);
text(nf(M,[],0),110,750);
text(":",130,750);
text(nf(S,[],0),140,750);


    

    

    
    
}

My abstract clock’s hours are shown by the bees, minutes are shown by the pink flower petal, and the seconds are shown by the center of the flower changing in size.

Sarita Chen – Looking Outwards – 06

For this week’s Looking Outwards post, I chose one of the works from this blog: Rectangle World run by Dan Gries. The blog features many different types of randomly generated art pieces, but the one that stood out to me the most was the Colourful Cellular Automaton, published in June, 2012. The automaton generates random colour “tapestries” when you click the canvas. Each individual rectangle generates a colour and the colours eventually shift to match each other and form a certain range of colours. The automaton can be tested here. For the sake of the post, I tried out the automaton a couple of times and posted the images I generated below.

screen-shot-2016-10-05-at-10-52-18-am

What I admire about the work is how simple yet aesthetically pleasing the end product ends up being. As an artist myself I also think this project could be useful as a colour palette generator, and I tend to be really fond of those (for example, the twitter “manygradients” generates a colour wheel every half hour). I think the artist’s sensibilities come out in the work through the way that the project was conceived. According to the blog post, Dan Gries claimed “While thinking and reading about flocking algorithms and cellular automata, [he] had the idea of mixing the two algorithms together.” Personally I find those random bouts of inspiration to just create something to be the most interesting.

My understanding of randomness in algorithms is mostly limited to what I’ve been learning in p5.js. How the code works is that each square tries to mimic the colour of the neighbouring squares, but not exactly. The squares also try to match the direction of change of the colours of the neighbouring squares. More information about how the algorithm work can be found on the blog post.

More of Dan’s works can be found on his flickr.

His website can be found here.

Brian Bizier-Looking Outwards-5

http://art.bt-3d.de/fragment/frag012102b.html

I don’t think the picture is coming through properly, but there is a link, so whatever. 😛

So yeah, this was a picture from a series called “Fragment” by a fellow named Tim Borgmann. Tim appears to be one of the few artists on the internet not working in the “Lost Innocence/My Little Pony Sex and Violence Fantasy” aesthetic, for which we may all be grateful. I was first drawn to “Fragment” primarily due to the colors. I’ve always liked the contrast between black and shades of orange/yellow. I also liked the way both colors seemed to be fluids, and colliding at different angles. I can’t think of anywhere I’ve observed a similar effect, in nature or otherwise, and I think that it’s awesome that digital artists can model or create things that have no corresponding examples in reality.

mreyes-looking outwards 05-Sublime Moments

Eyal Gever, Sublime Moments, 2014

In his show, Sublime Moments all of Eyal Gever’s pieces have two parts to them. An complex computer simulated animation, and then a 3 foot sculpture of that animation. Gever volunteered to be in the Israel Defense Forces’ computer R&D unit, where he programed computer graphics to simulated possible outcomes. This was the foundation for him eventually developing his own software for his art. In an interview with Beautiful Decay he said “Using my own proprietary 3D physical simulation technologies, I have developed computational models for physical simulation, computer animation, and geometric modeling. Combining applied mathematics, computer science, and engineering…”

Piece of the Ocean 2014

I admire this body of pieces because, I usually find hyperrealism (in both painting and sculpture) to be impressive but, ugly. However with Gever’s work I found his subject matter interesting as well as his execution and the forms he chooses to depict. The collection of pieces is enticing to look at as the forms suggest a movement but also give hint to a bigger motion yet to come. Gever Manages to capture the ominous potential along with a beauty and serenity of natural forms in a poetic juxtaposition.

803ec6874cc8b23ffa4a2d73d4347388

Sphere Pop 2014

sajohnso-project-05

wallpaper

/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project-05
*This program draws wallpaper
*/
function setup() {
    createCanvas(800, 600);
    background('#F9F4F0');
}

function draw() {

for(var y=0; y<600; y+=200){
	for(var x=0; x<800; x+=200){
		drawPattern(x, y);
	}

}
}

function drawPattern (x, y){
	//BASE OF FLOWERS
		noStroke();
		fill('#FED1D6');
		ellipse(x+50,y+110,40,40); //small, leftmost flower
		ellipse(x+120,y+140,70,70); //biggest flower
		ellipse(x+115,y+65,30,30); //small, rightmost flower

	//INSIDE OF FLOWERS
		fill('#F497AA');
		ellipse(x+40,y+110,15,20); //small, leftmost flower
		ellipse(x+124,y+154,50,40); //middle of biggest flower
		ellipse(x+120,y+63,15,15); //middle of rightmost

	//LEAVES
		//bottom left grouping
			strokeWeight(6);
			stroke("#AFDDC3");
			line(x+67, y+130, x+50, y+150);
			strokeWeight(9);
			line(x+67, y+130, x+63, y+165);
			line(x+69, y+130, x+80, y+180);
		//top left leaf grouping
			strokeWeight(11);
			line(x+55, y+83, x+30, y+70);
			line(x+80, y+100, x+60, y+50);
			line(x+80, y+100, x+120, y+90);
			strokeWeight(15);
			line(x+80, y+100, x+90, y+25);
}

The most time-consuming part of this process was actually drawing the flower design, and not making the design repeat. It didn’t come out quite as floral as I had planned, but it’s aesthetically pleasing anyways.

rnayyar puppy wallpaper

sketch

//Rhea Nayyar
//rnayyar@andrew.cmu.edu
//Section C
//Project 05-C; Wall Paper





function setup() {
    createCanvas(800, 800);
    noStroke();
}

function draw() {
    background(204, 157, 204);
    for (var y = 0; y < height+20; y += 80) {
        for (var x = 0; x < width; x += 205) {
            fill('SaddleBrown'); //Longer Rows of Paw Prints
            ellipse(x+20, y, 10, 15); //Toe 1
            ellipse(x+30, y-13, 10, 15); //Toe 2
            ellipse(x+45, y-15, 10, 15); //Toe 3
            ellipse(x+55, y, 10, 15); //Toe 4
            ellipse(x+30,y+17,20,20); //Pad part 1
            ellipse(x+45,y+17,20,20); //Pad part 2
            ellipse(x+38,y+12,30,15); //Pad part 3 (connects two pads with oval)
    }

 }

 for (var y = 50; y < height-20; y += 100) {
        for (var x = 65; x < width; x += 205) {
            fill('SaddleBrown'); //Shorter Rows of Paw Prints
            ellipse(x+20, y, 10, 15);
            ellipse(x+30, y-15, 10, 15);
            ellipse(x+45, y-13, 10, 15);
            ellipse(x+55, y, 10, 15);
            ellipse(x+30,y+17,20,20);
            ellipse(x+45,y+17,20,20);
            ellipse(x+38,y+12,30,15);
           
    }

 }
 for (var y = 20; y < height+45; y += 85) {
        for (var x = 65; x < width; x += 205) { //Dog bones
             push();
            rotate(radians(2));
            fill('PapayaWhip');
            rect(x+95,y-5,45,10);
            ellipse(x+90,y-4,15,15);
            ellipse(x+91,y+6,15,15);
            ellipse(x+140,y-4,15,15);
            ellipse(x+141,y+6,15,15);
            pop();
            
            
}
}
    noLoop(); 
}

I love dogs and I miss mine dearly. I find their paw prints to be incredibly precious <3
I made a nifty graphic to commemorate the canine existence!

LookingOutwards-05

While I (along with the rest of the world) am very familiar with Frozen, I’d never really looked into how they animated the movie. I knew it was CGI, and I knew the basics of how they created the people in the movie, but I had ignored one major aspect: the snow.

Since their creation of Snow White and the Seven Dwarves in 1937, Disney has studied movement in order to create realistic-looking animation. With Snow White, it was studying the movements of a young woman, like walking and dancing; with The Lion King it was studying how lions move; and with Frozen, it was the movement of snow.

There was no software ready-made that would create the visual effects with snow that they wanted, so they had to start from scratch. They assembled a team of people (led by art director Michael Giaimo) to go study snow and figure out how to recreate it. Not only was it a new concept to tackle, it was a complicated one – snow comes in a huge number of varieties: powdery snow, wet snow, icy snow, etc. They had to figure out things like how snowballs looked when thrown against a wall and what it looks like to walk through the snow in a long skirt. While they didn’t have much time to make the deadline, Giaimo and his team put in considerable effort in making the snow look like it belonged in “a believable world.”

The art team also went to Quebec, Canada to visit the Ice Hotel as part of their research.

The above video includes an explanation of the algorithms used (which I fully admit I do not understand at all) as well as shots of the animation in action. It even includes formulas above some of the animations, often side-by-side, to show how changing certain variables effects how the snow looks.

Frozen was released in 2013 and was produced by Peter Del Vecho.