Category: Uncategorized

Alessandra Fleck – Project 06 Clock

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-06


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

function draw() {
    background(255);

    //set for for hour,minutes and seconds
    var h = hour(); 
    var m = minute();
    var s = second();

    //blue waves going down
    for (var i = 0; i < (s*10); i ++) { //increments at x10 the distance
        stroke(179,223,222);
        strokeWeight(0.3);
        line(i*4, 0, width, i); 
        line(i*2, 0, height * 2, i); 
        line(i*4, 0, height * 4, i); 
        line(i*2, 0, height * 0.75, i + 20); 
        line(i*4, 0, height * 0.6, i + 20); 
        line(i*2, 0, height * 0.5, i + 100); 
    }

    //brown waves going down
    for (var i = 0; i < (s*20); i +=5) { //increments at x20 the distance
        stroke(255);
        strokeWeight(0.5);
        line(i*2, 0, width, i); 
        line(i*2, 0, height * 2, i); 
        line(i*2, 0, height * 4, i); 
        line(i*2, 0, height * 0.75, i + 200); 
        line(i*2, 0, height * 0.6, i + 200); 
        line(i*2, 0, height * 0.5, i + 600); 
    }

    //black waves going down for the minutes
    for (var i = 0; i < m; i +=5) { //strings will slowly branch out black for every minute
        stroke(0);
        strokeWeight(0.3);
        line(i*2, 0, width, i); 
        line(i*2, 0, height * 2, i); 
        line(i*2, 0, height * 4, i); 
        line(i*2, 0, height * 0.75, i + 200); 
        line(i*2, 0, height * 0.6, i + 200); 
        line(i*2, 0, height * 0.5, i + 600); 
    }

    //white circle_01
    fill(100,10+(s*50),255);
    noStroke();
    ellipse(50,s*10,30,30);

    //white circle_01_hour
    fill(255);
    stroke(0);
    strokeWeight(1);
    ellipse(50,h*10,30,30);

    




}

For this project I wanted the abstraction of the clock to be something that is completed as time passes. Instead of the long skinny arms of a clock being the seconds passing, I instead made them the minute hands and had the seconds move down in a parametric curve to create a wave in the background.

The sketch above shows a bit of the process in the form of the clock.

Sharon Yang Project 06 Abstract Clock

Project

/*Sharon Yang
Section C
junginny
Project-06
*/

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

function draw() {
    //fetch time
    var H = hour();
    var M = minute();
    var S = second();
    background(182,211,232);
    angleMode(DEGREES);

    //ground
    fill(109,67,48);
    noStroke();
    rect(0,455,640,480);

    //rain drops for seconds
    strokeWeight(2);
    stroke(255);
    var rainSpeed;
    rainSpeed = 0;
    frameRate(1);
    for (var i = 0; i <= S; i++) {
        push();
        translate(random(10,width-10),rainSpeed);
        line(0,rainSpeed,0,rainSpeed+30);
        rainSpeed+=15; 
        pop();
    }

    //plants for minutes
    var amountMap; //number of plants = minutes
    var plantY;
    fill(97,120,50);
    if (M == 1) {
        strokeWeight(2);
        stroke(97,120,50);
        push();
        translate(width/2,height-25);
        plantY = random(-20,-60);
        line(0,0,0,plantY);
        noStroke();
        ellipse(-5,plantY,10,5);
        ellipse(5,plantY,10,5);
        pop();
    }
    else {
        for (var amount = 1; amount <= M; amount++) {
            amountMap = map(amount-1,0,M-1,15,width-25); 
            strokeWeight(2);
            stroke(97,120,50);
            push();
            translate(0,height-25);
            plantY = random(-20,-60);
            line(amountMap,0,amountMap,plantY);
            noStroke();
            ellipse(amountMap-5,plantY,10,5);
            ellipse(amountMap+5,plantY,10,5);
            pop();
        }
    }

    //petals on the flower for hours
    if (H > 12) { //0~12 hours 
        H = H % 12
    }
    stroke(97,120,50);
    strokeWeight(4);
    line(320,230,320,455);
    noStroke();
    fill(242,155,174);
    for (var i = 0; i < H; i++) {
        push();
        translate(320,220);
        rotate(i * 30);
        ellipse(0,-25,15,60);
        pop();
    }
    noStroke();
    fill(175,23,104);
    ellipse(320,220,40,40);//bigger flower center
    fill(95,40,100);
    ellipse(320,220,25,25);//smaller flower center

}

For this project, I wanted to incorporate graphics with the clock function, and so I decided to make a flower to indicate the hours, the plants to indicate the minutes and the raindrops to indicate the seconds. I encountered several challenges including placing the plants without them overlapping as their number increases each minute. I resolved that my using the map function. The rotation and translation of the flower petals was also quite difficult but it became more simple once I converted the time to 12 hours instead of 24 hours.

LO – 06 Sara Frankel


Caption: This performance of Cage’s piece “Electronic Music for Piano” will be like no other performance of this piece.

John Cage in the music industry today is known for his expansion on the definition of what music is. His most infamous work, 4’33, requires the performer to sit with their instrument in “complete silence” for four minutes and thirty three seconds for all three movements. The idea of this piece though is to bring attention to the music around you, the random sneezes, the sound of electricity or just the thoughts and breathing of the audience member. Essentially, Cage brings attention to the coherency of randomness. In his piece “Electronic Music for Piano”, the score is just a piece of letterhead paper with very few instruction “for the use of parts from Music for Piano 4-84, reliant upon electronic equipment (microphones, amplifiers, and oscilloscope) and a constellation from an astronomical chart” (http://johncage.org/pp/John-Cage-Work-Detail.cfm?work_ID=59). John Cage’s work is inspiring to me as, if you let it, music and stories are told all around you all the time. Whether it is the buzz of the electricity or the sound of birds chirping outside, every random aspect of life contributes to the musicality of life. As seen in “Electronic Music for Piano”, there is story and music within random sounds of a piano.

Tanvi Harkare – Project 06 – Abstract Clock

tanvi_sketch

var H;
var M;
var S;

var posX = 0;
var posY = 0;;

var rectSize;

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

function draw() {
    noStroke();
    posX = 0;
    posY = 0;
    background("pink");

    //hour
    H = hour();
    for(var i = 0; i < 24; i++){
        if(H == i){
            fill(0);
        }
        else{
            fill(240);
        }
        rect(posX, posY, width / 24, height / 3);
        posX += width / 24; 
    }
    posX = 0;
    posY += 100;
    
    //minute
    M = minute();
    for(var j = 0; j < 60; j++){
        if(M == j){
            fill(0);
        }
        else{
            fill(240);
        }
        rect(posX, posY, width / 60, height / 3);
        posX += width / 60;
    }
    posX = 0;
    posY += 100;

    //second
    S = second();
    for(var k = 0; k < 60; k++){
        if(S == k){
            fill(0);
        }
        else{
            fill(240);
        }
        rect(posX, posY, width / 60, height / 3);
        posX += width / 60;
    }   
}

For this project, I was inspired by making a simple abstract clock. My clock resembles a piano, with a white background and black stripes representing the hour, minute, and second in real time.

A quick sketch of what I wanted my clock to look like

Project 06 Abstract Clock John Legelis

sketch

// John Legelis
// Section D


// candle dimensions
var ctop = 90
var xi = 7
var spacing = 40
var wcandle = 25
var hcandle = 150
var radius = 7

// flame dimensions
var flameEh = 20
var flameEw = 10

// holder dimensions
var holderWtop = 30
var holderWmid = 20
var holderHtop = 20
var holderHmid = 40
var holderWbot = 40


// initialize background
function setup() {
    createCanvas(480, 480);
    background(0);
}


function draw() {
    background(0)

    //assign variables to current time in hours and minutes
    var hsub = hour()
    var msub = minute()
    
    // Hours variable
    var h = ((hsub - 1) % 12) + 1
    var haway = abs(12 - h)
    
    // Minute variable
    var m = msub
    var maway = abs(60 - m)
    // dimensions of curent hour candle in relation to minutes
    var hcandleshort = hcandle * maway/60
    var ctopshort = ctop + hcandle - hcandleshort

    // loop through number of hours
    for(i = 0; i <= haway; i++) {
        
        var cx = xi + spacing * i

        // for hours to come that arent current ours
        if (i < haway){
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctop, wcandle, hcandle, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctop)
            holder(cx + wcandle/2, ctop + hcandle)
        }
        // for current hour hieght is minute dependant
        else {
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctopshort, wcandle, hcandleshort, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctopshort)

        }
    }
    // loop through every possible hour and draw candlestick and number
    for (i = 0; i < 12; i++){
        var cx = xi + spacing * i
        holder(cx + wcandle/2, ctop + hcandle)

        fill(255)
        textAlign(CENTER)
        textSize(20);
        text(abs(12-i), (xi + wcandle/2 + (spacing * i)), ctop + hcandle + 50)

    }

    //update every 1 second
    frameRate(1)
}


// draw flame with bottom center at x, y
function flame(x,y) {
    var h = random(5,62)
    var s = random(0,92)
    colorMode(HSB)
    fill(h,s,100)
    ellipseMode(CENTER)
    ellipse(x, y - flameEh/2, flameEw, flameEh)
}

// draw holder with top center at x, y
function holder(x,y){
    colorMode(RGB)
    fill(244,0,0)
    rectMode(CORNER)
    rect(x - holderWtop/2, y, holderWtop, holderHtop, radius)
    rect(x - holderWmid/2, y + holderHtop, holderWmid, holderHmid)
    rect(x - holderWbot/2, y+ holderHtop + holderHmid, holderWbot, holderHtop, radius)
}

This project made me think about ancient ways of keeping track of time. One of which was by candle. I chose to recreate this in a intuitive way while also making the candles seem lifelike. The hour is represented by the rightmost lit candle, and the minutes are represented by how far down the current hour candle has burned. The further into the hour it gets, the more burned down the candle becomes. The flames flicker every second.

Jaclyn Saik- Project 06

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Assignment-06-Project
*/




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


function draw() {
    background("DimGray"); 
    
    // current time variables
    var H = hour();
    var M = minute();
    var S = second();

    var skin = ("OliveDrab");
    var earPositionX = 390;
    var earPositionY = 200;
    var noseW = 10;
    if ((S % 2) > 0) { //if statement that changes variables based on whether seconds are odd or even 
        earPositionX = 390; 
        earPositionY = 200;
        noseW = 10; //variable that changes nostril size
    } else if ((S % 2) == 0) {
        earPositionX = 380;
        earPositionY = 190;
        noseW = 15;
    }
   


    
    
    var lidPosition = 180-(map(H, 0, 23, 0, 180)); //position of eyelids, how wide the eyes are opened 
    var mouthSize = map(M, 0, 59, 10, 300); //map to create gradual transition in size of mouth

    
    //background elements
    noStroke(); 
    fill("DarkMagenta");
    ellipse(150, 200, 580, 690);
    fill("Purple")
    ellipse(150, 200, 480, 530);
    fill("DarkOliveGreen");
    rect(20, 300, 260, 300);


    //the face:
    fill(skin)
    ellipse(150, 200, 450, 500);

    fill("DarkOliveGreen");
    ellipse(40, 135, 140, 190)
    ellipse(230, 135, 140, 190)

    fill("white");
    ellipse(40, 130, 130, 180)
    ellipse(230, 130, 130, 180)

    fill(0);
    ellipse(40, 130, 50, 80);
    ellipse(230, 130, 50, 80);

    //mouth
    stroke("DarkGreen");
    strokeWeight(6);
    fill("black")
    arc(140, 240, 300, mouthSize, 0, PI, CHORD);
    noStroke();

    //ear 
    fill(skin);
    ellipse(earPositionX, earPositionY, 80, 100) //relies on seconds for x and y position

    //eyelids
    fill(skin)
    rect(-30, 40, 140, lidPosition); //eyelids gradually open as the hours get higher/day goes on 
    rect(160, 40, 140, lidPosition); //rely on mapped position variable declared above

    //right eyelash
    stroke(0);
    strokeWeight(4);
    line(163, 40+lidPosition, 300, 40+lidPosition+7); 
    line(163, 40+lidPosition, 310, 40+lidPosition-2);

    //left eyelash
    line(105, 40+lidPosition, -30, 40+lidPosition+7); 
    line(105, 40+lidPosition, -30, 40+lidPosition+3);
    line(105, 40+lidPosition, -30, 40+lidPosition-2);
    

    //eyebrow
    stroke("Purple");
    strokeWeight(8);
    noFill();
    arc(40, 60, 130, 60, PI, 0)
    arc(230, 60, 130, 60, PI, 0)

    //nose

    noStroke();
    fill(0);
    ellipse(125, 200, noseW, 20);
    ellipse(150, 200, noseW, 20);



}

 

This project was an interesting way to create an animation that relied on the entire length of the day to complete, instead of confined within the frame rate we usually declare. I had a lot of different ideas for representing time after browsing that blog post about the different ways that time was represented before modern clocks. I was drawn to the use of sunlight to create elaborate timekeeping sculptures: to me, they looked as much like tools as beautiful works of art.

My sketches. I played with the idea of using sunflowers and other solar imitations, but I really liked how funny a face could be. I was inspired by all of the moving features on a face to accommodate different units of time.

However, for this project  I wanted to include humor and pull myself away from using traditional numerical qualities to tell time. I decided on a face early on, and as I built this person I felt like making this project Halloween-themed is a fitting start to October. This was also my first time really manipulating the map function, which I’m grateful for because now I have a much better grasp on how to use it.

In this clock, I made the witch’s eyelids reliant on the hour: when it is very early in the morning, her eyes are barely open, but as the day progresses they get wider and wider. Her muppet mouth is reliant on the minute, so her mouth gets progressively wider as the minutes increase, and resets at zero every hour. Her ears and nostrils are designed to be more timekeeping devices, as they tick back and forth with each second.

 

Audrey Zheng – Looking Outwards – 06

generatve
DATA-DADA is a software based interconected packing algorithm, which reads different color map arrays, either by random, noise and/or manual values

 

generative flowers
Depth Matrix

Holger Lippmann is a Processing artist. He created GENERATIVE FLOWERS by first experimenting with a branching system in p5. After fine tuning many little values here and there, adding randomness to angles, distribution and color arrays, he published a first work series “nebelwald”, simulating trees. Then he added leaves/flowers to the bare branches. He found using basic geometric forms produced the more satisfying output.

For Depth Matrix, Holger used an algorithm which generates color map dependent diverticulum like reliefs formed out of different pixel layers within a 3 dimensional environment. This software works with different keyboard input values to compose a rather painting like image out of different color maps. Color values of these map arrays are called by random, noise and/or manual order.

I admire Holger’s work because he clearly has a mastery of techniques a traditional artist has: color, composition, and design. I admire how Lippmann can use his understanding of mathematics and illustrative design skill to create such beautiful, captivating artwork that leaves the viewer wondering about its underlying code/foundation.

Min Jun Kim- Looking Outwards 6

According to the Laws of Chance by artist Jean Arp

The artwork that I would like to talk about today is from an artist named Jean Arp. This artwork is called According to the Laws of Chance, and it is made in the year 1933. The process of generating the art was dropping painted pieces of paper onto a surface. The idea is rather similar to that of Jackson Pollock’s drip painting, but this artwork dates back to before Pollack made his famous action paintings. The artist has other randomly generated art that is created in similar fashion, but the this particular artwork stood out to me.
What I admire about Arp’s art is that despite being randomly created, it is still on a rather subtle scale, where there aren’t too much clashing elements that compete for attention. The artist’s use of white space is what really gives this simple artwork the praise it deserves. The title really describes the artwork well, and I find the simplicity in the art to be very resembling of the design of nature.
Regarding the process, it is not a completely random piece of art. For one, the color of the paint was determined by the artist, and the number of the painted papers dropped was also in his control. The random aspects that go into the process are the shapes of the papers and where they are dropped.
The artist’s artistic sensibilities are manifested into the final form, when he is able to make deeply impactful pieces through the usage of randomness itself. Beauty is traditionally not attributed to randomness, but rather repetition and harmony, but Arp was able to tie the two together where randomness was used to create unsymmetrical yet harmonic piece.

Source: https://www.tate.org.uk/art/artworks/arp-according-to-the-laws-of-chance-t05005

Mimi Jiao – Looking Outwards 6 – Section E

Janet Sobel drip painting, Untitled.

Janet Sobel was an abstract expressionist painting whose works drew directly from Jackson Pollock’s drip painting techniques. Although her career was short lived, she created many well known pieces that have very interesting repetition of form and texture. Like Pollock, she used unconventional materials to create the drip effect, including glass pipettes and enamel paint. The drip painting technique is uses biased randomness. The drip of the painting is controlled by controlled and constant variables such as gravity, speed of paint drip, and acceleration, but since it is done so freehandedly, the amount of paint and the technique of the paint drip are highly influenced by the constant variables in ways that are extremely hard to control precisely. This creates randomness in the painting. Although the art is preplanned, a variety of environmental and other factors will affect the way the piece turns out, which makes it random. Of her works, I really appreciate this piece and this piece, which are both untitled. Having seen so much of Pollock’s drip paintings in mainstream media, it is very refreshing to see different artists’ interpretations of the same technique. I love that Sobel’s paintings have more of a sense of fluidity to them. The contrast of thick and thin, the pools of paint, and the overlapping of different colors creates a very free flowing liquidity that I really enjoy. It reminds me of opp art and psychedelic patterns, especially with the bright colors and stark contrast between colors. All of these visual elements combine together to generate visual flow and allows my eye to explore the piece from one point to another. It begins to create a narration for my brain to comprehend, and I find myself not overwhelmed with choosing a place to start looking, which is what I often experience when looking at Pollock’s work. One thing I wish I could see more of is the use of different colors. Sobel’s drip paintings almost always use red, black, and white, and I wish there were more works like the first one that explores more types of color interaction. It would also be nice if there were more contextual information about her works; I found it hard to understand her purpose for creating art with the lack of information on the internet. However, I really enjoy her take on the randomness of drip painting and I prefer it over Pollock’s works.

Project 5 Liz Maday

final wallpaper

function setup() {
	createCanvas(600, 600);
	strokeWeight(0.5);
}

function draw() {
	background(247, 140, 142);
	//center banana line starting left
	for (i = 0; i < 13; i += 1) {
		var startX = 25;
		var startY = 25;
		var bananaX = (startX * i * 2);
		var bananaY = (startY * i * 2);	
		banana(bananaX, bananaY);
		banana2(bananaX, bananaY);
	}
	//banana line below center line, starting left
    for (i = 0; i < 7; i += 1) {
    	var startX3 = 25;
    	var startY3 = 25;
    	var bananaX3 = startX3 * i * 2;
    	var bananaY3 = (startY3 * i * 2) + 200;
		banana(bananaX3, bananaY3);
		banana2(bananaX3, bananaY3);    	
    }
   	//2nd banana line below center line, starting left
    for (i = 0; i < 5; i += 1) {
    	var startX4 = 25;
    	var startY4 = 25;
    	var bananaX4 = startX4 * i * 2;
    	var bananaY4 = (startY4 * i * 2) + 400;
		banana(bananaX4, bananaY4);
		banana2(bananaX4, bananaY4);    	
    }
    //banana line above center line, starting left
    for (i = 0; i < 7; i += 1) {
    	var startX5 = 25;
    	var startY5 = 25;
    	var bananaX5 = (startX5 * i * 2) + 200;
    	var bananaY5 = (startY5 * i * 2);
		banana(bananaX5, bananaY5);
		banana2(bananaX5, bananaY5);    	
    }   
    //2nd banana line above center line, starting left
    for (i = 0; i < 3; i += 1) {
    	var startX6 = 25;
    	var startY6 = 25;
    	var bananaX6 = (startX6 * i * 2) + 400;
    	var bananaY6 = (startY6 * i * 2);
		banana(bananaX6, bananaY6);
		banana2(bananaX6, bananaY6);    	
    }  
	//center banana line starting right
	for (i = 0; i < 12; i += 1) {
		var startX2 = width - 100;
		var startY2 = 25;
		var bananaX2 = startX2 - (i * 25 * 2);
		var bananaY2 = startY2 * i * 2;	
		banana(bananaX2, bananaY2);
		banana2(bananaX2, bananaY2);
	}
	//banana line below center line, starting right
	for (i = 0; i < 9; i += 1) {
		var startX7 = width - 100;
		var startY7 = 25;
		var bananaX7 = (startX7 - (i * 25 * 2)) + 100;
		var bananaY7 = (startY7 * i * 2) + 100;	
		banana(bananaX7, bananaY7);
		banana2(bananaX7, bananaY7);
	}	
	//2nd banana line below center line, starting right
	for (i = 0; i < 9; i += 1) {
		var startX8 = width - 100;
		var startY8 = 25;
		var bananaX8 = (startX8 - (i * 25 * 2)) + 200;
		var bananaY8 = (startY8 * i * 2) + 200;	
		banana(bananaX8, bananaY8);
		banana2(bananaX8, bananaY8);
	}
	//banana line above center line, starting right
	for (i = 0; i < 11; i += 1) {
		var startX9 = width - 100;
		var startY9 = 25;
		var bananaX9 = (startX9 - (i * 25 * 2)) - 100;
		var bananaY9 = (startY9 * i * 2) - 100;	
		banana(bananaX9, bananaY9);
		banana2(bananaX9, bananaY9);
	}		
	//2nd banana line above center line, starting right
	for (i = 0; i < 11; i += 1) {
		var startXa = width - 100;
		var startYa = 25;
		var bananaXa = (startXa - (i * 25 * 2)) - 300;
		var bananaYa = (startYa * i * 2) - 100;	
		banana(bananaXa, bananaYa);
		banana2(bananaXa, bananaYa);
	}
	//kiwi loop
	for (x = 0; x < 7; x += 1) {
		for (y = 0; y < 8; y += 1) {
			var indent = 0;
			if (y % 2 === 0) {
                indent = 100;
			} else {
				indent = 0;
			}
			kiwi((x * 200) + indent, y * 100);
		}
	}
    //additional bananas
	banana(-50, -50);
	banana2(-50, -50);
	banana(width - 50, -50);
	banana2(width - 50, -50);
}
//banana part 1
function banana(x, y) {
    strokeWeight(0.5);
    push();
    translate(x, y);
    beginShape();
    fill(247, 190, 0);
    strokeWeight(.5);
	vertex(30, 20);
	bezierVertex(80, 20, 80, 75, 30, 75); //outer curve
	bezierVertex(50, 80, 60, 25, 30, 20); //inner curve
	endShape();
	fill(99, 66, 29);
	ellipse(30, 20, 10, 10); //banana tip
	noFill();
	strokeWeight(1);
	stroke(99, 66, 29);
	bezier(30, 20, 70, 25, 70, 65, 36, 75);//banana line
	pop();
}

//banana part 2
function banana2(x, y) { 
	push();
	translate(x, y);
	beginShape();
	fill(235, 150, 70);
	vertex(30, 20);
	bezierVertex(80, 20, 80, 75, 30, 75); //outer curve
	bezierVertex(70, 70, 70, 25, 30, 20); //inner curve
	endShape();
	pop();
}

//kiwi
function kiwi(x, y) {
	push();
	translate(x, y);
	fill(124, 83, 36);
	bezier(101 - 100, 25 - 39.5, 71 - 100, 25 - 39.5, 71 - 100, 60 - 39.5, 101 - 100, 54.5 - 39.5); //brown

	fill(120, 210, 0); 
	ellipse(0, 0, 26.5, 29.5); //green

	fill(0);
	ellipse(0, 0, 17, 14); // black

	fill(255, 228, 148); 
	ellipse(1, 0, 15, 10); //beige
	pop();
}

 

 

 

 

 

 

I really enjoyed doing this project because of the simple premise, but how rewarding it was to see the iteration of a simple design. I experimented more than I had in the past with making shapes look three dimensional (using different colors to indicate shadow for the bananas, using bezier to make the partial profile of the kiwi). I also enjoyed finding the colors that matched what I was seeing in my head. I was glad to have had a basic understanding of how modulus works in creating this project.