jmmedenb@andrew.cmu.edu – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

jmmedenb-final project

//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Tuesdays @ 1:30pm
//Final Project 

var myCaptureDevice;
var img;
var Point;
var r, g, b;
var change;

function setup() {
    createCanvas(640, 550);
    myCaptureDevice = createCapture(VIDEO);
    myCaptureDevice.size(640, 550); 
    myCaptureDevice.hide(); 
    var y = 20;
    change = .25;
    size1 = 200;
    size2= width/4;
    size3=height/2;
    
    
}


//--------------------------------------------------------------------
function draw() {
    background(b,r,g);
    myCaptureDevice.loadPixels(); 
    image(myCaptureDevice, 0, 0); 
    
   
    strokeWeight(3);
    noFill();
    ellipse(width/2,height/2,size2,height/4);
    ellipse(width/2,height/2,width-10,size3);
    ellipse(width/2, height/2,200,size1); 
    
    
    var turtle = makeTurtle(width/2, height/2);
   turtle.penDown();
    
    for (var i = 0; i < 250; i++) {
        turtle.forward(5);
        turtle.right(45)
        turtle.forward(5);
        turtle.right(45);
        turtle.forward(5);
        turtle.right(45);
        turtle.forward(5);
        turtle.right(45)
        turtle.forward(5);
        turtle.right(45);
        turtle.forward(5);
        turtle.right(45);
        turtle.forward(5);
        turtle.right(45);
        turtle.forward(5);


            turtle.penUp();
           
            
            turtle.right(137.507764/2.0);
            turtle.forward(i/change);
            turtle.right(137.507764/10);
            

          

            

            turtle.penDown();
            
    
          }


     change++;

          


         
  
}

function mousePressed() {
  
  var d = dist(mouseX, mouseY, 360, 200);
  if (d < 100) {
    
    r = random(255,0);
    g = random(255,120);
    b = random(255);
    change = random(.25,.5,2,4,6,8);
    move = random(2,10);
    size1 = random(200,400,600);
    size2=random(width/2,width,width/6);
    size3=random(height/2,height/4,height-50);

 

    


  }


}




function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For my final project, coming from the performance and media design program, I wanted to create something that could be used in performance. Therefore, I decided I would want the ability to use live camera since that is something we use quite a bit in my department and an interactive element that the performer or controller could trigger during the performance. I chose to make a spiraling pupil on top of the live camera image as an opportunity to play with turtles and the mouse click manipulating the objects and imagery over the live camera. This was a good exercise for me because it got me to think more about the combination of all these elements that I’ve learned in this class and how I could apply these new skills to other classes and projects I will work on.

The idea would be that during the performance the camera would be on the performer and then the controller would click to play with the turtles spinning and the shape of the eye changing.

Final-Project-Proposal

For my final project I’d like to create visual software that responds to music and could be used as background visuals for performance.

I would like my final project to be something that through mouse control by the VJ or whoever was the controller, you could create new shapes appear or cause the visuals to change and to move in a different direction. I’d like to play with multiple colors and spaces and watching movement move in and out of view.

The sensation I’m looking to create is that of looking out of a window. The visuals go by and the backgrounds and visuals change when the user clicks mousePressed. A few of the visuals I want to create are clouds passing by that when clicked change shape into water that then blends together and then when clicked again can become mountain ranges. These are just starter ideas and I’m sure as I progress I will come up with more as things continue.

012-Looking Outwards

The two artists I’m using as inspiration for my final project are Kynd and Luke Twyman.

Kynd’s “At First” are vivid watercolor visuals that they created for a VJ set for the musician Yaporigami. The visuals interact with the music to create beautiful painterly strokes that consume the and transform within the space. I love the feeling of the visuals and the way they move within their constraints and interact with the music.

The other piece is Luke Ywyman’s interactive design for the Helios’ album “Yume”. This interactive design is interesting to me because it gives the viewer the ability to interact both sonically and visually with the work and therefore feel they are also contributing and adding to it.

For my final project, I’d like to create an audiovisual performance instrument so both of these are good examples to draw from in terms of thinking about how I will manifest my own audio visual program. http://thecreatorsproject.vice.com/blog/float-over-a-digital-desert-in-helios-interactive-album

011-Looking Outwards

Ian Chang’s “Spiritual Leader” is an interesting sound art/music project because he uses both mechanical drum sounds as well as human produced drum sounds to create a percussive piece where the mechanical and human sounds blend together. This creates an effect where sonically it can be unclear what is the computer and what is Ian.

The collaboration of Chang with Endless Endless is a video where they created a light projection installation based off of the drum beats that shines different lights and projections on to Chang as he plays the drums. This creates an environment that is simultaneously sonically and visually percussive. The effect is interesting and I found really successful because while the human and mechanical sounds are blending, the lights only turn on through the human interaction that creates the beats. You can really feel the presence of the artist, although the environment and many of the sounds are produced by a computer.

b85ffa2bff2f1ef8721df8f2aac9b04e

http://thecreatorsproject.vice.com/blog/sample-based-drums-psychedelic-light-show

jmmedenb-Project 11

jmmedenb-011c

//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Section C 1:30PM
//Assignment 011-C

var turtles = [];
var heart;
function setup() {
    strokeWeight(20);
    var colors =[ color(113, 222, 241),
        color(175, 230, 51), color(183, 140, 255), color(150,20,150)];

    createCanvas(550, 550);


    for(i = 0; i < colors.length; i++){ // creates multiple turtles
        var turt = makeTurtle(325,400);
        turt.setColor(colors[i]);
        turt.penDown
        turtles.push(turt);
    }
}



function draw() {
    background(0);
    fill(0);
    strokeWeight(4);
    
   var heart =makeTurtle(325,100);

   for (b=0; b<width;b++){
    heart.forward(100);
    heart.right(45);
    heart.forward(100);
    heart.right(45)
    heart.forward(100);
    heart.right(50);
    heart.forward(200);

   
   }
   

    for(i = 0; i < turtles.length; i++){
        turtles[i].forward(50);
        turtles[i].left(100);
        turtles[i].forward(50);
        turtles[i].right(50);
        turtles[i].forward(50);
        turtles[i].right(50);
        //if(turtles[i].distanceTo(300, 300) > 300){
            //turtles[i].goto(300, 300);
        //}

        for(m = 0; m < turtles.length; m++){
        turtles[m].forward(25);
        turtles[m].left(50);
        turtles[m].forward(25);
        turtles[m].right(25);

         for(x = 0; x < turtles.length; x++){
        turtles[x].forward(5);
        turtles[x].left(10);
        turtles[x].forward(5);
        turtles[x].right(5);

    
    }
}
}
   
}

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For this project, I wanted to experiment with using turtles and colors as well as geometric shapes. I liked creating a more rigid grey geometric shape with movement and color within it.

Project 10

jmmedenb-10c

//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Tuesdays at 1:30PM
//Assignment-10c

var balloons = [];
var tSpeed = 0.0001;
var tDetail = 0.003;


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of fish
    for (var i = 0; i < 10; i++){
        balloons[i] = makeBalloons(random(width),random(height-100));
    }
    frameRate(12);
}


function draw() {
    var cB = 20;
    x = map(cB,0,height,255,0);
    background(255);
   

    //sea
    beginShape(); 
    fill(100,255,255);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 1,0,100, height);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);
    updateAndDisplayBalloons();
    removeBalloons();
    addNewBalloons();



}

//boats
function updateAndDisplayBalloons(){
    for (var i = 0; i < balloons.length; i++){
        balloons[i].move();
        balloons[i].display();
    }
}


function removeBalloons(){
    var balloonsToKeep = [];
    for (var i = 0; i < balloons.length; i++){
        if (balloons[i].x + balloons[i].bodySize > 0) {
            balloonsToKeep.push(balloons[i]);
        }
    }
    balloons = balloonsToKeep; // only keeps ballons on screen
}


function addNewBalloons() {
    // adds new ballons
    var newBalloonsLikelihood = 0.02; 
    if (random(0,1) < newBalloonsLikelihood) {
        balloons.push(makeBalloons(width,random(2,height-100)));
    }
}


// updates of balloons 
function balloonsFloat() {
    this.x += this.speed;
}
    

// balloons
function balloonsDisplay() {
     
    noStroke(); 
    push();
    fill(255,100,100);
   ellipse(this.x, this.y, this.bodySize, this.bodyWidth);
   rect(this.x, this.y+10, 10, 20);
    pop();
   fill(0);
   rect(this.x+5, this.y+30, 1, 30);

}




function makeBalloons(LocationX,LocationY) {
    var balloons = {x: LocationX+300,
                y: LocationY+275,
                bodyWidth: (50,50),
                bodySize: (50,50),
                speed: random(-3.0,-1.0),
                colorR: random(130,240),
                colorG: random(20,80),
                move: balloonsFloat,
                display: balloonsDisplay}
    return balloons;
}

I started out wanting to make boats for this project but then started thinking about things that get lost at sea, such as bottles or objects. Then I started thinking of when people accidentally let go of balloons, or events for children where everyone is given a balloon and they all inevitably accidentally let go of them and you just see a sea of balloons in the sky. I remember as a kid wondering where they went. I put together these two thoughts and decided to make a sea of balloons in the sea. I then decided to create a moving image of watching the sea of balloons floating together, perhaps people see them, perhaps they don’t, but they’re there. Maybe the sea is where all the lost balloons end up.

Jessica Medenbach Looking Outwards-10

Eva Shindling’s “Liquid Sound” uses recordings of words that are considered opposites such as body and mind, chaos and order, simplicity and complexity, and uses the sound vibrations from these recordings to manipulate liquid simulation. Eva then takes a freeze image of the effects of the vibrations on the liquid and turns it into a 3d sculpture. I love the train of thought that goes into making a piece of work like this. It quickly points to the fact that opposites can also blend into each other and that there is an asymmetry and deformity to the relationships between these words. The sculptures make me think about how opposites affect each other and that this binary way of thinking isn’t cut and dry. There are nuances to the meanings and associations with these words that I think are really interesting to see visually depicted. I really admire Eva’s workflow and the layers of process that go into making work like this. You can feel the process and loss of a simple definition in the passing of time it takes to make these pieces. http://www.evsc.net/home/liquid-sound-collision

Looking Outwards 09

I looked at Liu Xiangqi’s Looking Outwards post on Aaron Koblin’s “Flight Patterns” work. Flight Patterns visualizes air traffic over North America, creating colorful celestial patterns. I like Liu’s statement “It seems that our planet is wrapped by layers of these nets consisting of paths.” I also had this reaction to the work. I’m always excited by seeing movement visualized. The fact that this work is also man made movement is exciting to me because my first reaction would be to think of it as nature vs. man piece and man mimicking nature. However, when I think about it more in depth, this movement of man is also natural. It is not mimicking, it is a part of the sky, we just don’t think about this movement as being as ethereal as you would the stars. The ability to use the processing program to visualize this helps to close the gap for me in this way of thinking, that I find really interesting and produces some beautiful work. http://www.aaronkoblin.com/project/flight-patterns/

Jessica Medenbach-09 Portrait

screen-shot-2016-11-14-at-10-57-38-pm

For this portrait, I liked the idea of making it out of slashes of ellipses that to me looked like raindrops. The result ends up creating a portrait that feels like looking at someone through a rainy window or in a carwash.

jmmedenb-09b

//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Tuesdays at 1:30PM
//Assignment-09B

var img;
var Point;

function preload() {
  img = loadImage("http://i.imgur.com/lYuqE9A.jpg");
}

function setup() {
  createCanvas(800, 800);
  Point = 5;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  
}

function draw() {
  var pointillize = map(mouseX, 0, width, Point, Point);
  var x = floor(random(img.width));
  var y = floor(random(img.height));
  var pix = img.get(x, y);
  fill(pix, 128);
  ellipse(x+5, y+5, pointillize, pointillize);
  ellipse(x,y,pointillize,pointillize);
  ellipse(x-5,y-5,pointillize,pointillize);
  ellipse(x-10,y-10,pointillize,pointillize);
  ellipse(x+10,y+10,pointillize,pointillize);

  
}

Looking Outwards-08

I watched Lauren McCarthy’s lecture on following. Lauren is a Brooklyn and LA based artist and coder and was also one of the creators of P5JS! Lauren received her BS in Computer Science and BS in Art and Design from MIT and then received her MFA from UCLA. Lauren is now a professor at UCLA and was recently working at CMU in code lab.

I loved watching this lecture and was so inspired by the projects Lauren has worked on. What I love about her work is that most of her projects are focused on intimacy and engagement with the people in the world around you. Her main interest seems to be using algorithms and codes to measure or track relationships and then find ways to use that information to determine how you engage with the world and with the people in your immediate surroundings. I also love that she uses this knowledge and interest to empower people to recreate new social structures and ways of thinking about interacting with one another.

The way that Lauren presents is also incredibly personal and she uses her vulnerability and personal anecdotes to connect the reasons why she has had the interest or desire to create the projects she has. I’m ultimately really glad I watched this and am excited to watch more! http://lauren-mccarthy.com/about