Author: Emily

LookingOutwards-05

In her artwork, Nimbes, Joanie Lemeecier and James Ginzburg attempt to capture the paradox of observation: how as we observe and understand more rules and truths in our universe we understand that we know less and even that through a different lens these truths no longer apply. These digital artists use 3D rendering to compute a series of images that consist of small individual pieces that occasionally relate to each other to create a recognizable image of a church or tree canopy for example before exploding. This disintegration of the recognizable, the observable, represents the limits of our understanding and how the truths we may understand as the image of a church are in fact irrelevant. I find their work particularly interesting because it serves as a reminder of the chaos that exists outside our collective and individual perception of the universe. 

Abstract Rendition of Tree Trunks
Abstract Rendition of Church Facade

Project-04-String Art

sketch
// Emily Franco
// efranco
// Section C

//num of string lines
var numLines = 50;

//base lines
var dx1;
var dy1;
var dx2;
var dy2;

//string lines
var x1;
var y1;
var x2;
var y2; 

//counts sets of lines
var setCount = 0;

//line points
var lnx1; 
var lny1;
var lnx2;
var lny2;

//colors
r = 0; 
g = 0; 
b = 0;
function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background ("white");
}

function draw() {
	var halfW = width/2;
	var halfH = height/2;
	
	if (setCount == 0){
		//-----first line set--------
		lnx1 = 0; 
		lny1 = 0;
		lnx2 = width/10;
		lny2 = height-(height/12);
	}else if (setCount == 1){
		//-----second line set--------
		lnx1 = width/10; 
		lny1 = height-(height/12);;
		lnx2 = halfW;
		lny2 = height-(height/7);
	}else if (setCount == 2){
		//-----third line set--------
		lnx1 = halfW; 
		lny1 = height-(height/7);
		lnx2 = width-(width/6);
		lny2 = height-(height/2);
	}else if (setCount == 3){
		//-----fourth line set--------
		lnx1 = width-(width/6); 
		lny1 = height-(height/2);
		lnx2 = width-(width/3);
		lny2 = 0;
	}else if (setCount == 4){
		//-----fifth line set--------
		lnx1 = width-(width/3); 
		lny1 = 0;
		lnx2 = width/2;
		lny2 = height/8;
	}else if (setCount == 5){
		//-----fifth line set--------
		lnx1 = width/2; 
		lny1 = height/8;
		lnx2 = width/9;
		lny2 = height/9;
	}else if (setCount>5){
		//stop looping
		noLoop();
	}

	//generate random colors
	r = random (255);
	g = random (255);
	b = random (255);

	push();
	noStroke();
	//fill trangle between base lines
	fill (r,g,b,100);
	beginShape();
	vertex (lnx1,lny1);
	vertex (halfW,halfH);
	vertex (lnx2,lny2);
	endShape();
	

	//draw base lines
	line(halfW,halfH,lnx1,lny1);
	line(halfW,halfH,lnx2,lny2);

	pop(); 

	//get position increment for string line
	dx1 = (halfW-lnx1)/numLines;
	dy1 = (halfH-lny1)/numLines;
	dx2 = (lnx2-halfW)/numLines;
	dy2 = (lny2-halfH)/numLines;

	//reset string postions
	x1 = lnx1;
	y1 = lny1;
	x2 = halfW; 
	y2 = halfH;

	for (var i = 0; i<numLines; i+=1){
		//inverted stroke color
		stroke (255-r,255-g,255-b,150);
		//draw string lines
		line (x1,y1,x2,y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
	}

	setCount += 1;
}

LookingOutwards – 04

Christian Marclay is an artist and composer with a strong interest in collages. In 2018, he used Snapchat videos and audio to compose and visualize a series of projects made up of a collage of video cuts. In one project a collection of phones hanging from the ceiling; as people speak to them the software matches the frequency of their voice to Snapchat videos and displays them on the screen as a reply. In another, a piano’s keys are connected to sound clippings from Snapchat videos, and as a player presses the keys videos and their sound display on a large screen. All the projects in this collection are interactive; I think this makes it more interesting because Snapchat is an app most people are familiar with and his project series allows them to use it in an entirely different way.

Project – 02-Variable Face

sketch
// Emily Franco
// efranco
// Section C

//color only randomized when page is loaded
var x = 0;

//-----SLIDER VARS-----
//stores latest mouseX position for slider
var xPos;
//stores past x positions
var pastXPos=0;
//bar height
var barH = 20;
//bar height
var barWidth = 10;
//tracks if mouse has been pressed
var pressed = 0;

//-----DEFAULT FACE VARS----
var eyeWidth = 16;
var eyeHeight = 24;

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

function draw() {
	//reference for position of face elements
	var y_ref_pos = width/2.5;
	strokeWeight(0);
	background (138,176,162);	

	//header 
	fill(0);
	textSize (20);
	text ('Slide the arrow to pick a face for me.',10,barH+barWidth+20);

	//----EMOTION METER----
	//meter sliderer mark
	fill("black");
	triangle (((width/5)*2)+(width/10),barH-2,((width/5)*2)+(width/10)-3,barH-7,((width/5)*2)+(width/10)+3,barH-7);
	if (mouseIsPressed){
		//draw over 1st triangle background
		background (138,176,162);	
		triangle (xPos=mouseX,barH-2,mouseX-3,barH-7,mouseX+3,barH-7);
		pressed = 1;
	}else if (pressed==1){
		//draw over 1st triangle background
		background (138,176,162);	
		triangle (xPos,barH-2,xPos-3,barH-7,xPos+3,barH-7);
	}
	
	//meter
	fill (85,180,220); //blue
	//very happy
	rect(0,barH,(width/5),barWidth);
	//happy
	fill(193,230,90); //green
	rect(width/5,barH,(width/5),barWidth);
	//meh...
	fill(225,181,37); //yellow
	rect((width/5)*2,barH,(width/5),barWidth);
	//shock
	fill(252,65,18); //red
	rect((width/5)*3,barH,(width/5),barWidth);
	//angry
	fill(137,5,5); //dark red
	rect((width/5)*4,barH,(width/5),barWidth);

	//--------HAIR-------
	//back hair
	fill (104, 66, 17); //dark brown
	ellipse (width/2, y_ref_pos+28,260,400);

	//--------CLOTHES-------
	fill (220, 96, 46); //orange
	arc((width/2)-32+44,y_ref_pos+158,280,70,Math.PI,0);
	//shirt 
	rect((width/2)-87,y_ref_pos+140,181,180);

	//------DEFALUT FACE-----
	strokeWeight (.25);
	//base ears 
	fill (238, 217, 197); //beige
	ellipse ((width/2)-106,y_ref_pos,32,60);
	ellipse ((width/2)+106,y_ref_pos,32,60);
	//neck 
	fill (238, 217, 197);//beige
	ellipse((width/2)+1, y_ref_pos+130,90,60);
	strokeWeight (0);
	rect((width/2)-44, y_ref_pos+90,90,40);
	//base face
	stroke("black");
	strokeWeight (.5);
	ellipse (width/2,y_ref_pos,200,232);

	if (pressed == 1){
	//nose 
	strokeWeight (0);
	fill (229, 155, 99); //orange
	triangle (width/2,y_ref_pos-20,(width/2)-20,y_ref_pos+40, width/2,y_ref_pos+38);
	}

	//-----EXPRESSIONS----
	//mouse position over emotion meter changes face expression
	//VERY HAPPY
	if (xPos<width/5){
			//outter eye
			strokeWeight (0.25);
			fill (242,239,234); //white
			stroke (58,37,22); //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth+40);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth+40);
			//eye pupil
			fill (58,37,22);  //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth+30);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth+30); 
			//eye highlight
			fill (242,239,234); //white
			circle ((width/2)-46,y_ref_pos-20,eyeWidth);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth);
			//eye small highlights
			fill (242,239,234); //white
			ellipse ((width/2)-56,y_ref_pos-30,eyeWidth-10);
			ellipse ((width/2)+56,y_ref_pos-30,eyeWidth-10); 
			//mouth 
			strokeWeight (1);
			stroke("black");
			fill (233, 161, 135); //pink
			arc((width/2)-2,y_ref_pos+55,80,50,0,3.15);
			line ((width/2)+38,y_ref_pos+55,(width/2)-42,y_ref_pos+55);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+54,y_ref_pos+30,40);
			circle((width/2)-60,y_ref_pos+30,40);
		} 
		//HAPPY
		else if (xPos<(width/5)*2 & xPos>=width/5){
			//eyes 
			fill (58,37,22); //dark brown
			ellipse ((width/2)-44,y_ref_pos-20,eyeWidth,eyeHeight);
			ellipse ((width/2)+44,y_ref_pos-20,eyeWidth,eyeHeight);
			//mouth
			strokeWeight (1);
			stroke("black");
			noFill();
			arc((width/2)-2,y_ref_pos+70,20,14,0,3);	
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+44,y_ref_pos+30,40);
			circle((width/2)-50,y_ref_pos+30,40);
		} 
		//MEH
		else if (xPos<(width/5)*3 & xPos>=(width/5)*2){
			//mouth 
			strokeWeight (1);
			stroke("black");
			line ((width/2)+40,y_ref_pos+65,(width/2)-40,y_ref_pos+65);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+44,y_ref_pos+30,40);
			circle((width/2)-50,y_ref_pos+30,40);
			//outter eye
			fill (58,37,22); //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth);
		}
		//SHOCK 
		else if (xPos<(width/5)*4 & xPos>=(width/5)*3){
			//eyes 
			fill (58,37,22); //dark brown
			ellipse ((width/2)-44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
			ellipse ((width/2)+44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
			//mouth 
			strokeWeight (1);
			stroke("black");
			fill (233, 161, 135); //pink
			arc((width/2)-2,y_ref_pos+95,40,90,3.15,0);
			line((width/2)+18,y_ref_pos+95,(width/2)-22,y_ref_pos+95);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+60,y_ref_pos+30,40);
			circle((width/2)-60,y_ref_pos+30,40);
		} 
		//ANGRY
		else if (xPos>(width/5)*4){
			//eyes 
			fill (58,37,22); //dark brown
			arc((width/2)-50,y_ref_pos-20,50,25,0,3.15);
			arc((width/2)+50,y_ref_pos-20,50,25,0,3.15);
			//eyebrows
			strokeWeight (3);
			stroke(58,37,22); //dark brown
			line ((width/2)-75,y_ref_pos-35,(width/2)-25,y_ref_pos-25);	
			line ((width/2)+75,y_ref_pos-35,(width/2)+25,y_ref_pos-25);	
			//mouth
			strokeWeight (2);
			stroke("black");
			noFill();
			arc((width/2)-2,y_ref_pos+80,30,40,3.1,0);
		
		}

	//------BODY-----
	//shoulders
	strokeWeight (0);
	fill (238, 217, 197); //beige
	circle((width/2)-120, y_ref_pos+182,80);
	circle((width/2)+126, y_ref_pos+180,80);
	//arms
	rect((width/2)-160,y_ref_pos+180,80,140);
	rect((width/2)+86,y_ref_pos+180,80,140);

	//-----DETAILS----
	//earings
	fill (111, 115, 210); //purple
	square ((width/2)-114,y_ref_pos+30,16); 
	square ((width/2)+100,y_ref_pos+30,16);
	//bangs
	push();
	strokeWeight(0);
	fill (104, 66, 17); //brown 
	rotate (-0.9);
	ellipse (width/2-230, y_ref_pos+140,40,150);
	rotate (1.7);
	ellipse (width/2-5, y_ref_pos-330,40,150);
	pop();
	//hairclip 
	//random color generated in first loop and only changes when page is reloaded
	x=x+30;
	if (x==30) {
		stroke(r=random(200),g=random (200),b=random(200));
	}else{
		stroke(r,g,b);
	}
	strokeWeight(4);
	line(width/2+50,y_ref_pos-60,(width/2)+80,y_ref_pos-80);
	//shirt details
	strokeWeight(8);
	stroke(r,g,b);
	point(width/2, y_ref_pos+200);
	

}

LookingOutwards-03

In collaboration, multiple designers, including Arturo Tedeschi, Michael Pryor, Pavlina Vardoulaki, and Matteo Silverio, designed a suspension lamp called HorisON. Inspiration for this lamp draws on the contrast between high-tech and traditional handcrafting. These designers speculate that future design will not depend on the constant technological improvement of products and their production, but rather on an integration of the high-tech with humanistic characteristics, such as uniqueness in imperfection. The lamp is made up of two main parts a 3D printed, parametric form that diffuses LEDs inside and a handcraft shell, made in Murano in Italy. During the day, when the lamp is off the shell hides the inner coils and becomes the centerpiece of the lamp. When one, the lamp’s 3D printed core becomes the centerpiece. By emphasizing the combination of human and high-tech, I believe these designers are bridging a very quickly growing gap of disinterest and devaluing of items brought by mass production. Both the handcrafted and paramedic design are objects deserving of appreciation and awe but each is perceived differently. The handcraft part tells a story of craftsmanship and offers people the opportunity to appreciate the skill of the artist while the parametric design offers interest as an unusual item that represents the modern.

The visual duality of the lamp represents the contrast between machine production and handcraft.

Project-03-Dynamic-Drawing

I began this project by writing down my main actions for the animation and what conditions caused them to change. After I got one part working, I slowly added more conditions and commands, ensuring they worked before continuing.

The animation starts with a simple circle of lines. The user can click on the screen to make the second row of lines appear. If the user clicks on the left half then the direction that the lines are drawn changes. Depending on the quadrant the user clicks in the number of rows and color will change.

sketch
// Emily Franco
// efranco
// Section C

//line distance from center
var fromCenter = 5;

//x and y positions of pts for lines
var ptX = 0;
var ptY = 0;

//default line length
var length = 5;

//current rotation degree
var deg = 0;
var rot = 5;
var dir = 1;
var degTwo = 0;

//tracks how many times mouse is clicked
var clicked = 0;
//tracks number of circle sets
var cirSet = 0;

//stores mouseX and mouseY when clicked 
var mX =0;
var mY = 0;

//store previous tranlation to subtract from when new center is clicked
var transX;
var transY;

//num of rows around circle
var rows = 6; 

//colors
var r = 255;
var g = 255;
var b = 0;


//color increment
var colorInt = 20;

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate (70);
    background ("black");

}

function draw() {
	//change origin to center of canvas
	transX = width/2;
	transY = height/2;
	translate (transX,transY);
	
	//if mouse is clicke five times now center is 
	//at mouse position
	if (cirSet==1){
		translate (mX-transX,mY-transY);
		transX = mX-transX;
		transY = mY-transY;
	}

	//only reset at start of each set
	if(clicked == rows){
		//reset values
		fromCenter = 5;
		length = 5;
		clicked = 0;
	}

	if (deg <= 360){
		//rotate lines
		rotate (radians(deg));
		deg += rot*dir;

		//if mouse is in left half turn clockwise 
		//if mouse is in right hald turn counterclockwise
		//draw lines towards center of canvas
		stroke (g,r,b);
		line (ptX+fromCenter,ptY,ptX+fromCenter+length,ptY);
	}

	//line "chases white lines" and draws over them
	push();
	stroke (b,g,r);
	rotate (radians(degTwo));
	degTwo += rot*dir;
	line (ptX+fromCenter,ptY,ptX+fromCenter+length,ptY);
	//rect (ptX-1,ptY-length-fromCenter-1,2,length+2); 
	pop();
}

function mousePressed (){
	//increase distance of lines from center
	fromCenter += length + 10; 
	//increase length of lines
	length+=10;

	//if mouse clicked left of center draw counter clockwise
	if (mouseX<=width/2){
		dir = -1;
	}else if (mouseX>=width/2){
		dir = 1;
	}

	//if circle is complete set degree back to zero
	//this will let next row start where previous row ended for only white lines
	if (Math.abs(deg)>=360){
		deg = 0;  
	}


	//add one to clicked each time mouse pressed
	clicked += 1;
	
	//store x and y position for new center
	if (clicked==rows){
		cirSet = 1;
		mX = mouseX;
		mY = mouseY; 
	}

	//number of rows per circle changed on first click of each set
	if (clicked==1){
		//number of rows per circle set changes in depending
		//on the quadrant clicked in
		if (mouseX<=width/2 & mouseY<=height/2){
				rows = 3;
				//blue
				r = 255;
				g = 0;
				b = 0;
		}if (mouseX>=width/2 & mouseY<=height/2){
				rows = 4;
				//yellow
				r = 255;
				g = 255;
				b = 0;
		}if (mouseX>=width/2 & mouseY>=height/2){
				rows = 2;
				//green
				r = 128;
				g = 255;
				b = 0;
		}if (mouseX<=width/2 & mouseY>=height/2){
				rows = 6;
				//orange
				r = 255;
				g = 128;
				b = 0;
				
		}
	}

}

LookingOutwards – 02

Looking at Cytoplasmic Playgrounds (2012) by Markos Kay I admire how abstract the images of his collection are while still conveying the motion of the idea he’s trying to show, which is protein interactions. The movement within this collection of drawings brings life to abstracted molecular chemistry and the complexities of detail, depth, and fullness in the images are exciting to explore. The consistently, simple beige backgrounds throughout the collection also prevent the series from becoming too unrecognizable and random. While this image is computer generated, the artist, Kay, adds his own creativity in putting in the way chemical reactions are represented: what colors are used, what items to prioritize, and what movements to convey. The algorithm that Kay used to generate these looks very complicated. I think he does use the random function within bounds to generate the positions of items, especially the points in the clusters. The ‘movement’ in the drawings tends to appear to have a center, indicating that the algorithm might use vectors attracted to centers to give the appearance of centripetal movement.

Multiprotien Complexes: A set of similar proteins that allow for a simpler and more efficient pathway for protein (ie. enzyme) movement.

Project 01: Portrait

sketch
// Emily Franco
// Section C
//Graphic elements used: ellipse,cicle,line,point,rect,square,tri,arc
var y_ref_pos = 150;
var x=0;
function setup() {
    createCanvas(500, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	//background
	strokeWeight(0);
	fill(random(100,200),random (100,200),random(100,200));
	rect(x,0,10,height);
	fill(217,245,228);
	rect(x+10,0,30,height);
	x=x+30;
	//--------HAIR-------
	//back hair
	fill (104, 66, 17); //dark brown
	ellipse (width/2, y_ref_pos+28,130,200);

	//--------CLOTHES-------
	fill (220, 96, 46); //orange
	arc((width/2)-16+22,y_ref_pos+79,140,35,Math.PI,0);
	//shirt 
	rect((width/2)-43.5,y_ref_pos+70,90.5,90);

	//------FACE-----
	strokeWeight (.25);
	//base ears 
	fill (238, 217, 197); //beige
	ellipse ((width/2)-53,y_ref_pos,16,30);
	ellipse ((width/2)+53,y_ref_pos,16,30);
	//neck 
	fill (238, 217, 197);//beige
	ellipse((width/2)-22+22.5, y_ref_pos+45+20,45,30);
	strokeWeight (0);
	rect((width/2)-22, y_ref_pos+45,45,20);
	//base face
	strokeWeight (.25);
	ellipse (width/2,y_ref_pos,100,116);
	//nose 
	fill (229, 155, 99); //orange
	triangle (width/2,y_ref_pos-10,240,y_ref_pos+15,250,y_ref_pos+18);
	//eyes 
	fill (58,37,22); //dark brown
	ellipse ((width/2)-22,y_ref_pos-10,8,12);
	ellipse ((width/2)+22,y_ref_pos-10,8,12);
	//eyebrows 
	stroke(58,37,22);
	strokeWeight (.75);
	noFill();
	arc((width/2)-22,y_ref_pos-17,10,7,-3,-0.5);
	arc((width/2)+22,y_ref_pos-17,10,7,-2.5,0);
	//smile
	arc(width/2,y_ref_pos+33,10,7,0,3);
	//cheeks
	fill (233, 161, 135); //pink
	strokeWeight (0);
	circle((width/2)+22,y_ref_pos+15,20);
	circle((width/2)-25,y_ref_pos+15,20);

	//------BODY-----
	//shoulders
	fill (238, 217, 197); //beige
	circle((width/2)-60, y_ref_pos+90,40);
	circle((width/2)+63, y_ref_pos+90,40);
	//arms
	rect((width/2)-80,y_ref_pos+90,40,70);
	rect((width/2)+43,y_ref_pos+90,40,70);

	//-----DETAILS----
	//earings
	fill (111, 115, 210); //purple
	square ((width/2)-57,y_ref_pos+15,8); 
	square ((width/2)+50,y_ref_pos+15,8);
	//bangs
	push();
	strokeWeight(0);
	fill (104, 66, 17); //brown 
	rotate (-0.9);
	ellipse (width/2-165, y_ref_pos+135,20,75);
	rotate (1.7);
	ellipse (width/2-14, y_ref_pos-238,20,75);
	pop();
	//hairclip 
	//random color generated in first loop and only changes when page is reloaded
	if (x==30) {
		stroke(r=random(100,200),g=random (100,200),b=random(100,200));
	}else{
		stroke(r,g,b);
	}
	strokeWeight(4);
	line(width/2+25,y_ref_pos-30,(width/2)+40,y_ref_pos-40);
	//shirt details
	stroke(172,146,166);
	point(width/2, y_ref_pos+120);
	point(width/2, y_ref_pos+100);
	point(width/2, y_ref_pos+140);

	//reset stroke attribute
	strokeWeight(0);

}

LO: Machine Hallucinations

In New York City, there is an immersive art museum called Artechouse. Here the museum displays various works, but the one that I saw was called “Machine Hallucinations” by Refik Anadol. His exhibit included images generated using NFT art; these images were made from various datasets of New York City and public photography. Looking at some of the pictures I could clearly tell they were cityscapes and looking closer they were made up of smaller images reminiscent of city life; others began as small, obscure parts that joined into a collective image that became recognizable. I find these works so interesting because apart from the story their primary image holds, there are also stories in their make-up. This type of art is relatively new and has been becoming more popular, with exhibits like the Immersive Van Gogh Exhibit that brings motion and music to his paintings. I think this type of art gives us a new perspective on old ideas by creating similar and vaguely familiar images that force us to draw the connection between the art and the original reference. Apart from the music and lighting, the art these AI systems generate immerses us into the origins of the art by deconstructing it.

Machine Hallucinations by Refik Anadol
https://refikanadol.com/works/machine-hallucination/