mreyes-project 07

//Mercedes Reys

//Section C

//mreyes@andrew.cmu.edu

//project-06-a

var nPoints = 3000; // points in outer cricel drawing curve

function setup() {
frameRate(.0001)
createCanvas(600, 600);
frameRate(10);// slow down fram rate
}

function draw() {
background(255,200,200);

drawEpitrochoid();//top curve
push();
translate(width / 2, height / 2);
drawEpitrochoid();//middle curve
translate(width / 2, height / 2);// bottom cuve
drawEpitrochoid();
pop();
}

function drawEpitrochoid() {
noStroke()

//variables
var x;
var y;

//noise
var randomness = (mouseX/40)+1; // level of noise is depenant on mouseX
var randomShift = random(0, randomness);

var a = 200.0; // diamater of original cirlce
var b = a /3.0 + randomness/nPoints;// diamater of circles added to original circle
var h = constrain(randomShift/ .3, 0, b);// grow when mouse is moved to the right
var ph = randomShift/30.0; // devide by random to reduce jerky-ness of movement

fill(200, 255, 200,150);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints*random(-randomness, randomness), 0, TWO_PI);// map out nPoints to cirlce and a

//calculate vertex
x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
vertex(x, y);
}
endShape(CLOSE);

push();

}

The epitrochoid curve was the only curve I could manage to understand how to make, so I started off by recreating the curve made in the example. I then wanted to make the curve grow in an more organic way. So I created a noise variable and applied that to the constraint. It wasn’t vary dynamic at that point so I experimented with adding the noise to diffrent variables and this was the result.

mreyes-Jean Tinguely

Jean Tinguely‘s Drawing Machines

Various Kinetic Sculptures

Jean Tinguely was an artist working in the 50s and 60s who became famous for his playful kinetic sculptures.  Some of his more interesting works were actually drawing machines witch produced semi random images that were drawn from machines and not people. These drawings were of course abstract and somewhat crude but had a certain rhythm to them because of the machines limited movement ability. When viewing his work people often comment on the juxtaposition of using a machine (witch is often associated with precision) to create these un-precise images.

mreyes-project-06

//Mercedes Reys

//Section C

//mreyes@andrew.cmu.edu

//Project-06

var m;
var s;
var h;

var dSM = 360/60;//to devide minutes and seconds into 60 points on circle

function setup() {
background(255);//draw second backgrond for shodow/ghost effect

createCanvas(400, 400);

}

function draw() {

background(190, 136, 252,50)// draw tranparent backgrond for shodow/ghost effect
angleMode(DEGREES)

//time varibales
m = minute();
s = second();
h = hour();

var cx = 0;//center x cordinate
var cy = 0;//center y cordinate

//seconds variables
var sRadius = width/3; // orbit of seconds circle
var sx = cos(dSM*s)*sRadius;//x cordinate of circle center
var sy = sin(dSM*s)*sRadius;//y cordinate of circle center

// minutes variables

push()
translate(width/2,height/2);
rotate(90);//start at bottom
noStroke();

//seconds ellipse
var b = map(s, 0,60, 0, 255);
var g = map(s,0,60,0,255);
fill(0,g,b,50)//fade from black to cyan in tune with seconds passing by
ellipse(sx+cx,sy+cy,5,5);

//hours ellipse
var b = map(h, 0,24, 0, 255);
fill(255,255,b);//fade from yellow to white in tune with hours passing by
ellipse(cx,cy,h*10,h*10);//grow larger as hours go by

//minutes ellipse
var g = map(m, 0,60, 0, 255);//fade from magenta to white
noStroke();
fill(255,g,255);
ellipse((-mx)+cx,(-my)+cy,m,m);//negative cordinates to start at top rather than bottom
pop();

}

for this I just tied to incorporate the functions we were using to make the clock assignment to make shires that orbit and grow depending on the time. Here is the sketch.

mreyes-looking outwards 05-Sublime Moments

In his show, Sublime Moments all of Eyal Gever’s pieces have two parts to them.  An complex computer simulated animation, and then a 3 foot sculpture of that animation. Gever volunteered to be in the Israel Defense Forces’ computer R&D unit, where he programed computer graphics to simulated possible outcomes. This was the foundation for him eventually developing his own software for his art. In an interview with Beautiful Decay he said “Using my own proprietary 3D physical simulation technologies, I have developed computational models for physical simulation, computer animation, and geometric modeling. Combining applied mathematics, computer science, and engineering…”

Piece of the Ocean 2014

I admire this body of pieces because, I usually find hyperrealism (in both painting and sculpture) to be impressive but, ugly. However with Gever’s work I found his subject matter interesting as well as his execution and the forms he chooses to depict. The collection of pieces is enticing to look at as the forms suggest a movement but also give hint to a bigger motion yet to come. Gever Manages to capture the ominous potential along with a beauty and serenity of natural forms in a poetic juxtaposition.

Sphere Pop 2014

mreyes-project 05-wallpaper

//Mercedes Reys

//Section C

//mreyes@andrew.cmu.edu

//Project-03

// back pattern variables
var cH1 = 40; // larger circle height
var cW1 = 20; // larger circle width
var cX = 0; // circles x cordinate
var cY = 0; // circles y cordinate

var cH2 = cH1/2; // smaller circle height
var cW2 = cW1/2; // smaller circle height

var spaceingX = cW1*2; // pattern spacing
var spaceingY = cH1; // pattern spacing

// front pattern variables

function setup() {
createCanvas(700, 700);
background(255, 204, 204);
}

function draw() {
// back pattern loop
for (var x = 0; x < height; x += 1){
for (var y = 0; y < width ; y += 1){

backPattern(x,y);

}
}
//front pattern loop
for (var x = 0; x < height; x += 1){
for (var y = 0; y < width ; y += 1){

frontPattern(x,y);

//ghosty effect
push()
translate(5,10)
frontPattern(x,y);
pop()

}
}
noLoop()//draw once
}

function backPattern(x,y){ // circle patern

cX = x * spaceingX; // x spacing between circles
cY = y * spaceingY; // y spacing between circles

//outer circle
strokeWeight(3);
stroke(255, 128, 128);
fill(255, 204, 204);
ellipse(cX,cY,cW1,cH1);

// inner circle
fill(255, 128, 128);
ellipse(cX,cY,cW2,cH2);

noLoop();
}

function frontPattern(x,y){
spaceingX = 200
spaceingY = 200

x = x * spaceingX // x spacing between triangles
y = y * spaceingY // y spacing between

noStroke()

//larger tiangle
fill(128, 191, 255)
triangle(60+x, 160+y, 60+x, 40+y, 160+x, 80+y);

//smaller triangles
push()
translate(10,20)
fill(255,200)
triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
translate(10,20)
fill(255,200)
triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
pop()

noLoop()// draw once
}

Inspired by my old shower curtain, I wanted to combine two patterns that had two separate own there own but, together would create a harmonious rhythm. I was hoping more interesting things would happen with layering the transparent blue over the pink, but the patterns just kinda got confusing so I ended up having the blue triangles solid.

Looks pretty close to the sketch honestly (minus the rat).

mreyes-looking outward 04-The Global Synthesizer Project

The Global Synthesizer Project complies environmental sounds from around the globe into an interactive sound based installation. The installation exhibits various modules that represent different parts of the globe. The user may interact with the piece through high frequency cables that allow the user to customize a mini symphony.

Yuri Suzuki teamed up with Moog music to pair samples with modular synthesis and program a reverb algorithm which allows users to “time stretch”. this allows the user to edit the start and stop time of the sample and giving the user some control of the pitch. The reverb is also a convolution, which takes reponses from real space and applies it to an incoming signal.

I admire Suzuki’s ability to engage interaction in a gallery setting as that is not what is common in that setting and therefore hard to encourage. I Suzuki has claimed that he had long wanted to use sounds from around the world in a installation. While this project accomplishes that there are still more boundaries to push in this project both in level of interaction and in concept. I personally hope he continues to develop this work.

mreyes-project-04-string art

//Mercedes Reys

//Section C

//mreyes@andrew.cmu.edu

//Project-04

//colors
var r = 255;
var g = 0;
var b = 255;

var strokeW = 0 // starting stroke width

var canvasDev = 3 // canvas will be divides into 3rds

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

}

function draw() {
background(177,242,231)
//var spaceing = 10
//var growth = 30
fill(0)
for (var i = 0; i < 50; i ++) { //add 50 lines

//variables based on canvas width

var x1 = width/2;
var x2 = i*(x1/10);
var y1 = x1-x2;
var y2 = width-(x2);

r -= 7;
g += 10;
b -= 5;
strokeW += .01; // stroke width increases sligtly
stroke(r,g,b)
line(x2,x1,x1,x1-(x2)); // original left lines
line(x1,x1-(x2),y2,x1); // original right lines

push();

translate(0,height/canvasDev)//bottom 3rd lines

line(x2,x1,x1,x1-(x2));
line(x1,x1-(x2),y2,x1);

translate(width,height);//move the canvas over
angleMode(DEGREES);
rotate(180);//flip canvase
line(x2,x1,x1,x1-(x2));
line(x1,x1-(x2),y2,x1);
pop();

translate(width,height/2);//move the flipped canvas up
angleMode(DEGREES);
rotate(180);
line(x2,x1,x1,x1-(x2));
line(x1,x1-(x2),y2,x1);
pop();

noLoop() // stagnant image so gradient will work

}

}

I initially tried to go with a design with more of a star in the center of the page but, found interesting things happening when experimenting with the translate and rotate function. Now it is something more abstract, but also more 3 dimensional.

Mreyes-Project-03-Dynamic-Drawing

//Mercedes Reys

//Section C

//mreyes@andrew.cmu.edu

//Project-03

var x = 3;
var y = 3;

var dir = 1;

var speed = 7;
var speed2 = 7;

var circW = 10;

var x2 = x - 5
var y2 = y - 5
var x3 = x2 - 5
var y3 = y2 - 5

var dragging = false;

function setup() {
createCanvas(400, 400);
fill(255);
}

function draw() {
var R = map(mouseY, 0, height, 0, 0);
var G = map(mouseY, 0, height, 23, 0);
var B = map(mouseY, 0, height, 54, 0);
background(R,G,B);

noStroke

y += dir * speed;
x += dir * speed;

y2 += dir * speed2;
x2 += dir * speed2;

y3 += dir * speed2;
x3 += dir * speed2;

if (dragging) {
x = mouseX;
y = mouseY;

}

ellipse(x,y,circW,circW);
ellipse(x2,y2,circW,circW);
ellipse(x3,y3,circW,circW)

if (x > width + radius){

}
}

function mousePressed() {
if (dist(x, y, mouseX, mouseY) < circW/2) {
dragging = true;
fill(14,216,227)
}
}

function mouseReleased() {
dragging = false;
fill(255)
}

Try to catch a star!

The pong assignment was really challenging, but I used a lot of the concepts from that (such as if statements, boundary points, and animation) in this program. I attempted to simulate a shooting star while also making it a kind of game.

mreyes-Project-02-Variable-Face

//Mercedes Reys

//Section C

//mreyes@andrew.cmu.edu

//Assignment-01

// size and color variables
var eyeSize = 20;
var puiplilSize = 10

var faceWidth = 75;
var faceHeight = 100;

var noseHeight = 100
var noseWidth = 50

var mouthWidth = 20
var mouthHeight = 20

var r = 147
var g = 100
var b = 179 // pastel color pallet

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

function draw() {
noStroke()
background(182,242,211);
// face
fill(r,g,b)
ellipse(width / 2, height / 2, faceWidth,  faceHeight);
//blush 1
var blushX = width / 2 + faceWidth * 0.25 - faceWidth / 2;
var blushY = height / 2 + faceHeight * 0.25 ;
fill(g,b,r) // reverse for complimentary color
ellipse(blushX + faceWidth / 1.25, blushY, mouthWidth, mouthHeight)
//eye 1
ellipse(blushX + faceWidth / 1.25, height / 2, eyeSize, eyeSize)
fill(50)
ellipse(blushX + faceWidth / 1.25, height / 2, puiplilSize, puiplilSize)
//nose
fill(r,g,b)
var noseX = width / 2 + faceWidth * 0.25;
var noseY = height / 2 + faceHeight * 0.25
ellipse(noseX, noseY, noseWidth, noseHeight);
// blush 2
fill(g,b,r)
ellipse(blushX, blushY, mouthWidth, mouthHeight)
//eye 2
noStroke()
var eyeX = width / 2 - faceWidth * 0.25;
fill(g,b,r)
ellipse(eyeX, height / 2, eyeSize, eyeSize);
fill(50)
ellipse(eyeX, height / 2, puiplilSize, puiplilSize) // the eyes and blush are sepperate so the nose over laps in a non awkward way
// nose definition
noFill()
strokeWeight(3)
stroke(100);
var noseX1 = width / 2 + faceWidth * 0.25 ;
var noseY1 = height / 2 + faceHeight * 0.40;
var noseX2 = width / 2 + faceWidth * 0.25 - noseWidth / 2;
var noseY2 = height / 2 + faceHeight * 0.40;
var noseX3 = noseX1 - 10
var noseY3 = noseY1 - 10
curve(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3, noseX1, noseY1)
}

function mousePressed() {

mouthWidth = (70,20)
mouthHeight = (70,20)

noseHeight = random(150,70)
noseWidth = random(70,20)

faceHeight = random(100,200);
faceWidth = random(75,150);

puiplilSize = random(5,15)

eyeSize = random(10,30);

r = random (147,255)
g = random(100,200)
b = random(179,255)

}

I didn’t do a preliminary sketch for this project and just fiddled around with different shapes. this turned out to be unfruitful as I ended up spending a lot of time on trying to make sure things were not awkward. The arch for the nose was on of the hardest parts as I wanted the ellipse for the nose to change drastically and I had to fiddle with the variables a lot to make sure the curve stayed on the face.

mreyes-looking outward-02

Ralf Baecker, Irrational Computing, 2011

What I admire most about this project is the atmosphere it projects through the composition of the sound. Each module has a distinct and almost haunting sound. Some are semi nostalgic of old dial up computers while other are cringing popping and scraping sounds and some are a mix of both. All the modules are working together not only as signal processor, but also as some sort of nightmarish symphony.

The video goes into more detail, but the entire system of modules is a mix of electical parts a raw elements such as crystals, salt, and iron. The system together makes signal processor in a way that is basically alchemic. Beaker’s manages to make It feels primitive even though the science behind it is actually very advanced.