Author: mreyes@andrew.cmu.edu

mreyes-project 07

sketch

//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

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

mreyes-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
    var mRadius = sRadius+35//orbit 
    var mx = cos(dSM*m)*mRadius;//x
    var my = sin(dSM*m)*mRadius;//y

    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.

screen-shot-2016-10-07-at-11-23-06-pm

mreyes-looking outwards 05-Sublime Moments

Eyal Gever, Sublime Moments, 2014

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.

803ec6874cc8b23ffa4a2d73d4347388

 

Sphere Pop 2014

mreyes-project 05-wallpaper

project-05.js


//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.

img_4903

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

mreyes-looking outward 04-The Global Synthesizer Project

The Global Synthesizer Project,Yuri Suzuki, 2016

e6f7af8ebb9d3d1b3ec029457b1d6765

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.81049319e3755e412d97d214446eb015-1

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

mreyes-project-04

//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);
     
     //color gradient
     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

project-03

//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 radius = 4;
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){
    x = -radius
    y = -radius
    x2 = (-radius) - 5
    y2 = (-radius) -5
    x3 = (-radius) - 10 
    y3 = (-radius) - 10

  }
}

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

mreyes-project-02

//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.