October 2020 – Page 28 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LO: Randomness in Comic Art

In exploring randomness used as a generative tool in computational art, I came across a randomly computer-generated comic by John Pound.

An example of a randomly generated comic sequence

The program used to create this comic pulls from a database of random words, colors, shapes, figures, objects and scenes in order to create these comic pages. Playing off the “Sunday Comic” aesthetic and subject matter, Pound wanted to explore the parameters we set for ourselves as comic-writers and comic-readers. What are the minimum requirements needed to deem something a comic? To what extent can we abstract and randomize something yet have it remain fully recognizable (in this case a page of comic panels)?

This piece makes me think about the purpose of randomness in the ways we conduct our lives; to what extent are we truly in control of our lives? If a randomly computer-generated sequence of elements can register as an everyday comic, how much of our everyday lives are in fact random and out of control? We may, in fact, subconsciously prompt ourselves to recognize these occurrences as something intentional that we have crafted.

Project_06_abstract clock

as_clock Download

	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var x  ;
var y  ;
var mx ;
var my ;
var hx ;
var hy ;
var bigR = 200 ;
var mbigR = 100;
var hbigR = 50 ;
var size = 10 ;
var theta = 0;
var theta2 = 30;
var theta3 = 60;
var traceX = [];
var traceY = [];





 
function setup() {
    createCanvas(480,480);
    background(180);  
    frameRate(1) ;
}


function draw() {
    background(180);
   

    push();
    translate(240,240);
    fill(0);
    circle(0,0,3);

    fill(150,50,30);  // for the hour circle
    hx = hbigR * cos(radians(theta3));
    hy = hbigR * sin(radians(theta3));
    circle ( hx,hy,30);

    theta3 += 360/60/60;

    fill(240,100,80); // for the minutes circle
    mx = mbigR * cos(radians(theta2));
    my = mbigR * sin(radians(theta2));
    circle(mx,my,20);

    theta2 += 360/60/60;

    print("m"+ theta2);



    
    noStroke();
    fill(240,144,105);  //for the second circle
    x = bigR * cos(radians(theta));
    y = bigR * sin(radians(theta));
    circle(x,y,size);

    theta += 360/60;

    if(bigR <= 200){  // the radius is shortening when time passes
        bigR = bigR - 200/59;
    }
    if(bigR<=0){
        bigR = 200;
    }

    //print(bigR);

    traceX.push(x);  // the doc after the second circle
    traceY.push(y);
    for(var i =0; i < traceX.length; i++ ){
        fill(120,100,30);

        circle(traceX[i],traceY[i],3);    
        


    }

    if (traceX.length > 20){ // the length of the docs
        traceX.shift();
        traceY.shift();
    }


    pop();

    
}

LookingOutward_06_Randomness

For this week’s topic, I would like to talk about Julius Horsthuis. He is a fractal artist with a background in special visual effect.

http://www.julius-horsthuis.com/still-gallery

I would like to talk about his short film – Fractal Time.

I am a concept artist and his work inspired me a lot in the direction of combining technical skill with design ideas. He uses abstract geometric shapes to describe some vague and abstract ideas as time and space. I think I can study his work a bit to find a creative way to use basic shapes as my inspiration to do some sci-fi designs.

I think he uses shape, size, depth, color as randomness to generate the final image. I also think he uses perlin noises frequently in his work.

I can see his sense of visual special effect being expressed a lot in his final film. I think he want to use some undefined shapes and even narrative rhythm to express his understanding of time and space.

I would say he is a really innovative artist in terms of film production.

LO 6 – Randomness

*A Year From Monday & Empty Words & Roaring Silence* by John Cage

Titled A Year From Monday, Empty Words, and Roaring Silence, these books comprise of collections of lectures and writings by John Cage. In an attempt to resonate with John Cage’s musical compositions while portraying a “sense of progression which culminates in the diagonally cut slip case”, Zhuoshi Xie designed three different, yet visually correlated book covers.

Initially presented by deep, cool colors on the books’ spines that is revealed to incorporate a flood of bright, saturated red on the books’ covers, Xie expresses how randomization does not always have to be a surprise or even “a smack in the face”.

Randomization can be a gradual progression, and sometimes, it can be the more subtle, unexpected touches that are most effective. In this case, Xie’s goal of reflecting a kind of unexpected randomness that alludes to John Cage’s work is successfully achieved through the red color composed from small, random individual red letters that creates an almost eerie effect.

Looking Outwards 06

After looking at a couple of articles on randomness in the computation of art, I came across the work of Rami Hammour. The project presented is called “A Text of Random Meanings”. The art piece was completed during Hammour through the usage of python script as well as the “registers and taps” method of random number generator. From afar, the project simply looks like lines of texts which are created with various types of strokes in each column. It’s very interesting to see that from a distance, it resembles lines of texts. This causes the viewer to be curious and want to take a closer look at the text. However, because it is “random text”, there is no actual definition or meaning to the text. It represents randomness. If it was a regular piece of text, the natural reaction that humans would have is to read it because it would have meaning. If all the letters of each word were to be shuffled, each word would lose its meaning. For that reason, the “text” would also lose meaning. To add on, it is also interesting to see how numbers can be represented in an artistic way. Through the mapping of a random number generator, Rami Hammour combines computation and art in a very simple way while creating an intriguing outcome.

Project 06 – Abstract Clock

//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 06

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

function draw() {

	//time variables
	var h = hour();
	var m = minute();
	var s = second();

	//mapping the seconds so it fits width of...
	var mapS = map(s, 0, 59, 0, 108); //glass of pink lemonade
	var mapM = map(m, 0, 59, 0, 129); //coaster

    background(255, 181, 101);

	//blue table
	noStroke();
	fill(63, 85, 157);
	rect(1, 335, 320, 146);

	//window frame
	noStroke();
	fill(215, 126, 31);
	rect(31, 31, 305, 233);


	//sky during certain hours
	noStroke();
	fill(193, 210, 246);
	rect(40, 38, 287, 219);

	for (var i=1; i<=h; i++) {
		if (i>=8 & i<=12) {
			noStroke();
			fill(255, 196, 137);
			rect(40, 38, 287, 219);
		}
		if (i>12 & i<=18) {
			noStroke();
			fill(193, 210, 246);
			rect(40, 38, 287, 219);
		}
		if (i>18 & i<=24) {
			noStroke();
			fill(29, 42, 117);
			rect(40, 38, 287, 219);
		}
	}

	//sun & moon (changes during certain hours)
	for (var i=1; i<=h; i++) {
		if (i>=7 & i<=12) { //morning sun
			noStroke();
			fill(253, 241, 142); //color of layer1
			ellipse(116, 112, 83, 83);
			fill(251, 243, 175); //color of layer2
			ellipse(116, 112, 69, 69);
			fill(249, 245, 215); //color of layer3
			ellipse(116, 112, 53, 53);
		}
		if (i>12 & i<=18) { //afternoon sun
			noStroke();
			fill(255, 152, 68);
			ellipse(116, 112, 83, 83);
			fill(255, 205, 68);
			ellipse(116, 112, 69, 69);
			fill(252, 228, 108);
			ellipse(116, 112, 53, 53);
		}
		if (i>18 & i<=24) { //moon -- night time
			noStroke();
			fill(119, 119, 119); //color of layer 1
			ellipse(116, 112, 83, 83);
			fill(170, 170, 170); //color of layer 2
			ellipse(116, 112, 69, 69);
			fill(209, 209, 209); //color of layer 3
			ellipse(116, 112, 53, 53);
		}
		if (i>=1 & i<8) { //night to dawn
			noStroke();
			fill(119, 119, 119); //color of layer 1
			ellipse(116, 112, 83, 83);
			fill(170, 170, 170); //color of layer 2
			ellipse(116, 112, 69, 69);
			fill(209, 209, 209); //color of layer 3
			ellipse(116, 112, 53, 53);
		}
	}

	//cloud 1
	noStroke();
	fill(255);
	ellipse(230, 96, 36, 18);
	ellipse(248, 87, 36, 18);
	ellipse(279, 87, 36, 18);
	ellipse(261, 99, 36, 18);

	//cloud 2
	noStroke();
	fill(255);
	ellipse(248, 186, 36, 18);
	ellipse(230, 198, 36, 18);
	ellipse(217, 186, 36, 18);
	ellipse(199, 195, 36, 18);

	//cloud 3
	noStroke();
	fill(255);
	ellipse(117, 154, 36, 18);
	ellipse(99, 166, 36, 18);
	ellipse(86, 154, 36, 18);
	ellipse(68, 163, 36, 18);

	//head
	noStroke();
	fill(249, 245, 215);
	ellipse(370, 222, 160, 221);

	//eyes
	stroke(0);
	strokeWeight(1);
	fill(0);
	beginShape();
	curveVertex(301, 347);
	curveVertex(309, 245);
	curveVertex(316, 241);
	endShape();

	//shirtAndarms
	noStroke();
	fill(155, 178, 145);
	ellipse(370, 448, 100, 240);


	//hair
	noStroke();
	fill(88, 72, 72);
	ellipse(376, 174, 171, 151);
	ellipse(397, 305, 65, 255);

	//coaster changes color by minutes(0, 15, 30, 45)
	for (var i=0; i<=m; i++) {
		if (i>=0 & i<15) { //blue coaster
			noStroke();
			fill(108, 121, 164);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
		if (i>=15 & i<30) { //pink coaster
			noStroke();
			fill(226, 61, 110);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
		if (i>=30 & i<45) { //green coaster
			noStroke();
			fill(63, 255, 86);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
		if (i>=45 & i<=59) { //purple coaster
			noStroke();
			fill(201, 147, 255);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
	}

	//bottomAndmiddleOfcup
	stroke(0);
	strokeWeight(1);
	fill(237, 244, 181);
	rect(105, 284, 80, 131);
	ellipse(145, 413, 80, 23);

	//topOfcup
	stroke(0);
	strokeWeight(1);
	fill(239, 244, 201);
	ellipse(145, 285, 80, 23);

	//drink
	noStroke();
	fill(255, 175, 175); //pink lemonade
	ellipse(145, 413, 60, 13);
	rect(115, 414, 60, -mapS); //fills up each second
	


}

For this project, I wanted to show the different times during the day through the setting of my working area and my favorite beverage to drink. During the day, the window would show the sun and blue sky. During the evening, the window would show the moon and dark sky. Therefore, it changes depending on the hour. As for minutes, I decided to change the size and color of the coaster whenever the time hits 00, 15, 30, or 45. Lastly, the seconds are shown through the increasing amount of pink lemonade within the glass. Below is a drawing I made in photoshop to help me create this project.

Looking Outwards 6

After briefly touching on Perlin noise in class, I was curious to explore more and see the applicability of it in a more creative sense and quickly found that it can also be applied as a computationally randomized art design.

To start, Perlin noise was actually originally created to add realistic randomness to visual renderings of elements such as fire, smoke, and water. The inventor, Ken Perlin, created it for use in Tron, and actually won an Academy Award for the discovery and application.

The algorithm itself aims to create smoother transitions between numbers by interpolating and returning random numbers in between them. This “noise” function can also be applied in both 2D and 3D, hence creating applicability with lines and modelled objects.

Some applications of Perlin noise can also go beyond the typical use, such as these 2D line art pieces by Holger Lippman, which simulates various landscape images based off of different Perlin noise-algorithms that are used.

artwork created by Holger Lippman using the Perlin algorithm.

Looking Outwards 06

“Mantel Rojo” by Manolo Gamboa Naon

Manolo Gamboa Naon, also known as “Manoloide,” is a digital artist based in Argentina whose work centers around generative algorithms that experiment with visual output. In his piece “Mantel Rojo,” or “Red Tablecloth,” he uses creative code to produce a swirling, mesmerizing composition filled with vivid colors and dynamic shapes. I am drawn to this piece because like many of his other works, there is no clear focal point; rather, viewers engage with the piece as a whole. Oftentimes, the longer one spends examining the work, the more little details and interesting coincidences seem to appear. In his piece specifically, the shapes and colors are generated pseudo-randomly, as the same hues reoccur and no other shapes are present besides circles and organic swirls.

Project 06 – Abstract Clock

candles


function setup() {
    createCanvas(480, 480);
    background(46, 27, 61);

   
}

function draw() {
	var sec = second();
    var min = minute();
    var hr = hour();

    background(122, 49, 0);
	noStroke();

	fill(255, 236, 202, 30);
	ellipse(240, 128+sec, 730, 505);
	ellipse(240, 200+(2*min), 540, 330);
	ellipse(240, 30+(13*hr), 368, 230);
	// cast lighting

	fill(0, 0, 0, 60);
	ellipse(240, 425, 420, 75);
	// plate shadow

	fill(146, 138, 183);
	ellipse(240, 415, 400, 75);
	fill(177, 175, 232);
	ellipse(240, 410, 320, 45);
	// plate

    
    fill(255, 242, 233);
    rect(210, 100+(13*hr), 60, 312-(13*hr));
    ellipse(240, 412, 60, 15);
    stroke(255, 205, 171);
    strokeWeight(0.5);
    ellipse(240, 100+(13*hr), 60, 15);
    // middle candle (takes the whole day to melt)

    push();
    fill(255, 210, 110);
    circle(240, 70+(13*hr), 35);
    triangle(225, 61+(13*hr), 255, 61+(13*hr), 240, 30+(13*hr));
    fill(255, 237, 202);
    circle(240, 73+(13*hr), 26); 
    pop();
    // middle candle flame

    var min = minute();
    noStroke();
    rect(160, 292+(2*min), 30, 120-(2*min));
    rect(290, 292+(2*min), 30, 120-(2*min));
    ellipse(175, 412, 30, 8);
    ellipse(305, 412, 30, 8);
    stroke(255, 205, 171);
    strokeWeight(0.5);
    ellipse(175, 292+(2*min), 30, 8);
    ellipse(305, 292+(2*min), 30, 8);
    // candles on either side of the middle candle (take an hour to melt)

    push();
    fill(255, 210, 110);
    circle(175, 270+(2*min), 22);
    circle(305, 270+(2*min), 22);
    triangle(175, 245+(2*min), 166, 264+(2*min), 184, 264+(2*min));
    triangle(305, 245+(2*min), 296, 264+(2*min), 314, 264+(2*min));
    fill(255, 237, 202);
    circle(175, 272+(2*min), 16);
    circle(305, 272+(2*min), 16);  
    pop();
    // flames for hour candles

    
    noStroke();
    rect(120, 352+sec, 20, 60-sec);
    rect(340, 352+sec, 20, 60-sec);
    ellipse(130, 412, 20, 5);
    ellipse(350, 412, 20, 5);
    stroke(255, 205, 171);
    strokeWeight(0.5);
    ellipse(130, 352+sec, 20, 5);
    ellipse(350, 352+sec, 20, 5);    
    // outermost candles (take 1 min to melt)

    push();
    fill(255, 210, 110);
    circle(130, 339+sec, 13);
    circle(350, 339+sec, 13);
    triangle(130, 325+sec, 124, 336+sec, 136, 336+sec);
    triangle(350, 325+sec, 356, 336+sec, 344, 336+sec);
    fill(255, 237, 202);
    circle(130, 340+sec, 9);
    circle(350, 340+sec, 9);
    pop();
    // flames for minute candles
}

For my abstract clock, I used a set of candles melting to represent the time. The biggest candle in the middle takes the entire day to “melt,” the ones on either side of it both take one hour to melt, and the smallest candles on the ends each take one minute to melt. The flames and cast lighting move accordingly, and the candles reset with the time.

I began with a preliminary sketch:

Looking Outwards 06: Randomness

Self-Dividing Line, J. Tarbell, 2003
http://www.complexification.net/gallery/machines/selfdividingline/

This project constructs unique works by recursively dividing initially defined lines. With each subdivision, the algorithm randomizes where the line will fold in and divide. As the line divides, the system tracks this by adding a level of depth and value with each fold, as though you were observing a piece of paper being folded or a fractal pattern being drawn.

These are some of iterations of the Self-Dividing Line project (2003).

These features of the subdividing line, too, serve to prevent the structure from becoming too complex for the system to process. I think the artist does a great job of employing randomness to produce generative work which reflects both arbitrariness and the inevitability of an end, as the initial lines can only divide so many times before they become too complex. While very simple, the aesthetic of these pieces serves to juxtapose the unlimited possibility for subdivision offered by the algorithm.