Section B – Page 21 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

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.

Shirley Chen-Project-06-Abstract Clock

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project 06




var xS = []; //Create List for Second Count
var yS = [];
var xM = []; //Create List for Minute Count
var yM = [];
var xH = []; //Create List for Hour Count
var yH = [];
var dxS = []; // Velocity in x Direction for Second Bubbles
var dyS = []; // Velocity in y Direction for Second Bubbles
var dxM = []; 
var dyM = []; 
var dxH = []; 
var dyH = []; 

function setup() {
    createCanvas(400, 400);  
// Randomly Assign Position and Velocity for Second Bubbles
  for (var i = 1; i < 61; i++) { 
        xS[i] = random(100, 300);
        yS[i] = random(10, 300);
        dxS[i] = random(-5, 5);
        dyS[i] = random(-5, 5);
    }
//Randomly Assign Position and Velocity for Minute Bubbles  
    for (var i = 1; i < 61; i++) { 
        xM[i] = random(100, 300);
        yM[i] = random(20, 300);
        dxM[i] = random(-5, 5);
        dyM[i] = random(-5, 5);
    }
//Randomly Assign Position and Velocity for Hour Bubbles
    for (var i = 1; i < 25; i++) { 
        xH[i] = random(30, 400);
        yH[i] = random(30, 300);
        dxH[i] = random(-5, 8);
        dyH[i] = random(-5, 8);
    }
}

function draw() {
  var H = hour();
  var M = minute();
  var S = second();
  var cirC = [];
  var colR = 100;
  var colG = 150;
  var colB = 255;
  var launcherLength1 = 80;
  var launcherLength2 = 90;
  background(241, 223, 224);
  frameRate(8);
  noStroke();
  fill(148, 134, 186);
//Draw the Launcher
  ellipse(40, 350, 70, 70); 
  quad(60, 330, launcherLength1, 320, launcherLength2, 350, 60, 380);
//Constrain the Hours to 0 - 12
  if (H >= 12){
    H = H % 12
  }

  for (var i = 1; i < S+1; i++) { 
//Draw one Small Bubble for Every Second
//Color Become Darker for Each Bubble
    colR += 10;
    fill(colR, 183, 205);
    ellipse(xS[i], yS[i], 10);
    xS[i] += dxS[i];
    yS[i] += dyS[i];
    if (xS[i] + 10 > width || xS[i] - 10 < 90){
      dxS[i] = - dxS[i];
    }
    if (yS[i] + 10 > height || yS[i] - 10 < 1){
      dyS[i] = - dyS[i];
    }
    if (S % 2 == 0){
      fill(148, 134, 186);
      quad(60, 330, launcherLength1+10, 310, launcherLength2+10, 340, 60, 380);
//Make the Launcher Move Its "Mouth" for Every Second  
    }
  }
  for (var i = 1; i < M+1; i++) { 
//Draw one Midium Bubble for Every Minute
//Color Become Darker for Each Bubble
    colG -= 10;
    fill(255, colG, colG);
    ellipse(xM[i], yM[i], 20);
    xM[i] += dxM[i];
    yM[i] += dyM[i];
    if (xM[i] + 20 > width || xM[i] - 20 < 90){
      dxM[i] = - dxM[i];
    }
    if (yM[i] + 20 > height || yM[i] - 20 < 1){
      dyM[i] = - dyM[i];
    }
  }
  for (var i = 1; i < H+1; i++) {
//Draw one Large Bubble for Every Hour
//Color Become Darker for Each Bubble
    colB -= 60;
    fill(255, 200, colB);
    ellipse(xH[i], yH[i], 30);
    xH[i] += dxH[i];
    yH[i] += dyH[i];
    if (xH[i] + 30 > width || xH[i] - 30 < 0){
      dxH[i] = - dxH[i];
    }
    if (yH[i] + 30 > height || yH[i] - 30 < 0){
      dyH[i] = - dyH[i];
    }
  }
//Draw the Stand for the Bubble Launcher
fill(252, 205, 86);
rect(30, 355, 30, 40, 10, 10);
fill(249, 133, 133);
text('BOOM!', 30, 300);
}

For this project, I represent second, minute, and hour with bubbles with different sizes and colors. Using the for loop command, for each second there is a new small bubble coming up. I also change the RGB parameter gradually for each second, so the second bubble will change from blue to purple as time passing. Similarly, I also use for loop command to represent minute and hour with bubbles with different diameters. Moreover, I draw a “launcher” and control its outlet to contract or extend for each change in second. For odd number of seconds, its “mouth” will contract; for even number of seconds, it will extend. I also constrain the movement of the bubbles so that they bounce back when they hit the boundary.

Alessandra Fleck – Looking Outwards – 06

To explore the realm of randomness in computational art, I decided to look into a project that integrates traditional craft alongside digital work. Random Number Multiples is a limited edition artwork collection created by data visualization artists Jer Thorp and Marius Watz. The collection seeks to integrate analog work alongside the programming, digital aspect. This hybridization of techniques adds a subtle touch of art into the randomization of data. As the artists claim, modern day art viewed on the computer can have a cold essence to it. When bringing that digital art onto a printed medium however, the effect can be more sensual, despite its digital randomness. This idea of digital randomness being combined with analog mediums to evoke an emotion is something I think is very interesting. As lots of data is being filtered into our lives on a daily basis, it is neat to see such data being presented as “art” where the randomness acts as an expression of the sort of tension and branching of the different data sets interacting with one another.

[the image above depicts a finished data visualization art piece after undergoing a post process in analog medium]

[below is how they print out the data visualization art pieces and prepare to work on in a more traditional medium. The different colors come from the different paths and types of data being visualized.]

[The above image looks into the fine detail of the printed work. Some other completed works done by the artists can be seen below ]

There is not much said in how the artists generate the “randomness” in their work algorithmically. It can be speculated however, that there might exist some sort of tree data structure to help determine the different branches of the work (Similar to the snag tree method shown below).

The creative sensibilities of the work really rely on the means by which the artists utilize traditional methods of visualization with digital methods. The entire hybridization of the work is important in how the artists author their creativity.

Shirley Chen-Looking Outwards-06

Orbital is a project generated by J. Tarbell using computational method. It is composed of a random collection of particles operating on one single rule: randomly choose another particle in the system and orbit it with a constant radius and same velocity. From the beginning, there is one single root particle instantiating at the center of the canvas, and then all other particles brought into the system fall into orbit at some level.

Looking at Orbital System From Far Away

The particles initially start with a fast velocity. Gradully they slow down so their position, orbit path, and connection can be clearly represented.

System of 500 Orbital Elements Exposed over 400 Years

system of 500 orbital elements exposed over 400 years

This project is interesting and demonstrate the role of randomness played in computational art. Although the selection of particles and the position of orbit generated are random, the one basic rule that is not changed is that the orbitals have a constant radius. Overtime, various patterns and shapes can be created and such randomness allows more space for creativity and visual representation. Randomness itself, when combines with time, might be able to generate many unexpected results.

http://www.complexification.net/gallery/machines/orbitals/indexB.php

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

Min Jun Kim- Project 6 Abstract Clock

sketch

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 6
*/

//this program displays an abstract clock

var x = 0;

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

function draw() {
	background(0);
	var hours = hour();	//denotes hours of day
	var mins = minute(); //denotes minute of day
	var secs = second(); //denotes seconds of day
	
	//sets up such that it's not military time but standard
	if (hours > 12) {
		hours = hours - 12;
	}
	else if (hours == 0) {
		hours = 12;
	}
	

	//draws counter-clockwise rotating rectangles in background
	for (i = 0; i < 481; i+= 48) {
		for (v = 0; v < 480; v += 48) {
		push();
		fill(30);
		rectMode(CENTER);
		translate(i,v);
		rotate(2*PI*secs/60);
		rect(0,0,30,30);
		pop();
		}
		
	}
	
	//makes a cover so the clock is not disturbed
	fill(0);
	rect(width/7,30,width/1.4, height-65);

	
	//hour ring
	fill(200);
	//draws big arc in the back
	arc(width/2,height/2,width/1.3,height/1.3,
		-1/2*PI,2*PI*hours/12-1/2*PI);
	fill(0);
	//second arc gives gap between other types of arcs
	arc(width/2,height/2,width/1.3-100,height/1.3-100,
		-1/2*PI,2*PI*hours/12-1/2*PI);


	//minutes ring
	fill(100);
	//middle arc gives the minutes
	arc(width/2,height/2,width/2,height/2,
		-1/2*PI,2*PI*mins/60-1/2*PI)
	fill(0);
	//second arc gives gap between other types of arcs
	arc(width/2,height/2,width/3,height/3,
		-1/2*PI,2*PI*mins/60-1/2*PI);

	//seconds ring
	fill(50);
	//draws small arc in middle
	arc(width/2,height/2,width/3-10,height/3-10,
		-1/2*PI,2*PI*secs/60-1/2*PI);
	fill(0);
	//second arc allows the arc to get a more distinct shape
	arc(width/2,height/2,width/5,height/5,
		-1/2*PI,2*PI*secs/60-1/2*PI);

	fill(0);
	//covers the track
	ellipse(width/2,height/2,70,70);
}

This project made me dig deep into the concept of time and how time came to be represented over time. In the past we had sun-dials and no moving parts. Over time we developed physical mechanical clocks, and nowadays we use digital numbers mostly. I found it interesting in this project we are going from a more digitized type of time-showing into a more archaic and less optimal way of displaying time. These below are the ideas that I generated when I was brainstorming.

I had a lot more ideas but I found were impractical and very difficult to code. Initially I wanted to emulate the light clock from physics with a bouncing ball, but I realized it would be impractical to display how much time has passed. I ended up choosing the designs for an arc-based clock, with different sizes throughout. Calibrating the clock to match the time was rather difficult at first, but once I figured it out the rest was easy. I added some decorations in the background to make the project more exciting. All in all, I think this project was fun because there was so much possibilities.

Jisoo Geum – Looking Outwards 06

https://www.tandfonline.com/doi/pdf/10.1080/17513472.2013.769833

Carola-Bibiane Schönlieb and Franz Schubert

Arnulf Rainer Piece – Processing Algorithm (2012)

This piece is created by a team of programmers, Carola-Bibiane, Schönlieb, and Franz Schubert. By creating a set of random curves that are drawn sequentially, they emulated the etched prints of Arnulf Rainer shown below.

Essentially, the lines are generated by the random number generators, which eventually create ‘pseudo’ random numbers. The most admiring part about this work, despite the fact that the work is not original, was the number of rules that the creators had to set in order to perfectly copy the work of Arnulf Rainer. Although the image looks simple, the curves seemed to be encoded with intricate set of planned parameters. The fact that these fine lines are created by using randomness, but with a set of restrictions, was fascinating to me. To expand on this idea, the piece made me wonder if perfect randomness is even possible and, if it does, whether the final product will look the same as the usual ‘randomly generated’ numbers or shapes. The artistic sensibilities are best shown through the idea of copying an organically generated piece into a digital image, using the exact opposite method: the computer.

Xiaoying Meng- Project 05 Wallpaper

sketch

var tw=17;
var th=25;
function setup() {
    createCanvas(600, 300);
    background(218,235,209);
}

function draw() {
    //background
    for (var z=5; z<600; z=z+25){
        for(var b=2; b< 300; b= b+20){
                    ellipse(z,b,0.1,0.1);
        }
    }

    for (var x=1; x<7; x++){
        for (var y=1; y<5; y++){

            //pot
            if (x%2===1){
                fill(234,186,195);
            }
            else {
                fill(166,203,221);
            }

            stroke(0);
            strokeWeight(0.5);
            rect(x*tw*5,y*th*2.5,20,23);
            line(x*tw*5,y*th*2.5+5,x*tw*5+20,y*th*2.5+5);

            //plant
            
            fill(61,133,50);
            //middle part
            beginShape();
            curveVertex(x*tw*5+5,y*th*2.5);
            curveVertex(x*tw*5+5,y*th*2.5);
            curveVertex(x*tw*5+5,y*th*2.5-9);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+15,y*th*2.5-9);
            curveVertex(x*tw*5+15,y*th*2.5);
            curveVertex(x*tw*5+15,y*th*2.5);
            endShape();

            //left part

            beginShape();
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-20);
            curveVertex(x*tw*5+7,y*th*2.5-25);
            curveVertex(x*tw*5,y*th*2.5-27);
            curveVertex(x*tw*5-5,y*th*2.5-20);
            curveVertex(x*tw*5,y*th*2.5-15);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            endShape();

            //right part
            beginShape();
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-20);
            curveVertex(x*tw*5+7,y*th*2.5-25);
            curveVertex(x*tw*5,y*th*2.5-27);
            curveVertex(x*tw*5-7,y*th*2.5-25);
            curveVertex(x*tw*5-5,y*th*2.5-20);
            curveVertex(x*tw*5,y*th*2.5-15);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            endShape();

            beginShape();
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+15,y*th*2.5-15);
            curveVertex(x*tw*5+20,y*th*2.5-25);
            curveVertex(x*tw*5+22,y*th*2.5-30);
            curveVertex(x*tw*5+13,y*th*2.5-28);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            endShape();
            // dots

            noFill();
            strokeWeight(1);
            ellipse(x*tw*5,y*th*2.5-25,1,1);
            ellipse(x*tw*5-2,y*th*2.5-20,1,1);
            ellipse(x*tw*5+5,y*th*2.5-17,1,1);
            ellipse(x*tw*5+10,y*th*2.5-9,1,1);
            ellipse(x*tw*5+7,y*th*2.5-3,1,1);
            ellipse(x*tw*5+15,y*th*2.5-7,1,1);
            ellipse(x*tw*5+15,y*th*2.5-20,1,1);
            ellipse(x*tw*5+20,y*th*2.5-27,1,1);



        }
    }

noLoop();
}

I created this wallpaper choosing my favorite plant cactus. I first sketched out the cactus I want to draw. After I finished the code for the plants, I decided to add dots to the background and switching the color for the pots to make it a little more interesting.

jacky-project-05

sketch

function setup() {
    createCanvas(600, 400);
    background(128, 128, 128);
    var tw = 60;
    var th = 60;
    var oy = 25;
    var ox = 5;

    for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 10; x++) {
            var py = oy + y * th;
            var px = ox + x * tw;
           
            strokeWeight(0);
            fill(200, 190,  100)
            rect(px, py, 50, 50);
            strokeWeight(2);
            stroke(255);
            line(px,  py + 15,  px + 80,  py + 15);
            strokeWeight(4);
            stroke(65, 105, 225);
            line(px + 35, py, px + 35, py +  80)
            noStroke()
            fill(128, 0, 0);
            ellipse(px + 50, py + 50, 10, 10);
        }
    }
  noLoop();
    
    }

function draw() {
    // draw is not called due to noLoop() in setup()
}

I was inspired by the famous Burberry Pattern with the rectangle and lines that going both in vertical and horizontal direction.

Sean Meng – Project 5

sketch


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

}

function draw() {
    
    background(245,245,220);
    noStroke()
//The repreating circles 
    for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            fill(178,34,34);   
            ellipse(50*x + 25, 50*y + 40, 10, 10);

        }

    }
//The first set of vertical shapes
    for (var a = 0; a < 5; a++) {
        for (var b = 0; b < 7; b++) {
            fill(0,0,139);
            rect(a*100, b*60, 5, 200)
        }
    }

//The second set of vertical shapes    
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 10; j++) {
            fill(210,180,140)
            rect(i*100+45, j*50, 20, 200)
        }
    }
//The first set of horizontal shapes
    for (var m = 0; m < 5; m++) {
        for (var n = 0; n < 15; n++) {
            fill(240,230,140)
            rect(m*120, n*50, 300, 3)
        }    
    }
//The second set of horizontal shapes
    for (var p = 0; p < 5; p++) {
        for (var q = 0; q < 15; q++) {
            fill(255)
            rect(p*120, q*50+20, 300, 12)
        }    
    }
    
}

Speaking of something that I would wear everyday, plaid pattern is one of my favorites. In this project, I played with simple geometries and designed this multicolored plaid pattern. And I added circle shapes to contrast with the rectangles to increase the visual balance.