Month: October 2020

Looking Outwards – Randomness

Iris Yip
15-104 Section D
Looking-Outwards

This week, I am taking a look at Aizek Live‘s series of Generative Studies, which incorporates elements of randomness through allowing an autonomous system to make decisions on its own, partially through an added element of randomness and otherwise through the design of a system for the sole purpose of making these decisions.

All of the projects were created in Notch, running in real-time on Geforce 1080 Ti. I was particularly drawn to this project because it reinforces the idea that there is such a thing as being “designed for randomness”, where certain parameters are still set in place in order the limit the scope of the design. I think the artist did a good job in their rationale highlighting the importance of restraints in design to help achieve something that ‘appears’ completely random or generative, whereas true randomness can may in actuality appear more skewed towards one result over the other.

Project-06-Abstract-Clock

sketch

  // Xander Fann xmf Section B

function setup() {
    createCanvas(600, 600);
    background(220);
}

function draw() {
    var s = second()*10;
    var m = minute()*10;
    var h = hour()/2;
    background(190, 210, 255);//sky
    noStroke()
    //human
    push();
    translate(m,0)
    fill(0)
    circle(0,390,20) //head
    ellipse(0,430,30,50) // body
    pop();
    //sun
    fill(255,255,0,150); // yellow, lowered opacity
    circle(width/2,height/2,h*30);
    if (h>= 12) {circle(width/2,height/2,h/30); //when past 12 the sun shrinks
    }
    //cloud
    push();
    translate(s,0);
    for(x = 25;x<=145;x+=40){ // three clouds changing arch height and opacity
      fill(255,255,255,x/1.5);arc(x,200,200,x*1.5,PI,0)
    }
    pop();
    //bridge and ground
    fill(142, 224, 137);
    stroke(176, 147, 91);
    strokeWeight(7);
    line(0,450,600,450);
    noStroke();
    arc(0,height,400,300,PI,0);//ground
    arc(width,height,400,300,PI,0);

}

Back then the daylight outdoors was the only way to tell when it was time to work or sleep. My abstract clock is determined by the movement of the sky, the movement of the human doing work and the size of the sun. The sun is getting larger as time increases towards the day and the man will always be moving to do work.

Project 6 – Abstract Clock

sketch
function setup() {
    createCanvas(600,600)
    background(0)
    angleMode(DEGREES);

    fill(10);
    ellipse(width / 2, height / 2, 400, 400);
}

function draw() {

    //movement
    a = sin(frameCount)
    b = cos(frameCount)

    translate(width / 2, height / 2);
    background(0, 10)

    strokeWeight(0.5);
    //month
    push();
    stroke(155, b * 100 + 55, 155);
    rotate(180 / 12 * month() - 45);
    line(300 * a, 200 * b, 100 * b, 50 * a);
    pop();
    //day
    push();
    stroke(a * 100 + 55, 155, 155);
    rotate(180 / 31 * day() - 45);
    line(50 * a, 10 * b, 300 * b, 300 * a);
    pop();

    strokeWeight(3);
    //hour
    push();
    stroke(100);
    rotate(180 / 24 * hour() - 45);
    line(200 * a, 200 * b, 200 * b, 200 * a);
    pop();
    //min
    push();
    stroke(b * 100 + 155, a * 100 + 155, 255);
    rotate(180 / 12 * min() - 45);
    line(175 * a, 175 * b, 175 * b, 175 * a);
    pop();
    //second
    push();
    stroke(second() * 2 + 135, 375 - second() * 2, 255);
    rotate(180 / 60 * second() - 45);
    line(150 * a, 150 * b, 150 * b, 150 * a);
    pop();

};

For this project, I wanted to go for a more abstract way to display a conventional-looking clock in order to challenge the way we look and think about time. I wanted to focus on temporality and make it so that even the clock base itself isn’t necessarily visible or present.

LO – 6 – Randomness

Tree Growth by Her Thorp, 2006

Tree Growth is a piece of computer generated art that uses randomness to generate realistic looking trees of all shapes and sizes. It uses various leaf shapes and different species of trees, and the leaf color can also change based on the different seasons. I find this artwork really fascinating because the algorithm makes the trees look almost photo-realistic, which sets it apart from other computer-generated tree art. Its use of randomness is what makes the trees look very realistic. As a painter, I know that creating leaves on trees is a very random process, and the program accurately mimics this random process.

https://www.jerthorp.com/treegrowth

To create this art, Thorp used the Lindenmayer Systems. In 2006, the artwork was featured in the “Into the Woods” collection in London at the Digital Well Being Labs.

Project-06-Abstract-Clock

For this project, I wanted to make the time easy to tell. I did not want the viewer to have to analyze every detail to be able to understand what time it was. Therefore I tried to keep it simple by having the boxes represent the hour number, the sky background represent what time of the day it is, and the coins to represent how many minutes have passed. I also made the piranha plant rise with respect to every second. When a minute passes, the piranha plant starts back at the base of the pot. While doing this project, I had a lot of difficult making each detail of Mario. I did not want to just import an image of him, and wanted to challenge myself by creating him through layers of shapes. In my thought process, I wrote down a lot of color combinations for each part of Mario, but I mainly referred to an actual image/screenshot of a Mario game (attached below.) Also attached to this post is some progress photos I took as I worked on the project.

sketch
//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//Project-06

function setup() {
    createCanvas(480, 480);
    background(95, 201, 247); 

}
function draw() {
	var h = hour(); 
	var s = second();


	if (h < 18 & h > 6) { 
	//if it is morning time, background = light color
		background(95, 201, 247);
	}
	else {
	//if it is night, background = dark color
		background(20, 25, 68);
	}
	//yellow ovals in background
	fill(220, 137, 20);
	stroke(180, 107, 40);
	ellipse(5, 360, 60, 100); //shape
	line(0, 320, 23, 320); //lines on air balloons
	line(0, 330, 28, 330);
	line(0, 340, 32, 340);
	line(0, 350, 34, 350);
	line(0, 360, 35, 360);
	ellipse(100, 350, 90, 130);
	line(100, 315, 138, 315);
	line(100, 330, 142, 330);
	line(100, 345, 144, 345);
	line(90, 360, 140, 360);
	line(90, 375, 140, 375);
	ellipse(240, 345, 80, 90);
	line(207, 320, 273, 320);
	line(200, 345, 280, 345);
	line(207, 370, 273, 370);
	ellipse(275, 380, 60, 110);
	line(245, 380, 305, 380);
	line(240, 365, 303, 365);
	line(242, 360, 302, 360);
	line(244, 355, 301, 355);
	line(246, 350, 300, 350);
	line(246, 345, 297, 345);
	line(255, 340, 294, 340);
	ellipse(470, 370, 70, 85);
	line(445, 340, 480, 340);
	line(443, 345, 480, 345);
	line(441, 350, 480, 350);
	line(439, 355, 480, 355);
	line(437, 360, 480, 360);
	line(435, 365, 480, 365);
	line(437, 370, 480, 370);
	line(437, 375, 480, 375);
	line(437, 380, 480, 380);
	line(437, 385, 480, 385);
	ellipse(400, 390, 100, 110);
	line(350, 390, 450, 390);
	line(352, 375, 449, 375);
	line(361, 355, 445, 355);

    //trees in background
	fill(75, 165, 75);
	noStroke();
	rect(0, 400, 480, 80);
	circle(10, 400, 80);
	circle(8, 360, 30);
	circle(75, 400, 40);
	circle(105, 400, 30);
	circle(135, 400, 70);
	circle(113, 380, 30);
	circle(135, 370, 40);
	circle(160, 380, 30);
	circle(165, 400, 40);
	circle(195, 400, 50);
	circle(260, 400, 80);
	circle(245, 370, 40);
	circle(260, 360, 40);
	circle(275, 370, 40);
	circle(315, 400, 30);
	circle(350, 400, 60);
	circle(400, 400, 40);
	circle(450, 400, 60);

	//clouds
	fill(250, 130); //half transparent alpha
	noStroke();
	ellipse(40, 60, 100, 28);
	ellipse(240, 190, 190, 40);
	ellipse(350, 15, 130, 20);
	ellipse(420, 100, 180, 30);

    //** MARIO **
    //the ground of the scene
    noStroke();
    fill(250, 220, 103); //orange-yellow layer
    rect(0, 445, 480, 35);
    orangecircles(); //call for orange curtain pattern
    fill(108, 220, 68);
    rect(0, 430, 480, 17); //green layer
    greencircles(); //call for green curtain pattern

    //Mario's left shoe
    fill(105, 67, 45); //brown color
    circle(33, 407, 32); //heel of shoe
    circle(80, 415, 36); //mid of shoe
    circle(89, 416, 39); //toe of shoe
    quad(33, 422, 80, 432.5, 80, 400, 33, 400); //sole of shoe

    //Mario's left leg that is planted on the ground
    fill(31, 73, 180);
    quad(60, 300, 130, 300, 80, 395, 25, 390); //leg
    ellipse(53, 395, 61, 27); //hem of pants
    stroke(31, 73, 180); //filling in spaces for the shape
    line(78, 370, 80, 395);

    //Mario's left arm 
    fill(244, 44, 42); //red
    noStroke();
    quad(148, 235, 110, 205, 155, 140, 180, 150); //arm
    fill(255); //white glove
    ellipse(162, 140, 60, 50); //glove

    //visor part of hat
    fill(147, 42, 43); //red
    ellipse(158, 118, 140, 30);
    
    //Mario's head
    fill(248, 217, 191); //skin tone
    ellipse(125, 115, 95, 110);
    ellipse(124, 148, 85, 90);
    rect(70, 105, 50, 100); //neck

    //Mario's nose
    fill(248, 217, 191); //skin tone
    ellipse(175, 152, 30, 25); //tip of nose
    ellipse(160, 162, 45, 10);

    //Mario's hair
    fill(74, 45, 32); //brown hair
    rect(60, 65, 35, 100);
    ellipse(90, 155, 20, 25); //behind ear
    circle(63, 158, 20);
    circle(75, 160, 30);
    triangle(135, 100, 130, 150, 100, 100); //sideburn
    ellipse(122, 135, 15, 30);
    ellipse(123, 140, 15, 23);
    circle(128, 144, 14);
    triangle(133, 145, 135, 100, 125, 125);

    //red Mario hat
    fill(224, 44, 42); //red
    noStroke();
    rect(60, 75, 120, 40);
    beginShape(); //connecting shape to make rounded top
    curveVertex(80, 98);
    curveVertex(80, 98);
    curveVertex(80, 58);
    curveVertex(105, 43);
    curveVertex(130, 42);
    curveVertex(150, 41);
    curveVertex(160, 39);
    curveVertex(170, 38);
    curveVertex(179, 60);
    curveVertex(177, 70);
    curveVertex(177, 70);
    endShape();
    line(175, 30, 180, 30);
    noStroke();
    ellipse(177, 73, 60, 75);
    ellipse(67, 85, 50, 60);

    //white Mario logo on hat
    fill(255); //white circle
    stroke(255);
    ellipse(197, 80, 20, 40);
    //red M letters
    stroke(224, 44, 42);
    strokeWeight(4);
    line(195, 70, 193, 92);
    line(195, 70, 198, 80);
    line(198, 81, 201, 68);
    line(201, 68, 203, 89);

    //Mario's ear
    fill(248, 217, 191);
    stroke(208, 177, 151);
    strokeWeight(1);
    ellipse(100, 128, 30, 40); 
    stroke(238, 207, 181); //inner ear crevice
    ellipse(100, 128, 15, 20);

    //Mario's eye
    fill(255); //white of his eye
    ellipse(160.5, 135, 14, 30);
    fill(105, 180, 255); //blue of eye
    noStroke();
    ellipse(163, 139, 8, 20);
    fill(0); //black of eye
    ellipse(164, 141, 5, 10);

    //Mario's eyebrow
    stroke(60, 50, 50);
    strokeWeight(3);
    noFill();
    arc(162, 128, 10, 25, PI + QUARTER_PI, 0);

    //darker red of visor part of cap
    fill(204, 2, 3);
    noStroke();
    arc(195, 100, 80, 40, 0 + 0.5*QUARTER_PI, PI, CHORD);
    triangle(155, 100, 195, 100, 227, 114);

	//drawing Mario's abdomen
	fill(41, 93, 200); //blue jean clothing color
	noStroke();
	ellipse(100, 250, 100, 130);
	circle(90, 210, 80, 50);
	circle(100, 225, 80);
	circle(80, 280, 70); //butt area

	//the following lines fill space to make smooth abdomen
	strokeWeight(10);
	stroke(41, 93, 200); 
    line(55, 250, 51, 270); 
	line(80, 310, 100, 310);
	line(55, 220, 55, 250);

	//Mario's right shoe in the air
	fill(105, 67, 45); //brown color
	noStroke();
	circle(164, 362, 32); //heel of shoe
	circle(201, 350, 36); //mid of shoe
	circle(207, 347, 39); //toe of shoe
    quad(165, 377, 205, 366.5, 195, 340, 165, 350); //sole of shoe

    //Mario's right leg that is in the air
    fill(41, 93, 200);
    noStroke();
    ellipse(125, 290, 120, 50);
    circle(165, 280, 50); //knee cap
    quad(140, 300, 190, 280, 201, 330, 150, 345); //calf
    quad(200, 329, 203, 328, 150, 355, 150, 344); //calf
    
    //pant hem
    beginShape(); //curve shape so the hem looks curved
    curveVertex(150, 354);
    curveVertex(150, 354);
    curveVertex(160, 352);
    curveVertex(180, 347);
    curveVertex(195, 335);
    curveVertex(200, 330);
    curveVertex(202, 327);
    curveVertex(202, 327);
    endShape();
    strokeWeight(10);
    stroke(41, 93, 200);
    line(165, 259, 145, 255); //line making thigh look filled
    
    //making jean lines
    stroke(31, 83, 170);
    strokeWeight(3);
    line(90, 200, 90, 270); //side seam
    line(118, 246, 149, 251); //line on top thigh
    line(145, 313, 163, 288); //line at knee
    line(172, 305, 180, 345); //line at right calf
    stroke(21, 63, 140); //darker line for darker leg
    line(90, 317, 50, 407); //left leg line
    noStroke();

    //Mario's right arm that goes off the screen
    fill(244, 44, 42);
    noStroke();
    ellipse(85, 200, 60, 50);
    quad(45, 160, 95, 180, 90, 225, 45, 210); //bicep area
    quad(45, 160, 0, 180, 0, 230, 45, 210); //forearm

    //yellow button on Mario's overalls
    fill(255, 253, 104);
    ellipse(135, 220, 10, 20);

    //Mario's mustache
    fill(35, 23, 17);
    //edge of mustache
    arc(145, 160, 20, 10, 0, PI + QUARTER_PI); 
    //inner part of mustache
    arc(158, 164, 15, 10, 0, PI + QUARTER_PI); 
    //Mario's smile
    stroke(100);
    noFill();
    strokeWeight(2);
    arc(158, 170, 20, 10, 0.5*PI, PI); 

    //PIRANHA PLANT MOVES WITH SECONDS

    //stem of plant growing with seconds
    stroke(79, 145, 45);
    strokeWeight(10);
    //line(425, 366, 425, 366 - s);
    quad(423, 380, 423, 340 - s, 427, 340 - s, 427, 380);

    //piranha red head
    fill(215, 15, 15);
    noStroke();
    circle(425, 330 - s, 80); //red circle
    fill(255);
    circle(423, 360 - s, 13); //white spots on piranha head
    circle(395, 325 - s, 13);
    circle(405, 345 - s, 15);
    circle(435, 340 - s, 13);
    circle(457, 325 - s, 10);
    circle(455, 345 - s, 10);

    //making the mouth of piranha open
    if (h < 18 & h > 6) {
    	//using light blue color to match background
    	fill(95, 201, 247); 
    }
    else {
    	//using dark blue color to match bckground
    	fill(20, 25, 68);
    }
    triangle(425, 345 - s, 340, 280 - s, 510, 280 - s);
    
    //teeth of piranha mouth
    stroke(220); //outline color = grayish
    fill(245); //white teeth
    strokeWeight(1);
    triangle(418, 320 - s, 416, 340 - s,  408, 330 - s); 
    triangle(405, 310 - s, 403, 330 - s, 395, 320 - s);
    triangle(434, 320 - s, 441, 330 - s, 431, 340 - s);
    triangle(450, 310 - s, 457, 320 - s, 447, 330 - s);

    //white lips of piranha mouth
    fill(245);
    noStroke();
    circle(382, 315 - s, 15);
    triangle(377, 320 - s, 425, 345 - s, 385, 308 - s); //left lip
    circle(468, 315 - s, 15);
    triangle(463, 309 - s, 425, 345 - s, 473, 320 - s); //right lip

    //pot for the plant
    fill(75, 118, 68);
    noStroke();
    rect(400, 380, 50, 50); //base of pot
    stroke(55, 98, 48);
    strokeWeight(1);
    rect(390, 370, 70, 20); //top part of pot

    //draws coin for each minute
    for (m = 0; m < minute(); m ++) {
    	row = Math.floor(m / 4);
    	//15 rows of coins, 4 columns of coins
    	coins(240 + (m - 4 * row) * 28, 19 + (29 * row)); 
    }
    //draws boxes for each hour
    for (h = 0; h < hour(); h ++) {
    	row1 = Math.floor(h / 6);
    	//3 rows of boxes,
    	//4 columns in each row
    	boxes(336 + (h - 6 * row1) * 24, 10 + (35 * row1));
    }

    //MUNCHKIN stomach
    fill(143, 121, 91);
    noStroke();
    ellipse(210, 429, 18, 11);
    ellipse(210, 426, 16, 4);

    fill(134, 80, 50); //brown body color
    //munchkin feet
    ellipse(202, 433, 13, 8);
    ellipse(218, 433, 13, 8);
	noStroke();
	//layering body shaper
	ellipse(210, 400, 30, 40); 
	circle(203, 410, 30);
	circle(217, 410, 30);
	rect(203, 410, 14, 15);
	triangle(200, 385, 190, 403, 210, 400);
	triangle(220, 385, 230, 403, 210, 400);
	// munchkin eyes
	fill(255); //white of eyes
	stroke(230);
	ellipse(204, 400, 6, 13);
	ellipse(217, 400, 6, 13);
	fill(0); //black of eyes
	ellipse(205, 399, 5, 8);
	ellipse(216, 399, 5, 8);
	fill(255); //white dot in eyes
	circle(205, 398, 1);
	circle(216, 398, 1);
	//munchkin mouth
	fill(255);
	stroke(210);
	strokeWeight(1);
	triangle(197, 414, 199, 408, 202, 412); //teeth
	triangle(223, 414, 221, 408, 218, 412); //teeth
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(210, 415, 25, 4, PI, 0); //frown line
	
	//munchkin left eyebrow
	stroke(0);
	strokeWeight(2);
	noFill();
	beginShape();
	curveVertex(193, 384)
	curveVertex(193, 384);
	curveVertex(195, 383);
	curveVertex(197, 383);
	curveVertex(199, 384);
	curveVertex(202, 387);
	curveVertex(203, 389);
	curveVertex(205, 392);
	curveVertex(207, 394);
	curveVertex(207, 394);
	endShape();
    //munchkin right eyebrow
	beginShape();
	curveVertex(213, 394);
	curveVertex(213, 394);
	curveVertex(215, 392);
	curveVertex(217, 389);
	curveVertex(219, 387);
	curveVertex(221, 384);
	curveVertex(223, 383);
	curveVertex(225, 383);
	curveVertex(228, 384);
	curveVertex(228, 384);
	endShape();
}

function coins(x, y) { 
	fill(242, 220, 95); //yellow color
	stroke(222, 200, 75); //darker yellow to highlight shape
	ellipse(x, y, 13, 25); //shape of coin
	fill(222, 200, 75);
	rect(x - 1, y - 10, 3, 21); //vertical line on coin
}

function boxes(x, y) {
	fill(151, 88, 53); //brown color
	strokeWeight(2); //outline of box
	stroke(0); 
	square(x, y, 24); //size of each box
	strokeWeight(1); //thickness of brick lines
	line(x, y + 8, x + 24, y + 8); //lines to make bricks
	line(x, y + 16, x + 24, y + 16);
	line(x + 12, y, x + 12, y + 8);
	line(x + 8, y + 8, x + 8, y + 16);
	line(x + 16, y + 8, x + 16, y +16);
	line(x + 12, y + 16, x + 12, y + 24);
}

function greencircles() { //will "curtain" the green grass
	for (var a = 0; a < 485; a += 20) {
		fill(108, 220, 68); //green color
		circle(a, 445, 20);
	}
}

function orangecircles() { //layer that will "curtain" yellow grass
    for (var b = 0; b < 485; b += 25) {
        fill(238, 117, 40); //dark orange color
        ellipse(b, 463, 35, 17);
        fill(250, 220, 103); //orange-yellow color
        ellipse(b, 457, 35, 17);
        
    }
}
Here is the first progress picture I had, which somewhat highlights the difficulty I had in creating Mario from scratch.
Here is a progress pic as I started layering shapes to create Mario’s body. I had the easiest time making the piranha plant because it was based on simpler shapes.
This is the image I was referring to as I made my project. It was not very easy because I was limiting myself to a smaller canvas, and had to leave out some details that I really wanted to include. (Such as the Toad Mushrooms).

Project-06-Abstract Clock

For the clock I wanted to create something that had a gradient, and where the time could not always be seen at every second, to get people to focus a bit more on the changing condition. Eventually I settled on a clock which had a gradient of boxes which changed every two seconds, and slowly revealed the time in the middle of the smallest box, with circles. I also liked the idea of using the same shape for both the minutes and hours, with only the size to differentiate the two.

sketchDownload
var theta = [];
var side = [];
var c = [];
var s;
var h;
var mx = [];
var my = [];


function setup() {
    createCanvas(480, 480);
    background(220);

    h = hour();

    for (let i = 0; i <= 29; i++) {
      theta[i] += 2;
      c[i] = ((8.5*i));
      if (i == 0) {
        side[i] = 480
      } else if (i > 0) {
        side[i] = (side[i-1])-((side[i-1])/40);
      }
    }

    for (let i = 0; i < 60; i++) {
      if (i %6 == 0) {
        mx[i] = -5;
      } else {
        mx[i] = mx[i-1]+20;
      }
      if (i < 6) {
        my[i] = -90;
      } else {
        my[i] = my[i-6]+20;
      }
    }
}

function draw() {
  s = floor((second())/2);
  translate(240,240);
  rectMode(CENTER);

  for (let i = 0; i <= s; i++) {
    noStroke();
    rotate(radians(theta[i]));
    fill(c[i]);
    rect(0,0,side[i],side[i]);
  }

  if (h > 12) {
    h = h-12;
  }

  if (h < 7) {
    for (let i = 1; i <= h; i ++) {
      fill(0);
      circle(-80,-122+(i*35),30);
    }
  } else {
    for (let i = 1; i <= 6; i ++) {
      circle(-80,-122+(i*35),30);
    }
    for (let i = 1; i <= h-6; i++) {
      circle(-45,-122+(i*35),30);
    }
  }

  for (let i = 0; i < minute(); i++) {
    circle(mx[i],my[i],17);
  }
}

LookingOutwards-06

The work is called “e4708” by Mark Wilson. This is a random computer generated artwork. I admired how there are aspects of randomness and some aspects of organized arrays and shapes in the artwork. It is very unique because it was randomly generated, but it also is unique in the sense that it looks like a colorful PCB board for computers. I think this was really eye-catching because the artwork is random but still reminds me of something tangible and real. The artist supposedly used layers that helped produce some of the calculated repetition in the artwork, but most of the aspects were “left to chance” and were randomly chosen by the computer. Mark Wilson’s artistic sensibilities are manifested in this final form, because based on his previous works, a lot of his works use repetition of circles and squares in rows and columns, and all seem to look somewhat like machinery/computer parts. 

https://www.widewalls.ch/magazine/computer-generated-art-10-artworks

This is “e4708” by Mark Wilson, in which he combined both randomly generated pieces of art and his own calculated repetitions.

Project-06-Abstract Clock

sketchDownload
var walking = 0;
var rising = 230;
function setup() {
    createCanvas(480, 480);
    background(0);
    
    
}

function draw() {

	background(98, 97, 153);

	noStroke();
    
    fill(135, 154, 206);
  //moon
	ellipse(380, 126, 228, 228);

	var hr = map(hour(), 0, 59, 152, 620);
  //circle eclipses moon at hourly pace
    push();
	fill(98, 97, 153);
	ellipse(hr, 126, 228, 228);
	pop();

  //background graves
  fill(22, 13, 71);
	ellipse(370, 408,1074, 311);

	 for(var g = 304; g < 440; g+=52){
            graves2(g, 225);
        
    }

  //backgroung fence
  fence2(435, 203, 0.4);


  //zombie moves at seconds pace
    push();
    translate(map(second(), 0, 59, -20, width+ 20), walking);
	zombie();
	pop();

	fill(38, 34, 98);
	ellipse(57, 480,1074, 311);

  //foreground fence
	fence1(12, 200);


	

   //foreground graves
   for(var d = 47; d < 370; d+=130){
            graves1(d, 292);
        
    }

  //hand raises from ground at minute pace
  push();
  translate(rising, map(minute(), 0, 59, 500, 410));
	hand();
	pop();

	
	
  //ground in front of hand
  fill(38, 34, 98);
	rect(0, 410, 400, 200);
}

function graves1(x,y) {

           push();
           translate(x,y);
           noStroke();
           


           fill(22, 13, 71);
           rect(-13, 0, 67, 100);
           //grave front
           fill(38, 34, 98);
           rect(0, 0, 67, 100);

           fill(22, 13, 71);
           rect(9, 12, 51, 5);
           fill(22, 13, 71);
           rect(8.5, 24, 51, 5);


           
	       pop();
	              

}

function graves2(x,y) {

           push();
           translate(x,y);
           noStroke();
         


           fill(22, 13, 71);
           rect(0, 0, 27, 41);


           
	       pop();
	              

}

function fence1(x,y) {

           push();
           translate(x,y);
           noStroke();
         

           fill(38, 34, 98);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function fence2(x,y,s) {

           push();
           translate(x,y);
           scale(s);
           noStroke();
         

           fill(22, 13, 71);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function zombie() {

           push();
           
           noStroke();
         

           fill(38, 34, 98);

           //head
           ellipse(7, 238, 14, 20);

           //shoulders
           ellipse(7, 250, 14, 4.5);

           //arm1
           rect(10, 255, 29, 4);
           ellipse(39, 260, 5.5, 10);

           //neck
           rect(4, 246, 5.5, 7.5);

           //torso
           rect(0, 250, 14, 26);

           //leg1
           rect(0, 276, 8, 35);



           //foot1
           rect(0, 311, 16, 3);

           ellipse(8, 311, 16, 6);

           //arm2
           push();
           rotate(radians (-20));
           translate(-86,235);
           rect(5, 5, 29, 4);
           pop();
           ellipse(34, 248, 5.5, 10);

           push();
           rotate(radians (-20));
           translate(-86,235);
           //leg1
           rect(-3, 26, 8, 35);

           //foot1
           rect(-3, 61, 16, 3);

           ellipse(5, 61, 16, 6);
           pop();
	       pop();
	              

}

function hand() {

           push();
           
           scale(1.7);
           noStroke();
           push();
           
           fill(22, 13, 71);

           beginShape();
           vertex(0, 0);
           vertex(0, -18);
           vertex(-6, -25);
           vertex(-5.8, -30.8);

           vertex(-4.5, -34);
           vertex(-2.7, -33);
           vertex(-3, -28);
           vertex(-0.2, -26);

           vertex(0.2, -36);
           vertex(-1.5, -38);
           vertex(0, -40);
           vertex(3, -36.7);

           vertex(3, -28.5);
           vertex(4.5, -37);
           vertex(2.25, -40.5);
           vertex(3.9, -42.25);

           vertex(6.7, -38);
           vertex(6.7, -30);
           vertex(8.6, -37);
           vertex(7.2, -41);

           vertex(8.6, -42.7);
           vertex(11.2, -37.4);
           vertex(9.8, -28.3);
           vertex(12, -34.8);

           vertex(12, -38);
           vertex(13.5, -38.5);
           vertex(14.1, -34.5);
           vertex(10.8, -20);

           vertex(10.5, 0);


           endShape(CLOSE);
         
           pop();

          

           
	       pop();
	              

}

Project 06-Abstract Clock

project-06-abstractClock 
/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A
Project-06

This program draws an abstract clock that changes over time.

*/

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

function draw() {
    var c=255-(hour()*10.5);
    background(c);
    var s=second();
    var m=minute();
    var h=hour();
    var mx=10;
    var sx=11;
    var hx=10;

    //draws the hours
    for (H=0; H<h; H++) {
        var y=10;
        var width=15;
        var height=50;
        var dx=18;
        fill(230, 180, 170);
        rect(hx, y, width, height);
        hx+=dx;
    }

    //draws the minutes
    for (M=0; M<m; M++) {
        var y=65;
        var width=2;
        var height=25;
        var dx=8;
        fill(250,120,120);
        rect(mx, y, width, height);
        mx+=dx;
    }

    //draws the seconds
    for (S=0; S<s; S++) {
        var y=95;
        var width=2;
        var dx=8;
        if (c>150) {
            fill(0);
        }
        else {
            fill(255);
        }
        circle(sx, y, width);
        sx+=dx;
    }  
}

For this project, I wanted to create a clock that visually showed the number of hours, minutes, and seconds. I chose to have this be a 24 hour clock as opposed to 12 hours because 12 hour clocks make no sense. To do this, I created for loops that presented n number of objects based on the number of hours/minutes/seconds. I decided that hours were most important and then minutes and then seconds so I created visual size differences to reflect that logic. Also, I wanted there to be some reflection of the natural world, so I have the background getting gradually darker with each passing hour. I found the hour(), minute(), and second() built-ins to be quite confusing, but it is quite exciting to see them actually working.

Looking Outwards-06

I have been quite interested in random generators and found this random art generator.

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

This program was created by Andrej Bauer in ocaml. The website contains a web version using ocamljs. To run the program, you are able to input a title for your piece. Based on the documentation, works are normally composed of two words. The words trigger a formula that randomly generates pseudo-random numbers which then create the picture. It is pseudo-random because the same word will always trigger the same number output and create the same artwork. Within the two word name, the first name determines the colors and layout of focal point. The second word determines the arrangement of the pixels in the image. When I first tested this out, I only typed in one word so I wonder how the program works if only given one input.

I admire this project because of the connections created between words, art, and randomness. It is wonderful seeing all of the art generators out there pushing the limits of the meaning of art and creativity. I find the parameters chosen for the two inputs to be interesting, and I wonder what it might look like if different parameters of the piece were explored.

This project is also quite exciting because of the large number of possibilities it can create. I don’t know how many combinations of two words there are, but I’m sure there are a lot. This website allows you to make your own image and then submit it to a library for people to vote on their favorites. It would be interesting to what words are used to make the best pictures using this algorithm.