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

LO – 5

Manfred Mohr’s “space.color.motion” initially written in 1999 is an example of computational art that uses simple design elements like lines, color fill, and eventually, animation, to convey a sense of dimensionality that is both convincing and transcendent of reality– “unimaginable constellations,” to quote Mohr. The 6-d hypercube and its angles and increments are based on the present time and date but are otherwise randomly generated with every restart of the program, creating animations that are unique with every passing frame. Although these aspects are randomly generated, there is a system of diagonals that are diametrically opposite of each other, as well as one determining the thickness of lines and how it constructs planar quadrilaterals– these are controlled by the established algorithm, systematizing randomness to create an intentional and mesmerizing work of art.

The many applications of this project demonstrate an aspect of computational art that traditional art is unable to achieve. Because of its randomly generated nature, many stills of the animation can be captured and made into collections of artwork. Mohr also exhibited this project in various galleries and public spaces in the form of animation and paintings, inspiring a myriad of different experiences with one computer program.

Mueller-Roth Gallery at Art Cologne 2003

Sony Center Berlin, June / July / August 2004

Project-06 Abstract Clock

abstract flower clock

function setup() {
    createCanvas(480, 480); 
    background(240, 213, 214);
}

function draw() {
	background(240, 213, 214);
	noStroke();

	push();
	rectMode(CENTER); 
	//dark pink shadow
	fill(208, 186, 187);    
	ellipse(240, 435, 165, 30);

	//plant pot 
	fill(186, 107, 60); 
	rect(240, 405, 75, 65);
	rect(240, 360, 88, 20);
	
	//plant pot shading 
	fill(165, 95, 52);
	rect(240, 372, 75, 4);

	pop();

	//soil filling up represents seconds
	fill(146, 85, 46);
	var s = second();
	rect(205, 435, 70, -s);

	//ombre of pink tracking 10 minute intervals 
	//0 - 10 minute mark
	fill(243, 209, 210);
	rect(0, 245, 480, -20); 
	
	//10 - 20 minute mark
	fill(238, 206, 208);
	rect(0, 225, 480, -20); 
	
	//20 - 30 minute mark
	fill(234, 202, 204);
	rect(0, 205, 480, -20);
	
	//30 - 40 minute mark
	fill(230, 198, 201);
	rect(0, 185, 480, -20);
	
	//40 - 50 minute mark
	fill(224, 194, 196);
	rect(0, 165, 480, -20); 
	
	//50 - 60 minute mark
	fill(220, 190, 195);
	rect(0, 145, 480, -20); 

	//resetting the background past the 60 minute mark
	fill(216, 187, 190);
	rect(0, 125, 480, -150);

	//plant stem growing represents minutes
	fill(30, 71, 42);
	var m = minute();
	rect(237, 350, 5, -50-m*3);

	//plant leaves
	push();
	fill(30, 71, 42);
	translate(224, 320);
	rotate(radians(-60));
	ellipse(0, 0, 18, 43);
	pop();

	push();
	fill(30, 71, 42);
	translate(256, 320);
	rotate(radians(60));
	ellipse(0, 0, 18, 43);
	pop();

	//flower petals represents hours
	var h = hour();
	var hours = map(m, 0, 60, 260, 390);

    if (h < 24 & h > 12){
        h -= 12;
    }
    if (h == 0){
        h = 12;
    }

    for (var i = 0; i < h; i++){
        push();

        translate(240, height - 0.9*hours);
        rotate(radians(30*i));
        //flower petals
        fill(233, 160, 167);
        ellipse(0, 30, 20, 55);
        
        //flower center 
        fill(249, 213, 139);
        ellipse(0, 0, 30, 30);

        pop();
    }
	
}

Screenshots of clock at 1:00, 3:30, 9:20, and 12:59

I wanted to create an abstract clock based on a plant growing over time. The pot filling up with soil represents seconds, the plant stem growing represents minutes, and the number of petals represents hours. The ombre of pink rectangles in the background track the minutes based on the position of the yellow center in 10 minute intervals. I had to make a few changes to the design based on where the center landed, which was challenging but once I figured out the map function it was fun to create!

Looking Outwards 06: Randomness

Linyi Dai was an architecture student at RISD in 2015. Their piece, which was featured in Fast Company’s article “The Value of Randomness in Art and Design” uses architectural rendering and I admire how they manipulated the random function to create a 3-dimensional shape. I think the way artists can use computers to make shapes is really cool, especially 3-D ones. Dai restricted the random values to a certain parameter and used the value of each register over 50 steps to generate the rungs of a sphere. Dai is an architect and I think this piece demonstrates the ability to render 3-D shapes in a way that is necessary for their field.

Looking Outwards – 06

Black Shoals Stock Market Planetarium, by Joshua Portway and Lise Autogena, was a project created in 2001 to represent stock market trades live. The biggest draw to this project for me was that it was two artists’ representation of the stock market, and I had just got into trading this past summer myself. On their website they describe components of the stock market as creatures that have unique “DNA” code and each traded company represents a star. The positions of these companies started out randomly positioned, but eventually drifted together over time into clusters, constellations, and nebulae. When a star is flashing it means someone just sold or bought a trade, and these trades produce food for the creatures in the “environment” the artists created. The bigger the trade, the more food is produced. The title was based on the “Black Scholes” formula which was attempting to accurately estimate the current value of a share. Two of the three mathematicians, who by the way won (all three) a Nobel Prize for this formula, went on to start a company called, “Long Term Capital Management”. Moral of this story is the company ended chaotically which almost brought the US stock market down. There are many parallels between biology, history, and the stock market that truly make this a unique and inspirational piece. I am not doing it a justice with this short blog, so I would definitely recommend checking out their website (posted below) describing the piece.

http://www.blackshoals.net/the-project-1

LONDON, ENGLAND – DECEMBER 02: A visitor walks past the ‘Black Shoals: Dark Matter’ projection at the Big Bang Data exhibition at Somerset House on December 2, 2015 in London, England. The projection displays stars which represent live stock market activity. The show highlights the data explosion that’s radically transforming our lives. It opens on December 3, 2015 and runs until February 28, 2016 at Somerset House. (Photo by Peter Macdiarmid/Getty Images for Somerset House)

Abstract Clock

For this project I wanted to make a Pokemon clock, I decided to make a clock out of a Pokemons face, Meowth. I wanted to make his face interact as a clock, his coin on the head fills with each additional hour during the day, the eyes are moving with each additional second, and the whiskers grow longer with each additional minute.

sketch Download

function setup() {
    createCanvas(480, 480);
    background(255);
}
function draw() {
  var s= second();
  var w= width;
  var h=height;
  for(var b=0;b<480;b+=160){
    push();
    noStroke();
    fill(217,184,135);    //background
    rect(b,-1,w/3,h+2);
    fill(72,55,43);
    rect(b-20,-1,20,h+2);
    pop();
  }
  push();
  pop();
  translate(240,245);
  fill(255,0,0);    //pokeball in the background
  arc(0,-15,450,450,PI,0);
  fill(255);
  arc(0,-15,450,450,0,PI);
  push();
  strokeWeight(4);
  line(-225,-15,225,-15);
  pop();
  scale(.75);
  fill(0);    //black part of ears
  triangle(-150,-160,20,-50,-188,0);
  triangle(150,-160,-20,-50,188,0);
  fill(238,187,169);    //pink part of ears
  triangle(-138,-130,0,-50,-168,0);
  triangle(138,-130,0,-50,168,0);
  fill(245,237,198);    //head
  ellipse(0,50,400,300);
  fill(255);
  circle(100,25,125);    //white of eyes
  circle(-100,25,125);
  push();
  fill(240,191,68);    //top and bottom arcs of the coin
  arc(0,-45,80,70,0,PI);
  arc(0,-285,80,70,PI,0,CHORD);
  pop();
  whisker();    //call whiskers
  coin();    //call coin
  eyesl(-130+s,25);    //pupils move with seconds
  eyesr(70+s,25);
  hourcolor();
  push();
  strokeWeight(4);    //mouth
  line(100,125,-100,125);
  arc(100,120,10,10,3/2*PI,.5*PI);
  arc(-100,120,10,10,.5*PI,3/2*PI);
  pop();
  push();
  fill(255);    //teeth
  triangle(-80,127,-60,127,-70,150);
  triangle(80,127,60,127,70,150);
  pop();
}
function whisker(){    //whiskers grow with the minutes
  var m=minute();
  push();
  for(var i=0;i<m;i++){
    noStroke();
    fill(245,237,198+3*i);
    rotate()
    ellipse(210+1.25*i,75,55,10);
    ellipse(-210-1.25*i,75,55,10);
    ellipse(200+1.25*i,90,55,10);
    ellipse(-200-1.25*i,90,55,10);
    ellipse(-80,-70-2*i,10,55);
    ellipse(80,-70-2*i,10,55);
  }
  pop();
}
function coin(){    //rectangles inside of coin
  var h=hour();
  for(var l=0; l<24; l++){
    rect(-40,-55-10*l,80,10);
  }
}
function hourcolor(){    //rectangles go gold with each new hour
  var h=hour();
  for(var l=0; l<=h; l++){
    fill(240,191,68);
    rect(-40,-55-10*l,80,10);
  }
}
function eyesl(x,y){    //left pupil
  fill(0);
  ellipse(x,y,15,90);
}
function eyesr(x,y){    //right pupil
  fill(0);
  ellipse(x,y,15,90);
}

Pokemon 2052 Shiny Meowth Pokedex: Evolution, Moves, Location, Stats

Looking Outwards 06

Alden Bates is a very small artist I found online, he has some art on his old blog that he used to keep and it just so happens to have randomly generated computer art. The piece I would like to talk about is called Bloom. Bates created it using a computer to randomly generate a square of random dots, he then applied Paint Shop Pro filters until he thought it was considered art. I admire this art piece because it was made by a small artist and it is what he considers to be art, it is nothing fancy and something I could easily make if I tried. I also admire how this work was created in 2002, about 18 years ago, this means random computer generated art has been used and relevant for a while now and as technology and computed become complicated this art will continue to grow.

http://www.tetrap.com/random/ran021206.html

LookingOutwards-06

The controversial website, https://thispersondoesnotexist.com/, generates portraits of seemingly real people with different features with just a page refresh. If told these are real people it is easily believable, however, they are computer-generated images from artificial intelligence. Phillip Wang is the software engineer which created this website. There is a randomness on how these “people” will be generated because there are theoretically, countless possibilities. And depending on the scale, millions of facial features.

The controversy of this project is because of the realistic properties of each generated face. The sheer amount of people on the planet is difficult to keep on record who is who and if someone that is generated is truly a fake person. The concern is if a false human can be easily generated at a refresh of a page, then how can we trust one of our more basic senses, sight. Despite not being a so-called artistic project, I found this to be quite refreshing because of the limits of this project. Saying something looks alike is subjective between any two people but not with our developing technology, the randomness created from this AI can be used to create an identity or mimic an existing one. It is interesting the capabilities of a randomly generated face. It can be unlocking a phone using facial recognition or playing a character with an avatar which is not even real.

Project-06-Abstract-Clock

clockcyl

function setup() {
    createCanvas(480, 480, WEBGL);
    angleMode(DEGREES);
} 

function draw() {
    background(204,207,235);
    directionalLight(250, 250, 250, 0, 0, -45);
    rotateX(135);
    noStroke();
    //midplane circles
        push();
            rotateX(90);
            ellipse(0,30,100);
            ellipse(160,-40,100);
            ellipse(80,0,100);
            ellipse(-160,-40,100);
            ellipse(-80,0,100);
            stroke(255);
            strokeWeight(1);
            noFill();
            for(let i=0; i<2000;i+=20){
                ellipse(0,30,120+i);
                ellipse(160,-40,120+i);
                ellipse(80,0,120+i);
                ellipse(-160,-40,120+i);
                ellipse(-80,0,120+i);
            }
            noStroke();
        pop();
    //millisecond cylinder
        push();
            translate(160,0,-40);
            fill(255,20);
            cylinder(40, 240);
            fill(40, 106, 167);
            cylinder(40, (millis()%1000)*0.24);
            cylinder(36, ((millis()+75)%1000)*0.24);
            cylinder(32, ((millis()+150)%1000)*0.24);
            cylinder(28, ((millis()+225)%1000)*0.24);
            cylinder(24, ((millis()+300)%1000)*0.24);
        pop();
    //second cylinder
        push();
            translate(80,0);
            fill(255,20);
            cylinder(40, 240);
            fill(40, 159, 167);
            cylinder(40, (second()%60)*4);
            cylinder(36, ((second()+4.5)%60)*4);
            cylinder(32, ((second()+9)%60)*4);
            cylinder(28, ((second()+13.5)%60)*4);
        pop();
    //minute cylinder
        push();
            translate(0,0,30);
            fill(255,20);
            cylinder(40, 240);
            fill(121,94,199);
            cylinder(40, (minute()%60)*4);
            cylinder(36, ((minute()+4.5)%60)*4);
            cylinder(32, ((minute()+9)%60)*4);
        pop();    
    //hour cylinder
        push();
            translate(-80,0);
            fill(255,20);
            cylinder(40, 240);
            fill(94,199,173);
            cylinder(40, (hour()%24)*10);
            cylinder(36, ((hour()+1.8)%24)*10);
        pop();
    //day cylinder
        push();
            translate(-160,0,-40);
            fill(255,20);
            cylinder(40, 240);
            fill(190,94,199);
            cylinder(40, (day()/31)*240);
        pop();
}

I used abstract filling 3D cylinders to represent the passing of time at different scales. From left to right the scales are- Days/Month, Hours/Day, Minutes/Hour, Seconds/Minute, Milliseconds/Second.

I drew out the overall structure and my initial spacing plan for the 3D geometry.

LookingOutwards-06

The randomized images with the titles that created them

This project uses random numbers to generate randomized art based on a user-input title string to seed the generation. It produces completely random psychedelic works that are featured in a constantly updated publicly available gallery. Based on the creator’s description, it seems that the process for image generation is based on the seed from the title and then random number generators use that as input to create different but categorically similar works. Some of them share similar overall compositions, materials, or color combinations. The creator’s sensibilities are manifested through how the code displays the randomness, or how the actual visual display reflects the random numbers. In some sense though, the actual art is created by the user’s name input, because this is what seeds the visual generation. The creator just created the method or tool for the translation of that text to a randomized visual output.

random-art.org
Coded by Andrej Bauer, works ‘created’ by the public

LO-06 Randomness

Martin Krzywinski created this piece, Faces of Randomness on Circos in 2013. Krzywinski created this piece based on the digits of 𝜋 and drawing lines between sixteen random numbers with 1000 digits each represented by their digit transition paths and frequencies.

I admire the intricacy of this piece. The placement of the lines and use of colors make each of the 16 circles look like mini galaxies. I also admire how the artist is able to visually portray the impact of changing just one number to create a whole new image. It is also interesting to see how each of the 16 circles look similar despite the random inputs used to create the piece.

Krzywinski’s background as a scientist influences his artistic sensibilities which is seen in the way he uses data to inform his art. Krzywinski uses data and facts to create his artwork and enhances it with bright color choices. He balances the use of randomness by organizing the piece in a neat grid structure.