Category: Section B

nayeonk1-LookingOutwards-06

Computational art using processing

For this assignment, i needed to search what computational art means. After research, I tried to figure out randomness of the art. It’s still confusing, but I found some art work related to this week’s assignment.
Miu ling lam used processing language to create beautiful computational art with randomness. She used her own algorithm which is ‘active sensor network diployment for maximal coverage’. I’m not fully understanding what this thesis for, but the thing is she implemented this algorithm to create images with processing language that I’m studying right now. All those lines and colors look random but they have complex mathmatical algorithm inside and it makes me excited about this processing language. I will try more to understand how she were able to create the arts with computer language.

Brandonhyun- Project-06-Clock

sketch

//Brandon Hyun
//bhyun1@andrew.cmu.edu
//15104 SectionB
//Project06-Clock

var fryingPan;
var innerFryingpan;
var value;
var c;
var yolk;
var limit;
var changeeggwhiteColor;
var rpos1;
var rpos2;
var changePositionegg;
var prevSec;
var millisRolloverTime;



function setup() {
  createCanvas(400, 400);
	fryingPan = 0;
	limit = 120;
	innerFryingpan = 40;
	yolk = color(255, 204, 0);
  millisRolloverTime = 0;

}

function draw() {
  var H = hour();
  var M = minute();
  var S = second();
  var areaCircle = ellipse(width/2,height/2,280,280);
  var rcircle = random(areaCircle);

background(220);
	changeeggwhiteColor = map(S, 0, 60, 40, 255, true);
  changePositionegg = map(S, 0, 60, 100, 400, true);
  //print(changePositionegg);

	c = color(200, 200, 200, changeeggwhiteColor);

  value = alpha(c);

  if (prevSec != S) {
       millisRolloverTime = millis();
   }
   prevSec = S;
   var mils = floor(millis() - millisRolloverTime);

   fill(128,100,100);
   text("Hour: "   + H, 10, 22);
   text("Minute: " + M, 10, 42);
   text("Second: " + S, 10, 62);
   text("Millis: " + mils, 10, 82);

   var hourBarWidth   = map(H, 0, 23, 0, width);
   var minuteBarWidth = map(M, 0, 59, 0, width);
   var secondBarWidth = map(S, 0, 59, 0, width);

	fill(fryingPan);
	ellipse (width/2,height/2,300,300);
	fill(innerFryingpan);
	ellipse (width/2,height/2,280,280);



  var i = map(S, 0, 60, 200, 400, true);
  if (i > 300) i = 600 - i;
  var j = width - sqrt(90000 - i*i);
  print(i);
  print(j);






  fill(value);
	noStroke();
	ellipse (i,j-100,100,100);
	ellipse (i-40,j-100,50,50);
	ellipse (i-30,j-70,40,50);
	ellipse (i+30,j-80,60,60);
	ellipse (i-10,j-130,60,60);
	ellipse (i+20,j-120,60,60);
  // ellipse (i,j,100,100);
	// ellipse (i-40,j,50,50);
	// ellipse (i-30,j+30,40,50);
	// ellipse (i+30,j+20,60,60);
	// ellipse (i-10,j-30,60,60);
	// ellipse (i+20,j-20,60,60);
//yolk
	fill(yolk);
	ellipse (i+10,j-110,50,50);




}

For this Assignment, I tried to emulate egg cooking on a frying pan. As minute passes, the egg gets fried and the egg yolk becomes whiter.

I had some difficulty getting the entire egg in a random position every time a minute passes. However, it was really nice working with the time variable and pitch my interest of cooking into this project.

rgroves – Abstract Clock – section B

sketch



var quote = ["All", "time", "is", "all", "time.", "It", "does", "not", "change.",
"It", "does", "not", "lend", "itself", "to", "warnings", "or", "explanations.", "It", "simply", "is.", "Take", "it", "moment", 
"by", "moment,", "and", "you", "will", "find", "that", "we", "are", "all,", "as", "I've", "said", "before",
"bugs", "in", "amber."];

var letters = 360;


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

function draw() {
    background(220, 170, 125);

	var H = hour();
    var M = minute();
    var S = second();

    
    //floor
    fill(162, 137, 118);
    quad(0, 250, width, 300, width, height, 0, height);
    strokeWeight(40);
    stroke(250, 180, 135);
    beginShape();
    curveVertex(0, 250);
    curveVertex(0, 250);
    curveVertex(width/3, 200);
    curveVertex(2 * width/3, 230);
    curveVertex(width, 300);
    curveVertex(width, 300);
    endShape();
    noStroke();
    

    //window
    fill(240, 190, 135);
    rect(width/3 - 14, 45, 50, 50);
    var time = H + M/60 + S/3600; 

    if (time <= 12) { //window gets light from midnight to noon
        var skyR = map(time, 0, 12, 35, 200);
        var skyG = map(time, 0, 12, 40, 220);
        var skyB = map(time, 0, 12, 70, 235);
        fill(skyR, skyG, skyB);
    }
    if (time >= 12) { //window gets darker from noon to midnight
    	var skyR = map(time, 12, 24, 200, 35);
    	var skyG = map(time, 12, 24, 220, 40);
    	var skyB = map(time, 12, 24, 235, 70);
    	fill(skyR, skyG, skyB);
    }
    rect(width/3 - 15, 45, 30, 30);

    //darkness filter - entire room gets darker from 19:00 to midnight and lighter from midnight to 7:00
    if (time <= 7) {
    	var a = map(time, 0, 7, 200, 0);
        fill(35, 40, 70, a);
    } else 
    if (time >= 19) {
    	var a = map(time, 19, 24, 0, 200);
        fill(35, 40, 70, a);
    } else {
    	var a = 0;
        fill(35, 40, 70, a);
    }
    rect(0, 0, width, height);

    //medallion
    stroke(50, 20, 50);
    strokeWeight(3);
    line(width/3 + 21, height/3 + 1, width/3 + 21, height/3 + 100);
    noStroke();
    fill(175, 110, 20);
    ellipse(width/3 + 20, height/3, 25, 25);
    fill(200, 155, 37);
    ellipse(width/3 + 21, height/3 + 1, 20.5, 20.5);
    fill(150, 50, 100);
    ellipse(width/3 + 21, height/3 + 1, 5, 5);
    for (i = 0; i < 10; i++) {
    	push();
    	translate(width/3 + 21, height/3 + 1);
    	var angle = map(i, 0, 10, 0, 2 * PI);
    	rotate(angle);
    	fill(255, 254, 208);
    	ellipse(0, 7, 2, 2);
    	pop();
    }

    //light from the medallion
    if (time <= 7) { //beam moves across the floor as the sun/moon move across the sky
    	var lightbeam = map(time, 0, 7, 200, 400);
    } else
    if (time >= 19) {
    	var lightbeam = map(time, 19, 24, 0, 200); 
    } else {
    	var lightbeam = map(time, 7, 19, 0, 400);
    }
    if (lightbeam < 200) { //beam becomes more concentrated at noon, midnight
    	var lightbeamwidth = map(lightbeam, 0, 200, 80, 20);
    } else {
    	var lightbeamwidth = map(lightbeam, 200, 400, 20, 80);
    }
    fill(230, 180, 80, 100);
    ellipse(lightbeam, letters, lightbeamwidth, 20);
    var whitelight = color(230, 240, 200, 40);
    var redlight = color(150, 50, 10, 60);
    var redlightheight = map(M, 0, 60, height/3 + 1, letters);
    var lines = 5000
    for(i = 0; i < lines; i++) { //amount of red in the light bean represents minutes in the hour
    	strokeWeight(.1);
    	var leftx = map(i, 0, lines, width/3 + 21, lightbeam - lightbeamwidth/2);
    	var rightx = map(i, 0, lines, width/3 + 21, lightbeam + lightbeamwidth/2);
    	var y = map(i, 0, lines, height/3 + 1, letters);
    	var amt = map(y, redlightheight, letters, 0, 1);
    	var fade = lerpColor(redlight, whitelight, amt);
    	if (y < redlightheight) {
    		stroke(redlight);
    	} else {
    		stroke(fade);
    	}
    	line(leftx, y, rightx, y);
    }

    //light from window
    fill(whitelight);
 	quad(width/3 - 15, 45, width/3 + 35, 45, lightbeam + (5 * lightbeamwidth), height, lightbeam - (5 * lightbeamwidth), height);

 	//words go across the page - quote loops every minute
 	var textspeed = map(S, 0, 60, 0, quote.length); //quote is fewer than 60 words, so have to convert
 	var textspeedinteger = textspeed - (textspeed%1);
 	var textspacing = map(textspeedinteger, 0, quote.length, 0, width - 25);
 	if (dist(textspacing, letters, lightbeam, letters - 5) < 5 * lightbeamwidth) {
 		fill(whitelight);
 	} else {
 		fill(155, 125, 110);
 	}
 	text(quote[textspeedinteger], textspacing, letters - 5, width, 50);

 	
}

For this project I was inspired by the medallion in Indiana Jones that illuminates a point on a map at a certain time of day. The beam of light moves across the screen every 12 hours from 7am to 7pm and 7pm to 7am (as the sun and moon move across the sky) and fills with red every hour. The beam of light is also thinner in the middle of the picture (when the sunlight is most direct) and wider towards the edges. The quote at the bottom cycles every minute and the light through the window represents the time of day. The entire room also gets darker at night. It’s a random Kurt Vonnegut quote about time that I picked, I may think harder about what quote I really want and change it.

Matthew Erlebacher Looking Outward-06

The piece of music that I chose for this looking outward was very soothing. It goes really well with the randomly generated backgrounds. The artist likely programmed the backgrounds and the music to complement each other. This is clearly demonstrated in the final product, which could be described as a soothing combination of relaxing music and striking imagery. The video was pre-recorded, so it unfortunately doesn’t show a large amount of randomness. One criticism that I have is that the piece goes on for a bit too long (for my taste). It isn’t something that I would listen to for the sake of listening to, but I might play it while reading or before I go to bed. In the end, while the piece may have its flaws it overall beautiful on an audio and visual level.

hannajan-LookingOutwards06

For this Looking Outward Post, I found an artist who made beautiful quilts based on randomness. Susan of SKquiltlabs made the particular quilt (pictured above named “Random Vector”) from a layout that is based on a random number generator for pattern orientation.

A lot is not said on the site I found Susan’s works, about the algorithms used for randomness. However, it does mention a random number generator is involved in some way.

The creator’s artistic sensibilities are manifest in the final form through the way the randomly generated pieces fall together so effortlessly. There are no signs of messiness or lack of care, although that sometimes may be assumed when “randomness” is involved. There is a natural pattern in her art through the randomness.

This reminds me that although future assignments in this class may require some level of randomness generating, the artist has a certain level of control over how the final art piece turns out. It is ultimately up to the artist in how much control they choose to exert.  

hannajan-Project06-Abstract Clock

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 6: Abstract Clocks 

var thehead=80; 
var offset=50; 
var offset2=30; 
var offset3=130; 


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

function draw() {
	background(197, 216, 184); 
	noStroke(); 
	
	//race paths 
	for (var j=1; j<4; j++) {
	fill(233, 176, 77); 
	rect(0, j*100, width, height/6); 
		}
	
	//race signs 
	fill(255); 
	rect(width/17, height/10, width/6, width/10); 
	rect(width*14/18, height/10, width/6, width/10); 
	
	//race sign letters
	strokeWeight(2); 
	fill(0); 
	text("START", width/11, height/6); 
	text("FINISH", width*9/11, height/6); 
	
	//character names 
	fill(0); 
	text("Second the Rabbit", width/4+8, offset3); 
	text("Minute Man", width/4+8, offset3*2-offset2); 
	text("Hour the Panda", width/4+8, offset3*3-offset); 
	
	//Fetch the current Time 
	var H=hour(); 
	var M=minute(); 
	var S=second(); 
	
	//track clock paths for racers 
	if (H<13) {
	var mappedH=map(H, 0, 11, 0, width-thehead/2); 
} else {
	var mappedH=map(H-12, 0, 11, 0, width-thehead/2);
}
	var mappedM=map(M, 0, 59, 0, width-thehead/2); 
	var mappedS=map(S, 0, 59, 0, width-thehead/2); 
	
	//Second the Rabbit 
	//head 
	fill(255); 
	ellipse(mappedS, width/3, thehead, thehead); 
	//ears 
	ellipse(mappedS-offset2, width/3-offset, thehead/4, thehead*4/5); 
	ellipse(mappedS+offset2, width/3-offset, thehead/4, thehead*4/5); 
	//eyes 
	fill(0); 
	ellipse(mappedS-thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	ellipse(mappedS+thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	
	//Minute the Man 
	//head 
	fill(255, 222, 168); 
	ellipse(mappedM, width/2+offset2, thehead, thehead); 
	//hair 
	fill(123, 79, 8);
	arc (mappedM, width/2+offset2, offset2*3, offset2*3, PI, TWO_PI ); 
	//eyes 
	fill(0); 
	ellipse(mappedM-thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	ellipse(mappedM+thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	
	//Hour the Panda 
	//ears 
	fill(0); 
	ellipse(mappedH-offset2, width/2+offset*2, thehead/3, thehead/3); 
	ellipse(mappedH+offset2, width/2+offset*2, thehead/3, thehead/3); 
	//head 
	fill(255); 
	ellipse(mappedH, width/2+offset3, thehead, thehead); 
	//eyes 
	fill(0); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	fill(255); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	
	
	//text showing clock time on top. 	
	//If the Hours value is higher than 12, then 12 is subtracted. 
	fill(255); 
	if (H<13) {
	text(H, width/4, 20); 
} else {
	text(H-12, width/4, 20); 
	}
	text(":", width/4+15, 20); 
	text(M, width/3-9, 20); 
	text(":", width/3+8, 20); 
	text(S, width/3+15, 20); 
}

 

I thought of how the seconds clock moves faster than the minute and the hours is the slowest. I then thought of different symbols to represent this difference in speed. I came up with Second the Rabbit, Minute Man, and Hour the Panda. I am quite pleased with the outcome and the race my symbols are running.

Matthew Erlebacher Project-06 Abstract Clock

Abstract Clock

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-06

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

function draw() {
    background(125);

    var H = hour();
    var M = minute();
    var S = second();
    // Sets up variables for time

    var mappedH = map(H, 0, 23, 20, 240);
    var mappedM = map(M, 0, 59, 0, width);
    var mappedS = map(S, 0, 59, 0, width / 2);
    // Maps time variables to different values

    fill(255);
    ellipse(width / 2, height / 2, width, height);
    // Creates giant circle in the background

    fill(75);
    rect(width / 2 - 5, 0, 10, mappedS);
    // Creates rectangle that extends downward length is connected to seconds

    fill(0);
    rect(0, height - 20, mappedM, 20);
    // Creates rectangle at the bottom extends rightward lenght is connected to minutes

    fill(0);
    ellipse(width / 2, mappedS, mappedH, mappedH);
    // Creates circle in the middle of canvas radius connected to hours

    fill(125);
    text(H, width / 2, 3 * height / 4 + 40);
    text(M, width / 2, 3 * height / 4 + 60);
    text(S, width / 2, 3 * height / 4 + 80);
    // Creates texts that list time
}

The end design was definitely very abstract. The design was a circle that lowers as each second passes. The radius of the circle increases by the hour, and there is a bar at the bottom that increases by the minute. I also included the time in text since I thought it might be unclear as to what everything meant. Originally the circle was supposed to come from the bottom, but I realized that it would be easier to implement, and it also looked better in the end. While I would have liked to make a more interesting design, I didn’t have the time since I was already struggling with arrays, and the time variables. Despite this, I enjoyed what I came up with, and its overall simplicity.

jamieh-LookingOutwards-06

pareidoloop (4 faces)

http://iobound.com/pareidoloop/

Phil McCarthy created the project Pareidoloop, which combines a facial recognition algorithm with a random polygon generator algorithm to produce a somewhat recognizable face. The programs works by generating random sized, coloured and shaped polygons that are then layered on top of each other until the facial recognition algorithm recognizes a face. All other variables, except the random polygon generator, can be set by the user, such as size of image, fitness or how likely the “face” matches an actual face and number of generations. The maximum fitness level is 35, where the lower the number, the faster the image renders but the rendered face may not be recognizable. Number of generations is how many times the code runs until it stops to find another face. McCarthy was inspired by the idea of pareidolia, which is a when the mind responds to an image by perceiving a pattern within random data. An example of that would be objects in cloud formations or Pixar’s The Blue Umbrella short film.

Different possibilities to the pareidoloop code

There are certain user controlled variables, yet each time the code runs, the generated image is very different. There are so many different possibilities to this code. What I like about this project is how a face is a very defined image, but even when abstracted into simple polygons, from a distance, each face looks different from each other.

Random Sound, Evolving, Mixing to Compose

http://www.cmu.edu/news/stories/archives/2017/august/butterfly-sounds.html
This piece is an evolving sound composition created by a class I was in Junior year. The Phipps hosts a butterfly bloom every year, and my class wrote generative music compositions within the space. The class split into about 10 teams, and wrote a sound piece using random event triggers to play an ambient melody.

In this project, randomness played a crucial role for the experience within the space. One lesson we learned about in the class is that predicable/repetitive beats can impose undesired movement within a space. We used the randomness to unify each teams individual compositions. Because there was no specific beat to the songs, a pleasant tone was set in the garden space.

Another concept we learned about randomness is evolution. If a framework for a musical or artistic piece is designed to allow for chance, the experience is always different. A viewer can explore the space on their own time, without fear of missing out.

dnam-project-06

sketch

/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 06
*/

//variables for spiral
var spiralAngle = 45;
var spiralRadius = 1;
var spiralRate = 0;

function setup() {
    createCanvas(480, 480);
    background(200, 250, 200); //background doesn't reset every frame
}

function draw() {
    noStroke();

    // Fetch the current time
  var H = hour();
  var M = minute();
  var S = second();
  var x = cos(radians(spiralAngle)) * spiralRadius; //wider
  var y = sin(radians(spiralAngle)) * spiralRadius; //taller

  fill(0 + S * 4); //gets lighter per second passed
  ellipseMode(CENTER);
  ellipse(240 + x, 240 - y, 10, 10); //the X and Y shifts along the spiral
  spiralAngle = spiralAngle + 2; //angle shifts to form spiral
  spiralRadius = spiralRadius + 0.1; //spiral radius increases
  spiralRate = spiralRate + 1; 

     if (spiralRate > 2000) { //reset once spiral goes too far
         spiralRate = 0;
         spiralRadius = 1;
         background(150, 200, 150);
}
}

I wanted to show time with just the seconds by using the formation of a spiral and the change of gradience. The code is instructed to create lighter color ellipses until a minute passes and the second resets – the ellipses in the spiral are then reset to black. The spiral also restarts if it fills up too much of the canvas. The idea was based off of Korean anti-mosquito scent candles, which look like these:

I always thought how the candle disappears in a spiral as time goes was almost hypnotising, and I wanted to create a similar effect with this candle.