Category: Section A

hannahk2-Project-06

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Assignment-06-A

function setup() {
    createCanvas(550, 550);
    background(0);
}

function draw() {
	var H = hour();
    var M = minute();
    var S = second();

noStroke();
fill(200, 200, 250, 10);
//top hourglass
triangle(156, 98, 259, 257, 364, 98);
//bottom hourglass
triangle(156, 420, 259, 257, 364, 420);

//top sand
fill(255, 255, 250, 20)
triangle(216, 174, 258, 244, 304, 173);
//bottom sand
quad(198, 366, 170, 410, 350, 410, 319, 366);

//top sand circle
fill(0);
ellipse(260, 175, 86, 10);
//bottom sand circle
ellipse(259, 368, 120, 12);

//maps dot y coordinate and color based on second and day
var doty = map(S, 0, 59, 260, 368);
var dotcolor = map(H, 0, 23, 0, 255)

fill(0, 0, 255);
ellipse(259, doty, 2, 2);

}

I really enjoyed thinking of ways to show time in an abstract manner. I chose ultimately to create a representation of an abstract method of showing time, a stylized hour glass.

akluk – Section A – Looking outwards-06

For this week, the project that I have chosen to write about is Matt Deslauriers experimentation and project on generative art with node.js and canvas, from May 11th, 2016. What his program does basically, similar to some projects we do, is on a mouse press the canvas will use a new random set of values and parameters to create a new and random art work. What really intrigues me about this project is how even though the art is created through random algorithms, it still has structure and a sense of flow and ebb to it. It has patterns and colors unique to each one. The creator has a series of different palettes and the randomizer will choose one of them. It feels very organic and life like where the art just kinda grows out of the canvas. The random and unstructured splashes of colors also reminds me of Jackson Pollock’s painting. Below is a Link:
https://mattdesl.svbtle.com/generative-art-with-nodejs-and-canvas

haewanp – Project 06 – AbstractClock

abstract clock

var h;
var m;
var s;

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

function draw() {
    background(231, 79, 62);
    Hour();
    Minute();
    Second();
}

function Hour() {
    h = hour();
    
    //convert to 12 hours
    if (h > 12 || h == 0) {
        h = abs(h - 12);
    }
    
    fill(18, 6, 99);
    textSize(240);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(RIGHT);
    text(nf(h, [2], [0]), 258 + 20 * h, 205); //hour
    fill(232, 204, 199);
    rect(0, 200, 20 * h + 250, height - 200);
    fill(18, 6, 99);
    rect(0, 200, 20 * h + 250, 20);    
}

function Minute() {
    m = minute();
    
    textSize(200);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(CENTER);
    text(nf(m, [2], [0]), 4.2*m + 130, 350); //minute
    rect(4.2*m, 340, width - 4.2*m, 20);
    fill(1, 70, 117);
    rect(4.2*m, 360, width - 4.2*m, 220);
}

function Second() {
    s = second();
    
    fill(18, 6, 99);
    textSize(100);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(CENTER);
    text(nf(s, [2], [0]),5.5*s + 90, 445); //second
    rect(5.5*s + 20, 440, width - 4.2*s, 20);
    fill(228, 227, 214);
    rect(5.5*s + 20, 460, width - 4.2*s, 20);
}

When I initially designed this clock, I used illustrator rather than a paper (you can see my sketch below). It was pretty much successful to execute code as I intended in the sketch. The difference from my initial sketch is that I added each different color block below each number to have a more interesting visualization. Also, in the overall process, it is important to consider how each different time element visually coordinates together. I made a hierarchy among the hour, minute and second based on its scale. In colorwise, I made a custom color palette at ‘khroma.co’ which is an AI color generating tool based on my preference of color. It generated a bunch of color palette for me then I pick one of the nicest one then apply the color palette to this project.

Project-06-Abstract-Clock-akluk

sketch

//akluk

var com = true;
//--------------------------
function setup() {
    createCanvas(360, 360);
    background(0);
}

//--------------------------
function draw() {
    noStroke();
    //Generates space background
    if (com){
    	background(0);
    	for (var j = 0; j < 300; j++){
    		var x = random(0,360);
    		var y = random(0,360);
    		fill(255);
    		ellipse(x,y,2,2);
    	}
    	com = false;
    }

    //Clear path
    fill(0);
   	rect(0,height-50,width,50);

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    var mappedS = map(S, 0,59, 0,360);

    //initializes light spacing and length at equator
    var div = 216/24;
    var seg = div - 4;

    var cut_start = width/2-109;
    var cut_end = width/2+109;
    fill(120);
    //The actual Deathstar
    ellipse(width/2,height/2, 220,220);
    fill(80);

    //Disc
    ellipse(width/2-40,height/2-35,55,55);
    fill(60);

    //Cannon
    ellipse(width/2-43,height/2-38,15,15);
    fill(0);
    ellipse(width/2-43,height/2-38,4,4);
    noFill();
    strokeWeight(2);
    stroke(color(60,255,28));
    //Charge Ring 1
    arc(width/2-40,height/2-35,53,53,0,radians(mappedS));
    
    if (S == 59){
    	line(width/2-43,height/2-38, width/2-40,height/2-61.5);
    	line(width/2-43,height/2-38, width/2-13.5,height/2-35);
    	line(width/2-43,height/2-38, width/2-66.5,height/2-35);
    	line(width/2-43,height/2-38, width/2-40,height/2-8.5);
    	strokeWeight(5);
    	line(width/2-43,height/2-38,0,0);
    	com = true;
    }

    //Star Destroyer
    var length = 85;
    var moved = M*(width + 85)/60;
    stroke(180);
    strokeWeight(1);
    fill(180);
    triangle(width-moved,height-17, width+70-moved,height-5,width+70-moved,height-29);
    triangle(width+70-moved,height-5,width+70-moved,height-29,width+85-moved,height-17);
    rect(width+45-moved,height-30,30,10);
    rect(width+55-moved,height-35,15,10);
    rect(width+60-moved,height-45,5,10);
    rect(width+55-moved,height-42,15,3);
    stroke(90);
    strokeWeight(1);
    line(width+5-moved,height-17,width+80-moved,height-17);

    //Ring2 
    noFill()
    stroke(40);
    strokeWeight(2);
	arc(width/2-43,height/2-38,22,22,0,radians(360));
	stroke(color(30,140,40));
    //Equator Line
    stroke(80);
    strokeWeight(3);
    line(width/2-109,height/2,width/2+109,height/2);

    //Equator Lights
    for (var i = 0; i < H; i++){
    	stroke(255);
    	strokeWeight(1);
    	line(cut_start+1+i*div, height/2, cut_start+1+i*div+seg,height/2);
    }
    // Compute the widths of the rectangles

    //Texture on the Deathstar
    var box_s = width/2 - 85;
    noStroke();
    fill(105);
    for (var i = 0; i < 3; i++){
    	rect(box_s + 20*i,height/2+10,10, 40)
	}    
	rect(box_s + 60, height/2+10, 70, 20);
	for (var i = 0; i < 2; i++){
    	rect(box_s + 135 + 20*i,height/2+10,15, 60-i*10)
	}    
	rect(box_s + 60, height/2+35,20,65);
	rect(box_s + 87.5, height/2+35, 42.5,42.5);
	rect(box_s + 87.5, height/2+82.5,42.5, 10);
	arc(box_s + 50, height/2+60, 85,65, radians(90),radians(180));
	arc(box_s + 85, height/2-10,180,180,radians(270),radians(360));
	fill(120);
	rect(box_s + 100, height/2-100,10,90);
	rect(box_s + 125, height/2-90,10,80);
	rect(box_s + 150, height/2-70,10,60);
    

}

I am a huge star wars fan and this was a fun project for me. I started off of thing about rings and how that can represent time, which then lead me to the death star on how the cannon needs to charge to fire. Below are some sketches that described what I had in mind before implementing it in p5.js. The seconds are represented by the green charging ring of the cannon of the Death Star. At the end of every min, the canon will fire. The lights at the equator of the Death Star represent each hour of the day. For example, 7AM will have 7 lights lit up. Finally the Star destroyer at the bottom moves across the screen every hour.

heeseoc-LookingOutwards-06

I found this website by a computational mathematician Andrej Bauer, that generates a random artwork when you put in the title of your artwork. The name of the picture generates a number that is used to construct a mathematical formula. The formula then determines the color of each pixel in the picture. Therefore, it is not that this website gives you any kind of picture whenever you press the button, but the same name generates the same picture, which proves that it is being operated under some type of algorithm. I thought this was interesting because it is interactive, fun to look at, and I personally admired how different each pictures came out. They had completely different tones, textures, and overall vibes, which did not always reflect the title, but the part that I am the one who interprets the picture was another part that was fun about this website.

http://www.random-art.org/online/

 

 

heeseoc-Project-06-AbstractClock

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-06

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

}

function draw() {
	background(19,43,90);
	noStroke();
	angleMode(DEGREES);
	textAlign(CENTER);

	var hr = hour();
    var mn = minute();
    var sc = second();

    fill(235,226,211);
	text("happy birthday!", width/2, 40);

	//cake//
	var hrAngle = map(hr, 0, 12, 0, 360);
	fill(235,226,211);
	rect(40,height/2+75,320,150);
	fill(255,248,235);
	ellipse(width/2,height/2+75,320,100);

	//making the clock based on 12 hour//
	if (hr == 0) { 
        hr = 12; 
	    } else if (hr > 12 & hr < 24) { 
	        hr -= 12; 
	    } else { 
	        hr = hour(); 
	    }

    var maphr = map(hr, 0, 12, 0, 300);

    //making the candles appaear each hour//
	for (var i = 1; i <= maphr; i += 25) {

		var canw = 5;
	    var canh = 150;

	    var mappedmn = map(mn, 59,0, 0,canh);

				//flickers every other second//
				if(second() % 2 == 0){ 
					fill(random(100,255), random(100,255), random(200,255), 60);
					ellipse(i+62.5, height/2-100+canh-mappedmn, 75, 75);
				} else {
					fill(random(100,255), random(100,255), random(200,255), 20);
					ellipse(i+62.5, height/2-100+canh-mappedmn, 75, 75);
				}

			//candle body//
			fill(154, 188, 255);
			rect(i-canw/2+62.5, height/2+canh/2, canw, -mappedmn);
			ellipse(i+62.5, 275, canw, canw/3);
			fill(126, 162, 233);
			ellipse(i+62.5, 275-mappedmn, canw, canw/3);

			//fire//
			fill(random(100,255), random(100,255), random(200,255));
			ellipse(i+62.5, height/2-95+canh-mappedmn, 15, 30);

			fill(255,250,200);
			ellipse(i+62.5, height/2-90+canh-mappedmn+2.5, 5, 15);

}

}

When I read the term “day-long animation” in the instructions, I immediately thought of birthday, and started to wonder a way to visualize a birthday as a clock. Then, I got an idea of a candle, which I thought was a perfect way to show the passing time because the size actually shrinks, and for this project, since I needed different variables that represent different units of time (such as seconds, minutes, and hours), I thought that I would be able to manipulate the number of the candles and the flickering fire to represent those different variables. The candles flicker every other second, shrink as a minute passes, and adds as an hour passes.

mjnewman LookingOutwards-06, Section A

Berlin-based photographer, Polina Efremova, explored what would happen by taking a step back in terms of technology. A lot of us rely on the newest technology to get us through the day and I admire Efremova, by counter intuitively doing the opposite. Efremova’s series called “Destruction” organically and randomly generates glitch art. However, Efremova was forced to abandon this project due to the sudden popularity in glitch art at the time. She thought that her releasing this type of workwould just underscore the meaning and intent behind the photo.

The process is a rather analog process but is full of randomness. Efremova would take a video with current photography technology and play it on an outdated computer, which the computer would have trouble rendering thus ending up with a glitchy screen. Efremova would be able to easily confuse the computer with a series of rapid pauses and plays thus resulting in the glitches. The outcome is some highly complex and complicated images that take some time to decode created by mechanical randomness.

hdw – Looking Outwards – 06

Daniel Brown is a designer, coder and artist for commission that takes on a variety of projects. One of his jobs was to create a visual display for Selfridge’s in London. In his work called “Appliqué”, he made a fractal textile fabric with generative code. It’s randomized, and never repeats itself. It seems like the code would have a lot of recursive functions that calls itself in for-loops to establish the relationship from one part of the textile to the next. Daniel Brown was inspired by traditional embroidery heritage and working with fabrics and textiles, so his work was made to imitate the movement and texture of the fabric. You can see more of his work here.

Above are some shots of his display.

amui1-Project-06-Abstract-Clock

amui1-p6

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-06

//variables for solar system
solarSize = 325;
//variables for star

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

function draw() {
    background(25,25,62);

    //get time
    var hr = hour();
    var twelveHr = hr%12;
    var min = minute();
    var sec = second();

    //print time
    fill(255);
    strokeWeight(0);
    text(nf(twelveHr,2,0) + ':' + nf(min,2,0) + ':' + nf(sec,2,0),30,30);

    //border of solar system
    noFill();
    stroke(60,60,85);
    strokeWeight(6);
    ellipse(width/2,height/2,solarSize,solarSize);
    ellipse(width/2,height/2,solarSize-100,solarSize-100);


    //HOURS

    //flag stick
    push();
    translate(width/2,height/2);
    rotate(hr);
    stroke(255);
    strokeWeight(5);
    line(0,0,0,90);
    pop();

    //flag
    push();
    translate(width/2,height/2);
    fill(255);
    strokeWeight(0);
    rotate(hr);
    rectMode(CENTER);
    fill(164,216,150);
    rect(-25,78,40,30,5);
    pop();

    //flag symbol
    push();
    translate(width/2,height/2);
    fill(255,255,0);
    strokeWeight(0);
    rotate(hr);
    ellipse(-25,78,10,10);

    pop();

    //sun

    //assign random variables to make sun move
    var sunX = random(-.5,.5);
    var sunY = random(-.5,.5);

    fill(255,198,0);
    strokeWeight(0);
    ellipse(width/2,height/2,solarSize/4,solarSize/4);
    //flares
    for (i=0; i < 20; i++) {
      push();
      translate(width/2,height/2);
      rotate(TWO_PI*i/20);
      fill(255,172,0);
      triangle(10+sunX,50+sunY,40-sunX,20+sunY,20+sunX,30+sunY);
      pop();
    }


    //SECONDS

    //star
    fill(255,255,0);
    //makes star move
    var offset = second();
    //maps second to width of the canvas
    var offset = map(offset,0,60,0,width);
    translate(0,50);
    var xStar = [16+offset,20+offset,
                30+offset,25+offset,
                23+offset,15+offset,
                7+offset,9+offset,
                4+offset,14+offset];
    var yStar = [5,10,
                15,20,
                30,25,
                30,20,
                15,10];

    var lenStar = xStar.length;

    beginShape();
    for (var i = 0; i <lenStar; i++) {
      vertex(xStar[i],yStar[i]);
    }
    endShape();
    //shooting star
    stroke(255);
    strokeWeight(2);
    line(-50+offset,15,0+offset,15);
    line(-50+offset,20,0+offset,20);

    //spaceship
    fill(211,211,211);
    strokeWeight(1);

    //MINUTES

    //makes spaceship move
    var shipOff = minute();
    var shipOff = map(shipOff,0,60,0,width);
    //variables for ship x and y movement
    var sxDist = 6;
    var syDist = 10;
    //to test
    //print('subtracted=' + shipOff/syDist);

    //draws ship
    stroke(0);
    translate(0,0);

    //right side of circle
    //left side of circle
    //base triangle
    triangle(-5+shipOff,height-90-shipOff/syDist,
            27.5+shipOff,height-75-shipOff/syDist,
            60+shipOff,height-90-shipOff/syDist);
    //base little circles
    ellipse(27.5+shipOff,height-73-shipOff/syDist,8,3);
    ellipse(27.5+shipOff,height-70-shipOff/syDist,6,3);
    ellipse(27.5+shipOff,height-66-shipOff/syDist,4,3);

    //body of ship
    strokeWeight(0);
    //light pink
    fill(249,170,202);
    rect(-5+shipOff,height-95-shipOff/syDist,63,10,5);
    //darker pink
    fill(241,43,122);
    rect(-10+shipOff,height-100-shipOff/syDist,75,8,5);

    // top triangle
    fill(172,153,198);
    triangle(-5+shipOff,height-100-shipOff/syDist,
            27.5+shipOff,height-120-shipOff/syDist,
            60+shipOff,height-100-shipOff/syDist);
    fill(209,209,227);
    //top window thingy
    arc(27.5+shipOff,height-106-shipOff/syDist,35,40,PI,0,CHORD);

    //draws alien


    //alien head
    fill(164,216,150);
    ellipse(27.5+shipOff,height-111-shipOff/syDist,10,10);
    stroke(164,216,150);
    strokeWeight(2);
    //alien attenae
    line(27.5+shipOff,height-111-shipOff/syDist,
          23.5+shipOff,height-119-shipOff/syDist);
    line(27.5+shipOff,height-111-shipOff/syDist,
          31.5+shipOff,height-119-shipOff/syDist);
    ellipse(22.5+shipOff,height-120-shipOff/syDist,5,1);
    ellipse(33.5+shipOff,height-120-shipOff/syDist,5,1);

    //alien eyes
    fill(0);
    strokeWeight(0);
    ellipse(25.5+shipOff,height-112-shipOff/syDist,2,2);
    ellipse(29.5+shipOff,height-112-shipOff/syDist,2,2);

}

I found this project to be one of the more challenging assignments. However, I liked it because there was a lot of room for creativity. Similar to the other projects, I wanted to tell time, but somehow include a story. I had the most trouble coordinating the rotations with the hours/seconds/minutes. In the future, I would like to spend more time expanding on that further.

 

This was what my idea started out as.

amui1-LookingOutwards-06

The piece I chose to reflect on today is “Two hands, one loop.” This is a piece by the artist, J.Eric Morales.

I chose this piece because the shapes and outlines are computed and drawn to be very random. But in the end, the shapes and outlines have a purpose and form something recognizable. In fact, the shapes are created of a single line. Learning this, I admire this piece even more. At first glance, the portions besides the hand look unstructured. However, all being strung together by one single line gives the piece unity and cohesiveness. The random movement of the line forms shapes come together that and even form a greater story. I really admire this because it shows that the artist had such an abstract way of thinking, but a very definite plan and objective of the piece.

I couldn’t find any information on how the artist computed the algorithms and randomness in the work. But, I suppose he had the line have random distance between the first and second point and then when it got to the placements of the hand, the random possibilities of distances got smaller.

Link to other projects Morales completed are found here

Morales full page can be found here