poppy – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 06: Randomness

“Spectrum Colors Arranged by Chance” is an abstract piece of artwork created by Ellsworth Kelly. Rather than the focus on a particular style or personal artistic preferences, his artwork hones in on randomization and chance. This particular piece consists of eight collages plastered with hundreds of colored squares. Through the use of a mathematical system, colored paper slips were randomly numbered. These numbers correlated to eighteen different color hues that were then put on the canvas grid. Squares were placed on the collage in a systematic manner, removing himself and his judgement from the process.

Ellsworth Kelly, *Spectrum Colors Arranged by Chance*, 1951-1953

Kelly’s artistic sensibilities manifest in this piece with his experimentation and belief that any color could go with any other color. Inspired by expressive artistic freedom, Kelly used a unique approach for each collage of squares by working with one color at a time. This particular piece is interesting to me because it seems like the collage of colored squares are strategic, but it was created purely off of randomization.

Project – 05 – Wallpaper

sketch

function setup() {
    createCanvas(600,600);
}

function draw() {
	background(255,203,134);
//	background(0,24,91);

	// Repeat Confetti 
	for (var x = 20; x < width; x += 80){
		for (var y = 20; y < height; y += 185){
		push(); 
		translate(x,y); 
		confetti(x,y); 
		pop(); 
		}
	}	

	// Repeat Pumpkin 
	for (var x = 0; x < width - 100; x += 200){
		for (var y = 0; y < height - 100; y += 200){
		push(); 
		translate(x,y); 
		pumpkin(x,y); 
		pop(); 
		}
	}

	// Repeat Ghost 
	for (var x = 0; x < width - 200; x += 200){
		for (var y = 0; y < height - 200; y += 200){
		push(); 
		translate(x,y); 
		ghost(x,y); 
		pop(); 
		}
	}

}

 function pumpkin(a,b){
	// Pumpkin Stem 
	noStroke(); 
	fill(48,26,0); 
	triangle(95,25,105,25,100,60); 

	// Shadow Under Pumpkin
	fill(239,177,115); 
	ellipse(100,145,130,35); 
	// Pumpkin
	fill(243,132,4); 
	ellipse(66.5,100,50,100); 
	ellipse(100,100,55,100); 
	ellipse(133,100,50,100); 
	// Eyes 
	fill(0); 
	ellipse(73,90,12); 
	ellipse(126,90,12);  
	// Mouth 
	fill(0); 
	ellipse(100,120,20,30); 
	fill(243,132,4);
	ellipse(100,110,20,15);
	fill(243,132,4);
	rect(95,110,8,10);
	// Nose 
	fill(0);
	triangle(93,105,100,92,107,105);
}

function confetti(a,b){
	noStroke(); 
	// Yellow Circles 
	fill(255,251,203); 
	ellipse(0,0,25); 
} 

function ghost(a,b){
	fill(255,255,255)
	noStroke(); 
	// Body 
	ellipse(200,210,65,90); 
	ellipse(200,235,23,45); 
	ellipse(180,235,23,45); 
	ellipse(220,235,23,45);
	// Eyes  
	fill(0); 
	ellipse(185,205,5); 
	ellipse(215,205,5); 
	// Mouth 
	ellipse(200,210,7,4); 
	// Cheeks 
	fill(255,193,221); 
	ellipse(183,210,7,4); 
	ellipse(217,210,7,4); 
}

I was inspired by the fall season and Halloween festivities for this project.

Looking Outwards – 05 – 3D Computer Graphics

Jennifer Steinkamp creates digital animations to explore the ideas of space, perception, and motion. Her piece called “Womb” was featured at Talley Dunn Gallery in August 23, 2019.

“Womb” – Talley Dunn Gallery – August 23, 2019

“Womb” joins art, design, and spatial experience into one. Viewers can walk up to an interactive wall of fruit. The fruits follow the movement of the people and continues to move on its own even after people stop moving. I admire how eccentric and lively the piece is. The vibrant colors, coupled with movement and wind sound effects, results in a transformative experience. Steinkamp uses 3D modeling software and Photoshop in order to generate “Womb”. She uses careful calibration to the dimensions of the physical space. All of her work is centered around femininity. Her artistic sensibilities manifest in “Womb” because the piece is all about taking up space. Similar to a womb that takes up space within the body in order to generate life, her artpiece generates transformation, movement, and life as well.

Project – 04 – String Art

sketch

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

//* INSPIRED BY ORIGAMI FORTUNE TELLING GAME *//

var db2;
var dd2; 
var x; 
var y; 
var numLines = 30; 

function setup() {
    createCanvas(400,400);

    x = width; 
    y = height; 

    // Outer Square Outline 
    //leftmost, upwards slope line 
    line(200,0,0,200); 
    //rightmost, upwards slope line
    line(200,0,400,200); 
    //leftmost, downwards slope line
    line(0,200,200,400);
    //rightmost, upwards slope line  
    line(400,200,200,400); 

	// Middle Square Outline 
	// left vertical
    line(100,100,100,300); 
    // right vertical 
    line(300,100,300,300); 
    // top horizontal 
    line(100,100,300,100); 
    // bottom horizontal 
    line(100,300,300,300); 

    // Setting variables for spacing between lines 
	db2 = (250-50)/numLines;
	dd2 = (250-50)/numLines; 
	df2 = (50-250)/numLines; 

}

function draw() {

	background(255); 

	// Setting initial values & variables for lines of outer square
	var b2 = 0; 
	var d2 = 0; 
	var f2 = 400; 
	var h2 = 400; 

	// Setting inital values & variables for lines of inner square 
	var i2 = 100; 
	var j2 = 100;
	var k2 = 100;
	var l2 = 100;
	var m2 = 100;
	var n2 = 100;
	var o2 = 100; 
	var p2 = 100; 

	for (var i = 0; i <= numLines; i += 1){
	// Lines connecting canvas to outer square 
	stroke(168,179,236); 
	strokeWeight(1); 

		line(x/2,y,x,f2); 
		f2 += df2; 
		line(x/2,y,0,h2); 
		h2 += df2; 
		line(x/2,0,0,b2); 
		b2 += db2; 
		line(x/2,0,x,d2); 
		d2 += db2; 

	// Lines connecting outer square to inner square  
	stroke(168,179,236); 
	strokeWeight(1); 

		line(0,y/2,100,i2);
		i2 += db2; 
		line(x,y/2,300,j2); 
		j2 += db2; 
		line(x/2,0,k2,100); 
		k2 += db2; 
		line(x/2,y,l2,300); 
		l2 += db2;

	// Lines inside smallest innermost square 
	stroke(120,129,178); 
	strokeWeight(1); 

		line(x/2,y/2,100,m2); 
		m2 += db2; 
		line(x/2,y/2,300,n2); 
		n2 += db2;  
		line(x/2,y/2,o2,100);
		o2 += db2; 
		line(x/2,y/2,p2,300); 
		p2 += db2; 

	// Colored circles 
	noStroke(); 
	fill(253,87,120); 
	ellipse(200,50,25); 
	fill(255,178,100)
	ellipse(350,200,25); 
	fill(169,255,166); 
	ellipse(200,350,25); 
	fill(81,104,255); 
	ellipse(50,200,25); 

	// Dynamic element that follows the mouse 
	//bottom "triangle"
   for(var a = 0; a < 400; a += 15) {
    	var d = 0; 
    	d += a; 
        stroke(255);
        strokeWeight(0.5);
        line(mouseX, mouseY, d, 400);
	}

    //top "triangle"
    for(var a = 0; a < 400; a += 15) {
    	var dd = 0;
    	dd += a;
        stroke(255);
        strokeWeight(0.5);
        line(mouseX,mouseY,dd,0);
	}

	//right "triangle"
    for(var a = 0; a < 400; a += 15) {
        stroke(255);
        strokeWeight(0.5);
        line(mouseX,mouseY,396,a);
	}

	//left "triangle"
	for(var a = 0; a < 400; a += 15) {
     	var dd2 = 0; 
    	dd2 += a;
        stroke(255);
        strokeWeight(0.5);
        line(mouseX,mouseY,0,a);
    }
    }
}

I was inspired by an aerial view of the fortune-teller origami game that I used to make when I was younger. I also added a moving element to give off a hypnotizing/dynamic appearance.

Looking Outwards – 04 – Sound Art

Camille Norment created an installation called Rapture in 2015. The piece highlights the dichotomy between peace and dissonance. At first glance, there are glass structures, speakers hanging from the ceiling, and a glass harmonica. The major sound elements create movement and excitment through dissonance – it cannot go unnoticed. There are twelve female voices coming from the speakers, clashing sounds from the violin, and the deep, clear humming of the harmonica. As the air molecules and hard molecules get excited, it shakes the glass and creates tension.

I admire that there are so many different ways to interpret the art. For instance, the sound of a glass harmonica could sound like a group of angels or something harmful at the same time. The algorithms that generates the work are the different sound frequencies and pitches that cause the glass to react as well.

Her artistic sensibilities manifest in the final form in that her piece is multisensory. There is a sculptural component, a composition by Norment, as well as a glass harmonica performance. She associates glass with the glass ceiling, a barrier that is invisible yet impenetrable. This social tension is reflected in her piece and leaves viewers with multiple different interpretions of her art.

Rapture by Camille Norment (2015)

Project 03 – Dynamic Drawing

sketch

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

var x = 0; 
var y = 0; 

function setup() {
    createCanvas(600,450);
	background(10); 
}

function draw() {
	noStroke(); 
	background((constrain(mouseY,200,210)),(constrain(mouseY,220,240)),constrain(mouseY,190,210)); 

	// - CLOUDS - //

	//EllipseX variable is to expand or contract ellipse width 
	var ellipseWidth = constrain(mouseY,100,150); 

	//Variables for cloud on left side 
	var positionY = constrain(mouseY,100,150);
	var positionY2 = constrain(mouseY,50,100);
	var positionX = constrain(mouseX,80,100); 

	//Cloud on left side moves side to side 
	fill(constrain(mouseY,230,255));
	ellipse(positionX,positionY,ellipseWidth,100); 
	ellipse(positionX+50,positionY2,100,100); 
	ellipse(positionX+100,positionY,100,100); 
	ellipse(positionX+150,positionY2,100,100); 
	ellipse(positionX+200,positionY,ellipseWidth,100); 

	//Variables for cloud on right side 
	var positionY3 = constrain(mouseY,300,350);
	var positionY4 = constrain(mouseY,250,300);
	var positionX2 = constrain(mouseX,50,120); 

	//Cloud on right side moves side to side 
	fill(constrain(mouseX,200,230)); 
	ellipse(positionX2+200,positionY3,ellipseWidth,100); 
	ellipse(positionX2+250,positionY4,100,100); 
	ellipse(positionX2+300,positionY3,100,100); 
	ellipse(positionX2+350,positionY4,100,100); 
	ellipse(positionX2+400,positionY3,ellipseWidth,100); 

	//Yellow circles as stars in the background
	push(); 
	rotate(radians(mouseX*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	push(); 
	rotate(radians(mouseY*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	//Mountains
	fill(148,171,146); 
	triangle(270,490+mouseY,330,330+mouseY,390,490+mouseY); 
	triangle(330,490+mouseY,430,330+mouseY,520,490+mouseY); 
	triangle(0,490+mouseY,200,250+mouseY,400,490+mouseY); 
	triangle(400,490+mouseY,500,300+mouseY,600,490+mouseY);  

	//Flower in the center 
	push();  
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	for (let r = 0; r < 10; r++){
	ellipse(0,0,20,80); 
	rotate(PI/5);
	}
	pop(); 

	//sun 
	push(); 
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	pop(); 


}

I was inspired by nature and weather. I tried to depict the sun, mountains, stars, and clouds in my piece.

LO 03 – Computational Fabrication

Zaha Hadid Architects created a gallery that is now displayed as The Winston Gallery in London’s Science Museum. The Handley Page aircraft is placed in the center of the artpiece while a three-dimensional pod structure curves around it. The design of the creation imitates the movement of airflow used throughout aviation industry history. I admire how the piece encapsulates the entire room and draws your eyes up towards the ceiling. I also admire the fact that the context behind this piece is deeply rooted in history and mathematics. Mathematics has allowed for the progression of the society that we know today, solving the world’s biggest problems and allowing us to advance.

Mathemiticians and engineers used mathematical models in wind tunnels to design new aircraft. Similarly, the creators of the artpiece had the actual aircraft. They used it to construct the geometry of the gallery and the airflow that would have followed the aircraft.

The pink arrows depict the movement of air that would have flowed around this aircraft.

The creator’s artistic sensibilities manifest in the final form with a very elegant design. Dame Zaha Hadid, who was known for her use of curves, designed the smooth, curving surfaces and soft contour lines throughout the gallery.

Project 2: Variable Faces

sketch

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


//template for variable face 
var backgroundColor = 0; 
var shirtColor = 255; 
var faceHeight = 300;
var faceWidth = 290;
var snoutWidth = 330; 
var snoutHeight = 220; 
var earWidth = 150;
var eyeSize = 50; 
var noseHeight = 50; 
var noseWidth = 80; 
var nostHeight = 14; 
var nostWidth = 8; 
var mouthWidth = 50;
var mouthHeight = 30;
var eyebrow = 1; 
var x; 
var y; 
var z; 
var b1 = 224; 
var b2 = 200; 
var b3 = 206; 
var b4 = 230; 
var color1; 
var color2; 
var color3;
var color4; 

function setup() {
	createCanvas(640,480);
	backgroundColor = color(random(255),random(255),random(255)); 
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw(){

// -PIG- //
	noStroke(); 
	background(backgroundColor); 
//shirt 
	fill(shirtColor); 
	x = width/2; 
	y = height; 		
	ellipse(x,y/2+snoutHeight,x,y*.6); 
//collar of shirt 
	y = 265; 
	color1 = random(150,255); 
	color2 = random(150,255); 
	color3 = random(150,255); 
	color4 = random(150,255); 
	fill(color1,color2,color3,color4); 
	triangle(x-snoutWidth*.3,y+snoutHeight*.6,x-snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
	triangle(x+snoutWidth*.3,y+snoutHeight*.6,x+snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
//overall head 
	y = height/2; 
	fill(255,218,224); 
//snout area
	ellipse(x,y+height*.15,snoutWidth,snoutHeight);
//face 
	ellipse(x,y,faceWidth,faceHeight);

//nose 
	fill(247,191,200); 
	ellipse(x,y+snoutHeight*.2,noseWidth,noseHeight); 


//nostrils 
	fill(255,255,255); 
	var nL = x - snoutWidth/15;
	var rL = x + snoutWidth/15;
	ellipse(nL,y+height*.1,nostWidth,nostHeight); 
	ellipse(rL,y+height*.1,nostWidth,nostHeight); 

//eyes
	y = 240;
	fill(48,33,25);
	var eL = x - faceWidth/5
	var eR = x + faceWidth/5
	circle(eL,y,eyeSize); 
	circle(eR,y,eyeSize); 

//overlapping eyes to make them appear closed  
	fill(255,218,224);
	circle(eL,y-10,eyeSize);
	circle(eR,y-10,eyeSize);

//ears 
	fill(247,191,200); 
	var earLX = x - faceWidth*.6; 
	var earY = 175; 
	var earRX = x + faceWidth*.6;

//left ear 
	triangle(earLX,earY,earLX+30,earY+50,earLX+60,earY); 
//right ear 
	triangle(earRX-60,earY,earRX-30,earY+50,earRX,earY); 

//mouth 
	y = 362;
	fill(203,73,95); 
	ellipse(x,y,mouthWidth,mouthHeight);
	fill(255,218,224);
	ellipse(x,y+z,mouthWidth,mouthHeight); 

//eyebrow 
	y = 230 
	fill(48,33,25); 
	if (eyebrow < 2) {
//sad 
		beginShape(); 
		vertex(x-faceWidth*.33,b1); 
		vertex(x-faceWidth*.13,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.31,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.13,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.31,b4); 
		endShape(); 

	} else if (eyebrow < 3) { 
//mad 

		beginShape(); 
		vertex(x-faceWidth*.1,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.31,b3);
		vertex(x-faceWidth*.13,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.1,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.31,b3); 
		vertex(x+faceWidth*.13,b4); 
		endShape(); 

	} else { 
//neutral

		beginShape(); 
		vertex(x-faceWidth*.33,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.1,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.1,b4); 
		endShape(); 
}
}

function mousePressed() {
	backgroundColor = color(random(255), random(255), random(255)); 
	shirtColor = color(random(255), random(255), random(255)); 
	faceWidth = random(230,320); 
	faceHeight = random(240,360); 
	snoutWidth = random(260,380); 
	snoutHeight = random(160,260); 
	noseWidth = random(60,120); 
	noseHeight = random(60,90); 
	nostWidth = random(6,10); 
	nostHeight = random(10,16); 
	eyeSize = random(30,70); 
	mouthWidth = random(30,70);
	z = random(-8,8);
	b1 = random(221,228); 
	b2 = random(197,204); 
	b3 = random(203,207); 
	b4 = random(227,234); 
	eyebrow = random(1,4); 
}

Looking Outwards – Generative Art

Fifty Sisters was created by John McCormack. It consists of fifty images of plants generated from computer code. What I find most admirational about this piece is that it reflects the astronomical impact that oil has made on our world today. The algorithm that the computer followed were the geographic elements of oil company logos. More specifically, these were logos of “Seven Sisters”, the name of seven oil companies that took over the petrochemical industry during the 1940s to 1970s.

Society has used oil for heat, electricity, generation, chemicals, plastics, and even more. While there are boundless benefits, it is also massively detrimental to the environment with oil spills and climate change.

McCormack recognized the transformation of fossil fuels from plants to coal and oil today. He took “digital genes”, otherwise known as “computer DNA”, to form replicas of Mesozoic plants. These species grew and evolutionized to form new species. Some computer-made species changed so much that the company logos were unrecognizable.

McCormack’s artistic sensibilities manifested in this art piece because he used technology to show how technology can be both a gift and a curse.

Fifty Sisters at the Ars Electronica Museum, April 2013

Project 01 – Self Portrait

portrait

function setup() {
    createCanvas(500, 1000);
    background(100);
}

function draw(){
//ears
circle(90,490,50);
circle(408,490,50);

//long hair 
fill(34,25,8);
rect(106,350,288,600);

//colored shirt 
fill(0,204,204); 
rect(70,800,370,200); 

//arm lines on shirt 
line(150,920,150,1000);
line(360,920,360,1000);

//neck
fill(242,194,153);
triangle(200,830,250,700,300,830);

//face shape 
fill(242,194,153);
ellipse(250,500,325,500);

//hair - front bangs 
fill(34,25,8);
arc(250,390,300,280,311,0);
noStroke(); 
fill(242,194,153);
triangle(230,400,250,360,270,400);
stroke(0,0,0);
strokeWeight(3); 

//bigger circles for eyes
fill(43,27,9); 
circle(175, 470, 60);
fill(43,27,9); 
circle(325,470,60); 

//nose 
fill(188,159,176); 
triangle(220,550,250,500,280,550)

//mini circles for pupils 
fill(255,255,255); 
circle(185, 476, 30);
fill(255,255,255); 
circle(315,476,30); 

//eyebrows 
fill(65,53,19);
rect(140,405,70,20);
fill(65,53,19); 
rect(295, 405,70,20); 

//mouth 
fill(242,194,153);
arc(255,650,120,70,0,90);

stroke(0,0,0);
strokeWeight(3); 
}