Month: September 2020

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

sillymir proj2Download 

var bg1=255
var bg2=98
var bg3=109
var hairlength=200
var teethwidth=50
var teethHeight=50
var lipsWidth= 90
var lipsHeight= 90
var eyeGreen= 77
var hc1=215 // hair color
var hc2= 200
var hc3= 174

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

function draw() {
    background(204);
    fill (bg1, bg2, bg3); // red dark
    rect (0, 0, 480, 640)
    fill (238, 208, 191) ; // skin base color
    circle (240, 240, 240);
    fill (181, 82, 94); // lips
    arc (240, 300, lipsWidth, lipsHeight, 245, 600)
    fill (255, 254, 246); // teeth
    arc (240, 307, teethwidth, teethHeight, 245, 600)
    fill (228, 141, 146) ; // cheek left
    circle (175, 280, 28);
    fill (228, 141, 146) ; // cheek right
    circle (305, 280, 28);
    fill (223, 190, 170) ; // nose left
    circle (230, 278, 10);
    fill (223, 190, 170) ; // nose right
    circle (250, 278, 10);
    fill (223, 190, 170) ; // nose center
    circle (240, 280, 20);
    fill (235, 258, 234); // eye white left
    circle (200, 235, 35)  
    fill (235, 258, 234); // eye white right
    circle (280, 235, 35)
    fill (74, eyeGreen, 68); // eye color left
    circle (200, 235, 25)
    fill (74, eyeGreen, 68); // eye color right
    circle (280, 235, 25)
    fill (28, 22, 26); // eye pupil left
    circle (200, 235, 12)
    fill (28, 22, 26); // eye pupil right
    circle (280, 235, 12); 
    fill (251, 255, 248); // eye hl left
    circle (205, 230, 5) 
    fill (251, 255, 248); // eye hlright
    circle (285, 230, 5);
    fill (154, 114, 71); // eyebrow left thick
    rect (165, 205, 50, 5)
    fill (154, 114, 71); // eyebrow right thick
    rect (260, 205, 50, 5)
    fill (hc1, hc2, hc3); // hair left side
    rect (100, 180, 60, hairlength)
    fill (hc1, hc2, hc3); // hair right side
    rect (320, 180, 60, hairlength);
    fill (hc1, hc2, hc3); // hair across
    arc (240, 200, 280, 190, 531, 710);

}

function mousePressed() {
    bg1 = random(1, 254);
    bg2 = random(1, 254);
    bg3 = random(1, 254);
    hairlength = random(200,400);
    teethwidth= random(40,60);
    teethHeight= random(40,60);
    lipsWidth= random(80,100);
    lipsHeight= random(80,100);
    eyeGreen= random (30,150);
    hc1= random (1,254);
    hc2= random (1,254);
    hc3= random (1,254);    


}

I wanted to see variations in color. I changed the eyes and background colors. I also altered hair length and mouth size.

02 Project Variable Face – Whack-A-Frog

I seem to have toads and frogs on my mind a lot lately. A lot of people say I embody the same spirit as one, so I am trying to embrace that in a positive way. For this project, I wanted to depict a frog poking its head out of water.

As I progressed with the code, I wanted to add some additional environmental elements. With the help of some online searches, I found a project on p5js.org with randomized dots. I tried using them to show movement of water. I am not sure how effective it was, but I think it makes the scene a bit more interesting.

Again this week, I really took advantage of the power of arcs in p5.js. With so many parameters, you can do so much curvature so easily. I used arcs for the eyeball and pupil, which are very different shapes, but by adjusting the mode of arc from CHORD to PIE, you can get a lot of variety. Hot tip: switch the degree mode of the project from RADIANS to DEGREES if you don’t explicitly process the world in immediate relation to Pi. Or don’t, if you like pain.

sketchDownload

//Julia Steinweh-Adler
//Section D

//Global Variables

var eyesSize = 20
var headWidth = 150;
var eyeWidth= 40;
var mouthSize = 30;
var mouthWidth = 30;
var pupil=20;
var smallX = 600/2    //canvas width divided by 2  
var smallY = 480/2    //canvas height divided by 2
var largeX = 600/3.5   //canvas width divided by 3.5  
var largeY = 480/3.5   //canvas height divided by 3.5
var pupilAngle = 300
var nostrilWidth = 5
var nostrilHeight = 6

    //Water Ripple Dot Background values
var spot = {    //coordinates
    x:100,
    y: 50,
};

var col = {    //color values
    r:0,
    g:0,
    b:255,
};

function setup() {
    createCanvas(600, 480);
    angleMode(DEGREES);    //Change angle mode to degrees to make arcs easier
    frameRate(2)    //Change framerate to 2 frames per second
  
}
  function draw() {
    noStroke();

//BACKGROUND
    background(49, 30, 220); //Light Blue
    
    
    //Water Ripple Dot Pattern Background
    spot.x= random (0, width);
    spot.y= random (0, height);

    noStroke();
    col.r = random (0);
    col.g = (0);
    col.b = random (100, 200);
    
    fill (col.r, col.g, col.b, 120);
    ellipse (spot.x, spot.y, 1600, 400);    //Change dot dimensions and coordinates
    
    //Water Ripple
    stroke(60, 30, 220);
    strokeWeight(4);
    noFill();
    ellipse(smallX, smallY-90, 200, 100)
    ellipse(smallX, smallY-90, 250, 120)

    
//FROG
    //Face
    noStroke();
    fill(44, 94, 76); // Face Color, Green
    arc(smallX, smallY - 90, headWidth, 80, 0, 180, PIE);    //Head top arc
    arc(smallX, smallY - 89, headWidth, 100, 180, 0, PIE);   //Head bottom arc
    circle(smallX+50, smallY-125, eyesSize+10);    //right eyelid
    circle(smallX-50, smallY-125, eyesSize+10);    //left eyelid
      
    //Eyeball
    fill(124, 84, 30);     //Brown eyeball color
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, 210, 120, CHORD);    //right eye arc
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, 60, 330, CHORD);    //left eye arc
    
    //Eye Pupil   
    fill(0);     //Black pupil
    stroke(204, 168, 18);    //Change stroke to yellow
    strokeWeight(2);
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, pupilAngle, pupilAngle-255, PIE);    // right eye pupil
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, (-pupilAngle)+435,(-pupilAngle)+540, PIE);    //left eye pupil
    
    //Nostril
    noStroke();
    ellipse(smallX + 10, smallY - 90, nostrilWidth, nostrilHeight)    //Right Nostril
    ellipse(smallX - 10, smallY - 90, nostrilWidth, nostrilHeight)    //Left Nostril   
    
    
    //Mouth
    noStroke();
    fill(109, 165, 144); //top lip color, Green (same as face to integrate shape)
    arc(smallX, smallY-70, mouthWidth, mouthSize, 0, 180, PIE);    //top lip arc 
    fill(44, 94, 76);    //mouth color, light green
    arc(smallX, (smallY)-75, mouthWidth, mouthSize, 0, 180, PIE);    //mouth arc
    
    
//Foreground Grass
    beginShape();
    fill(10,60,4);
    vertex(0,height);
    vertex(width*1/24,height*3/4);//peak 1
    vertex(width*2/24,height*1/2);
    vertex(width*3/24,height*5/9);//peak 2
    vertex(width*4/24,height*27/32);
    vertex(width*5/24,height*3/4);//peak 3
    vertex(width*6/24,height*29/32);
    vertex(width*7/24,height*2/3);//peak 4
    vertex(width*8/24,height);
    vertex(width*9/24,height*1/2);//peak 5
    vertex(width*10/24,height*30/32);
    vertex(width*11/24,height*5/9);//peak 6
    vertex(width*12/24,height*27/32);
    vertex(width*13/24,height*3/4);//peak 7
    vertex(width*14/24,height*29/32);
    vertex(width*15/24,height*2/3);//peak 8
    vertex(width*16/24,height);
    vertex(width*17/24,height*2/3);//peak 9
    vertex(width*18/24,height*29/32);
    vertex(width*19/24,height*3/4);//peak 10
    vertex(width*20/24,height*30/32);
    vertex(width*21/24,height*5/9);//peak 11
    vertex(width*22/24,height*27/32);
    vertex(width*23/24,height*3/4);//peak 12
    vertex(width,height);
  endShape();
}



function mousePressed() {
    smallX = random(100,500);
    smallY = random(280,310);
    largeX = random(190, 200);
    largeY = random(140,150);
    headWidth = random(130, 170);
    pupilAngle = random(250,350);
    mouthWidth = random(60, 100)
    eyesSize = random(30, 50);
    mouth = random(2,5);
    nostrilWidth = random(4,15);
    nostrilHeight = random(4,15)
}
Frog poking its head out of the water Stock Photo: 180696071 - Alamy

Project: Variable Faces

The challenging part of this project was figuring out how much to constrain the random function for the various elements that are generated.

sketchDownload
var eyeSize = 10;
var foreheadWidth = 200;
var foreheadHeight = 100;
var cheekWidth = 300;
var cheekHeight = 120;
var chinWidth = 30;
var chinHeight = 30;
var mouthWidth = 120;
var mouthHeight = 3;
var hairColor = 0;
var earSize = 57;
var fill = 67;
var noseWidth = 20;
var noseHeight = 15;
var eyebrowAngle = 0; //shifts eyebrow up and down to create expressions

function setup() {
    createCanvas(480, 640);
    background(67);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	noFill();
	stroke(random(0,255),random(0,255),random(0,255));
	strokeWeight(1);
	circle(random(0,480),random(0,640),random(40,500)); //hypnotic background generator
	circle(random(0,480),random(0,640),random(40,500)); //repetition to increase speed of generator
	var foreheadY = height/2 - (cheekHeight/2);
	var chinY = height/2 + (cheekHeight/2);
	noStroke();
	fill(255,223,64);
	beginShape(); // yellow 
	    vertex(width/2, chinY + 10);
	    curveVertex(width/2 + 150, chinY + 40);
	    curveVertex(width/2 + 220, height);
	    vertex(width/2, height);
	endShape(CLOSE);
	fill(161,156,35,100);
	beginShape(); // yellow cloak shaodw 
	    vertex(width/2, chinY + 15);
	    curveVertex(width/2 + 148, chinY + 43);
	    curveVertex(width/2 + 218, height);
	    vertex(width/2, height);
	endShape(CLOSE);
    fill(207,165,93); 
	beginShape(); //body
	    vertex((width/2-chinWidth/2) -10,height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        curveVertex(width - 100, height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        vertex(width - 50, height);
    endShape(CLOSE);
	fill(225,204,115);
	ellipse(width/2 - foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //left ear
	ellipse(width/2 + foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //right ear
	fill(hairColor);
    circle(width/2, foreheadY,foreheadWidth + 25); //hair
	fill(207,165,93);
	rect((width/2-chinWidth/2) -10, height/2 + (cheekHeight/2) - (chinHeight/2), chinWidth + 20, cheekHeight*.75); //neck
	fill(225,204,115);
    ellipse(width/2, foreheadY, foreheadWidth, foreheadHeight); //forehead
    ellipse(width/2, height/2, cheekWidth, cheekHeight); //cheeks
    fill(179,30,90,100);
    circle(width/2 - (cheekWidth/4 + 10), height/2, cheekWidth/8); //left rosy cheek
    circle(width/2 + (cheekWidth/4+ 10), height/2, cheekWidth/8); //right rosy cheek
    var eyeposLX = (width/2 - foreheadWidth/4);
    var eyeposRX = (width/2 + foreheadWidth/4);
    var eyeposY = (height/2 - foreheadHeight/2);
    fill(0);
    circle(eyeposLX,eyeposY,eyeSize); //left eye
    circle(eyeposRX,eyeposY,eyeSize); //right eye
    fill(200,60,20);
    beginShape(); //monk robe
        vertex(0,height);
        curveVertex(width*.25,height*.6875);
        curveVertex(width/2, chinY + 20);
        vertex(width - 50, height - 20);
        vertex(width - 40, height);
    endShape(CLOSE);
    fill(105,40,30,150);
    triangle(0,height, width*.25, height*.6875, width*.25 + -70, height); //red cloak shadow
    triangle(width*.25 + 40,(height*.6875) +30, width*.25 + 20, height, width*.25 - 20, height); //red cloak shadow
    triangle(width*.25 + 70, height, width*.25 + 80,(height*.6875) + 25, width*.25 + 170, height);
    triangle(width*.25 + 230, height, width*.25 + 195, height - 100, width*.25 + 300, height); 
    fill(225,204,115);
    ellipse(width/2, height/2 + (cheekHeight/2), chinWidth, chinHeight); //chin
    fill(0);
    ellipse(width/2,height/2 + cheekHeight/4 ,mouthWidth,mouthHeight); //mouth
    fill(135,108,61);
    beginShape(); //nose
        vertex(width/2 - noseWidth, height/2 - 10);
        curveVertex(width/2, height/2);
        vertex(width/2 + noseWidth, height/2 - 10);
        curveVertex(width/2, height/2 + noseHeight);
    endShape(CLOSE);
    stroke(0);
    noFill();
    strokeWeight(5);
    line(eyeposLX - 10, eyeposY - 15, eyeposLX + 20, (eyeposY - 15) + eyebrowAngle); //left eyebrow
    line(eyeposRX - 20, (eyeposY - 15) + eyebrowAngle, eyeposRX + 10, eyeposY - 15); //right eyebrow
}

function mousePressed() {
	cheekWidth = random(200, 325);
	cheekHeight = random(120,200);
	foreheadWidth = random(150, (cheekWidth - 100));
	foreheadHeight = random(80, (cheekHeight/2));
	chinWidth = random(30,80);
	chinHeight = random(30,70);
	mouthHeight = random(1,30);
	mouthWidth = random (40, cheekWidth/2);
	background(random(0,255),random(0,255),random(0,255));
	hairColor = random(0,250);
	earSize = random(40, 70);
	noseWidth = random(10,30);
	noseWidth = random(10,40);
	eyebrowAngle = random(-10,20);
	eyeSize = random(10,20);
}

Looking Outwards-02

One generative art project I admire is “Traffic Simulation” created by Robert Higgins. His simulation mimics various traffic lights with a multitude of oncoming traffic. What draws my attention to this simulation is his ability to make the interactions (speed, stopping, pausing) of the cars seem very human-like. They do not act simultaneously and in sync, which would not mimic the reality of traffic. The algorithm in this work first laid out its foundation with simple lines and curves fo map out the road on an XZ plane. As the program develops, there must be various statements in the program to determine the car’s behavior depending on the color of the light. The cars are covered in sensors and multiple variables are considered such as aggressiveness. You can see the artist’s creativity throughout this project in his ability to recreate human-like traffic interactions, as well as his choice of color and sleek design.

Traffic Simulation | Robert Hodgin | Jan. 2020

Traffic

LO 2 – Generative Art; Bone Chair

At its surface, generative art doesn’t mean much to me. As a design-oriented person, I appreciate beautiful things, yet they are most meaningful to me when they are rooted in some practical function. However, I have found an example of generative art that provides enough practical use to satisfy me – Joris Laarman’s ‘Bone Chair’.

Joris Laarman. Bone Chair. 2006 | MoMA

This chair is a piece of furniture resulting from a specially designed computer algorithm, used to structure supports in a way that mimics the natural growth of bones and trees. Starting with a chunk of material and virtually applied forces, the algorithm slowly removes material where it is not structurally significant, leaving behind only the most essential material for the given position of the furniture. As you might imagine, the final product feels machine-made in its precision and finish. However, this sculpting technique effectively captures the innate beauty of natural, irregular structures while simultaneously ensuring comfort and strong support. This algorithm draws me to the world of algorithmic art, since it shows me how digitally crafted art does not have to feel unnatural or impractical – if anything, it can streamline the integration of biomimicry into common objects around us in unexpected ways. And that, I find very exciting. 

Project 2- Variable Face

sketch
var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 400;
var eyecolor = 0;
var colorRed= 0;
var colorGreen = 0;
var colorBlue = 0;

var hairWidth= 400;
var hairHeight= 600;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);

    fill(0);
    stroke(0);
    rect(width/6, height/20, hairWidth, hairHeight); // black hair rect. behind



    fill(246,215,196); // head color
    stroke(246,215,196) 
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    fill(0);
    stroke(0);
    triangle(120,25, 500,220,500,25); // side bang


    //EYES VARIABLES
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    //2 eye dots
    fill(eyecolor);
    stroke(eyecolor);
    ellipse(eyeLX, height / 2.3, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2.3, eyeSize, eyeSize);

    //eye highlight
    fill (255);
    stroke(255);
    strokeWeight(10);
    ellipse(eyeLX, height/2.35, 1, 1);
    ellipse(eyeRX, height/2.35, 1,1);

    fill(colorRed, colorGreen, colorBlue);
    stroke(colorRed, colorGreen, colorBlue);
    line(eyeLX, height/1.6, eyeRX, height/1.6);

    noFill();
    beginShape();


    curveVertex(eyeLX, height/1.6);
    curveVertex(eyeLX, height/1.6);
    curveVertex(eyeLX+ 40, height/1.35);
    curveVertex(width/2, height/1.3);
    curveVertex(eyeRX- 40, height/1.35);
    curveVertex(eyeRX, height/1.6);
    curveVertex(eyeRX, height/1.6);

    endShape();


}
 
function mousePressed() {
    faceWidth = random(250, 300);
    faceHeight = random(350, 400);
    eyeSize = random(10, 30);
    hairWidth = random (400,450);
    hairHeight = random (600,650);
    eyecolor = random (0,200);
    colorRed = random (0,255);
    colorGreen = random (0,255);
    colorBlue = random (0,255);
}

Looking Outwards 2- Generative Art

SV15 @ QUE US Bank Tower, Los Angeles

The work of generative art I chose to analyze is called SV15 by Lia, an Australian artist . Her main concept is being fluid with what her machine generates, and not relying strictly on hard rules for her code. Her work has a minimalist quality, and turns her inspirations into abstract colors and forms. In her project SV15, I admire the aspect of fluidity in her work. This work is installed at Que US Bank Tower in Los Angeles, and it has an interactive component of movement that engages viewers when they enter the lobby. Additionally, there are layered shapes and varying opacities that ripple and overlap, and almost appear to be “blooming” when in motion, which creates a calming and relaxed feel. 

In terms of the algorithm itself, Lia probably used in her code a varying component or a random feature. She also must have used some loop functions that repeat and run the code so that the movement of the artwork continues to repeat itself. Additionally, her algorithm must have consisted of several values, highlights, and shadows of different blues. Opacity must have also been considered because her shapes overlap and create new overlays of color in her artwork when they move. 

Lia’s work is really unique and I enjoy her abstract qualities. Her work sets a professional, modern, and sophisticated tone for the environment that it is installed, and the pace of the movement in the artwork reflects the natural pace at which people and workers walk through the lobby of the bank. As an artist, her sensibilities were to make people feel at ease instead of stressed, and her generative artwork nicely creates that for people through her intentional use of color, and soft radiating movement of shapes. 

Project 2 Faces

Already upset that this isn’t working the way it’s supposed to so here’s a pessimistic post about my future in this class.

Project 2Download
function setup() {
    createCanvas(480, 640);
    background(45);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	var w = random(100, 400)
	var h = random(100, 500)
	var eyeWidth = random(10, 50)
	var eyeHeight = random(10, 60)
	var eyeBrow = random(300 - 2*eyeHeight, 320 - 2*eyeHeight)
    background(45);
    fill(190);
    ellipse(240, 320, w, h); //head
    fill(255);
    ellipse(240 - eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //left eye
    ellipse(240 + eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //right eye
    var x = 240 - eyeWidth/2
    var y = 320 - 2*eyeHeight
    var n = 240 + eyeWidth/2
    strokeWeight(4)
    line(x, y, x - eyeWidth, eyeBrow) //left eyebrow
    line(n, y, n + eyeWidth, eyeBrow) //right eyebrow
    if (y > 250) {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
        circle(x - 15, y, 10)
    } else {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
    	circle(n + 15, y, 10)
    }
    noLoop()
}