Looking Outwards – 09 – On Looking Outwards

Random Internationals Swarm Studies is incredible because it automatically draws people in. It allows people to interact with the piece through visuals, audio, and motion. I agree with Mango in that I also admire how the piece manifests unique forms with each interaction it has with each person. In a way, it encourages people to become an artist themselves and create their own personalized experiences.

Random Internationals – Swarm Study I (2010)

I also believe that Random Internationals wanted to imitate the acrobatic efficiency of birds in flight. It seems like mystery how entire flocks of birds are able to make quick, instant turns when they are flying forty miles per hour. Studies have shown that flocks are able to propogate easily because each bird watches for the moves of their nearest neighbor. Similarly, each light source in the piece changes their direction and motion in response to the noise near them, resulting in collective behavior.

In this way, I think that the creators’ artistic sensibilities are rooted in togetherness. The act of collective behavior of the lights, people, and their interactions, can lead to artistic experiences.

Project – 09 – Portrait

For this project, I used a picture that I took of my mom while we were at Epcot, Walt Disney World. We were in the Power of Color theater, which shone different hues of colors while we stood in the room. Because of that, I tried to add colors that shoot out towards the top of the canvas when the mouse is clicked.

sketch
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var myPicture; 
var x = 0; 
var y = 0; 
var star; 

function preload(){
	var picLink = "https://i.imgur.com/sTUlPXx.png"; 
	myPicture = loadImage(picLink); 
}

function setup() {
    createCanvas(335,409);
    background(200,226,206);
    myPicture.loadPixels(); 
    frameRate(500); 
    // setting up star parameters 
    star = {
    		sX: mouseX,
    		sY: mouseY, 
    		size: random(5,15)
    }
}

function draw() {
	// pick random x and y coordinates of picture
    var picX = random(width);
    var picY = random(height);

    // Pixel position to retrieve color from - constrain within canvas 
    var imX = constrain(floor(picX), 0, width);
    var imY = constrain(floor(picY), 0, height);

    // Get color of image at pixels
    var pixelColor = myPicture.get(imX,imY);
    fill(pixelColor); 
    mouse(picX,picY); 

    // Wavy red borders around picture 
 	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.8); 
 		strokeWeight(22); 
 		point(x, 35-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.8); 
 		strokeWeight(22); 
 		point(x, 376-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.6); 
 		strokeWeight(22); 
 		point(x, 65-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.6); 
 		strokeWeight(22); 
 		point(x, 346-20*sin(radians(x))); 
    }

    // Shooting star of random colors 
    fill(random(255),random(255),random(255)); 
	noStroke();  
    ellipse(star.sX,star.sY,star.size,star.size);
    // make the star move to the left 
    star.sX = star.sX - 1; 
    // make the star move upwards
    star.sY = star.sY - 1; 
    // make the star smaller 
    star.size = star.size - 0.2;
}

// Creating Mickey Mouse head shape 
function mouse(x,y){
	noStroke(); 
	ellipse(x,y,20,20);  
	ellipse(x-10,y-10,15,15); 
	ellipse(x+10,y-10,15,15);  
}

// when mouse is pressed, a new star is formed at the mouse (x,y) position
function mousePressed(){
	star = {
		sX: mouseX,
		sY: mouseY, 
		size: random(5,15)
	}
}









Looking Outwards 09: on Looking Outwards

In the 5th week of looking outwards, we were tasked with looking at 3d graphics. There is a wide variety of choices my classmates have chosen to analyze and elaborate on. A specific one I’ve taken a liking to is the one on Jakub Javora by the author under the alias, rkim. They bring up the transformation of a real location to an alternate reality in a project called Restore Point. This is similar to the post by the author under the alias, carson michaelis. The core concept of creating an illusion with a preexisting condition is what the authors and I find fascinating. They focused on a rendering from an architectural firm, WOJR, and their project, ‘Mask House’.The difference between the two projects is one is creating an artificial world that is meant to be fantasy but one is created to portray a potential reality. Both create a mood they want the viewer to experience and cater to their visual palette. I enjoyed both projects and think both authors are absolutely right when it comes to their analysis of their executions.

rkim’s Looking Outwards 5
carson michaelis Looking Outwards 5

Project 09: Computational Portrait

I chose to construct my portrait from nucleotide pixels; nucleotides are the building blocks of DNA and RNA. Each time the mouse is clicked it switches the pixel mode to a different nucleotide: A for Adenine, C for Cytosine, T for Thymine, G for Guanine, and U for Uracil. If the mouse is held down, the pixels drawn will be randomly chosen from all nucleotides.

Self Portrait
let img;
var Nucleotide = 1;
var Nucs = ['A', 'C', 'T', 'G', 'U']

function preload() {
	img = loadImage("https://i.imgur.com/wOvSeLp.jpg?1");
}

function setup() {
  createCanvas(480, 480);
  background(255);
  img.resize(width, height);
  img.loadPixels();
  frameRate(75);
  imageMode(CENTER);
}

function draw() {
  	var x = floor(random(img.width)); // random x position for the letter
  	var y = floor(random(img.height)); // random y position for the letter
  	var pixel = img.get(x, y); // select color from the image and store in pixel
  	stroke(pixel);	//make the stroke color the color of the according image pixel
  	strokeWeight(2);
  	fill(pixel);	//make the text color the color of the according image pixel
  	textSize(10)
	if(Nucleotide == 1) { 
  		text('A', x, y);	//A, for adenine
  	}
 	else if(Nucleotide == 2){ 
  		text('C', x, y);	//C, for cytosine
  	}
  	else if(Nucleotide == 3){ 
  		text('T', x, y);	//T, for thymine
  	}
  	else if(Nucleotide == 4){ 
  		text('G', x, y);	//G, for guanine
  	}
  	else { 
  		text('U', x, y);	//U, for uracil
  	}
  	if (mouseIsPressed) {
  		text(random(Nucs), x, y)	//while the mouse is being held down, randomize pixel letters (any nucleotide can be generated)	
  	}
}

function mousePressed() {
	if(Nucleotide == 1) {
		Nucleotide = 2;	//click once and set pixel letter to C
	}
	else if(Nucleotide == 2) {
		Nucleotide = 3;	//click again and set pixel letter to T
	}
	else if(Nucleotide == 3) {
		Nucleotide = 4;	//click again and set pixel letter to G
	}
	else if(Nucleotide == 4) {
		Nucleotide = 5;	//click again and set pixel letter to U
	}
	else {
		Nucleotide = 1;	//click again and reset pixel letter to A
	}
}

Project 09: Computational Portrait

For my computation project, I took a photo my friend took of me throwing an apple in the air. I eventually settled on using points to display my photo, but I used randomGaussian() to make the points condense at the apple and spread out from there. That way, there’s more points around the apple and less around the edges.

Original photo
Phase 1
Phase 2
Final Phase

Looking Outwards 09: On Looking Outwards

For this week’s Looking Outwards, I looked at Shaun’s (I worked with him in lab) LO for week 7 on Information Visualization. Shaun talked about Stefanie Posavec’s collaboration project with Greg McInerny titled, “(En)tangled Word Bank.” I agree with Shaun that this project is a very cool way to portray evolution, and I think that the six different editions of the project show how Darwin’s “On the Origin of Species.” One thing I would add is that Posavec is very interested in wearable art/art that can be interacted with and utilized in common settings, so it makes sense that she’s interested in evolution and the study of biological life.

(En)tangled Word Bank
Greg McInerny (British, born 1977) of Microsoft Research, Cambridge (UK, est. 1997) Stefanie Posavec (American, born 1981)
2009

Looking Outwards 09: on Looking Outwards

I chose to look at yoli’s Week 03 post about computational fabrication used in Iris Van Herpen’s fashion pieces. I love yoli’s commentary about the fashion industry, pointing out how fashion is always pushing the “cutting edge” while also repeating itself in many ways. I find this repetition as a mechanism for forward-thinking to be really profound and perfectly exemplified by Van Herpen’s work. While Van Herpen is pushing the field forward in her forms and novel fabrication methods, she also references traditional fashion with the soft sculpture elements and dress bases of her looks.

Iris Van Herpen’s Sensory Seas collection shown at Cirque d’hiver Bouglione on January 20, 2020.

I find that not only are fashion professionals repeating themselves in their methods and designs, but repetition, as in Van Herpen’s work, has become a central principle to the designs themselves. For instance, in her “Sensory Seas” collection, she references human anatomy systems through repetition of physiological shapes.

Look 4 from Iris Van Herpen’s couture collection, Sensory Seas (2020)

Project-09 Portrait

project
let portrait;
var radius = 0;
var angle = 0;
var framecount = 1;
var size = 0.5;

function preload() {
  portrait = loadImage('https://i.imgur.com/EquKB8x.png');
}

function setup() {
  createCanvas(480, 480); 
  background(0);
  imageMode(CENTER);
  portrait.loadPixels();
}

function draw() {
  var centerX = width/2;
  var centerY = height/2;
  var circleX = radius * cos(radians(angle));
  var circleY = radius * sin(radians(angle));

  var clrX = random(0, width);
  var clrY = random(0, height);
  var clr = portrait.get(clrX, clrY);

  //pointillize 
  for (var i= 0; i < 10; i++) {
    fill(clr);
    circle(clrX, clrY, size);
  }

  //top left spiral of hearts of image 
  noStroke();
  var clr1 = portrait.get(circleX, circleY);
  fill(clr1);
  drawHeart(circleX, circleY, 15);

  //bottom right spiral of hearts of image 
  push();
  translate(centerX, centerY);
  var clr2 = portrait.get(480-circleX, 480-circleY);
  fill(clr2);
  drawHeart(centerX-circleX, centerY-circleY, 15);
  pop();

  topInstagramBar();
  bottomInstagramBar();

  radius += 0.1;
  angle += 7;

  frameCount += 1;
  if (frameCount > 13000) {
    //"instagram tag" of my nickname where mouse is 
    fill(85);
    triangle(mouseX, mouseY-10, mouseX+10, mouseY-20, mouseX-10, mouseY-20);
    rect(mouseX-40, mouseY-40, 80, 20);
    fill(255);
    text('rishdish', mouseX-20, mouseY-27);

    //stops when portrait is complete
    noLoop();
  }
}

function drawHeart(x, y, s) {
  beginShape();
  vertex(x,y);
  bezierVertex(x-s/2, y-s/2, x-s, y+s/3, x, y+s);
  bezierVertex(x+s, y+s/3, x+s/2, y-s/2, x, y);
  endShape(CLOSE);
}

function mousePressed() {
  //points get bigger as you click 
  size += 0.5;
  if (size == 7) {
    size = 0.5;
  }
}

function topInstagramBar() {
  //instagram bar 
  fill(240);
  rect(0, 0, 480, 30);

  //profile pic 
  fill(230, 210, 210);
  circle(20, 15, 15);
  stroke(195, 45, 140);
  noFill();
  circle(20, 15, 18);
  noStroke();
  fill(0);
  text('15-104',35, 19);

  //three dots in right hand corner
  fill(10);
  circle(455, 15, 3);
  circle(460, 15, 3);
  circle(465, 15, 3);
}

function bottomInstagramBar() {
  //instagram bar 
  fill(240);
  rect(0, 450, 480, 30);
  
  //"like" icon
  stroke(0);
  fill(255);
  drawHeart(20, 460, 15);
  
  //"comment" icon
  triangle(53, 471, 60, 471, 58, 467);
  circle(50, 465, 16);
  stroke(255);
  circle(55, 468, 5);

  //"share" icon
  stroke(0);
  triangle(75, 457, 92, 457, 80, 463);
  triangle(80, 463, 92, 458, 82,472);

  //"save"icon
  beginShape();
  vertex(454, 457);
  vertex(454, 472);
  vertex(460, 467);
  vertex(466, 472);
  vertex(466, 457);
  endShape(CLOSE);

  //image scroll through icons
  noStroke();
  fill(65, 141, 204);
  circle(230, 465, 5);
  fill(165);
  circle(240, 465, 5);
  circle(250, 465, 5);
}

Start of portrait/halfway completed portrait
Completed portrait

I used a photo of me as a baby for this. Once I had the two spirals of hearts running, I added the icons to make it look like an instagram post. When you click, the size of the points in the background increases. When the portrait is done running, an Instagram tag shows up where the mouse is with my childhood nickname.

LO-09 On Looking Outwards

“Womb” Jennifer Steinkamp, Talley Dunn Gallery, August 23, 2019. Video

When browsing through the 3-D Computer Graphics Looking Outwards, I found Poppy’s post about Jennifer Steinkamp’s digital animation “Womb” very interesting. I was initially intrigued by how she wrote about the piece being centered around femininity. I found my peer’s assessment about how the artist’s sensibilities manifesting in the piece to make a meaningful analogy with her work very insightful.  

I admire the way the artist uses bright “Fruit Ninja” style visuals to create a thought-provoking piece. Steinkamp describes this piece as a way of showing how a womb is a place of transformation that “grows and stretches outward to exercise agency.” With this piece, the viewer acts as the form of agency as the piece’s movement mirrors the viewer’s movement. I agree with my peer’s assessment that this is an interesting way to represent how we as people take up space.

I learned that the wind sound used is taken from the Wizard of Oz tornado scene, which I thought was an interesting choice as it’s unrelated to the subject matter of the piece. I also learned that Steinkamp tailors each of her pieces depending on the space in which she shows, which I thought was very impressive. 

LO 09: on Looking Outwards

MTV: Love from Laurie Rowan on Vimeo.

I was scrolling through the previous Looking Outwards category on 3D Graphics when I stumbled upon eyelash’s post on Laurie Rowan. The work “MTV: Love” was extremely mesmerizing, to say the least. I agree with my peer’s analysis of Rowan’s work, that it is demonstrative of how a seemingly impractical artistic vision can find a place to reach and impact a greater audience. I really appreciate how each of his work’s is definitely idiosyncratic, yet clearly still his distinct style. Rowan’s work is absurd and adorable, appealing to people of all ages. I think it is interesting to consider how music and sounds come into play with his animations and add yet another degree of complexity. I would also like to add that Rowan creates pieces that comment on society as well, as evidenced by his piece for a Businessweek Editorial (seen below). His works are playful, but also critical.

Although I am not familiar with animation software, I agree with the assessment that these were likely made with a combination of rendering/animation programs such as Cinema4D and AfterEffects, and I believe that Blender might have had a role in their creation as well.