Category: SectionA

Project 02 – Variable Face

I made this out of curiosity: I wondered what certain aspects of the face would look like with different parameters, and messed around with them until I got this. The ears were the most interesting part to work on; I enjoyed working the variables and trying to get them go move with the face shape

sketch

//Diana McLaughlin, dmclaugh, Section A

var earWidth = 40
var earHeight = 60
var faceWidth = 300
var faceHeight = 350
var eyeHeight =35
var eyeWidth = 35
var pupil = 15
var browlx = 242
var browy =175 
var browlx2 = 277
var browy2 = 180
var browrx = 367
var browrx2 = 402
var mouthWidth = 90
var mouthHeight = 30
var nose =35

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

function draw() {
	background(0, 0, 255);
    fill(0, 200, 0);
    ellipse((width/2 - faceWidth/2), (height/2), earWidth, earHeight); //left ear
    ellipse((width/2 + faceWidth/2), (height/2), earWidth, earHeight); //right ear
    ellipse((width/2), (height/2), faceWidth, faceHeight); //head
    fill(255);
    ellipse((width/2 - 60), (height/2 - 30), eyeHeight, eyeWidth);
    ellipse((width/2 + 60), (height/2 - 30), eyeHeight, eyeWidth);
    fill(1);
    circle((width/2 - 60), (height/2 - 30), pupil);
    circle((width/2 + 60), (height/2 - 30), pupil); //eyes
    line(browlx, browy, browlx2, browy2);
    line(browrx, browy2, browrx2, browy); //eyebrows
    fill(255, 0, 0);
    ellipse((width/2), (height*.67), mouthWidth, mouthHeight); //mouth
    fill(200, 0, 150);
    circle((width/2), (height/2), nose); //nose
}

function mousePressed() {
	earWidth = random(25, 80);
	earHeight = random(25, 100);
	faceWidth = random(200, 450);
	faceHeight = random(200, 450);
	eyeHight = random(20, 55);
	eyeWidth = random(20, 55);
	pupil = random(5, 25);
	browy = random(165, 185);
	browy2 = random(165, 185);
	mouthWidth = random(50, 110);
	mouthHeight = random(20, 45);
	nose = random(20, 40);


}

LO-2

I was interested in Mitchell Whitelaw’s Succession. It is a beautiful, haunting work that I think takes a modern approach to documenting and presenting history. I find the combination of each fossil element to have the striking effect of confusing viewers and forcing them to take time to pick apart and understand each element. Each part of the composite it displays is shown below the entire image so viewers may deconstruct the composite to better understand the work. Whitelaw’s description presents the mechanics of the code, which selects five images from a database of two thousand and combines them. I suppose there is something which controls how the images fit together, most likely which controls each layer, as there is a foreground and many layers of backgrounds, and an algorithm for transparency as well. It’s a very deep work which presents Whitelaw’s own respect for the culture as all of the pieces of the composite are presented as vital, and even pieces of the composite are recognized below. His description includes his artistic goal for the piece: to present new views on industrial capitalism and find new ways to document and look backwards.

https://mtchl.net/succession/#

A generated image from Succession (Whitelaw, 2014)

Project 2 – Variable Face

sketch

For this project, I tried to play with the background a little and then change facial features such as blush, face width and height eye size along with expression and hair length and earring colour.

//Aadya Bhartia
//Section A

//global variables 
var circOp = 150;
var circR = 100;
var faceH = 220;
var faceW = 250;
var eyeWhite = 7;
var mouth = 80;
var blushH = 10;
var earring = 15;
var hairL = 200;
var r = 120;
var g = 120;
var b = 120;
var body = 400;
var ctr = 2;// using a counter for different expressions 
function setup() {
    createCanvas(600, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
	background(84,117,120);
	noStroke();
	//background circles
    fill(62, 140, 220, circOp);//varying circle opacity
    ellipse(20,20,circR);
    ellipse(560,300,circR);
    ellipse(140,270,circR);
    ellipse(390,100,circR);
    ellipse(500,500,circR);
    ellipse(80,4800,circR);
    ellipse(80,500,circR);
    ellipse(560,30,circR);
    //hair
    fill(81, 65, 47);
    ellipse(302,200, faceW + 90, faceH + 85);
    rect(257 - faceW/2, 210, faceW+89, hairL);
    //neck
    fill(211, 200, 190);
    rect(260,250,80,150);
    //face
    fill(241, 230, 218);
    ellipse(300, 210, faceW, faceH);
    //fringe 
    fill(81, 65, 47);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 100);
    curveVertex(260, 150);
    curveVertex(350, 155);
    curveVertex(400, 250);
    curveVertex(400, 300);
    curveVertex(450, 200);
    curveVertex(400, 100);
    curveVertex(300, 70);
    curveVertex(250, 85);
    curveVertex(220, 100);
    endShape();
    //eyes
    fill(80);
    ellipse(300+50, 200, 20);
    ellipse(300-50, 200, 20);
    fill(255);
    ellipse(300+45, 202, eyeWhite);
    ellipse(300-55, 202, eyeWhite);   
    //blush
    fill(250, 154, 120, 100);
    ellipse(300-50, 230, 50, blushH);
    ellipse(300+50, 230, 50, blushH);
    //glass - do not change 
    stroke(87, 120, 135);
    strokeWeight(4);
    noFill();
    ellipse(300 - 50, 200, 60);
    ellipse(300 + 50, 200, 60);
    arc(300, 200, 40, 40, PI, TWO_PI);
    //hoop colour changing 
    strokeWeight(2.5);
    stroke(r, g, b);
    ellipse(305 - faceW/2, 245,15, 30);
    //different mouth expressions 
    if (ctr == 1) {
    // draw a frown
        stroke(150, 50, 50);
        strokeWeight(4);
        arc(300, 280, 100, 60, PI, TWO_PI);
    } 
    else if (ctr == 2){
    // draw a happy face
        stroke(150, 50, 50);
        strokeWeight(4);
        arc(300, 260, 100, 60, 0, PI);
    } 
    else {
    // draw a straight face
        stroke(150, 50, 50); 
        strokeWeight(4);
        line(250, 280, 350, 280);
    }
    //clothes
    noStroke();
    fill(240, 130, 150);
    rect(250, 350, 100, 20);
    ellipse(300, 650, body, 600)
}
function mousePressed(){
    circOp = random(50,220);
	faceW = random(200,250);
	faceH = random(200,270);
	hairL = random(180,270);
    circR = random(30,300);
    eyeWhite = random(2,10);
    blushH = random(5, 15);
    r = random(10,200);
    g = random(10,200);
    b = random(10,200);
    ctr = int(random(1,4));
    body = random(250, 400);
}

Looking Outwards – 2

“Quantum Fluctuations: Experiments in Flux,” is a generative art work by artist Markos Kay. The artwork is a collaboration between him and scientists at the CERN research institute in Geneva. Kay aims to represent the quantum world through art and technology, therefore, visualizing processes which otherwise cannot be seen by bare eyes. Kay aims to “measure the spoils of a proton collision and compares the findings with data collected from supercomputer simulations.”


These complex and gorgeous combinations attracted me because there was a language between both Kay and the quantums, almost questioning who the real artist is. Along with that I appreciate how Kay was able to depict so beautifully something the man would most likely never see.
http://www.mrkism.com/quantum.html

Looking Outwards 02: Generative Art

Directed by one of the fashion’s most experimental designer, Hussein Chalayan, the wearable installations shown in the 2006 show employs laser technology and computational textile to emit laser beams with its motions. I appreciate how the piece is a critical exploration of the body in relation to technology and how it demonstrates that technology is a very suitable medium for any artist. By pixel mapping on a media server, the maker can control the visuals on the fabric with any video content. The final LED dress plays with lights and space, performing with a strong sense of spatial dynamics that manifested Chalayan’s fascination with architecture, aerodynamics, bodily form, and identities. It narrates the personal aspects of technology that emphasize how the borders between public and private are blurring in the digital world. Another reason that makes the work revolutionary is how the designer considers the daily outfit as a communication device while the traditional garments cannot. 

Link to the interview: https://showstudio.com/projects/readings#fashion_film

Project 2 Variable Face!

Instead of just varying the sizes of the elements of the faces I decided to go with having 2 or 3 set options for each element, then by assigning them numbers and calling them out via the random command, I could get a variation of faces from the set.

tjchen face
//tjchen
//15-104 section a

var face = 2;
var eyesright = 2;
var eyesleft = 2;
var eyesizeL = 5;
var eyesizeR = 5;
var hair = 2;
var mouth = 2;
function setup() {
    createCanvas(480, 600);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(220);
    rectMode(CENTER); 
    var cenx = (width/2);
    var ceny = (height/2);
    fill(255);
    rect(width/2, height/2, 50, 50);
    // short face
        if (face <=2 ){
            noStroke();
            rect(width/2, height/2, 80, 200, 40);
        } else if (face <= 3){
            noStroke();
            rect(width/2, height/2, 200, 200, 40);
        } else {
            noStroke();
            circle(width/2,height/2 ,200);
        }
    // eyes right
        if (eyesright<=2) {
            fill(0);
            circle((width/2)+ 10, (height/2)-20, eyesizeR);
        } else if(eyesright <=3) {
            fill(0);
            circle((width/2)+ 10, ((height/2)+ 3)-20, eyesizeR);
        } else {
            fill(0);
            circle((width/2)+ 10, ((height/2)- 3)-20, eyesizeR);
        }
    // eyes left
        if (eyesleft<=2) {
            fill(0);
            circle((width/2)- 10, (height/2)-20, eyesizeL);
        } else if(eyesleft <=3) {
            fill(0);
            circle((width/2)- 10, ((height/2)+3)-20, eyesizeL);
        } else {
            fill(0);
            circle((width/2)- 10, ((height/2)-3)-20, eyesizeL);
        }
    //hair 
        if (hair<=2) {
            //fro
            noStroke();
            fill(161, 119, 96);
            circle(cenx,ceny-100,80);
            circle(cenx+30,ceny-100,80);
            circle(cenx+80,ceny-100,80);
            circle(cenx-55,ceny-100,80);
            circle(cenx-80,ceny-100,80);

            circle(cenx,ceny-140,80);
            circle(cenx+30,ceny-135,80);
            circle(cenx+80,ceny-155,80);
            circle(cenx-55,ceny-140,80);
            circle(cenx-80,ceny-145,80);

            circle(cenx,ceny-180,80);
            circle(cenx+30,ceny-190,80);
            circle(cenx+80,ceny-185,80);
            circle(cenx-55,ceny-170,80);
            circle(cenx-80,ceny-180,80);
        } else if (hair<=3){
            //tophat
            noStroke();
            fill(0);
            rect(cenx,ceny-200,80,200);
            rect(cenx,ceny-100,100,20);
        }
    //mouth 
        if (mouth <=2) {
            stroke(0);
            strokeWeight(2);
            line(cenx-40, ceny+20, cenx+40, ceny+20);
        } else {
            fill(255,0,0);
            ellipse(cenx,ceny+20, 40,20);
            stroke(143, 4, 25);
            strokeWeight(2);
            line(cenx-20,ceny+20,cenx+20,ceny+20);
        }

}

function mousePressed(){
    face = (random(1,4)); 
    eyesright = (random(1,4));
    eyesleft = (random(1,4));
    eyesizeR = (random(5,10));
    eyesizeR = (random(5,10));
    hair = (random(1,4));
    mouth = (random(1,4));
}

Project 02- Variable Face

For my project, I decided that instead of coding a typical human face, I wanted to show different animal faces. I wanted the variability to come from the colors of the physical attributes of the animal, its background color, as well as its species! I chose four different animals– a cat, a bear, a koala, and a bunny. I kept the size of their attributes the same since I wanted some consistency with the other randomness.

mk24sketch02 
//Mirie Kim
//section A

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

var animal = 0;
var backgroundColorR = 230;
var backgroundColorG = 220;
var backgroundColorB = 250;
var headEarColorR = 0;  //and whiskers
var headEarColorG = 0;
var headEarColorB = 0;
var innerEarNoseColorR = 250;  //and  snout
var innerEarNoseColorG = 210;
var innerEarNoseColorB = 230;
var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0;
var smile = 3;
var bearNoseColorR = 90; //and bunny's
var bearNoseColorG = 209;
var bearNoseColorB = 49;
var smileX = 15;
var smileY = 40;

function draw() {
	if(animal >= 0 & animal < 1){ //cat
		noStroke();
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		triangle(205,205, 260, 145, 200, 130); //ears
		triangle(435,205, 380, 145, 440, 130);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(215,195, 250, 155, 215, 150); //inside ears
		triangle(425,195, 390, 155, 425, 150); 
		fill(255);
		ellipse(260,240, 80, 85); //eyes
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);	
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(320,280, 310, 270, 330, 270); //nose
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);

	}
	else if (animal >= 1 & animal < 2) { //bear
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,165,90); //ears
		ellipse(415,165,90);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,165,50); //inside ears
		ellipse(415,165,50);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270); 

	}
	else if (animal >= 2 & animal < 3) { //koala
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,185,140); //ears
		ellipse(415,185,140);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,185,80); //inside ears
		ellipse(415,185,80);
		//head
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220);
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		//nose
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320,275, 45, 57);

	}
	else if (animal >= 3 & animal < 4) { //bunny
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(260,145,60,250); //ears
		ellipse(380,145, 60, 250);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(260,145,30, 150); //inside ears
		ellipse(380,145,30, 150);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270);
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);	
	
	}
}

function mousePressed() {
	animal = random(0,4); //produces decimal so have to refer to range in if/else statements
	backgroundColorR = random(0,255);
 	backgroundColorG = random(0,255);
 	backgroundColorB = random(0,255);
	headEarColorR = random(0,255);
	headEarColorG = random(0,255);
	headEarColorB = random(0,255);
	innerEarNoseColorR = random(0,255);
	innerEarNoseColorG = random(0,255);
	innerEarNoseColorB = random(0,255);
	eyeColorR = random(0,255);
	eyeColorG = random(0,255);
	eyeColorB = random(0,255);
	bearNoseColorR = random(0,255);
	bearNoseColorG = random(0,255);
	bearNoseColorB = random(0,255);
}

Aaron Koblin – Flight Paths

Flight Patterns – Aaron Koblin

Koblin’s map of the United States flight paths for a day.
A motion visualization of the paths.

I am combining economic, psychological and creative studies as a Behavioral Economics major and an architecture and (hopefully) design minor. My combined vision of these two fields is actually exactly what is being manifested in this project. I love that in economics, human behavior is solidified and represented in a graph (hence the BePO major). The design comes in for most effectively representing this data to a viewer, and I think that Koblin used design perfectly to emulate the nature of flight paths. His sensibility comes in when making decisions about how to use brightness to suggest crowded areas, color for flight type, and opacity to enhance movement. So, this artwork essentially captures the type of work I want to be involved in. The team used Processing, a software designed to mimic hand-drawn visuals, to visualize the data. I would guess that the algorithm uses the start and endpoints of flights, as well as the speed, height, and time of day. There may be code that provides the most efficient and safe route using engine science and other air traffic to generate paths.

LookingOutwards-02

The work that I find inspirational is “Cables” created by Moka. It is the exact work that I like the ways of which the cables are intertwined in an order. Plus, the colors of the background and the cables are all appealing. The cables with light yellow and blue are spread horizontally and the others with pink and deep blue are spread vertically, but we don’t find the whole artwork to be complex, instead I think it is rather neat. I suppose the algorithm that generated the work is a program that can select the colors of the “lines” and the intervals of each color. The lines are probably on different covers so that they seem to be up or below one another. The artist hopes that his works can reveal a similar relationship between us and the machines. The crooked cables are arranged parallel to one another, and I think this is telling the audience how complicated information is transported and how the development of technology is forming our lives in a way that we don’t usually perceive. The different colors of each cable illustrates a different type of material that is transported through cables, whose colorfulness shows that our wonderful and convenient life is a bliss from technologies.

Cables, Moka, 2020

https://www.mokafolio.de/works/Cables

LO-2-Generative Art

Upon looking through Robert Hodgin’s portfolio, a project that caught my attention was “Star Chart.” This project was completed in April 2020 and is essentially a map of constellations from any time and location. As a statistics major, I study a lot about data so the fact that this project was achieved through the use of astronomical databases piqued my interest. I admire how he was able to take something rather unexciting and imperceptible like a database of numbers and made it into something much more visual and stimulating. This project was a continuation from a previous project of his from 2012 where he plotted about 120,000 different star positions in a 3-D space to mimic the stars surrounding the sun. For this new project, however, he wanted to show the night sky view of the stars so he used stereographic projection, which projects a sphere onto a plane.
Hodgin’s interest in physics and astronomy requires accuracy and precision, which suit perfectly with his methods of using data visualization to create his projects.