The piece I have chosen to write about this week is Zauberflöte by Michael Hansmeyer. Hansmeyer is a computational architect, and the series of structures he designed as Zauberflöte were created as the set for the 2018 production of Mozart’s Magic Flute, directed by Romoeo Castellucci. Using generative design, Hansmeyer was able to explore and play around with countless design possibilities as he created the pieces. I love the grander of the designs, especially in contrast with the extremely simple greyscale color theme that covers the entire stage area. As said by the artist, “the design process strikes a balance between the expected and the unexpected” because although the process is deterministic, the outcome is unknown and impossible to imagine. I have no idea how the algorithm for these pieces work, but the visual result is very reminiscent of other types of computed art due to the symmetry, repetition of patterns, and extremely clean lines.
Author: Katherine
Project 5: Wallpaper
// Katherine Stargiotti, kstargio, B
function setup() {
createCanvas(600, 400);
background(235, 220, 230);
}
//draws a randomized flower-covered wallpaper with vines and leaves.
//color, placement, flower style, size, and rotation are all randomized to
//produce a completely new wallpaper each time the program runs:
function draw() {
for (l=random(25); l<width; l+=50) { //vines go accross the entire canvas
drawVine(l, random(20)); //each vine is drawn before the flowers
for (d=0; d<2; d+=1) { // density of the flowers
for (h=random(45); h<height+25; h+=random(45,75)) { //parameters randomized to create variability throughout the piece
drawFlowerHead(l+random(-5, 5), h, random(.35, 1.25), int(random(4, 7)), int(random(3)));
}
}
}
}
//draws a vine; random() used to add variation for weight, color, curve.
function drawVine(x, y) {
push();
translate(x, y);
vineColor = color(random(100, 150), random(150,200), random(100,150));
stroke(vineColor);
strokeWeight(random(1,2));
noFill();
den = random(10, 20)
beginShape();
curveVertex(0, -20);
curveVertex(0, -20);
curveVertex(3, height/den);
curveVertex(0, 2*height/den);
curveVertex(-3, 3*height/den);
curveVertex(0, 4*height/den);
curveVertex(3, 5*height/den);
curveVertex(0, 6*height/den);
curveVertex(-3, 7*height/den);
curveVertex(0, 8*height/den);
curveVertex(3, 9*height/den);
curveVertex(0, 10*height/den);
curveVertex(-3, 11*height/den);
curveVertex(0, 12*height/den);
curveVertex(3, 13*height/den);
curveVertex(0, 14*height/den);
curveVertex(-3, 15*height/den);
curveVertex(0, 16*height/den);
curveVertex(3, 17*height/den);
curveVertex(0, 18*height/den);
curveVertex(-3, 19*height/den);
curveVertex(0, height);
curveVertex(0, height);
endShape();
drawLeaves(0, vineColor);
pop();
}
//draws leaves onto a vine using the vineColor and x placement:
function drawLeaves(x, vineColor) {
fill(vineColor);
for (f=0; f<height; f+=random(45, 65)) {
drawLeaf(x, f);
}
}
//draws one leaf of random size at point x,y:
function drawLeaf(x, y) {
let leafSize = random(1, 3);
x += random(-.5, .5);
//if the leaf is to the left of the vine it faces left; to the right is pointed right:
if (x>0) {
beginShape();
vertex(x+(8*leafSize), y);
curveVertex(x+(7*leafSize), (y-.2));
curveVertex(x+(6*leafSize), (y-.5));
curveVertex(x+(4.5*leafSize), (y-1.2));
curveVertex(x+(3*leafSize), (y-2.1));
curveVertex(x+(2.2*leafSize), (y-2.25));
curveVertex(x+(1.5*leafSize), (y-2));
curveVertex(x, (y-1.1));
curveVertex(x, y);
curveVertex(x, (y+1.1));
curveVertex(x+(1.5*leafSize), (y+2));
curveVertex(x+(2.2*leafSize), (y+2.25));
curveVertex(x+(3*leafSize), (y+2.1));
curveVertex(x+(4.5*leafSize), (y+1.2));
curveVertex(x+(6*leafSize), (y+.5));
curveVertex(x+(7*leafSize), (y+.2));
vertex(x+(8*leafSize), y);
endShape(CLOSE);
} else {
beginShape();
vertex(x-(8*leafSize), y);
curveVertex(x-(7*leafSize), (y-.2));
curveVertex(x-(6*leafSize), (y-.5));
curveVertex(x-(4.5*leafSize), (y-1.2));
curveVertex(x-(3*leafSize), (y-2.1));
curveVertex(x-(2.2*leafSize), (y-2.25));
curveVertex(x-(1.5*leafSize), (y-2));
curveVertex(x, (y-1.1));
curveVertex(x, y);
curveVertex(x, (y+1.1));
curveVertex(x-(1.5*leafSize), (y+2));
curveVertex(x-(2.2*leafSize), (y+2.25));
curveVertex(x-(3*leafSize), (y+2.1));
curveVertex(x-(4.5*leafSize), (y+1.2));
curveVertex(x-(6*leafSize), (y+.5));
curveVertex(x-(7*leafSize), (y+.2));
vertex(x-(8*leafSize), y);
endShape(CLOSE);
}
}
//draws a flowerhead using petals:
function drawFlowerHead(x, y, flowerSize, petalNum, style) {
push();
translate(x, y); //centers flower at (0,0)
//colors randomized in a specific range to create a cohesive pallet:
var c = color(random(170,225), random(100,180), random(130,200));
var co = color(130, 110, 140); // purpley used for all flowers
var rot = random(180); // flowers start at different angles
// drawing petals:
for (q=0; q<petalNum; q++) {
rotate(rot);
if (style == 0) { drawPetalA(flowerSize*2, 0, c, co, flowerSize) }
else if (style == 1) {drawPetalB(flowerSize*2, 0, c, co, flowerSize) }
else { drawPetalC(flowerSize*2, 0, c, co, flowerSize) }
rot = 2*PI/petalNum; // rotation value based on number of petals
}
// center of flower drawn on top of petals:
fill(120, 100, 110);
circle(0, 0, flowerSize*5);
fill(127, 100, 110);
circle(0, 0, flowerSize*3);
fill(135, 100, 110);
circle(0, 0, flowerSize);
pop();
}
// draws a petal in the FIRST[0] style. (pointy)
function drawPetalA(x, y, petalColor, outerColor, petalSize) {
petalSize = petalSize/5;
noStroke();
fill(outerColor);
beginShape();
vertex((x+85)*petalSize, y*petalSize);
curveVertex((x+70)*petalSize, (y-2)*petalSize);
curveVertex((x+60)*petalSize, (y-5)*petalSize);
curveVertex((x+45)*petalSize, (y-12)*petalSize);
curveVertex((x+30)*petalSize, (y-21)*petalSize);
curveVertex((x+22)*petalSize, (y-22.5)*petalSize);
curveVertex((x+15)*petalSize, (y-20)*petalSize);
curveVertex((x+5)*petalSize, (y-11)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+11)*petalSize);
curveVertex((x+15)*petalSize, (y+20)*petalSize);
curveVertex((x+22)*petalSize, (y+22.5)*petalSize);
curveVertex((x+30)*petalSize, (y+21)*petalSize);
curveVertex((x+45)*petalSize, (y+12)*petalSize);
curveVertex((x+60)*petalSize, (y+5)*petalSize);
curveVertex((x+70)*petalSize, (y+2)*petalSize);
vertex((x+85)*petalSize, y);
endShape(CLOSE);
fill(petalColor);
beginShape();
vertex((x+75)*petalSize, y*petalSize);
curveVertex((x+60)*petalSize, (y-3)*petalSize);
curveVertex((x+45)*petalSize, (y-9)*petalSize);
curveVertex((x+30)*petalSize, (y-17)*petalSize);
curveVertex((x+15)*petalSize, (y-17)*petalSize);
curveVertex((x+5)*petalSize, (y-9)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+9)*petalSize);
curveVertex((x+15)*petalSize, (y+17)*petalSize);
curveVertex((x+30)*petalSize, (y+17)*petalSize);
curveVertex((x+45)*petalSize, (y+9)*petalSize);
curveVertex((x+60)*petalSize, (y+3)*petalSize);
vertex((x+75)*petalSize, y);
endShape(CLOSE);
fill(outerColor);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*15, y+7);
curveVertex(x+petalSize*35, y+2);
curveVertex(x+petalSize*15, y+6);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*10, y+12);
curveVertex(x+petalSize*30, y+9);
curveVertex(x+petalSize*15, y+12);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*15, y-7);
curveVertex(x+petalSize*35, y-2);
curveVertex(x+petalSize*15, y-6);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*10, y-12);
curveVertex(x+petalSize*30, y-9);
curveVertex(x+petalSize*15, y-12);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*17, y-.5);
curveVertex(x+petalSize*40, y);
curveVertex(x+petalSize*17, y+.5);
endShape(CLOSE);
noLoop();
}
// draws a petal in the SECOND[1] style. (squiggled)
function drawPetalB(x, y, petalColor, outerColor, petalSize) {
petalSize = petalSize/5;
noStroke();
fill(outerColor);
beginShape();
vertex((x+80)*petalSize, y*petalSize);
curveVertex((x+70)*petalSize, (y-7)*petalSize);
curveVertex((x+60)*petalSize, (y-12)*petalSize);
curveVertex((x+45)*petalSize, (y-18)*petalSize);
curveVertex((x+30)*petalSize, (y-22)*petalSize);
curveVertex((x+22)*petalSize, (y-22.5)*petalSize);
curveVertex((x+15)*petalSize, (y-20)*petalSize);
curveVertex((x+5)*petalSize, (y-12)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+12)*petalSize);
curveVertex((x+15)*petalSize, (y+20)*petalSize);
curveVertex((x+22)*petalSize, (y+22.5)*petalSize);
curveVertex((x+30)*petalSize, (y+22)*petalSize);
curveVertex((x+45)*petalSize, (y+18)*petalSize);
curveVertex((x+60)*petalSize, (y+12)*petalSize);
curveVertex((x+70)*petalSize, (y+7)*petalSize);
vertex((x+80)*petalSize, y);
endShape(CLOSE);
fill(petalColor);
beginShape();
vertex((x+70)*petalSize, y*petalSize);
curveVertex((x+60)*petalSize, (y-2)*petalSize);
curveVertex((x+57)*petalSize, (y-4)*petalSize);
curveVertex((x+53)*petalSize, (y-2)*petalSize);
curveVertex((x+50)*petalSize, (y-4)*petalSize);
curveVertex((x+47)*petalSize, (y-9)*petalSize);
curveVertex((x+44)*petalSize, (y-12)*petalSize);
curveVertex((x+37)*petalSize, (y-10)*petalSize);
curveVertex((x+30)*petalSize, (y-17)*petalSize);
curveVertex((x+15)*petalSize, (y-17)*petalSize);
curveVertex((x+5)*petalSize, (y-9)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+9)*petalSize);
curveVertex((x+15)*petalSize, (y+17)*petalSize);
curveVertex((x+30)*petalSize, (y+17)*petalSize);
curveVertex((x+37)*petalSize, (y+10)*petalSize);
curveVertex((x+44)*petalSize, (y+12)*petalSize);
curveVertex((x+47)*petalSize, (y+9)*petalSize);
curveVertex((x+50)*petalSize, (y+4)*petalSize);
curveVertex((x+53)*petalSize, (y+2)*petalSize);
curveVertex((x+57)*petalSize, (y+4)*petalSize);
curveVertex((x+60)*petalSize, (y+2)*petalSize);
vertex((x+70)*petalSize, y);
endShape(CLOSE);
noLoop();
}
// draws a petal in the THIRD[2] style. (rounded)
function drawPetalC(x, y, petalColor, outerColor, petalSize) {
petalSize = petalSize/5;
noStroke();
fill(outerColor);
beginShape();
vertex((x+70)*petalSize, y*petalSize);
curveVertex((x+68)*petalSize, (y-6)*petalSize);
curveVertex((x+65)*petalSize, (y-10)*petalSize);
curveVertex((x+60)*petalSize, (y-15)*petalSize);
curveVertex((x+45)*petalSize, (y-22)*petalSize);
curveVertex((x+30)*petalSize, (y-25)*petalSize);
curveVertex((x+22)*petalSize, (y-24)*petalSize);
curveVertex((x+15)*petalSize, (y-22)*petalSize);
curveVertex((x+5)*petalSize, (y-11)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+11)*petalSize);
curveVertex((x+15)*petalSize, (y+22)*petalSize);
curveVertex((x+22)*petalSize, (y+24)*petalSize);
curveVertex((x+30)*petalSize, (y+25)*petalSize);
curveVertex((x+45)*petalSize, (y+22)*petalSize);
curveVertex((x+60)*petalSize, (y+15)*petalSize);
curveVertex((x+65)*petalSize, (y+10)*petalSize);
curveVertex((x+68)*petalSize, (y+6)*petalSize);
vertex((x+70)*petalSize, y);
endShape(CLOSE);
fill(petalColor);
beginShape();
vertex((x+60)*petalSize, y*petalSize);
curveVertex((x+58)*petalSize, (y-6)*petalSize);
curveVertex((x+45)*petalSize, (y-15)*petalSize);
curveVertex((x+30)*petalSize, (y-17)*petalSize);
curveVertex((x+15)*petalSize, (y-15)*petalSize);
curveVertex((x+5)*petalSize, (y-9)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+9)*petalSize);
curveVertex((x+15)*petalSize, (y+15)*petalSize);
curveVertex((x+30)*petalSize, (y+17)*petalSize);
curveVertex((x+45)*petalSize, (y+15)*petalSize);
curveVertex((x+58)*petalSize, (y+6)*petalSize);
vertex((x+60)*petalSize, y);
endShape(CLOSE);
noLoop();
}
I was inspired by flowers for this project. I did not sketch out any patterns before programming, but I knew that I wanted to create a few different types of petals that could be turned into many unique flowers. By starting with the petals and smaller units of the images, I was able to randomize parameters to produce completely different flowers each time the program is run. I also recorded my screen while creating this project and condensed the progress into a short video embedded below.
Looking Outwards 05: 3D Computer Graphics
The project I have chosen for this blog post is “Artifacts of the Noisefield: Advection of points based on a math noise” by the artist ChaoticAtmospheres. According to the artist, the goal of the piece was to explore noise advection, which is the displacement of a point according to a mathematical equation. Starting with simple shapes, ChaoticAtmospheres used a computer algorithm to visually represent noise in 3-dimensional graphics. The resulting images are beautiful. They have clear resemblances to images in nature (especially insects). This comparison brings to light the deep connection between nature’s reaction to waves and the way humans can manipulate and use waves to produce entirely new artifacts of art & science. I admire the artist’s use of sound in their visual work, and their use of digital programming to bring the concept to life.
Artifacts of the Noisefield: Advection of points based on a math noise.
ChaoticAtmospheres
Looking Outwards 04: Sound Art
The project I have chosen for this blog post is Pamela Z’s 2012 work “Fount”. “Fount” is a sound and visual art installation piece using projection and speakers (or a sound dome). The images displayed and sound projected are triggered by the presence of a viewer. With no viewer present, the image is blurred and no sound comes out of the speakers. Once a person is in the space, the image clears to reveal a beaker pouring water into a basin; the speakers play an audio of water pouring which accompanies the video. Although the piece itself is not generated by a computer algorithm, the intended performance of the piece involves a computer system sensing the presence of a viewer and setting the correct programs into motion. I think this piece of art is interesting because it requires interaction with a viewer, although the viewer only needs to be present. This sort of semi-interactive concept is intriguing from the perspective of an audience member like the piece is telling a secret to one viewer at a time.
Project-04: String Art
// coordinated for basic star shape:
//lineA:
var lineAx1 = 0
var lineAy1 = 0
var lineAx2 = 0
var lineAy2 = -125
//lineB:
var lineBx1 = 119
var lineBy1 = -39
var lineBx2 = 0
var lineBy2 = 0
//lineC:
var lineCx1 = 0
var lineCy1 = 0
var lineCx2 = 73
var lineCy2 = 101
//lineD:
var lineDx1 = -73
var lineDy1 = 101
var lineDx2 = 0
var lineDy2 = 0
//lineE:
var lineEx1 = 0
var lineEy1 = 0
var lineEx2 = -119
var lineEy2 = -39
//distance for string art end points variables initialized:
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 40; //number of string art lines in each 'shape'
var rot = 0 //rotation effect (DISABLED bc of noLoop() call; comment out noLoop() to see rotation)
// color variables for shading effect:
var r = 0;
var g = 50;
var b = 100;
function setup() {
createCanvas(400, 300);
background(200);
}
function draw() {
background(200); // called for rotation effect
translate(width/2, height/2); // center canvas
//rotation effect (DISABLED while noLoop() is activated):
rotate(radians(rot));
rot += 1;
// color variables for shade change effect re-defined after each rotation:
r = 0;
g = 50;
b = 100;
//lines to create basic star shape, coordinates set by variables:
line(lineAx1, lineAy1, lineAx2, lineAy2);
line(lineBx1, lineBy1, lineBx2, lineBy2);
line(lineCx1, lineCy1, lineCx2, lineCy2);
line(lineDx1, lineDy1, lineDx2, lineDy2);
line(lineEx1, lineEy1, lineEx2, lineEy2);
// drawLines() called to create the string art effect:
drawLines(lineAx1, lineAy1, lineAx2, lineAy2, lineBx1, lineBy1, lineBx2, lineBy2);
drawLines(lineBx1, lineBy1, lineBx2, lineBy2, lineCx1, lineCy1, lineCx2, lineCy2);
drawLines(lineCx1, lineCy1, lineCx2, lineCy2, lineDx1, lineDy1, lineDx2, lineDy2);
drawLines(lineDx1, lineDy1, lineDx2, lineDy2, lineEx1, lineEy1, lineEx2, lineEy2);
drawLines(lineEx2, lineEy2, lineEx1, lineEy1, lineAx1, lineAy1, lineAx2, lineAy2);
// comment noLoop() out to see roration:
noLoop();
}
//drawLines function made for string art effect, takes x and y coordinates of both connecting lines (8 parameters):
function drawLines(line1x1, line1y1, line1x2, line1y2, line2x1, line2y1, line2x2, line2y2) {
// set distance between end points for string lines:
dx1 = (line1x2-line1x1)/numLines;
dy1 = (line1y2-line1y1)/numLines;
dx2 = (line2x2-line2x1)/numLines;
dy2 = (line2y2-line2y1)/numLines;
//initialize variables for string line end points:
var x1 = line1x1;
var y1 = line1y1;
var x2 = line2x1;
var y2 = line2y1;
// string lines drawn until specified number of lines is hit:
for (var i = 0; i <= numLines; i += 1) {
stroke(r, g, b);
line(x1, y1, x2, y2);
// string line variables update to create string art effect:
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
//color effect:
if (i <= numLines/2) {
r += 255/numLines;
g -= 255/numLines;
b += 100/numLines;
} else {
r -= 255/numLines;
g += 255/numLines;
b -= 100/numLines;
}
}
}
I decided to do a star shape for this project, and I’ve attached an image of my initial sketches. It took me a while to figure out how I wanted to use the ‘string art’ style, but I like the outcome that this method created.
Project-03: Dynamic Drawing, “groovy”
var thickness = 20; // <-- value for weight of image parts (element: size)
var r = 0; // <-- value for rotation angle (element: angle)
var p = -40; // <-- value for disco ball placement (element: position)
var b = 0; // <-- value for brightness (element: color)
function setup() {
createCanvas(600, 450);
rectMode(CENTER);
}
function draw() {
background(0);
stroke(0);
fill(100);
rect(width/4, p-75, 5, 200);
rect(3*width/4, p-75, 5, 200);
if (int(b)==b) { // color variation for disco ball
fill(162+b);
} else {
fill(162);
}
//disco ball:
ellipse(width/4, p, 80, 80);
line(width/4, p-40, width/4, p+40);
line(width/4-5, p-40, width/4-5, p+40);
line(width/4-10, p-40, width/4-10, p+40);
line(width/4-15, p-40, width/4-15, p+40);
line(width/4-20, p-40, width/4-20, p+40);
line(width/4-25, p-40, width/4-25, p+40);
line(width/4-30, p-40, width/4-30, p+40);
line(width/4-35, p-40, width/4-35, p+40);
line(width/4-40, p-40, width/4-40, p+40);
line(width/4+5, p-40, width/4+5, p+40);
line(width/4+10, p-40, width/4+10, p+40);
line(width/4+15, p-40, width/4+15, p+40);
line(width/4+20, p-40, width/4+20, p+40);
line(width/4+25, p-40, width/4+25, p+40);
line(width/4+30, p-40, width/4+30, p+40);
line(width/4+35, p-40, width/4+35, p+40);
line(width/4+40, p-40, width/4+40, p+40);
line(width/4-40, p, width/4+40, p);
line(width/4-40, p-5, width/4+40, p-5);
line(width/4-40, p-10, width/4+40, p-10);
line(width/4-40, p-15, width/4+40, p-15);
line(width/4-40, p-20, width/4+40, p-20);
line(width/4-40, p-25, width/4+40, p-25);
line(width/4-40, p-30, width/4+40, p-30);
line(width/4-40, p-35, width/4+40, p-35);
line(width/4-40, p-40, width/4+40, p-40);
line(width/4-40, p+5, width/4+40, p+5);
line(width/4-40, p+10, width/4+40, p+10);
line(width/4-40, p+15, width/4+40, p+15);
line(width/4-40, p+20, width/4+40, p+20);
line(width/4-40, p+25, width/4+40, p+25);
line(width/4-40, p+30, width/4+40, p+30);
line(width/4-40, p+35, width/4+40, p+35);
line(width/4-40, p+40, width/4+40, p+40);
//second disco ball:
ellipse(3*width/4, p, 80, 80);
line(3*width/4, p-40, 3*width/4, p+40);
line(3*width/4-5, p-40, 3*width/4-5, p+40);
line(3*width/4-10, p-40, 3*width/4-10, p+40);
line(3*width/4-15, p-40, 3*width/4-15, p+40);
line(3*width/4-20, p-40, 3*width/4-20, p+40);
line(3*width/4-25, p-40, 3*width/4-25, p+40);
line(3*width/4-30, p-40, 3*width/4-30, p+40);
line(3*width/4-35, p-40, 3*width/4-35, p+40);
line(3*width/4-40, p-40, 3*width/4-40, p+40);
line(3*width/4+5, p-40, 3*width/4+5, p+40);
line(3*width/4+10, p-40, 3*width/4+10, p+40);
line(3*width/4+15, p-40, 3*width/4+15, p+40);
line(3*width/4+20, p-40, 3*width/4+20, p+40);
line(3*width/4+25, p-40, 3*width/4+25, p+40);
line(3*width/4+30, p-40, 3*width/4+30, p+40);
line(3*width/4+35, p-40, 3*width/4+35, p+40);
line(3*width/4+40, p-40, 3*width/4+40, p+40);
line(3*width/4-40, p, 3*width/4+40, p);
line(3*width/4-40, p-5, 3*width/4+40, p-5);
line(3*width/4-40, p-10, 3*width/4+40, p-10);
line(3*width/4-40, p-15, 3*width/4+40, p-15);
line(3*width/4-40, p-20, 3*width/4+40, p-20);
line(3*width/4-40, p-25, 3*width/4+40, p-25);
line(3*width/4-40, p-30, 3*width/4+40, p-30);
line(3*width/4-40, p-35, 3*width/4+40, p-35);
line(3*width/4-40, p-40, 3*width/4+40, p-40);
line(3*width/4-40, p+5, 3*width/4+40, p+5);
line(3*width/4-40, p+10, 3*width/4+40, p+10);
line(3*width/4-40, p+15, 3*width/4+40, p+15);
line(3*width/4-40, p+20, 3*width/4+40, p+20);
line(3*width/4-40, p+25, 3*width/4+40, p+25);
line(3*width/4-40, p+30, 3*width/4+40, p+30);
line(3*width/4-40, p+35, 3*width/4+40, p+35);
line(3*width/4-40, p+40, 3*width/4+40, p+40);
translate(width/2, height/3);
rotate(radians(-r));
//BODY of image:
noStroke();
fill(255);
triangle(-7, -thickness/2+1, 7, -thickness/2+1, 0, -50); //neck
ellipse(0, -60, 60+thickness/2, 60+thickness/2); // head
fill(200+b, 100-b, 50+b); // variable used for color change
rect(0, 0, width/4, thickness); // shoulders
if (constrain(mouseX, width/10, 2*width/10) == mouseX || //dancing motion! for body
constrain(mouseX, 3*width/10, 4*width/10) == mouseX ||
constrain(mouseX, 5*width/10, 6*width/10) == mouseX ||
constrain(mouseX, 7*width/10, 8*width/10) == mouseX ||
constrain(mouseX, 9*width/10, width) == mouseX) {
quad(-thickness,0, thickness,0, width/8+5, height/3, -width/8+5, height/3); // body
} else {
quad(-thickness,0, thickness,0, width/8-5, height/3, -width/8-5, height/3); // body
}
fill(255);
quad(-width/8+1,thickness/2, -width/8+1,-thickness/2, -width/16,-thickness+70, -width/16,+70); // left arm
if (mouseX < width/2 & mouseX > width/4 || mouseX > 3*width/4) {
quad(width/8-1,thickness/2, width/8-1,-thickness/2, 0,-thickness+75, 0,75); //right arm
} else {
quad(width/8-1,thickness/2, width/8-1,-thickness/2, width/4-1,-thickness-50, width/4-1,-50); //disco baby!
}
quad(-10,height/3-1, -10-thickness,height/3-1, -20-thickness,height/3+50, -20,height/3+50); //left leg
quad(10,height/3-1, 10+thickness,height/3-1, 20+thickness,height/3+50, 20,height/3+50); // right leg
fill(100);
triangle(-20-thickness,height/3+50, -20,height/3+50, -30-thickness, height/3+65); //left shoe
triangle(20+thickness,height/3+50, 20,height/3+50, 30+thickness, height/3+65); // right shoe
noFill();
stroke(0);
arc(0, -60, 30+thickness/2, 30+thickness/2, 0, PI); // smile
arc(-10, -70, 15, 15, PI, 0); //eye
arc(10, -70, 15, 15, PI, 0); //eye
//rotation limits:
if ((mouseX - width/2)/10 <= -20) {
r = -20;
} else if ((mouseX - width/2)/10 >= 20) {
r = 20;
} else {
r = (mouseX - width/2)/10;
}
if (mouseY/10 <= 10) {
thickness = 10;
} else if (mouseY/10 >= 35) {
thickness = 35;
} else {
thickness = (mouseY)/10;
}
//color change:
b = r*5;
//disco drop:
if (-mouseY + 300 <= -40) {
p = -40;
} else if (-mouseY + 300 >= 100) {
p = 100;
} else {
p = - mouseY + 300;
}
}
When I read the requirements for this assignment, I kept thinking about watching the shapes ‘dance’ around on the screen, which inspired the image I created.
LO-03: Computational Fabrication
The project I chose for this blog is a KUKA robotic arm parametric cuboid grid fabrication. Posted to the journal for the Institute for advanced architecture of Catalonia, this project utilizes KUKA robotic arm technology to build a wooden grid with variable density out of wooden battens and pins. Modules for the grid can be assembled (cutting, drilling, positioning) entirely by the robot arm. Modules with varying programmed densities can be connected together to complete complex structures. I like this project because of the simplistic method it uses to create structures. By programming the KUKA arm to your own personal parameters, an infinite number of structures can be built and used for the construction of art, architecture, models, etc. As shown in the attached image, the robot arm is able to build grids with complex densities while using a singular building strategy by altering the lengths of the battens and the space between connections.
ROBOTIC FABRICATION – CUBOID GRID
INSTITUTE FOR ADVANCED ARCHITECTURE OF CATALONIA, BARCELONA
MARCH 29, 2016
Project 2: Variable Faces
// Katherine Stargiotti, kstargio, B
// PORTRAIT VARIABLES:
//HEAD:
var headWidth = 640/2 - 10;
var headHeight = 840/1.75 - 10;
//SKIN:
var skinTone = 3;
//EYES:
var eyeWidth = 55; //(40, 65)
var eyeHeight = 30; //(15, 35)
var eyeSpread = 12; //(10, 15)
var eyeColor = 1; //(1, 4)
var pupilHeight = 27;
//NOSE:
var noseSpread = 60;
var noseWidth = 10; //(10, 23)
var noseHeight = 60; //(55, 70)
//MOUTH:
var lipColor = 3;
var mouthHeight = 5*840/8
var mouthShape = 1
//HAIR:
var hairColor = 3
var hairStyle = 1
function setup() {
createCanvas(640, 840);
}
function draw() {
background(110, 70, 110); //moved to draw function so faces dont pile up
//SKINTONE:
noStroke();
if (skinTone <= 1) {
fill(240, 211, 202); //lightest
} else if (skinTone <= 2) {
fill(246, 200, 167);
} else if (skinTone <= 3) {
fill(219, 140, 95);
} else if (skinTone <= 4) {
fill(121, 69, 53);
} else {
fill(42, 31, 27); //darkest
}
//HEAD:
ellipse(width/2, height/2, headWidth, headHeight);
//EYES (whites):
fill(255);
stroke(0);
strokeWeight(1);
ellipse(width/2 - 5*eyeSpread, height/2 - 25, eyeWidth, 15);
ellipse(width/2 + 5*eyeSpread, height/2 - 25, eyeWidth, 15);
arc(width/2 - 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0);
arc(width/2 + 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0);
//EYES (iris):
noStroke();
fill(0);
if (eyeHeight <= 18) { //conditional statements for IRIS & PUPIL PLACEMENT
pupilHeight = 27;
} else if (eyeHeight <= 22) {
pupilHeight = 28;
} else if (eyeHeight <= 26) {
pupilHeight = 29;
} else if (eyeHeight <= 30) {
pupilHeight = 31;
} else if (eyeHeight <= 33) {
pupilHeight = 32;
} else {
pupilHeight = 33;
}
if (eyeColor <= 1) { //conditional statements for EYECOLOR
fill(64, 106, 138); //blue
} else if (eyeColor <= 2) {
fill(48, 24, 23); //dark brown
} else if (eyeColor <= 3) {
fill(100, 61, 27); //light brown
} else {
fill(105, 85, 25); //green/hazel
} // arcs for iriss
arc(width/2 - 5*eyeSpread, height/2 - pupilHeight, eyeWidth/2, eyeHeight*.8, PI+HALF_PI+QUARTER_PI, PI+(QUARTER_PI), OPEN);
arc(width/2 + 5*eyeSpread, height/2 - pupilHeight, eyeWidth/2, eyeHeight*.8, PI+HALF_PI+QUARTER_PI, PI+QUARTER_PI, OPEN);
//EYES (pupils):
fill(0);
ellipse(width/2 - 5*eyeSpread, height/2 - pupilHeight, eyeWidth/3, eyeHeight*.5);
ellipse(width/2 + 5*eyeSpread, height/2 - pupilHeight, eyeWidth/3, eyeHeight*.5);
fill(255); //glare
ellipse(width/2 - 5*eyeSpread + eyeWidth/12, height/2 - pupilHeight - eyeHeight/12, eyeWidth/8, eyeHeight/6);
ellipse(width/2 + 5*eyeSpread + eyeWidth/12, height/2 - pupilHeight - eyeHeight/12, eyeWidth/8, eyeHeight/6);
ellipse(width/2 - 5*eyeSpread + eyeWidth/9, height/2 - pupilHeight + eyeHeight/12, eyeWidth/16, eyeHeight/11);
ellipse(width/2 + 5*eyeSpread + eyeWidth/9, height/2 - pupilHeight + eyeHeight/12, eyeWidth/16, eyeHeight/11);
//EYES (lashes):
stroke(0);
strokeWeight(3);
noFill();
arc(width/2 - 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0, OPEN);
arc(width/2 + 5*eyeSpread, height/2 - 25, eyeWidth, eyeHeight, PI, 0);
//NOSE (lines):
noFill();
stroke(0);
strokeWeight(1);
arc(width/2 - noseSpread, height/2 + 15, 95, 175, PI+HALF_PI+QUARTER_PI, QUARTER_PI/2);
arc(width/2 + noseSpread, height/2 + 15, 95, 175, PI-(QUARTER_PI)/2, PI+QUARTER_PI);
//NOSE (bump shadow):
noFill();
strokeWeight(5);
if (skinTone <= 1) {
stroke(230, 201, 192); //lightest skintone
} else if (skinTone <= 2) {
stroke(236, 190, 157);
} else if (skinTone <= 3) {
stroke(209, 130, 85);
} else if (skinTone <= 4) {
stroke(111, 59, 43);
} else {
stroke(32, 21, 17); //darkest skintone
}
arc(width/2, height/2 + 70, noseWidth + 10, 25, PI+QUARTER_PI, -QUARTER_PI), OPEN;
//NOSE (nostrils):
stroke(0);
strokeWeight(1);
beginShape(); // "W" shape for nostrils:
curveVertex(width/2 - (noseWidth+12), height/2 + (noseHeight+7));
curveVertex(width/2 - (noseWidth+12), height/2 + (noseHeight+7));
curveVertex(width/2 - (noseWidth+17), height/2 + (noseHeight+12));
curveVertex(width/2 - (noseWidth+17), height/2 + (noseHeight+20));
curveVertex(width/2 - (noseWidth+10), height/2 + (noseHeight+23));
curveVertex(width/2 - noseWidth, height/2 + 80);
curveVertex(width/2, height/2 + 85);
curveVertex(width/2 + noseWidth, height/2 + 80);
curveVertex(width/2 + (noseWidth+10), height/2 + (noseHeight+23));
curveVertex(width/2 + (noseWidth+17), height/2 + (noseHeight+20));
curveVertex(width/2 + (noseWidth+17), height/2 + (noseHeight+12));
curveVertex(width/2 + (noseWidth+12), height/2 + (noseHeight+7));
curveVertex(width/2 + (noseWidth+12), height/2 + (noseHeight+7));
endShape();
//MOUTH (shape):
if (mouthShape <= 1) {
fill(236, 240, 215);
} else {
if (lipColor <= 1) {
fill(245, 195, 195);
} else if (lipColor <= 2) {
fill(255, 175, 145);
} else if (lipColor <= 3) {
fill(235, 125, 85);
} else if (lipColor <= 4) {
fill(95, 39, 33);
} else {
fill(52, 21, 17);
}}
//MOUTH (closed bottom lip / teeth shape):
beginShape();
curveVertex(width/2 + 65, mouthHeight + 15); //right far (not drawn)
curveVertex(width/2 + 60, mouthHeight + 17); // almost right far
curveVertex(width/2 + 45, mouthHeight + 20);
curveVertex(width/2 + 15, mouthHeight + 20);
curveVertex(width/2, mouthHeight + 22); //mid mid
curveVertex(width/2 - 15, mouthHeight + 20);
curveVertex(width/2 - 45, mouthHeight + 20);
curveVertex(width/2 - 60, mouthHeight + 17); //almost left far
curveVertex(width/2 - 65, mouthHeight + 15); //left far
curveVertex(width/2 - 55, mouthHeight + 23);
curveVertex(width/2 - 40, mouthHeight + 32);
curveVertex(width/2 - 15, mouthHeight + 40);
curveVertex(width/2, mouthHeight + 39); //mid bottom
curveVertex(width/2 + 15, mouthHeight + 40);
curveVertex(width/2 + 40, mouthHeight + 32);
curveVertex(width/2 + 55, mouthHeight + 23);
curveVertex(width/2 + 65, mouthHeight + 15); //right far
curveVertex(width/2 + 60, mouthHeight + 17); // almost right far
curveVertex(width/2 + 45, mouthHeight + 20);
curveVertex(width/2 + 45, mouthHeight + 20);
endShape();
if (mouthShape <= 1) {
line(width/2 - 52, mouthHeight + 18, width/2 - 52, mouthHeight + 27);
line(width/2 - 45, mouthHeight + 18, width/2 - 45, mouthHeight + 28);
line(width/2 - 37, mouthHeight + 18, width/2 - 37, mouthHeight + 30);
line(width/2 - 27, mouthHeight + 18, width/2 - 27, mouthHeight + 32);
line(width/2 - 15, mouthHeight + 18, width/2 - 15, mouthHeight + 34);
line(width/2, mouthHeight + 18, width/2, mouthHeight + 37); //middle line
line(width/2 + 15, mouthHeight + 18, width/2 + 15, mouthHeight + 34);
line(width/2 + 27, mouthHeight + 18, width/2 + 27, mouthHeight + 32);
line(width/2 + 37, mouthHeight + 18, width/2 + 37, mouthHeight + 30);
line(width/2 + 45, mouthHeight + 18, width/2 + 45, mouthHeight + 28);
line(width/2 + 52, mouthHeight + 18, width/2 + 52, mouthHeight + 27);
} else {
null;
}
if (lipColor <= 1) {
fill(245, 195, 195);
} else if (lipColor <= 2) {
fill(255, 175, 145);
} else if (lipColor <= 3) {
fill(235, 125, 85);
} else if (lipColor <= 4) {
fill(95, 39, 33);
} else {
fill(52, 21, 17);
}
//MOUTH (open bottom lip):
if (mouthShape <= 1) {
beginShape();
curveVertex(width/2 + 65, mouthHeight + 16); //right far (not drawn)
curveVertex(width/2 + 60, mouthHeight + 18); // almost right far
curveVertex(width/2 + 45, mouthHeight + 20 + 5);
curveVertex(width/2 + 15, mouthHeight + 20 + 12);
curveVertex(width/2, mouthHeight + 22 + 11); //mid mid
curveVertex(width/2 - 15, mouthHeight + 20 + 12);
curveVertex(width/2 - 45, mouthHeight + 20 + 5);
curveVertex(width/2 - 60, mouthHeight + 18); //almost left far
curveVertex(width/2 - 65, mouthHeight + 16); //left far
curveVertex(width/2 - 55, mouthHeight + 23 + 5);
curveVertex(width/2 - 40, mouthHeight + 32 + 7);
curveVertex(width/2 - 15, mouthHeight + 40 + 10);
curveVertex(width/2, mouthHeight + 39 + 10); //mid bottom
curveVertex(width/2 + 15, mouthHeight + 40 + 10);
curveVertex(width/2 + 40, mouthHeight + 32 + 7);
curveVertex(width/2 + 55, mouthHeight + 23 + 5);
curveVertex(width/2 + 65, mouthHeight + 15); //right far
curveVertex(width/2 + 60, mouthHeight + 17); // almost right far
curveVertex(width/2 + 45, mouthHeight + 20);
curveVertex(width/2 + 45, mouthHeight + 20);
endShape();
} else {
null;
}
//MOUTH (top lip):
beginShape();
curveVertex(width/2 - 65, mouthHeight + 15); //left far (not drawn)
curveVertex(width/2 - 11, mouthHeight + 5);
curveVertex(width/2, mouthHeight + 7); //mid top
curveVertex(width/2 + 11, mouthHeight + 5);
curveVertex(width/2 + 63, mouthHeight + 14); //right far
curveVertex(width/2 + 60, mouthHeight + 17);
curveVertex(width/2 + 45, mouthHeight + 20);
curveVertex(width/2 + 15, mouthHeight + 20);
curveVertex(width/2, mouthHeight + 22); //mid bottom
curveVertex(width/2 - 15, mouthHeight + 20);
curveVertex(width/2 - 45, mouthHeight + 20);
curveVertex(width/2 - 60, mouthHeight + 17);
curveVertex(width/2 - 63, mouthHeight + 14); //left far
curveVertex(width/2 - 11, mouthHeight + 5);
curveVertex(width/2 - 11, mouthHeight + 5); //left mid top (drawn)
endShape();
//HAIR (color):
if (hairColor <= 1) {
stroke(0);
fill(0);
} else if (hairColor <= 2) {
stroke(127);
fill(127);
} else if (hairColor <= 3) {
stroke(23, 9, 7);
fill(23, 9, 7);
} else if (hairColor <= 4) {
stroke(93, 58, 42);
fill(93, 58, 42);
} else if (hairColor <= 5) {
stroke(83, 30, 12);
fill(83, 30, 12);
} else if (hairColor <= 6) {
stroke(226, 174, 126);
fill(226, 174, 126);
} else {
stroke(51, 9, 4);
fill(51, 9, 4);
}
//EYEBROWS:
//left brow:
quad(width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/7 - 4,
width/2 - headWidth/9, height/2 - headHeight/7,
width/2 - headWidth/9 +3, height/2 - headHeight/8,
width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/8 - 5);
beginShape();
curveVertex(width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/7 - 4);
curveVertex(width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/7 - 4);
curveVertex(width/2 - headWidth/4 - eyeSpread/2 - 10, height/2 - headHeight/7 - 4);
curveVertex(width/2 - headWidth/4 - eyeSpread/2 - 20, height/2 - headHeight/7);
curveVertex( width/2 - headWidth/4 - eyeSpread/2 - 30, height/2 - headHeight/8 + 4);
curveVertex( width/2 - headWidth/4 - eyeSpread/2 - 20, height/2 - headHeight/8 - 2);
curveVertex( width/2 - headWidth/4 - eyeSpread/2 - 10, height/2 - headHeight/8 - 5);
curveVertex( width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/8 - 5);
curveVertex( width/2 - headWidth/4 - eyeSpread/2, height/2 - headHeight/8 - 5);
endShape();
//right brow:
quad(width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/7 - 4,
width/2 + headWidth/9, height/2 - headHeight/7,
width/2 + headWidth/9 - 3, height/2 - headHeight/8,
width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/8 - 5);
beginShape();
curveVertex(width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/7 - 4);
curveVertex(width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/7 - 4);
curveVertex(width/2 + headWidth/4 + eyeSpread/2 + 10, height/2 - headHeight/7 - 4);
curveVertex(width/2 + headWidth/4 + eyeSpread/2 + 20, height/2 - headHeight/7);
curveVertex( width/2 + headWidth/4 + eyeSpread/2 + 30, height/2 - headHeight/8 + 4);
curveVertex( width/2 + headWidth/4 + eyeSpread/2 + 20, height/2 - headHeight/8 - 2);
curveVertex( width/2 + headWidth/4 + eyeSpread/2 + 10, height/2 - headHeight/8 - 5);
curveVertex( width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/8 - 5);
curveVertex( width/2 + headWidth/4 + eyeSpread/2, height/2 - headHeight/8 - 5);
endShape();
//HAIR (style):
if (hairStyle <= 1) {
//HAIRSTYLE 1:
//left pony:
beginShape();
curveVertex(width/2 - headWidth/4.5, height/2 - headHeight/3);
curveVertex(width/2 - headWidth/4.5, height/2 - headHeight/2.25);
curveVertex(width/2 - headWidth/3.5, height/2 - headHeight/2);
curveVertex(width/2 - headWidth/2.5, height/2 - headHeight/2);
curveVertex(width/2 - headWidth/2, height/2 - headHeight/2.15);
curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/2.5);
curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/3);
curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/3.75);
curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/4.5);
curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/5.5);
curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/7);
curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/10);
curveVertex(width/2 - headWidth/1.9, height/2 - headHeight/16);
curveVertex(width/2 - headWidth/1.85, height/2 - headHeight/50);
curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/50);
curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/16);
curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/10);
curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/7);
curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/5.5);
curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/4.5);
curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/3.75);
curveVertex(width/2 - headWidth/1.85, height/2 + headHeight/3);
curveVertex(width/2 - headWidth/1.9, height/2 + headHeight/2.5);
curveVertex(width/2 - headWidth/2, height/2 + headHeight/3);
curveVertex(width/2 - headWidth/2.1, height/2 + headHeight/3.75);
curveVertex(width/2 - headWidth/2.07, height/2 + headHeight/4.5);
curveVertex(width/2 - headWidth/2.11, height/2 + headHeight/5.5);
curveVertex(width/2 - headWidth/2.08, height/2 + headHeight/7);
curveVertex(width/2 - headWidth/2, height/2);
curveVertex(width/2 - headWidth/2.2, height/2 - headHeight/5);
curveVertex(width/2 - headWidth/2.6, height/2 - headHeight/3);
curveVertex(width/2 - headWidth/2.7, height/2 - headHeight/2.75);
curveVertex(width/2 - headWidth/2.8, height/2 - headHeight/2.65);
curveVertex(width/2 - headWidth/3, height/2 - headHeight/2.65);
curveVertex(width/2 - headWidth/3, height/2 - headHeight/2.65);
endShape();
//right pony
beginShape();
curveVertex(width/2 + headWidth/4.5, height/2 - headHeight/3);
curveVertex(width/2 + headWidth/4.5, height/2 - headHeight/2.25);
curveVertex(width/2 + headWidth/3.5, height/2 - headHeight/2);
curveVertex(width/2 + headWidth/2.5, height/2 - headHeight/2);
curveVertex(width/2 + headWidth/2, height/2 - headHeight/2.15);
curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/2.5);
curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/3);
curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/3.75);
curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/4.5);
curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/5.5);
curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/7);
curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/10);
curveVertex(width/2 + headWidth/1.9, height/2 - headHeight/16);
curveVertex(width/2 + headWidth/1.85, height/2 - headHeight/50);
curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/50);
curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/16);
curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/10);
curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/7);
curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/5.5);
curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/4.5);
curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/3.75);
curveVertex(width/2 + headWidth/1.85, height/2 + headHeight/3);
curveVertex(width/2 + headWidth/1.9, height/2 + headHeight/2.5);
curveVertex(width/2 + headWidth/2, height/2 + headHeight/3);
curveVertex(width/2 + headWidth/2.1, height/2 + headHeight/3.75);
curveVertex(width/2 + headWidth/2.07, height/2 + headHeight/4.5);
curveVertex(width/2 + headWidth/2.11, height/2 + headHeight/5.5);
curveVertex(width/2 + headWidth/2.08, height/2 + headHeight/7);
curveVertex(width/2 + headWidth/2, height/2);
curveVertex(width/2 + headWidth/2.2, height/2 - headHeight/5);
curveVertex(width/2 + headWidth/2.6, height/2 - headHeight/3);
curveVertex(width/2 + headWidth/2.7, height/2 - headHeight/2.75);
curveVertex(width/2 + headWidth/2.8, height/2 - headHeight/2.65);
curveVertex(width/2 + headWidth/3, height/2 - headHeight/2.65);
curveVertex(width/2 + headWidth/3, height/2 - headHeight/2.65);
endShape();
//hairline:
noFill();
strokeWeight(5);
arc(width/2, height/2, headWidth, headHeight, PI, 0);
strokeWeight(10);
arc(width/2, height/2, headWidth - headWidth/50, headHeight - headHeight/50, PI+QUARTER_PI/4, -QUARTER_PI/4);
strokeWeight(15);
arc(width/2, height/2, headWidth - headWidth/40, headHeight - headHeight/40, PI+QUARTER_PI/2, -QUARTER_PI/2);
strokeWeight(20);
arc(width/2, height/2, headWidth - headWidth/20, headHeight - headHeight/20, PI+QUARTER_PI/2+QUARTER_PI/4, -(QUARTER_PI/2+QUARTER_PI/4));
strokeWeight(25);
arc(width/2, height/2, headWidth - headWidth/10, headHeight - headHeight/10, PI+QUARTER_PI, -QUARTER_PI);
strokeWeight(25);
arc(width/2, height/2, headWidth - headWidth/6, headHeight - headHeight/5, PI+QUARTER_PI+QUARTER_PI/4, -(QUARTER_PI+QUARTER_PI/4));
strokeWeight(50);
arc(width/2, height/2 - headHeight/2, headWidth - headWidth/5, headHeight/3, QUARTER_PI, PI - QUARTER_PI);
} else if (hairStyle <= 2) {
//HAIRSTYLE 2:
ellipse(width/2 + 20, height/2 - headHeight/2, headWidth/2, headHeight/3);
noFill();
strokeWeight(5);
arc(width/2, height/2, headWidth, headHeight, PI, 0);
strokeWeight(10);
arc(width/2, height/2, headWidth - headWidth/50, headHeight - headHeight/50, PI+QUARTER_PI/4, -QUARTER_PI/4);
strokeWeight(15);
arc(width/2, height/2, headWidth - headWidth/40, headHeight - headHeight/40, PI+QUARTER_PI/2, -QUARTER_PI/2);
strokeWeight(20);
arc(width/2, height/2, headWidth - headWidth/20, headHeight - headHeight/20, PI+QUARTER_PI/2+QUARTER_PI/4, -(QUARTER_PI/2+QUARTER_PI/4));
strokeWeight(25);
arc(width/2, height/2, headWidth - headWidth/10, headHeight - headHeight/10, PI+QUARTER_PI, -QUARTER_PI);
strokeWeight(25);
arc(width/2, height/2, headWidth - headWidth/6, headHeight - headHeight/5, PI+QUARTER_PI+QUARTER_PI/4, -(QUARTER_PI+QUARTER_PI/4));
strokeWeight(50);
arc(width/2, height/2 - headHeight/2, headWidth - headWidth/5, headHeight/3, QUARTER_PI, PI - QUARTER_PI);
} else {
//HAIRSTYLE 3:
noFill();
strokeWeight(5);
arc(width/2, height/2, headWidth, headHeight, PI, 0);
strokeWeight(10);
arc(width/2, height/2, headWidth - headWidth/50, headHeight - headHeight/50, PI+QUARTER_PI/4, -QUARTER_PI/4);
strokeWeight(15);
arc(width/2, height/2, headWidth - headWidth/40, headHeight - headHeight/40, PI+QUARTER_PI/2, -QUARTER_PI/2);
strokeWeight(20);
arc(width/2, height/2, headWidth - headWidth/20, headHeight - headHeight/20, PI+QUARTER_PI/2+QUARTER_PI/4, -(QUARTER_PI/2+QUARTER_PI/4));
strokeWeight(25);
arc(width/2, height/2, headWidth - headWidth/10, headHeight - headHeight/10, PI+QUARTER_PI, -QUARTER_PI);
strokeWeight(25);
arc(width/2, height/2, headWidth - headWidth/6, headHeight - headHeight/5, PI+QUARTER_PI+QUARTER_PI/4, -(QUARTER_PI+QUARTER_PI/4));
strokeWeight(50);
arc(width/2, height/2 - headHeight/2, headWidth - headWidth/5, headHeight/3, QUARTER_PI, PI - QUARTER_PI);
}
}
function mousePressed() {
//HEAD:
headWidth = random(width/2 - 30, width/2 + 30);
headHeight = random(height/2 - 20, height/2 + 70);
//SKIN:
skinTone = random(0, 5);
//EYES:
eyeWidth = random(40, 65);
eyeHeight = random(15, 37);
eyeSpread = random(10, 15);
eyeColor = random(0, 4);
//NOSE:
noseSpread = random(57, 67);
noseWidth = random(5, 20);
noseHeight = random(55, 65);
//MOUTH:
lipColor = random(0, 5);
mouthHeight = random(5*height/8 - 15, 5*height/8 + 15);
mouthShape = random(2);
//HAIR:
hairColor = random(7);
hairStyle = random(3);
}
Looking Outwards 02: Generative Art
The project I have chosen for this blog is Dr. Woohoo’s “Ribbons” painting application/work. This work combines abstract art with a semi-autonomous brush that attempts to follow the artist’s gestures. While following the painter’s movements, the application produces ‘brushstrokes’ that sample the colors from an image source. The results of this algorithm are unique and colorful tubular shapes that create intense depth and movement on the canvas. I admire this project because of the incorporation of previous works in the production of new ones. The original idea for the project was to figure out a way to “combine previous vivid abstract images [Dr. Woohoo] generated” as the color source for new generative art. The use of previous works adds a special element to any new piece that is produced, like a family line of art. This aspect is not apparent to the audience without explanation, but the color palettes of each piece are certainly notable. Some of the paintings produced with this application are extremely vivid, others more muted, but all of the schemes work beautifully together. Additionally, the patterns on many of the tubular painted objects illicit images of snakes, which is really interesting given the unnatural method of production. This result is a great example of how nature inspires and influences programming.
website: DrWoohoo.com
Project 1: My Self Portrait
// Katherine Stargiotti, kstargio, B
function setup() {
createCanvas(1000, 500);
background(220);
text("kstargio, Self-Portrait Project1", 10, 15);
}
function draw() {
//HEAD:
noStroke();
fill(221,159,131); //skin tone
ellipse(500, 200, 280, 300);
ellipse(500, 270, 215, 305);
quad(633,240, 367,240, 421,375, 579,375);
line(637.5,200,725,300);
ellipse(433, 280, 95, 125);
ellipse(567, 280, 95, 125); //head
fill(231,159,133);
ellipse(434, 285, 85, 70);
ellipse(566, 285, 85, 70); //cheeks
//EYES:
fill(255); //white
ellipse(450, 250, 50, 20);
ellipse(550, 250, 50, 20);
arc(450, 250, 50, 26, PI, 0);
arc(550, 250, 50, 26, PI, 0); //eyeballs
fill(58,27,25); //brown
arc(450, 246, 25, 25, PI+HALF_PI+QUARTER_PI, PI+(QUARTER_PI), OPEN);
arc(550, 246, 25, 25, PI+HALF_PI+QUARTER_PI, PI+QUARTER_PI, OPEN);
fill(0); //black
ellipse(450, 246.5, 15, 15);
ellipse(550, 246.5, 15, 15); //pupils
fill(255);
ellipse(455, 245, 5, 5);
ellipse(555, 245, 5, 5);
ellipse(456, 249, 2, 2);
ellipse(556, 249, 2, 2); //glare
//EYELINER:
noFill();
stroke(0);
strokeWeight(.75);
arc(450, 250, 50, 20, (QUARTER_PI)/8, PI-(QUARTER_PI)/8);
arc(550, 250, 50, 20, (QUARTER_PI)/8, PI-(QUARTER_PI)/8); //bottom line
strokeWeight(1);
arc(450, 250, 50, 26, PI, 0);
arc(550, 250, 50, 26, PI, 0);
strokeWeight(1.75);
arc(450, 250, 50, 26, PI, PI+HALF_PI+(7*(HALF_PI)/8));
arc(550, 250, 50, 26, PI+(QUARTER_PI)/4, 2*PI);
strokeWeight(2.5);
arc(450, 250, 50, 26, PI, PI+HALF_PI+(6*(HALF_PI)/8));
arc(550, 250, 50, 26, PI+(QUARTER_PI)/2, 2*PI);
//EYELASHES:
strokeWeight(1);
arc(423, 245, 15, 12, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2); //left top
arc(424, 243, 15, 12, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/2);
arc(425, 241, 15, 12, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2);
arc(426, 239, 15, 12, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2);
arc(428, 238, 15, 12, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/3);
arc(430, 236.5, 15, 12, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2);
arc(432, 235, 15, 12, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/2);
arc(434, 234, 15, 12, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/3);
arc(436, 233, 15, 12, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2);
arc(438, 232, 15, 12, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/2);
arc(440, 232, 12, 10, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/3);
arc(442, 231.5, 12, 10, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2);
arc(445, 231, 12, 10, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/2);
strokeWeight(.75);
arc(447, 232, 12, 10, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/3);
arc(449, 231.5, 12, 10, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2);
arc(451, 231, 12, 10, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/2);
strokeWeight(.5);
arc(453, 232, 12, 10, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/3);
arc(455, 232, 12, 10, HALF_PI-(QUARTER_PI/2), PI-(QUARTER_PI)/2);
arc(456, 231, 12, 10, HALF_PI+(QUARTER_PI/8), PI-(QUARTER_PI)/2);
strokeWeight(1);
arc(425, 257, 10, 8, PI+(QUARTER_PI)/2, PI+HALF_PI+(QUARTER_PI)/2); //left bottom
arc(426, 258, 9, 8, PI+(QUARTER_PI)/2, PI+HALF_PI+(QUARTER_PI)/2);
strokeWeight(.5);
arc(427, 259, 8, 8, PI+(2*(QUARTER_PI)/3), PI+HALF_PI+(QUARTER_PI)/2);
arc(428, 260, 8, 8, PI+(2*(QUARTER_PI)/3), PI+HALF_PI+(QUARTER_PI)/2);
arc(430, 261, 8, 8, PI+(2*(QUARTER_PI)/3), PI+HALF_PI+(QUARTER_PI)/2);
strokeWeight(1);
arc(578, 245, 15, 12, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/2); //right top
arc(577, 243.5, 15, 12, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(576, 242, 15, 12, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/2);
arc(574, 240.5, 15, 12, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(573, 239, 15, 12, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(572, 237, 15, 12, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/2);
arc(569, 236, 15, 12, QUARTER_PI/4, HALF_PI+(QUARTER_PI)/8);
arc(569, 235.5, 12, 10, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(568, 234, 12, 10, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/2);
arc(565, 233.5, 12, 10, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(564, 233, 12, 10, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(562, 232.5, 12, 10, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/2);
arc(560, 232, 12, 10, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
strokeWeight(.75);
arc(558, 232, 12, 10, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(556, 231.5, 12, 10, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/2);
arc(554, 231, 12, 10, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/8);
strokeWeight(.5);
arc(552, 231.5, 10, 8, QUARTER_PI/3, HALF_PI+(QUARTER_PI)/8);
arc(550, 231.5, 10, 8, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/2);
arc(548, 231.5, 10, 8, QUARTER_PI/2, HALF_PI+(QUARTER_PI)/8);
strokeWeight(1);
arc(575, 257, 10, 8, PI+HALF_PI-(QUARTER_PI)/2, (2*PI)-(QUARTER_PI)/2); //right bottom
arc(574, 258, 9, 8, PI+HALF_PI-(QUARTER_PI)/2, (2*PI)-(QUARTER_PI)/2);
strokeWeight(.5);
arc(573, 259, 8, 8, PI+HALF_PI-(QUARTER_PI)/2, (2*PI)-(QUARTER_PI)/2);
arc(572, 260, 8, 8, PI+HALF_PI-(QUARTER_PI)/2, (2*PI)-(QUARTER_PI)/2);
arc(570, 261, 8, 8, PI+HALF_PI-(QUARTER_PI)/2, (2*PI)-(QUARTER_PI)/2);
//EYEBROWS:
fill(50, 26, 25); //brow brown
quad(423,207, 480,213, 480,223, 423,214);
arc(421.5, 222, 45, 30, PI-(QUARTER_PI)/2, PI+HALF_PI+(QUARTER_PI)/2);
fill(221,159,131); //skin tone
stroke(50, 26, 25);
arc(425, 226, 55, 21, PI, PI+HALF_PI+(QUARTER_PI)/2);
fill(221,159,131); //skin tone
noStroke();
arc(425, 226, 53, 21, HALF_PI+QUARTER_PI, PI+HALF_PI); //left brow
fill(50, 26, 25); //brow brown
quad(579,207, 520,213, 520,223, 579,215);
arc(582, 222, 45, 30, PI+QUARTER_PI, QUARTER_PI);
fill(221,159,131); //skin tone
stroke(50, 26, 25);
arc(578, 226, 55, 21, PI+HALF_PI, 0);
fill(221,159,131); //skin tone
noStroke();
arc(578, 226, 55, 21, PI, QUARTER_PI); //right brow
//NOSE:
noFill();
stroke(50);
arc(439, 285, 95, 175, PI+HALF_PI+QUARTER_PI, 0);
arc(561, 285, 95, 175, PI, PI+QUARTER_PI);
//MASK ELASTIC:
fill(172, 198, 209);
stroke(172, 198, 209);
strokeWeight(2);
line(430,385, 370,275);
line(572,385, 630,275);
//EARS:
noStroke();
fill(221,159,131); //skin tone
ellipse(370,270, 30, 50);
ellipse(375,295, 25, 30);
ellipse(630,270, 30, 50);
ellipse(625,295, 25, 30);
//MASK:
fill(172, 198, 209);
stroke(172, 198, 209);
strokeWeight(2);
line(375,265, 365,245);
line(625,265, 635,245);
strokeWeight(1);
arc(500, 287, 45, 30, PI+(QUARTER_PI)/2, PI+HALF_PI+QUARTER_PI+(QUARTER_PI)/2);
quad(500,280, 375,265, 428,385, 475,425);
quad(500,280, 625,265, 574,385, 525,425);
quad(475,425, 525,425, 525,282, 475,282);
//BUN:
fill(19, 16, 13);
stroke(19, 16, 13);
ellipse(525, 50, 130, 90);
noFill();
strokeWeight(1);
arc(530, 75, 155, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(37, 29, 26);
arc(527, 78, 154, 142, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 155, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 156, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(19, 20, 12);
strokeWeight(4);
arc(527, 77, 45, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 77, 160, 147, HALF_PI+QUARTER_PI, QUARTER_PI/2);
arc(526, 75, 155, 145, HALF_PI+QUARTER_PI, QUARTER_PI/2);
arc(527, 77, 150, 135, HALF_PI+QUARTER_PI, QUARTER_PI/2);
arc(528, 77, 145, 147, HALF_PI+QUARTER_PI, QUARTER_PI/2);
arc(526, 75, 140, 145, HALF_PI+QUARTER_PI, QUARTER_PI/2);
arc(527, 78, 135, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 130, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 125, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(50, 26, 25);
arc(527, 78, 120, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 115, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(19, 16, 13);
arc(526, 75, 110, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(527, 78, 100, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 95, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 105, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(527, 78, 90, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 85, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(41, 31, 29);
arc(526, 75, 80, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(527, 78, 75, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 70, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 65, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(50, 26, 25);
arc(527, 78, 60, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 55, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(37, 29, 26);
arc(526, 75, 50, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(527, 78, 45, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 40, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 35, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(527, 78, 30, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
stroke(19, 16, 13);
arc(528, 79, 25, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 20, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(527, 78, 15, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 10, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 5, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(527, 78, 3, 135, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(528, 79, 57, 147, HALF_PI+QUARTER_PI, QUARTER_PI);
arc(526, 75, 103, 145, HALF_PI+QUARTER_PI, QUARTER_PI);
//HAIR:
noFill();
stroke(19, 16, 13);
strokeWeight(32);
arc(500, 200, 230, 250, PI+QUARTER_PI, PI+HALF_PI+QUARTER_PI);
strokeWeight(26);
arc(500, 200, 245, 265, PI+(QUARTER_PI)/2+(QUARTER_PI)/4, PI+HALF_PI+QUARTER_PI+(QUARTER_PI)/4);
strokeWeight(20);
arc(500, 200, 255, 275, PI+(QUARTER_PI)/2, PI+HALF_PI+QUARTER_PI+(QUARTER_PI)/2);
strokeWeight(15);
arc(500, 200, 260, 280, PI+(QUARTER_PI)/4, PI+HALF_PI+QUARTER_PI+(QUARTER_PI)/2+(QUARTER_PI)/4);
strokeWeight(11);
arc(500, 200, 265, 285, PI, 0);
strokeWeight(8);
arc(500, 200, 275, 295, HALF_PI+QUARTER_PI+(QUARTER_PI)/2+(QUARTER_PI)/4, (QUARTER_PI)/4);
strokeWeight(5);
arc(500, 200, 275, 300, HALF_PI+QUARTER_PI+(QUARTER_PI)/2, (QUARTER_PI)/2);
fill(19, 16, 13);
arc(500, 175, 260, 245, PI+(QUARTER_PI)/2, PI+HALF_PI+QUARTER_PI+(QUARTER_PI)/2, CHORD);
arc(500, 100, 165, 65, PI+HALF_PI+QUARTER_PI, PI+QUARTER_PI, CHORD);
}
I found this project to be challenging because of the amount of detail I like to use when creating art. With only primitive shapes/tools at my disposal, it was very difficult to use as much detail as I would have liked.