Kevin Thies – Looking Outwards 6

“Fireworks” by Lane Lawley (2005)

Fireworks” by Lane Lawly, is an interesting piece, partially out of the composition. and partially because on its page, there’s a github link to the source code. I definitely do appreciate the piece for its composition, there’s a good mix of color and the hierarchy’s certainly something to look at; the shapes are arranged in a dynamic fashion, but it’s not often that you see an open-source artwork.
Looking at the source code, it looks like it’s made with Processing, which is similar with the P5js we’re working with currently. In fact, I can see where it uses random floats and uses those to make “Crackers”.
Looking at his other works, Lane makes a lot of art that resembles tree-like structures. I likely wouldn’t be able to see it in the code if I looked for it, but I bargain that it’s a choice in how the numbers are positioned and iterated on.

Audrey Zheng- Project-06

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Assignment-06-C


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

function draw() {
	background(220);

	var h = hour();
	var  m = minute();
	var s = second();

	text(h + ":" + m + ":" + s, 125, 20);

	ellipseMode(CENTER);
	ellipse(width/2,height/2,200,200)

	translate(width/2,height/2);
	rotate(3 * PI /2);



	for (var i = 0; i < 60; i++) {
		push();
		rotate(TWO_PI * i /60);

		stroke(170);
		if (i == 0) {
			stroke(255,0,0);
			line(80,0,100,0);
		}

		else if (i %5 == 0) {
			line(80,0,100,0);
		}

		else {
			line(90,0,100,0);
		}

		pop();
	}

	//second
	var x = 100 *cos(TWO_PI * s /60) ;
	var y = 100 *sin(TWO_PI * s /60) ;

	line(0,0,x,y);

	//hour
	strokeWeight(5);
	var x = 50 *cos(TWO_PI * h /12) ;
	var y = 50 *sin(TWO_PI * h /12) ;

	line(0,0,x ,y);

	//minute
	strokeWeight(3);
	var x = 80 *cos(TWO_PI * m /60) ;
	var y = 80 *sin(TWO_PI * m /60) ;

	line(0,0,x ,y );



    
}

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.

Tanvi Harkare – Looking Outwards 06

While it is easy to retrieve random numbers using a computer program, there are a handful of artists who use random numbers picked by hand to create unique pieces of art. One artist that I especially thought was interesting is Kenneth Martin. In this series of paintings, he has a grid of squares that are numbered. He writes down all the numbers on separate pieces of paper and picks out random numbers. Each successive pair of numbers becomes a line, creating similar but very different sets of artworks.

One of Martin’s art pieces
Another art piece with the use of a singular color

What I find interesting about the artist himself is that he used to paint realistic portraits and landscapes for 20 years, before turning to abstract paintings that explored spatial relationships.

Romi Jin – Looking Outwards 06

Black Shoals Stock Market Planetarium is an art project in which the audience look up at a domed ceiling in which a computer projects the stock market in a system of stars and galaxies (like a planetarium). The project is presented in real-time and represents randomness in computational design in that it uses actual numbers of the stock market to deduce if, and which, stars glow, and how they move toward each other. The result of the installation is dependent on the activity of people in real life and determines how the planetarium looks at any given moment.


A visitor observing the project.

Each traded company is represented by a star, which glows as someone buys or sells a share. The stars do not stay stagnant; they drift and gather together according to the history of the company (the stronger the correspondence between two companies, the stronger the pull). Therefore, the stars can eventually form galaxies; however, they can also form black holes, in which specific stars, or companies, can be pulled into a vortex because of the collapse of a certain stock company. The stars start out randomly distributed at the beginning of the project but move toward each other and form ever-changing constellations, galaxies, and interesting outlines.


Two images produced by the planetarium at random moments of time.

Kyle Leve-Project-06-Abstract-Clock

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-06-Abstract-Clock

var spacing = 30;
var angle = 0;
var H;
var M;
var S;
var r;
var g;
var b;

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

function draw() {
	var H = hour(); // Time variable
	var M = minute(); // Time variable
	var S = second(); // Time variable
	var r = random(0, 255); // Random color value
	var g = random(0, 255); // Random color value
	var b = random(0, 255); // Random color value

	if (S === 0) { // Sets star in the center to blink random colors every minute
		fill(r, g, b);
		textSize(70);
		text('*', width / 2 - 13, height / 2 + 37);
	}

	for (i = 0; i <= width; i += spacing) { // Sets diagonal vertical star line
		for (i = 0; i <= height; i += spacing) {
			if (H < 12) { // Makes star color white if a.m
				fill(255);
				textSize(30);
				text('*', i - 20, i);
			} else if (H >= 12) { // Makes star color yellow if p.m
				fill('yellow');
				textSize(30);
				text('*', i - 20, i);
			}
			if (M === 0 & S <= 5) { // Makes star line blink random colors every hour
				fill(random(r, g, b))
				textSize(30);
				text('*', i - 20, i);
			}
		}
	}
	for (i = 0; i <= width; i += spacing) { // Sets other diagonal star line
		for (i = 0; i <= height; i += spacing) {
			if (H < 12) { // Makes star color white in a.m
				fill(255);
				textSize(30);
				text('*', i + 10, height - i);
			} else if (H >= 12) { // Makes star color yellow in p.m
				fill('yellow');
				textSize(30);
				text('*', i + 10, height - i);
			}
			if (M === 0 & S <= 5) { // Makes star line blink random colors every hour
				fill(random(r, g, b))
				textSize(30);
				text('*', i + 10, height - i);
			}			
		}
	}
	// Every donut is set to draw after the previous one and each donut is set to be drawn in about 5 seconds

	if (S >= 0 & S < 5) { // Creates top red donut
		fill('red');
		push();
		translate(width / 2, height / 4);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 5 & S < 10) { // Creates right red donut
		fill('red');
		push();
		translate(width * 0.75, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 10 & S < 15) { // Creates bottom red donut
		fill('red');
		push();
		translate(width / 2, height * 0.75);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 15 & S < 20) { // Creates left red donut
		fill('red');
		push();
		translate(width / 4, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 20 & S < 25) { // Creates top purple donut
		fill('purple');
		push();
		translate(width / 2, height / 4);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
		if (S >= 25 & S < 30) { // Creates right purple donut
		fill('purple');
		push();
		translate(width * 0.75, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 30 & S < 35) { // Creates bottom purple donut
		fill('purple');
		push();
		translate(width / 2, height * 0.75);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 35 & S < 40) { // Creates left purple donut
		fill('purple');
		push();
		translate(width / 4, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 40 & S < 45) { // Creates top orange donut
		fill('orange');
		push();
		translate(width / 2, height / 4);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
		if (S >= 45 & S < 50) { // Creates right orange donut
		fill('orange');
		push();
		translate(width * 0.75, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 50 & S < 55) { // Creates bottom orange donut
		fill('orange');
		push();
		translate(width / 2, height * 0.75);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 55 & S < 60) { // Creates left orange donut
		fill('orange');
		push();
		translate(width / 4, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
}

I found this project to be a little difficult because I did not have an initial idea. I decided to make something where the image would continuously change colors based off of the time. The overlapping donuts represent every 20 seconds and the stars flash random colors either every minute or every hour. In addition, the diagonal star lines are either white or yellow depending on if it is a.m or p.m respectively. This project allowed me to get more comfortable with time functions and setting things up within certain time constraints.

My initial sketch once I came up with an idea.

Anthony Ra – Project 06 – Abstract Clock

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-06 */

function setup() {
  createCanvas(480, 480);
  background(230, 140, 0);
}

function draw() {

  var phoneStart = 130;
  var phoneEnd = 220;
  var screenWidth = 220;
  var screenHeight = 400;

/* phone */
  noStroke();
  fill(0);
  rect(127.5, 15, 225, 450, 20);
  fill(180);
  rect(phoneStart, 40, phoneEnd, 400, 10);

/* phone lenses */
  stroke(50);
  strokeWeight(3);
  line(width/2 - 20, 27.5, width/2 + 20, 27.5);
  noStroke();
  fill(60);
  ellipse(width/2 + 60, 27.5, 10, 10);
  ellipse(width/2 + 80, 27.5, 5, 5);

  noStroke();

/* grid lines on screen */
  for (var i = 140; i <= 340; i += 10) {
    stroke(255);
    strokeWeight(0.25);
    line(i, 40, i, 440);
  }

  for (var i = 40; i <= 430; i += 10) {
    stroke(255);
    strokeWeight(0.25);
    line(phoneStart, i, 350, i);
  }

/* current time variables */
  var D = day();
  var H = hour();
  var M = minute();
  var S = second();

/* rectangle widths */
  var mappedD = map(D, 0, 30, 0, screenWidth);
  var mappedH = map(H, 0, 23, 0, screenHeight);
  var mappedM = map(M, 0, 59, 0, screenHeight);
  var mappedS = map(S, 0, 59, 0, screenWidth);

  fill(90, 255, 70);
  rect(phoneStart, 310, mappedD, 10);
  fill(255, 204, 0);
  rect(150, 40, 10, mappedH);
  fill(255, 100, 120);
  rect(300, 40, 10, mappedM);
  fill(100, 120, 255);
  rect(phoneStart, 150, mappedS, 10);

/* apps */
  noStroke();
  /* facebook */
  fill(50, 80, 200);
  rect(width/2 - 100, 270, 35, 35, 10);
  /* snapchat */
  fill(255, 230, 0);
  rect(width/2 - 50, 270, 35, 35, 10);
  /* gmail */
  fill(255);
  rect(width/2 + 15, 270, 35, 35, 10);
  stroke(255, 0, 0);
  strokeWeight(5);
  line(258, 273, 272.5, 285);
  line(272.5, 285, 287, 273);
  /* espn */
  noStroke();
  fill(255);
  rect(width/2 - 50, 220, 35, 35, 10);
  stroke(255, 0, 0);
  strokeWeight(5);
  line(203, 230, 218, 230);
  line(200, 237, 215, 237);
  line(200, 237, 197, 244);
  line(197, 244, 212, 244);
  /* messenger */
  noStroke();
  fill(255);
  rect(width/2 + 15, 220, 35, 35, 10);
  fill(80, 120, 255);
  ellipse(width/2 + 32.5, 237.5, 30, 25);
  triangle(262, 237.5, 260, 252, 285, 237.5);
  /* spotify */
  noStroke();
  fill(0);
  rect(width/2 + 65, 270, 35, 35, 10);
  fill(0, 180, 0);
  ellipse(width/2 + 82.5, 287.5, 30, 30);
  stroke(0);
  strokeWeight(4);
  beginShape();
  curveVertex(315, 282);
  curveVertex(315, 282);
  curveVertex(322.5, 280);
  curveVertex(330, 284);
  curveVertex(330, 284);
  endShape();
  strokeWeight(3);
  beginShape();
  curveVertex(315, 288);
  curveVertex(315, 288);
  curveVertex(321, 286);
  curveVertex(328, 290);
  curveVertex(328, 290);
  endShape();
  strokeWeight(2);
  beginShape();
  curveVertex(317, 294);
  curveVertex(317, 294);
  curveVertex(321, 292);
  curveVertex(326, 295);
  curveVertex(326, 295);
  endShape();
  /* phone */
  noStroke();
  fill(0, 180, 0);
  rect(width/2 - 100, 385, 35, 35, 10);
  stroke(255);
  strokeWeight(5);
  beginShape();
  curveVertex(152, 394);
  curveVertex(152, 394);
  curveVertex(150, 400);
  curveVertex(160, 410);
  curveVertex(165, 407);
  curveVertex(165, 407);
  endShape();
  /* contact */
  noStroke();
  fill(230, 140, 0);
  rect(width/2 - 50, 385, 35, 35, 10);
  fill(255);
  ellipse(207.5, 400, 17, 20);
  triangle(208, 405, 196, 415, 220, 415);
  /* message */
  noStroke();
  fill(255, 0, 0);
  rect(width/2 + 15, 385, 35, 35, 10);
  fill(255);
  rect(width/2 + 22, 390, 23, 20, 5);
  triangle(width/2 + 22, 405, width/2 + 20, 415, width/2 + 26, 410);
  /* camera */
  noStroke();
  fill(255, 120, 255);
  rect(width/2 + 65, 385, 35, 35, 10);
  fill(255);
  rect(width/2 + 70, 395, 25, 18);
  noFill();
  stroke(255);
  strokeWeight(3);
  rect(width/2 + 75, 390, 15, 10);
  noStroke();
  fill(255, 120, 255);
  ellipse(322.5, 404.5, 12, 12);
  /* notification */
  noStroke();
  fill(255, 0, 100);
  ellipse(width/2 - 70, 275, 15, 15);
  ellipse(width/2 - 20, 275, 15, 15);
  ellipse(width/2 + 45, 275, 15, 15);
  ellipse(width/2 + 45, 225, 15, 15);
  fill(255);
  text('2', width/2 - 72, 278);
  text('1', width/2 - 22, 278);
  text('8', width/2 + 43, 278);
  text('3', width/2 + 43, 228);
/* Verizon Wireless */
  noStroke();
  fill(0);
  textSize(10);
  text('Verizon Wireless', 140, 50);



}

For some reason, the background screen for the Google Nexus One popped into my head. It is a pixelated background with a series of primary-colored (and yellow) lines moving through the screen.

Nexus One wallpaper

I replicated that onto my current smart phone and mapped it in a way that the viewer would read the time in an abstract manner. Since most of us look at out phones to look at the time, it was a challenge for me look into way to visually tell time.

sketch

Eliza Pratt – Looking Outwards – 06

AI generated nude portraits by Robbie Barrat
AI generated nude portraits by Robbie Barrat

Robbie Barrat is an AI researcher who works with generative adversarial networks (GANs) to create randomly computed works of art. By feeding a GAN pictures of a specific subject matter, the AI takes in random numbers to generate images that reflect similar features. Not only am I fascinated by this algorithm’s ability to create these portraits, but I admire the distinctive style that the AI has adopted. The random generation of colors, textures, and shapes produces a Dali-like surrealism in these images. While I’ve seen random computer generated art before, I had never considered that it could be programmed to capture the aesthetics of traditional painting. Discovering work as expressive and “human” as this project leads me to believe that AI will be a promising asset to modern artists.

Nina Yoo-Looking Outwards – 06

Keith Powers -Art From Code – 2009

 

Math and geometrical shapes are intriguing to me because of their simple beauty. I admire this project for taking a single mathematical concept and then creating a whole new design from it by using a random function, when technically its not random in the first place because it was calculated. So this project was made from random lissajous webs. The lissajous curve is a graph of a equations that describe harmonic motions. Keith Powers would change the way the picture looked by changing the amplitude and frequency. Powers is able to express his art work by presenting how a simple geometrical graph is able to create a complex dark image that causes the viewer to wonder what the picture might have sounded like or how the webs are similar to a spiders web itself. The way he spread the contrasting dark points also causes your eye to go around the whole page and just make it pleasing to look at.

Dani Delgado – Looking Outwards 06

A piece in “The Spirit of Painting” exhibit by Cai – it is currently displayed in the Museo Nacional del Prado, Madrid.

Randomness is considered an almost imperative (CHECK THE WORD MAN) part of the creative process, whether it be through allowing one’s thoughts to run wild or through implementing actual forms of randomness into the process to create a random output. This second form of randomness can be seen clearly in the work of Cai Guo-Qiang, an artist who utilizes gunpowder to create his work.
His primary body of work manifests itself in two forms – fireworks that are set off according to his coded programs and controlled explosions on canvas – both of which have random outcomes in that there is no way to know what they will look like until the final product has been produced (this type of randomness is similar to weather in that you can expect what is to come but there is no specifics that are known).

A piece in “The Spirit of Painting” exhibit by Cai – it is currently displayed in the Museo Nacional del Prado, Madrid. This work contains some acrylic underlays.

Cai, who had a background in fine art painting, began exploring gunpowder as a medium because of its connection to nature and how it creates art in an organic, non-sequential way. This method of working is very inspirational to me, mainly because it is so different from what I do; my process usually contains some randomness in the initial idea phase, but once it comes to a final product, I usually like to have full control over what my work will look like. So, to embrace the random and explosive nature of gunpowder and create art out of it is simply fascinating to me.

Youtube Video of his process:

His website: http://www.caiguoqiang.com/