Author: tate johnson

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

Project-05-Wallpaper

da ‘working on 104 for tonight’ wallpaper

wallpapercompDownload

function setup() {
    createCanvas(600, 600);
    background(30);
    rectMode(CENTER);
    angleMode(DEGREES);
    noLoop();
}

function draw() {
    for(let i=-100; i<800;i+=200){
        for(let j=-300; j<800;j+=400){
            push();
            translate(j,i);
            patterndraw();
            pop();
        }
    }
for(let i=-200; i<800;i+=200){
        for(let j=-100; j<800;j+=400){
            push();
            translate(j,i);
            patterndraw();
            pop();
        }
    }
}

function patterndraw(){
    linebg();
    cord();
//display cord
    stroke(0);
       beginShape();
        curveVertex(0,-30);
        curveVertex(0,-30);
        curveVertex(40,-30);
        curveVertex(40,30);
        curveVertex(50,45);
        curveVertex(50,45);
    endShape();
    noStroke();
//table legs
    fill(60);
    rect(-60,30,5,60);
    rect(60,30,5,60);
//tabletop
    fill(75);
    rect(0,0,150,10);
//display
    fill(20);
    rect(0,-35,70,40);
    fill(210);
    rect(0,-35,65,35);
//lines on display
    strokeWeight(2);
    stroke(80);
    for(let r=0; r<26; r+=4){
        line(-30,-48+r,random(-27,27),-48+r);
    }
    noStroke();
//coffee cup
    //cup
        fill(120);
        rect(-50,-12,10,14,0,0,4,4);
    //handle
        noFill();
        stroke(120);
        strokeWeight(2);
        arc(-46,-12,8,8,-90,90);
        noStroke();
    //steam
        fill(60);
        beginShape();
            curveVertex(-50,-20);
            curveVertex(-50,-20);
            curveVertex(-52,-23);
            curveVertex(-47,-28);
            curveVertex(-50,-32);
            curveVertex(-50,-32);
        endShape();
//floor
      fill(255,255,255,20);
        beginShape();
            curveVertex(-63,60);
            curveVertex(-63,60);
            curveVertex(0,85);
            curveVertex(63,60);
            curveVertex(63,60);
        endShape();
//light casting
    fill(156,196,255,60);
    beginShape();
        curveVertex(0,-75);
        curveVertex(0,-75);
        curveVertex(85,0);
        curveVertex(0,85);
        curveVertex(-85,0);
        curveVertex(0,-75);
        curveVertex(0,-75);
    endShape();
//lamp shade
    fill(160);
    beginShape();
        vertex(-10,-75);
        vertex(10,-75);
        vertex(20,-65);
        vertex(-20,-65);
    endShape();
//person/chair
    //head
        fill(20);
        ellipse(0,-30,20,25);
    //humanarms
            ellipse(-26,-2,10,13);
            ellipse(26,-2,10,13);
            triangle(-31,-4,-20,-2,-20,-20);
            triangle(31,-4,20,-2,20,-20);
    //chairbase
        //vert part
            rect(0,40,6,35);
        //supports
            triangle(0,60,-30,60,0,50);
            triangle(0,60,30,60,0,50);
    //human legs
        beginShape();
            vertex(-18,60);
            vertex(-10,60);
            vertex(-6,30);
            vertex(-16,30);
        endShape();
        beginShape();
            vertex(18,60);
            vertex(10,60);
            vertex(6,30);
            vertex(16,30);
        endShape();
    fill(35);
    //seatback
        beginShape();
            vertex(-23,-22);
            vertex(23,-22);
            vertex(20,30);
            vertex(-20,30);
        endShape();
    //chairarms
        rect(-26,5,10,5);
        rect(26,5,10,5);
//computer
    fill(110);
    rect(50,45,18,30);
//power symbol on computer
    noFill();
    stroke(255);
    strokeWeight(1);
    arc(50,45,8,8,-60,-120,OPEN);
    line(50,40.5,50,44);
}

function linebg(){
    fill(85,88,77);
    noStroke();
    beginShape();
        curveVertex(-80, 50);
        curveVertex(-80, 50);
        curveVertex(-20,30);
        curveVertex(20,-30);
        curveVertex(120, -50);
        curveVertex(120, -50);
    endShape();
}

function cord(){
    noFill();
    strokeWeight(3);
    stroke(110);
    beginShape();
        curveVertex(-150, -40);
        curveVertex(-150, -40);
        curveVertex(-150,-41);
        curveVertex(-110,0);
        curveVertex(-45,-100);
        curveVertex(0,-71);
        curveVertex(0, -70);
        curveVertex(0, -70);
    endShape();
}

I used a quick drawing to understand how the pieces that connected from tile to tile, as well as the layering of all the objects because some were semi-translucent. I tried to add a little visual intrigue with randomized text lengths.

LookingOutwards-05

The Zoo, 2004

The project I chose is titled “The Zoo” by German 3D graphics design firm Zeitguised. I admire the ‘real-world’ utilization of the rendering software here, as many of these types of animated computer renders are done in synthetic environments, so having a synthetic subject interacting with a real environment adds a lot to the piece in my opinion. I know that algorithms exist that use a technology called ray tracing to understand how light interacts with objects, and algorithms define the different ‘materials’ as having different opacities, reflectiveness, and roughness. Using these algorithms in combination with real light and environment data only adds to the realism of these surreal forms, objects, and animations, making this project very successful.

“The Zoo” Zeitguised, 2004
https://vimeo.com/2917970
https://zeitguised.studio/

Project-04-String-Art

I used layered color and stroke width within one loop to create overlapping line intersections, so the overlapping create some dimensional ’rounded’ effects. I also didn’t want it to be only static, so I incorporated two mouse-activated line systems to make it more interactive.

lineartok

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 300);
    background(100);
    line(0, 0, 200, 400);
    line(400, 0, 200, 400);
    dx1 = (200)/numLines;
    dy1 = (400-0)/numLines;
    dx2 = (400-200)/numLines;
    dy2 = (-400)/numLines;
}

function draw() {
	background(100);
    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
    //base black lines
        strokeWeight(0.5);
        stroke('black');
        line(0,x2,400,x1);
        line(x1, y1, x2, y2);
        line(x2,y1+200,x1-400,y2+200);
    //white lines
        stroke('white');
        line(mouseX,mouseY,y1,y2);  
        line(x2,y1+400,x1,y2+400);
        line(0,400,x1,y2-100);
        line(400,200,x1-600,y2);
    //red lines
        strokeWeight(2);
        stroke('red');
        line(x1,x2,mouseX,mouseY);  
        line(x2-200,y1,x1-600,y2);
        line(100,400,x2,y2+400);
        line(x2,0,y2,400);
    //black lines as highest layer
        stroke('black');
        line(x2,y1+200,x1-400,y2);
        line(x2-200,y1,x1-200,y2);
        line(400,100,y1,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

Looking Outwards-04

Example of how the sonic algorithm connects similar note sequences

The project that I chose is the Eternal Jukebox, a program that analyzes a song for repeating notes and sequences of notes, so it creates an endless song. I admire the simplicity of the interface and how the visual communication relates to what the algorithm is doing to produce the sound. I think it works by using an algorithm to learn the sequence of notes or audio data as it sweeps through the song, so it can learn when to repeat sections without the song ending, using verses and choruses alternatively to make the song never-ending. There aren’t many artistic sensibilities involved aside from the visual interface, but there is some creative decision in how strict the algorithm is with cropping and replacing audio sequences.

https://eternalbox.dev/jukebox_index.html

Created by Paul Lamere in 2012, the process for the creation can be found at: https://musicmachinery.com/2012/11/12/the-infinite-jukebox/

Project-03: Dynamic Drawing

I was somewhat inspired by the overlapping tonal shapes of the art of designer Verner Panton, so I decided to use a similar concept for building tonal shades through scaling, adapting to the mouse movements. The whole structure of the program runs off of one while loop to create the intervals in spacing, location, rotation, and scale that many of the objects have.

Verner Panton Art Prints for Any Decor Style | Society6
Verner Panton painting

mouseadaptiveart

var centerX = 300;
var centerY = 225;

function setup() {
    createCanvas(600, 450);
    background(255);
}

function draw() {
	noStroke();
	background(255);
	rectMode(CENTER);
	let i =0;
	while(i<mouseX){
		noStroke();
//centered rectangle matrix
	fill(0,0,mouseX/3,20);
	rect(centerX,centerY,mouseX-i,mouseY-i); 
	rect(centerX,centerY,mouseY-i,mouseX-i);
//circles
    fill(255-(mouseY/3),0,255-(mouseX/3),10);
    //top left
	    ellipse(50,50,width-(mouseX-i),height-(mouseY-i));
	    ellipse(50,50,mouseY-i,mouseX-i);
	//top right
	    ellipse(550,50,width-(mouseX-i),height-(mouseY-i));
	    ellipse(550,50,mouseY-i,mouseX-i);
	//bottom right
	    ellipse(550,400,width-(mouseX-i),height-(mouseY-i));
	    ellipse(550,400,mouseY-i,mouseX-i);
	//bottom left
	    ellipse(50,400,width-(mouseX-i),height-(mouseY-i));
	    ellipse(50,400,mouseY-i,mouseX-i);
//gray bars
    fill(0,0,0,7);
    //left vert
        rect(150,centerY,300-(mouseY-(i/2)),height);
    //right vert
        rect(450,centerY,300-(mouseY-(i/2)),height);
//white bars
    fill(255);
    rect(centerX, centerY-i,width, i/20);
    rect(centerX, centerY+i,width, i/20);
//black twisting lines, use i to determine degree
    stroke(0);
    line(50,50+(i/2),550,400-(i/2));
    line(550-(i/2),50,50+(i/2),400);
	i+=50;
    }
//white ellipses
    strokeWeight(10);
    stroke(255);
    noFill();
    let j=0;
    while(j<15){
    	strokeWeight(5/j);
    	 ellipse(centerX, centerY+i,mouseX+(50*j), mouseX+(50*j));
    	 ellipse(centerX, centerY-i,mouseX+(50*j), mouseX+(50*j));
    	j++;
    }
}

Looking Outwards-03

Generating a New Balance 3D-printed midsole from pressure data from Nervous System on Vimeo.

This collaboration between footwear brand New Balance and 3D printing company Nervous System uses code to generate a 3D printed lattice for a sneaker midsole. I think the algorithm that they used relies on taking various weight inputs and understanding how different thicknesses of strands and densities of the lattice can be combined to allow for structural support as well as enough flex and bounce needed in a shoe midsole. The creator’s artistic sensibilities are shown in the final form through the type of lattice used, the overall form of the midsole, and the color and properties of the material used. Due to the fact that most of the structure and density are automatically generated, there isn’t as much room for creative expression.

8

New Balance and Nervous System for the Zante Generate
https://vimeo.com/146938134

Project-02-Variable-Face

Alien generator!

I wanted to do something a little less straightforward than a human face so I decided to do alien faces, with variable star background behind as well. I also played around with how to do the mouse click function and using noLoop and loop to assign all random variables in the main program instead of assigning variables in the mousePressed function.

AlienFace

var centerX = 240;
var centerY = 320;

function setup() {
    createCanvas(480, 640);
    background(220);
}

function draw() {
background(0);
noStroke();
var maincolorR = random(0, 255);
var maincolorG = random(0, 255);
var maincolorB = random(0, 255);
var headWidth = random(50,460);
var headHeight = random(50, 460);
var earWidth = random(10,70);
var earHeight = random(10,70);
//space backrgound
    fill(250);
	var starSize = random(4,7);
	for (let i = 0; i < 40; i++){
        ellipse(random(0,480), random(0,640), starSize, starSize);
	}
	for (let i = 0; i < 60; i++){
        ellipse(random(0,480), random(0,640), starSize-2, starSize-2);
	}
//neck
    //filling with primary color
        fill(maincolorR,maincolorG,maincolorB);
        var widthNeck = random(30, headWidth);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
    //adding dark tone over for depth
        fill(0,0,0,50);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
//ears
    //left ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
    //right ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
//body
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,640,random((widthNeck+30),480),random(80,200));
//antenna
    //left antenna
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
    //right antenna
        fill(maincolorR,maincolorG,maincolorB);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
//face
	fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,centerY,headWidth,headHeight);
//nose 
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
    fill(0,0,0,50);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
//eyes
    //left eye
	    fill(0,0,0);
	    ellipse(centerX-random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
	//right eye
        ellipse(centerX+random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
//mouth
    ellipse(centerX, centerY+(headHeight/3), random(20,headWidth/6), random(5, headHeight/9));
//number
    fill(250);
    text('specimen number:',145,50);
    text(round(random(0,50000)), 260, 50);
noLoop();
}

function mouseReleased() {
  loop();
}

Looking Outwards- 02

I chose this project because I was impressed by the complexity of the algorithm behind the creation, in addition to the striking visuals. I admire how it’s based on particle interactions and collisions from the natural world, instead of abstractly defined particles with ‘random’ interactions. I like the transparency and honesty of using particle collisions and interactions because of how it makes the concepts accessible through visual representation. The algorithm uses particle simulations where the interactions between particles create color and form. I don’t understand how the different colors and textures are defined, but it seems like certain parts of the interaction are encoded to certain colors and materials. The artistic sensibilities are showcased by the framing and definition of the visuals (how zoomed the viewpoint is), the color and light contrast, and the pacing of the video visuals. This combined with the strong algorithm creates a complex and captivating visual experience, as the pattern of interactions has elements of repetition and randomness.

Markos Kay “Quantum Fluctuations: Experiments in Flux”
http://www.mrkism.com/quantum.html

Project 1 – Self Portrait

tateportrait
function setup() {
    createCanvas(1000, 1000);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(164,138,187);
	//shirt
	noStroke();
	fill(58,101,244);
	ellipse(500,1000,800, 600);
	//collar
	noStroke(); 
	fill(160,160,160);
	rect(450,700,100,450);
	//neck
	noStroke();
	fill(161,118,72);
	ellipse(500,700,300,350);
	//left ear
	noStroke();
	fill(216,160,107);
	ellipse(250,500,75,150);
	//right ear
	noStroke();
	fill(216,160,107);
	ellipse(750,500,75,150);
	//beard
	noStroke();
	fill(184,137,86);
	ellipse(500,500,500,600);
	//hair
	noStroke(); 
	fill(103,78,54);
	ellipse(500,400,500,400);
	//face
	noStroke();
	fill(216,160,107);
	ellipse(500,475,475,300);
	//nose
	noStroke(); 
	fill(196,143,93);
	rect(475,480,50,125);
	//lips
	noStroke();
	fill(185,94,75);
	ellipse(500,670,140,40);
	//left eybrow
	noStroke(); 
	fill(103,78,54);
	rect(360,445,100,25);
	//right eybrow
	noStroke(); 
	fill(103,78,54);
	rect(540,445,100,25);
	//left eye
	noStroke(); 
	fill(255,255,255);
	ellipse(410,505,65,23);
	//right eye
	noStroke(); 
	fill(255,255,255);
	ellipse(590,505,65,23);
	//left pupil
	noStroke(); 
	fill(58,101,244);
	ellipse(410,505,23,23);
	//right pupil
	noStroke(); 
	fill(58,101,244);
	ellipse(590,505,23,23);
}