## project 07

``````/* Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project 07
*/

var nPoints = 20;
var separation = 125;

function setup() {
createCanvas(480, 480);
frameRate(10);
}

function draw() {
background(0);
noStroke();
//magenta
fill (50);
ellipse(125,120,100,100);
fill (80);
ellipse(125,120,80,80);
fill (100);
ellipse(125,120,50,50);
fill (120);
ellipse(125,120,30,30);

//yellow
fill (50);
ellipse(377,240,100,100);
fill (80);
ellipse(377,240,80,80);
fill (100);
ellipse(377,240,50,50);
fill (120);
ellipse(377,240,30,30);

//calls light beam
LightBeam();
//calls wiggle
wiggle();
//call square
square();

}

function LightBeam() {
for(var h = 0; h < 100; h++) //allows for thicker lines
{
//yellow
push();
translate(3 * separation, height / 2);
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
stroke (255,255,0);
line(-375, 238, px, py);
}
pop();

push();
translate(3 * separation, height / 2);
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
stroke (255,255,0);
line(0, 238, px, py);
}
pop();

//magenta
push();
translate( separation, height / 4);
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
stroke (255,0,255);
line(360, 365, px, py);
}
pop();

push();
translate( separation, height / 4);
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
stroke (255,0,255);
line(360, 0, px, py);
}
pop();
}

}
function wiggle(){
stroke(4);

//first
fill(255,165,0);
push();

translate(separation, height/1.7);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
}
endShape(CLOSE);
pop();

//second
fill(255,100,10);
push();
translate(separation, height/1.7);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta)/2;
var py = radius * sin(theta)/2;
vertex(px + random(-5, 5), py + random(-5, 5));
}
endShape(CLOSE);
pop();

}

function square(){
//first
fill(255,100,10);
push();
translate(2*separation+40, height/1.18);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
}
endShape(CLOSE);
pop();

//second
fill(255,165,0);
push();
translate(2*separation+40, height/1.18);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, mouseX, nPoints, mouseY, TWO_PI);
var px = radius * cos(theta)/2;
var py = radius * sin(theta)/2;
vertex(px + random(-5, 5), py + random(-5, 5));
}
endShape(CLOSE);
pop();
}

``````

I was inspired by commits and stars in space and used the equations, mouseX and mouseY to make it interactive.

## looking outwards07

I was inspired by Ben Tricklebank’s and Aaron Koblin’s work called “Light Echos” where he broadcasts the patterns of light onto landscapes by a laser that is on a moving train. The artists utilize transportation and mount a laser to project various images such as maps, patterns and quotes onto the landscape. They represent space and time through the data of light reflecting off of earth. According to Wikipedia “A light echo is a physical phenomenon caused by light reflected off surfaces distant from the source, and arriving at the observer with a delay relative to this distance.” I admired how he was able to use coding and engineering to project the different images onto the landscape. This project was also a part of Doug Aitken’s station to station. Through this project these artists were able to use technology to manipulate how we look at the world around us.

## looking outwards

Jackson Pollock’s art is a main example of art generated by randomness. He was pioneer in abstract art, breaking boundaries of what artists can represent in an image. Pollock lets physics be the main player in his process and he was one of the firsts to make art with the canvas horizontally on the floor, while splattering paint on top. Andy Warhol made fun of this with his Oxidation painting. He had his assistants pee on a canvas that was laying horizontal to the floor. In this he also lets physics be a main player in the making of the work and is a diss to Pollock as pissing on the canvas has this meaning, while he also uses the same creative process to achieve the work.

## project 6

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

//--------------------------
function draw() {
background(255);
noStroke();

// current time
var H = hour();
var M = minute();
var S = second();

// widths of the rectangles
//map(value, start1, stop1, start2, stop2,

var mappedH = map(H, -5,23, width,0);
var mappedM = map(M, -5,59, width,0);
var mappedS = map(S, -5,59, width,0);
var rectHeight = width / 3;

// rectangle time bars

//Hour
fill (0)
rect(0*rectHeight,0, rectHeight,width);
fill(255);
rect(0*rectHeight,0, rectHeight,mappedH);
//minute
fill(50);
rect(1*rectHeight,0, rectHeight,width);
fill(255); //background color
rect(1*rectHeight,0,rectHeight, mappedM);
//second
fill(100);
rect(2*rectHeight,0, rectHeight,width);
fill(255);
rect(2*rectHeight,0, rectHeight,mappedS); //rectangle that moves

//text
fill(255);
textFont('Georgia');
text("Hour " +H, 0*rectHeight+95, mappedH +15);
text("Minute " +M, 1*rectHeight + 95,mappedM +15 );
text("Second " +S, 2*rectHeight +95, mappedS +15);//mapped allows the text to move with the bars

}``````

My clock was inspired by a bar graph. I used the mapped function we learned.

## Project 5

``````
var d = 20

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

}

function draw() {
background(0);
for (var i=0;i<50;i+=1){
for(var j =-10; j < 50;j +=1){
fill (255,140);
rect((50 + j *d * 1.5) + i * 15, 25 +(i *d *1.5), d+20, d); //offsets

}
}
}

``````

I created an optical allusion using for loop and offsetting the rectangles so when you look far away you can’t tell if the black negative spaces are straight or not.

## Looking outwards 05

This project is a fictional character created by artists Trevor McFedries and Sara Deco who created a 19 year old avatar, Miquela. She is a model and musician and a social media influencer. She has more than a million followers by portraying the lifestyle of an it-girl on Instagram. This project interested me because of the impact that she is having on our society today. Brands are taking her on as a model and an ambassador. Her music is being compared to other virtual musicians such as Gorillaz and Hatsune Miku. What I am fascinated by the most is that she is not a real person yet she feels like one because of how realistic the artists have rendered her (and Photoshop her into photos with real people) to be and her personality/presence on Instagram. She has marked a new era of IA. This project has received both intrigue and criticism where people question whether Miquela is an art project or a social experiment. McFedries and Deco own a company called Brud which is a creative agency specializing in robotics and artificial intelligence and the first computer generated social media persona.

## looking outward 04

The Sonumbra de Vincy, Responsive Light Emitting Environment made in 2008 was the most interesting to me. I enjoyed how the digital structure that were made out of lines were formed almost like trees with a trunk at the bottom and wider structure of branches at the top. I also admire how the artists made this structure interact with sounds around it. The Sonumbra illustrates atmosphere of rhythms going on around it bring awareness to all of the patterns and the relationship between people, cars, and other things surrounding the area. The artists worked with electro-luminescent technology a unique lace technique (Lumilace) that creates architectural scale and animates fibre bases technology through hard and software.

## project 04

``````/*
Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project-04
*/

function setup() {
createCanvas(400, 300);
background(0);

}

function draw() {
//curves
for(var i=10; i <200; i+=15) {
stroke(13,238,255);
line(i,20,320, i);
}

for(var i=20; i <400; i+=15) {
stroke(13,238,255);
line(200,i,i, 300);
}

for(var i=20; i <400; i+=15) {
stroke(13,238,255);
line(25,i,i, 275);
}

for(var i=20; i <400; i+=15) {
stroke(13,238,255);
line(25,i,i, 275);
}

for(var i=10; i <700; i+=15) {
stroke(13,238,255);
line(i,100, 300,i);
}

var x = 0;
//red beams
for (var i = 0; i < 50; i++) {
//for loop allows me to control the width of the beam of lines starting from a certain point
stroke(255, 0, 0);
strokeWeight(1);
line(300, 300, x, mouseY); //moves on mouse Y
}

//blue beams
var j = 1;
for (var i = 4; i < 100; i++) {
j += 10;
stroke (0, 0, 255);
strokeWeight(2);
line(300, 300, mouseX, 0);// moves on mouse x
}
//green beams
var w = 100;
for (var i = 4; i < 200; i++) {
stroke (0,255,0);
strokeWeight(.5);
line(400, 0, w, mouseY);//moves on mouse Y
}
//yellow beams
var g = 100;
for (var i = 5; i < 20; i++) {
stroke (255,255,0);
strokeWeight(.5);
line(0, 0, mouseX, 275);// moves on mouse x
}
//purple beams
var m = 100;
for (var i = 5; i < 50; i++) {
stroke (252,141,255);
strokeWeight(.5);
line(25, 275, mouseX, mouseY);//moves on mouse Y and X
}

//rect border
noFill();
stroke(255);
rect(20,20,355,255)

stroke(0);
strokeWeight (4);
rect(0,0,400,300);

}
``````

I made my work look like laser beams at a concert. I used for loops to create the beams of lines together as well as the series of lines that created curves.

## dynamic drawing

``````/* Arden Wolf
Section B
ardenw@andrew.cmu.edu
dynamic drawing */

function setup() {
createCanvas(640, 480);
}

function draw() {
background(0,24,255);

var opposite = width-mouseX// makes object go in opposite direction

//middle

fill(255);
ellipse(mouseX, 100, 60, 60);
fill(0);
ellipse(mouseX, 100, 30, 30);

fill(255);
ellipse(opposite, 200, 60, 60);
fill(0);
ellipse(opposite, 200, 30, 30);

fill(255);
ellipse(mouseX, 300, 60, 60);
fill(0);
ellipse(mouseX, 300, 30, 30);

fill(255);
ellipse(opposite, 400, 60, 60);
fill(0);
ellipse(opposite, 400, 30, 30);

fill(255);
ellipse(mouseX, 500, 60, 60);
fill(0);
ellipse(mouseX, 500, 30, 30);

//side
fill(255);
ellipse(100, mouseX, 60, 60);
fill(0);
ellipse(100, mouseX, 30, 30);

fill(255);
ellipse(400, opposite, 60, 60);
fill(0);
ellipse( 400,opposite, 30, 30);

fill(255);
ellipse(200, mouseX, 60, 60);
fill(0);
ellipse(200, mouseX, 30, 30);

fill(255);
ellipse(300, opposite, 60, 60);
fill(0);
ellipse(300,opposite, 30, 30);

fill(255);
ellipse(500, mouseX, 60, 60);
fill(0);
ellipse(500, mouseX, 30, 30);

/*

fill(255);
ellipse( 100,mouseX, 60, 60);

fill(255);
ellipse(opposite-50,200, 60, 60);

fill(0);
ellipse(opposite-100, 250, 60, 60);

fill(0);
ellipse(opposite-500, 250, 60, 60);

fill(0);
ellipse(opposite-300, 400, 60, 60);

fill(0);
ellipse(mouseX+300, 400, 60, 60);

fill(0);
ellipse(mouseX+300, 100, 60, 60);
*/

}
``````

I created a dynamic image of floating eyes using the variable we learned with width-mouseX.

## Looking Outwards 3 Arden Wolf

Michael Schmidt’s and Francis Bitoni’s 3D printed gown was a project that excited me the most. What interests me about the piece is that they were inspired by organic forms but used algorithms. The artists explored the intersection between “ephemeral notions of beauty and strict mathematics”. The artists focused on the golden ratio theorem that was developed in the 13th century by the mathematician Fibonacci.They made the dress especially for Dita Von Teese and had to use algorithms to create a structure that was wearable for her bod and fluid. To create the flowing form of the dress, the artists assembled from 17 pieces, dyed black and covered with over 13,00 Swarovski crystals.