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.
Author: Emily
Project-04-String Art
// 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
// 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.
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.
// 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.
Project 01: Portrait
// 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/