Month: October 2020

LO-06 Randomness

For this week’s looking outwards, I thought I would discuss something unconventional. While we normally consider art within a narrow frame, computational art casts a much wider net and I thought this might fit. Every year for april fool’s, since the game’s release in 2011, Mojang (which develops the game) releases a joke update for Minecraft, and this year’s was extraordinary.

Using every facet of the game’s parameters for world generation, this snapshot allows players to randomly generate entire worlds. Consisting of everything from endless procedurally generated structures to maze-like worlds made entirely of sponge. This update takes the beautiful but rather utilitarian world generation of minecraft to a new level by generating endless experiential environments that often amaze with their sublime beauty. Instead of working within normal ranges for materials like dirt & stone to create a natural-looking world, the algorithm instead uses wild, extreme parameters to create dimensions out of any and all materials or structures in the game. A bit like H.R. Geiger playing god, the sheer strangeness of it all is captivating. It’s right in line with the sort of simple, sublime beauty that Minecraft has always sought to capture – from its soundtrack to its design.

-Robert

LO6: Randomness

<50 RANDOM> by Linyi Dai

In her work, Linyi Dai uses randomness to generate the value of each register to generate the rungs of the sphere. Her work is not based on “truly” random numbers but rather on “pseudo-random” numbers. The work uses a complex repeated algorithm to emulate the effect of randomness. I really enjoy her work as her work provides a good balance between the result of randomness and the creator’s agency; although she uses randomness to generate aspects of the work–the rungs of the sphere–she is in full control of the general outcome–the spherical shape of her work. I also enjoy the simplicity of her work. The use of dull colors is very successful in making this piece of work relaxing and satisfying to look at.

Link: http://lostritto.com/risd2015spring-seminar/?p=275

Title: <50 Random>

Creator: Linyi Dai

Year: 2015

Project 06 Abstract Clock

In this project the aim was to create various patterns based on numerical operations on the values of time it self. The resulting clock behaves more like a timer, that resets every 20 seconds. There are in reality 6 different types of patterns that can be created based on manipulating the numeric value of seconds, but by overlaying two 10 second patterns, there begins to be a higher level of nuance to the resulting geometries.

sketch
//tjchen
//section a
//abstract clock

var angle = 0;
var r = 0; // distance from center 
var framecount= 0;

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

function draw() {
//map time to color
    var minutecolor = map(minute(),0,59,0,255);
    var secondcolor = map(second(),0,59,0,255);
//reset's stopwatch after 20 seconds 
    if(second()%20==0){
        fill(0);
        square(0,0,width);
    }
//new pattern every 10 seconds
    if (second()%10 === 0){
        angle=0;
        r = 0 ;
        framecount = 0;
    }
    var cenX = (width/2);
    var cenY = (height/2);
//draw circles 
    push();
    translate(cenX,cenY);
    x = r*cos(radians(angle));
    y = r*sin(radians(angle));
    fill(random(255),minutecolor,secondcolor);
    circle(x,y,3);
    r += 0.75;
// creates circle pattern 
    angle += map(second(),0,59,0,360); 
    pop();
    framecount+=1
}

Project 6: Abstract Clock

abstract clock cb
function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {
    background(241, 225, 174);
    
    //background elements art
    stroke(0);
    noFill(); 
    ellipse(300, 360, 90); //minute ellipse outline
    triangle(350, 30, 430, 90, 410, 105); //top r corner triangle
    fill(41, 72, 108, 220); //blue quad
    quad(170, 100, 190, 270, 290, 320, 60, 450);
    fill(41, 72, 108, 180); //blue circle
    ellipse(300, 160, 40);
    fill(120, 79, 58, 220); //brown quad
    quad(50, 160, 130, 370, 340, 465, 180, 350);
    fill(226, 170, 56, 150); //yellow circles
    ellipse(110, 300, 130);
    ellipse(180, 30, 30);
    
    push();
    noStroke();
    fill(192, 50, 47, 220);  //red triangle and ellipse
    triangle(80, 35, 135, 90, 20, 130);
    ellipse(230, 450, 25);
    fill(120, 79, 58, 200); //brown triangle
    triangle(270, 240, 430, 380, 240, 350);
    fill(0);    //black triangle
    triangle(380, 350, 440, 400, 370, 390);
    pop();

    //hours red arc
    push();
    translate(300, 200);
    rotate(-135);
    hr();
    pop();

    //wavy lines
    push();
    noFill();
    strokeWeight(2);
    strokeCap(SQUARE);
    translate(370, 200);
    rotate(30);
    bezier(40, -40, -40, -40, 40, 40, -40, 45);
    translate(10, 10);
    bezier(35, -35, -40, -40, 35, 35, -20, 35);
    pop();

    //minutes yellow arc
    push();
    translate(300, 360);
    rotate(-90);
    scale(.5);
    mins();
    pop();

    //seconds black line
    push();
    translate(240, 240);
    rotate(-135);
    sec();
    pop();
}

//hours, minutes, seconds functions
function hr() {
    var h = hour();
    noFill();
    strokeCap(SQUARE);
    strokeWeight(10);
    stroke(192, 50, 47);
    var hourHand = map(h % 24, 0, 24, 0, 360);
    arc(0, 0, 200, 200, 0, hourHand);
}

function mins() {
    push();
    var m = minute();
    noFill();
    strokeCap(SQUARE);
    strokeWeight(80);
    stroke(226, 170, 56, 200);
    var minHand = map(m, 0, 60, 0, 360);
    arc(0, 0, 100, 100, 0, minHand);
    pop();
    push();
    fill(0);
    ellipse(0, 0, 50);
    pop();
}

function sec() {
    var s = second();
    strokeCap(SQUARE);
    strokeWeight(10);
    stroke(0);
    var secHand = map(s, 0, 60, 0, 360);
    rotate(secHand);
    line(0, 0, 150, 150);
}

For my project, I was inspired by Bauhaus art and design and decided to make an abstract clock based on abstract artwork. When I started the project, I knew I wanted to use a combination of basic graphic elements to represent time instead of making a representational scene. After looking through some Bauhaus work, I found Kandinsky’s “Arch and Point” (1923). I think that the composition and interaction of shapes is really pleasing in this painting.

I did some quick sketches to think about what elements could represent elements of time. I simplified the composition to capture the most prominent elements of the piece and used the red arc to represent hours, the yellow arc to represent minutes, and the black line to represent seconds for a 24-hour clock.

“Arch and Point” by Kandinsky
digital sketch

Project 06: Abstract Clock

For this project I wanted to play with circles and colors.

sketch
//Jessie Chen
//D
//jessiech@andrew.cmu.edu
//Project 06
//Abstract Clock


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

function draw() {
    //background(255, 234, 204);
    background(255)
    var hr = hour();
    var min = minute();
    var sec = second();
    translate(240, 240);
    rotate(radians(-90));
    noStroke();
    //blue minute circle
    let minAngle = map(min, 0, 60, 0, 360);
    fill(0, 200, 255, 190);
    var xmin = 65 * cos(radians(minAngle));
    var ymin = 65 * sin(radians(minAngle));
    ellipse(xmin, ymin, 180, 180);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xmin * 2.35, ymin * 2.35, xmin * 2.23, ymin * 2.23);
    pop();
    //yellow seconds circle
    let secAngle = map(sec, 0, 60, 0, 360);
    fill(255, 213, 0, 220);
    var xsec = 50 * cos(radians(secAngle));
    var ysec = 50 * sin(radians(secAngle));
    ellipse(xsec, ysec, 150, 150);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xsec * 2.45, ysec * 2.45, xsec * 2.3, ysec * 2.3);
    pop();
    //pink hour circle
    let hrAngle = map(hr % 12, 0, 12, 0, 360);
    var xhr = 85 * cos(radians(hrAngle));
    var yhr = 85 * sin(radians(hrAngle));
    fill(255, 0, 119, 190);
    ellipse(xhr, yhr, 220, 220);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xhr * 2.17, yhr * 2.17, xhr * 2.26, yhr * 2.26);
    pop();
    //centerdot
    fill(255);
    ellipse(0, 0, 10, 10);
    //ticks
    tick(255, 153, 201); //pink
    push();
    rotate(radians(30));
    tick(255, 234, 125) //yellow
    pop();
    push();
    rotate(radians(60));
    tick(182, 237, 252); //blue
}


function tick(r, g, b) {
    radius = 225;
    for (angle = 0; angle < 360; angle = angle + 90) {
        var x = radius * cos(radians(angle));
        var y = radius * sin(radians(angle));
        fill(r, g, b);
        ellipse(x, y, 25, 25);
    }
}

Looking Outward 06

“Collage with Squares Arranged according to the laws of Chance” By the DaDaist artist Jean (Hans) Arp, is a seemingly ordered yet disorganized collage composed of torn up pieces of colored paper on a grey background. For many DaDaist artists, found objects and chance encounters became an extremely important aspect of their creative process as they saw it as a way to break from from the traditional elements that defined artistic practices like intention, craft and control. This was the DaDaist approach to the ever increasing rational/ industrializing world that was developing around them. During the composition of the piece, Arp, alledgedly got frustrated by the original drawing he was working on and tore up the paper, dropping them on to the floor. This “accident”, a purely random encounter, in turn became the ultimate form of expression for the piece he created. Nothing, humanly composed or created will have as much of an accurate portrayal of expression, (an idea artists have been exploring for centuries) than the landing and fluttering down of the paper pieces. In the end I think what makes the concept of randomness powerful in computational and generative art is that it allows a certain degree of looseness. This looseness, formerly could not be found elsewhere in the art and design world. Everything was about intention and structure. Yet, randomness subverts those ideals and allows for the art to have a certain degree of agency away from the creator, breathing itself into life.

Untitled (Collage with Squares Arranged according to the Laws of Chance), Jean (Hans) Arp
(French, born Germany (Alsace). 1886–1966),

Looking Outwards-06: Random Art

One randomly generated work I like is Bogdan Soban’s “Abstract 11”. It looks like a landscape and assumes a painterly quality, but was randomly drawn by code. Soban states that he utilizes innovative image processing that hides the computer origin of pictures, combined with multi-level algorithms, to create the most original works. His definition of generative art describes design that is composed in a random manner. He finds interesting, aesthetic precedents, and develops his own generative designed software that randomly draws new images based on those precedents. Once the program is running, Soban does not interfere with it, rather lets it run its course regardless of its outcome.
His pieces have no outside intervention nor predefined result. I really appreciate Soban’s process because he uses software that he creates on his own, not using existing programs available online.

Project – 06 – Clock

sketch
var angle = 0

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

function draw() {
	background(130, 125, 187)
	var min = minute()
	var sec = second()
	var hours = hour()
	
	//gradient cirles
	push()
	translate(200, 200)
	fill(84, 62, 116)
	stroke(30, 24, 45)
	strokeWeight(0.2)
	scale(10)
	circle(0, 0, 10)
	pop()

	push()
	translate(200, 200)
	fill(120, 85, 167)
	strokeWeight(0)
	scale(10)
	circle(0, 0, 9)
	pop()

	push()
	translate(200, 200)
	fill(140, 105, 187)
	strokeWeight(0)
	scale(10)
	circle(0, 0, 8)
	pop()

	push()
	translate(200, 200)
	fill(160, 125, 207)
	strokeWeight(0)
	scale(10)
	circle(0, 0, 7)
	pop()

	//circle counting seconds
	noFill()
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.4)
	scale(sec/10)
	circle(0, 0, 10)
	pop()

	//circle counting minutes
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.2)
	scale((12 + min/20))
	circle(0, 0, 10)
	pop()

	//circle counting hours
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.2)
	scale((32 + hours/10))
	circle(0, 0, 10)
	pop()

	//large outside circle
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.3)
	scale(20)
	circle(0, 0, 10)
	pop()

	//line around outside circle
	push()
	translate(200, 200)
	stroke(49, 41, 42)
	strokeWeight(2)
	scale(25)
	circle(0, 0, 10)
	pop()

	//rotating arc
	push()
	translate(200, 200)
	stroke(100, 80, 130)
	strokeWeight(3)
	rotate(radians(angle))
	arc(0, 0, 200, 200, 0, PI, OPEN)
	pop()
	angle+=1
}

For this project, I wanted to use circles to represent time. The black circle outline in the very middle represents seconds. The circle outline outside of the purple circle represents minutes. And the final circle outline represents the hour.

Project – 06 – Abstract Clock

sketchDownload
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

 var x = []; 
 var y = []; 

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

    // For the random placement of the stars
    for (i = 0; i < 60; i++){
    	x[i] = random(10,390); 
    	y[i] = random(10,200); 
    }

}

function draw() {
    noStroke(); 

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

    // Background color gets darker as seconds pass by 
	background (83 - (2*s), 143 - (2*s), 213 - (2*s));

    // Drawing static hills
    fill(122,172,136); 
    ellipse(80,435,300,440);    
    fill(122,172,136); 
    ellipse(width-80,435,300,440);  
    fill(161,206,148); 
    ellipse(200,440,500,400);

    // New star appearing every minute 
    for(i = 0; i < m; i ++){
    	fill(252,255,149); 
    	ellipse(x[i],y[i],7,7); 
    }

    // Moon increasing size every second  
    var s1 = map(s, 0, 60, 0,200); 

    // Drawing Moon 
 	stroke(242, 242, 242,40);
  	strokeWeight(10);
  	fill(220,220,220,50);
  	ellipse(50, 50, s1, s1);

    // Drawing Sheep 
	noStroke(); 
    // Legs
    fill(92); 
    ellipse(175,315,15,50);
    ellipse(225,315,15,50); 
    // Body 
    fill(255);
    ellipse(200,310,50,50); 
    ellipse(170,280,50,50); 
    ellipse(200,270,50,50); 
    ellipse(230,280,50,50); 
    ellipse(170,300,50,50); 
    ellipse(230,300,50,50); 
    // Fur texture 
    fill(152); 
    ellipse(220,290,15,15); 
    fill(255); 
    ellipse(222,290,15,15); 

    fill(152); 
    ellipse(190,305,15,15); 
    fill(255); 
    ellipse(188,305,15,15); 

    fill(152); 
    ellipse(193,315,8,8); 
    fill(255); 
    ellipse(191,315,8,8); 

    fill(152); 
    ellipse(170,282,15,15); 
    fill(255); 
    ellipse(172,282,15,15);   

   	// Face 
    fill(92);  
    ellipse(240,270,40,40);

    // Making the eye close or open every hour  
    var eyeDiam = 20; 
    if ((h%2)>0){
    	eyeDiam = 20; //closed 
    }else if((h%2)==0){
    	eyeDiam = 0.1; //opened 
    }
    // Ear 
    ellipse(220,275,20,10);
    // Eye 
    fill(0); 
    ellipse(240,270,15,15); 
    fill(92);
    ellipse(235,265,eyeDiam,eyeDiam); 

    // Tail 
    fill(255); 
    ellipse(140,290,20,10); 

    // Fence 
    fill(175,140,117);
    rect(0,350,15,height); 
    rect(385,350,15,height); 
    rect(0,360,width,10); 
    rect(0,380,width,10); 

  }

For this project, I thought of how I used to try counting sheep to fall asleep when I was younger. Unfortunately, it usually didn’t work too well. As a result, I was inspired to create an abstract clock that depicts a sheep trying to sleep but waking up every hour. The moon expands and the night sky gets darker every second. A new star also appears every minute.

Looking Outwards – 06

The piece I decided to write about is “Take Me to the Desert” by Tyler Hobbs. To create this piece, Hobbs created an algorithm that randomly places circles of different sizes and colors. The algorithm starts by placing the largest circles first and the smallest last. It finds a spot to place each circle by checking for collisions. This is done checking if the difference between two circles’ center point is larger than the sum of their radii. It will continue to insert circles until the desired number of circles is reached or until the failed attempts limit is reached. I admire this piece because despite the circles being randomly placed, it still looks clean and none of them overlap. I also really like the colorfulness of this generative art.

take-me-to-the-desert-800.jpg