I chose to look at the complexification series by Jared Tarbell, a programmer/artist who also co founded the website Etsy. He creates algorithms that produce pieces with random elements, like the one above. He leaves his code open to modification by interested parties as a way to keep it in execution by distributing the source code, which I think is cool and an interesting way to collaborate. Although I do not know much about the algorithm used to make this specific piece, I like the way that the slight variation and randomness in the threads that make up this piece combine to give the digital work an organic feeling.
//erin ryan
//lab c
//eeryan@andrew.cmu.edu
//project 06 variable face
function setup() {
createCanvas(480,480);
angleMode(DEGREES);
}
function draw() {//this is a 24 hour clock
background(0);
var h = hour();
var m = minute();
var s = second();
for(var x = 0; x < width; x += 30){
for(var y = 0; y < height; y += 30){
fill(40,35,249);
noStroke();
ellipse(x, height/2, 2, 2);
ellipse(width/2,y,2,2);
}
}
stroke(255,255,0);
noFill();
ellipse(width/2,height/2, 300, 300);
//second indicator
push();
translate(width/2, height/2);
rotate(s*6);
stroke(255,248,220);
strokeWeight(2);
noFill();
arc(150,150,25,25,180,0,CHORD);
pop();
//minute indicator
push();
translate(width/4, height/4);
rotate(m*6);
stroke(205,92,92);
strokeWeight(4);
noFill();
ellipse(0,0,60,60);
pop();
//hour indicator
push();
translate(width/2, height/2);
rotate(h*30);
stroke(220,20,60);
strokeWeight(5);
noFill();
line(0,10,0,50);
pop();
}
I started off by looking at a lot of the clocks by Vincent Toupe. I ended up using three different shapes to represent the hour, minute, and second hands. It’s a 24 hour clock. I tried to find a color palette that worked with the simple, graphic elements of the piece.
//Erin Ryan
//lab c
//eeryan@andrew.cmu.edu
//project-05-wallpaper
var offset = 0;
function setup() {
createCanvas(480,380);
angleMode(DEGREES);
}
function draw() {
background(193,222,229);
matchstick()
}
//draws match
function matchstick(){
var stickW;
var stickH;
var tipX;
var tipY;
var tipW;
var tipH;
var row = 5;
for(var y = 0; y < 3; y++){//nested foor loop creates a grid
if(y%2==0){//offsets even rows by 50
offset = 50;
}
else{
offset = 100;
}
for(var x = 0; x < row; x++){
stickW = 7;
stickH = 85;
tipX = x*90 + 3.5;
tipY = y*100 + 40;
tipW = 11;
tipH = 15;
//match tip
noStroke();
fill(225,61,38);
ellipse(tipX + offset, tipY, tipW, tipH);
triangle(tipX - tipW/2 + offset, tipY, tipX + tipW/2 + offset, tipY, tipX- 0.5 + offset, tipY + 30);
//shade match tip
noStroke();
fill(231,82,40);
ellipse(tipX - .75 + offset, tipY + .25, tipW - 5, 12);
//draw match stick
noStroke();
fill(190,169,130);
rect(x * 90 + offset, y * 100 + 50, stickW, stickH,0,0,45,45);
//shade match stick
noStroke();
fill(219,191,149);
rect(x * 90 - 1 + offset, y*100 + 50, stickW-1.5,stickH,0,0,45,45);
}
}
}
I started by making my match image in Illustrator, and I took the dimensions of the graphic from that. I enjoyed coming up with the artwork for this project, but I had a lot of difficulty implementing it into a pattern. I originally had my nested for loop in my draw function, but when I called it it wouldn’t produce a grid, like it would if I just drew a rectangle in the loop, which I think was because of the way some of my variables were defined in the function. I eventually figured out how to tweak my code within my matchstick function to create the pattern I wanted.
3D graphics generated from biometric facial datamask
Facial weaponization suite is a project by Zach Blas in protest of biometric facial recognition that began with a series of 3D computer graphics generated from the biometric data of people’s faces. These graphics and the data that created them are then compounded to create “collective masks” that are too amorphous to be comprehended by facial recognition software. These masks protest things like the AI facial recognition technology that was recently developed to “detect gay people based on their facial features”, or to expose facial recognition technologies that do not recognize black people as racist. The intersection between political protest, computer science, and art is an area that I find to be really interesting, and an area that I would enjoy exploring further.
function setup() {
createCanvas(400,300);
}
function draw() {
background(221,251,171);
//curve 1
startX = 400;
stopX = 200;
startY = 150;
stopY = 0;
for(var n = 0; n <20; n++){
stroke(0);//black
strokeWeight(1);
line(startX, startY + 20,stopX - 20, stopY);
startY += 20;
stopX += 7;
}
//curve 2
startX = 400;
stopX = 0;
startY = 250;
stopY = 0;
for(var n = 0; n < 20; n++){
stroke(0,0,255);//blue
strokeWeight(1);
line(startX, startY - 20, stopX + 10, stopY);
startX += 2;
stopY += 20;
}
//curve 3
startX = 0;
stopX = 400;
startY = 150;
stopY = 0;
for(var n = 0; n < 40; n++){
stroke(200,118,165);//pink
strokeWeight(2);
line(startX, startY, stopX, stopY);
startX += 10;
stopY += 10;
}
//curve 4
startX = 400;
stopX = 200;
startY = 150;
stopY = 0;
for(var n = 0; n <20; n++){
stroke(255,0,0);//red
line(startY + 20, startX,stopY, stopX - 20);
startY += 20;
stopX += 7;
}
}
I used for loops with various add ons to create four different “curves”. I played around with adding mouse interaction but I didn’t think it looked cohesive when one or two of the curve’s moved along with the mouse. I chose a color palette that matched the modern feel of the assignment.
The Creatures of Prometheus by Simon Russell is a generative visualization of a Beethoven song, using pulsing graphics in coordination with the music to create a visual representation of the ballet. The animation is driven by a program (I think it’s a MIDI file, possibly through the Houdini program) that takes into account the pitch, note, and volume of the notes of the ballet and translates these factors into visual components like color and position that correspond to the particles that make up the visual representation. I like the extra dimension that this visualization gives to the ballet, allowing for a modern voice to be spoken through the traditional ballet piece.
Escapism is a collection by Iris Van Herpen in collaboration with architect Daniel Wildrig and digital manufacturer .MGX by Materialise that encapsulates feelings of emptiness that result from escaping daily struggles via digital environments. It was one of the collections of hers that was featured at the Carnegie Museum of Art last Spring. When I went to see the exhibit, I was very interested in the intersection of fashion and digital manufacturing in her designs, as a designer who has an interest in fashion. Van Herpen’s work manifests along the borders of fashion, digital manufacturing, and product design. Many of the outfits in the collection are partially made via computational fabrication, using 3D printing. Her work realizes a combination between traditional craftsmanship and digital processes, as many pieces of her collections are 3D printed. The attached piece was made without any seams, and is completely 3D printed. For the piece above, she used an algorithm to create a a garment created of thin rumpled mesh.
//Erin Ryan
//Lab C
//eeryan@andrew.cmu.edu
//Project 03
var circleX = 450;
var circleY = 220;
var cD = 190;//diameter of earth
var mD = 40;//diameter of moon
var time = 1;
skyR = 30;
skyG = 30;
skyB = 89;
//orbit variables
var posX = 0;
var posY = 0;
var radiusX = 280;
var radiusY = 190;
var theta = 0;
function setup() {
createCanvas(640,480);
posX = radiusX * cos(theta);
posY = radiusY * sin(theta);
}
function draw() {
background(skyR,skyG,skyB);
//make earth
stroke(66,66,104);
strokeWeight(3);
fill(113,111,179);
ellipse(circleX, circleY,cD,cD);
//earth face
//earth makes sleeping face when sky is darker
if(mouseX < 200){
stroke(66,66,104);
strokeWeight(3);
arc(circleX - cD/5,circleY - cD/8,10,10,0,PI);
arc(circleX + cD/5,circleY - cD/8,10,10,0,PI);
fill(66,66,104);
ellipse(circleX,circleY+10,15,15);
//text
fill(255);
strokeWeight(1.5);
noStroke();
rect(circleX-cD,circleY - 30,90,30,30,30,0,30);
noFill();
stroke(80);
strokeWeight(1);
text("zzzzzzzzz",circleX - cD + 18,circleY - 11);
}
//earth wakes up when sky is lighter
if(mouseX >= 200){
noStroke();
fill(66,66,104);
ellipse(circleX - cD/5,circleY - cD/8,10,10);
ellipse(circleX + cD/5,circleY - cD/8,10,10);
strokeWeight(3);
arc(circleX,circleY+10,20,20,0,PI);
//text
fill(255);
strokeWeight(1.5);
noStroke();
rect(circleX-cD,circleY - 30,90,30,30,30,0,30);
noFill();
stroke(80);
strokeWeight(1);
text("good morning!",circleX - cD + 8,circleY - 11);
}
//make moon orbit the earth
theta = mouseX/5 * 0.05;
posX = radiusX * cos(theta);//use trigonometric function x = rcos(theta) to determine x coordinate
posY = radiusY * sin(theta);//use trigonometric function y = rsin(theta) to determine y coordinate
translate(width/2, height/2);
fill(226,223,172);
ellipse(posX, posY, mD, mD);
//make moon change size via mapping
mD = map(theta,0,6,80*(theta+1),15);
//moon detailing
noStroke()
fill(196,193,153);
ellipse(posX - mD/5, posY - mD/5, mD/6, mD/6);
stroke(196,193,153);
noFill();
ellipse(posX + mD/4, posY + mD/6, mD/7, mD/7);
//make sky change color
skyR = mouseX/5 + 30;
skyG = mouseX/4 + 30;
skyB = mouseX/2 + 89;
}
My concept was to show the Moon orbiting around the Earth, with the Moon changing size, position, and velocity as it moved through space, adding an element of perspective to the drawing.
preliminary sketches
I was unsure how to code an elliptical orbit, as I knew that the rotate() function used for circular orbits wouldn’t apply.
I ended up using the trigonometric formulas x=rcos(theta) and y=rsin(theta) to get the orbit coordinates – I then tweaked theta so it corresponded with mouseX. I initially tried to use conditionals to get the moon to change size, but it was very complicated, and wouldn’t transition smoothing, so I ended up using the mapping function.
illustrator mock up
I decided to add more elements of detail to the Moon, and I gave the Earth an awake and asleep face. I wish I could have easily added more details to the Earth so that it looked more like Earth, but it ended up just looking like a random planet.
This generative art, created in 2005 by Tina Frank interested me because of the combination of flashing images and jarring music engaging and thought provoking. It reminded me of the randomized animations we looked at in class, but used in a way that was visually appealing and planned. The neon colored lines, rapidly reappearing in parallel and perpendiculat sequences, in combination with the increasingly fast and nonsensical music combine in a way that is jarring, yet still visually compelling. Occasionally your eyes will try to find sense in the rapidly appearing lines and shapes – for example the appearance of the rotating cubic form in the midst of linear chaos around the 40 second mark. The ability to generate these patterns and shapes rapidly and randomly allow an artistic interpretation of chaos using digitally generated images and sound.
//Erin Ryan
//eeryan@andrew.cmu.edu
//Lecture 1, Section C
//Project 02
var eyeSize = 20;
//face variables
var faceWidth = 100;
var faceHeight = 150;
var wink = 1;
//mouth variables
var mouthXone = 120;
var mouthXtwo = 140;
var mouthYone = 190;
var mouthYtwo = 190;
var mouthWidth = 10;
var mouthHeight = 10;
var mouthNumber = 1;
var rB = 40;
//body variables
var shoulderHeight = 265;
function setup() {
createCanvas(300,300);
}
function draw() {
background(255,255,210);
//phone
noStroke();
fill(193,93,101);
quad(45,140,70,150,70,212,45,200);
var eyeY = height/2;//eye height
//arm
noFill();
stroke(152,196,249);
strokeWeight(10);
beginShape();
curveVertex(50,170);
curveVertex(50,170);
curveVertex(50,180);
curveVertex(50,280);
curveVertex(100,310);
curveVertex(110,310);
endShape();
//shoulders
noStroke();
fill(50,80,109);
rect(75,shoulderHeight,170,100,25,25,25,25);
//face
stroke(152,196,249);
fill(197,255,237);
strokeWeight(5);
rect(100, 75, faceWidth, faceHeight,25,25,40,40);
var eyeLX = width / 2 - faceWidth * 0.25-10;
var eyeRX = width / 2 + faceWidth * 0.25-10;
stroke(50,80,109);
noFill();
//left eye
strokeWeight(3);
ellipse(eyeLX, eyeY, eyeSize, eyeSize);
//mouth
if(mouthNumber==1){
noStroke();
fill(193,93,101);
arc(mouthXtwo, mouthYtwo, mouthWidth, mouthHeight,0,PI);
}
if(mouthNumber==2){
stroke(193,93,101);
line(mouthXone,mouthYone,mouthXtwo,mouthYone);
}
if(mouthNumber==3){
noStroke();
fill(193,93,101);
ellipse(mouthXone,mouthYone,mouthWidth,mouthHeight);
}
//right eye
if(wink==1){
stroke(50,80,109);
line(eyeRX-5, height/2,eyeRX+5, height/2);
}
else{
noFill();
stroke(50,80,109);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
}
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(75, 150);
faceHeight = random(120, 180);
eyeSize = random(10,20);
mouthXone = random(120,130);
mouthXtwo = random(140,150);
mouthYone = random(180,190);
mouthYtwo = random(155,165);
mouthXthree = random(110,120);
mouthYthree = random(155,165)
mouthWidth = random(10,35);
mouthHeight = random(5,25);
mouthNumber = Math.floor((random()*3)+1);
wink = Math.floor((random()*3)+1);
eyeY = height/2 +(Math.floor((random()*7)+1));
shoulderHeight = random(265,230);
}
I started off by tweaking the original template, finding slight differences like making the height of the eyes unequal, changing the radius of the curves of the face rectangle and adding strokes to different elements. I chose a color palette that I thought worked well with the simplistic faces I created, primarily desaturated primary colors.
After toying with conditionals and tweaking elements to give my faces different expressions, I decided that adding the context of a cell phone would tie my piece together. The different faces dictate how the phone is being used – are they taking a selfie? did they just read a text that irritated them?
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
