Category: Uncategorized

Isabella Hong – Looking Outwards – 12

For my last Looking Outwards post, I will be comparing and discussing the works of interaction designers, Daito Manabe and Caitlin Morris.

Daito Manabe is an artist, programmer, and DJ based in Tokyo, Japan. As a designer, he focuses on the relationship between the body and programming, opting to represent the connections in simple, clean works. He enjoys finding the balance between simple and intricate in his productions and this shows in his work, “Arigato Skating”, a motion graphic made for the opening of the NHK Trophy (a stop on the figure skating grand prix circuit). By using projectors and cameras, Manabe created the illusion that the junior skaters were creating lines of light and flowers with their blades. The full production is beautiful.

http://www.daito.ws/en/work/2012-nhk-trophy-arigato-skating.html

Caitlin Morris is an artist and technologist that explores various representations of physical space often through sound and perception. She is constantly crossing the line between digital and physical space, testing where the limit is on both. In November of 2010, Morris did a sound installation on the Brooklyn Bridge that demonstrated this flirtation with digital and physical interaction. She installed contact microphones across the railings of the Brooklyn Bridge. When pedestrians plugged their headphones into the little boxes, they could hear the vibrations of the bridge, indirectly interacting with the bridge’s interaction with water, wind and travelers. It was very cool.

Contact Microphone
A pedestrian listens to the Brooklyn Bridge

Although both Manabe and Morris are interaction designers, their works delve and trigger reactions from different senses. Manabe focuses on the visual and tactile interaction between his art and his audience. Meanwhile, Morris focuses on how her audience can interact with sound. Overall, both artist provoke reaction through their productions, something that I think is crucial when presenting personal work.

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);

  
}

Final Project Proposal – Simin Li

For the final project, I want to make an interactive animation. I have always loved gardening games because of the joy of harvesting and would like to make one myself. The player would be asked to plant one seed in the soil. Then with each attempt to water the plant the seed would grow leaves and eventually fruit of their own. The number and distribution of leaves and fruit would be generated randomly while following the rules of nature like having more leaves than fruit and not cramming too many leaves on one branch. The extent to which the plant grows will depend on how many times it is watered, but watering the plant too much would cause a sudden and unexpected death. The amount of times of watering that would kill the plant is random and different each time. So it is kind of like a betting game: you want to water the plant as much as possible, but it is up to the player to decide when it might be dangerous to keep watering. Keep your current plant or have a dead one. After you have decided to stop watering, it is harvesting season. The player clicks on a button called “Harvest!” and  can harvest the fruit by clicking on the fruit and the number of fruit harvested will be displayed on the screen.

file_000

looking outward

1
his project created by Mark Wheeler is generated by integrating computational music data and visual graphics. It is a performance that shows how the soundtrack could control the world as well as how the outside could affect sound interactively.


The performance setup uses two synths, a monome running Mark Eats’ own Sequencer app and another monome controlling Ableton Live. These instruments connect via MIDI over wifi to a second laptop running a custom openFrameworks app that produces the visuals. Ableton Live and MidiPipe handle the routing. The visuals software was built using openFrameworks and operates much like a game engine. A map is created with rules for traffic flow, junctions and traffic lights. The simulation could thus visualize people’s behavior by manipulating the sound. By this project, not only the computational music got known by more general people, but It also give this kind of music a more functionalism position than it is before.

sajohnso-project 11

turtleart


/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project 11
*/

var t1, t2, t3, t4;
function setup() {
    createCanvas(400, 400);
        background('white');

    t1 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    t2 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    t3 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    t4 = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));

    t1.setColor('#C7E094');
    t2.setColor('#4B845C');
    t3.setColor('#4B845C');
    t4.setColor('#4B845C');

    t2.setWeight(6);
    t3.setWeight(7);
    t4.setWeight(8);

    frameRate(80);
}
 
function draw() {
            background('white');
    turtleDesign(t1.x,t1.y);
    t1.forward(1);
    t2.forward(1.3);
    t3.forward(1.6);
    t4.forward(1.9);
    var targetX = mouseX;
    var targetY = mouseY;
    t1.turnToward(targetX, targetY, 1);
    t2.turnToward(targetX, targetY, 1.3);
    t3.turnToward(targetX, targetY, 1.6);
    t4.turnToward(targetX, targetY, 2);
   // t1.left(random(-5, 5));
}

function turtleDesign(turtleX, turtleY) {
    var shellWidth = 30;
    var shellHeight = 35;

    //draw the turtle's head
    stroke('#8BCA79');
    fill('#8BCA79'); //dark green
    ellipse(turtleX, turtleY-22, 15, 20);

        //draw the turtle's limbs
    strokeWeight(9);
    stroke('#8BCA79'); //dark green
    line(turtleX, turtleY, turtleX+17, turtleY-17); //front right leg
    line(turtleX, turtleY, turtleX-17, turtleY+17);//back left leg
    line(turtleX, turtleY, turtleX+17, turtleY+17); //back right leg
    line(turtleX, turtleY, turtleX-17, turtleY-17); //front left leg

    //draw the turtle's shell
    strokeWeight(4);
    stroke('#C7E094'); //light green
    ellipse(turtleX, turtleY, shellWidth, shellHeight);

    //design on the turtle's shell
    quad(turtleX-5, turtleY, turtleX, turtleY+5, turtleX+5, turtleY, turtleX, turtleY-5);
    strokeWeight(2);
    line(turtleX-5, turtleY, turtleX-(shellWidth/2), turtleY);
    line(turtleX, turtleY-5, turtleX, turtleY-(shellWidth/2));
    line(turtleX+5, turtleY, turtleX+(shellWidth/2), turtleY);
    line(turtleX, turtleY+5, turtleX, turtleY+(shellWidth/2));

    //draw the turtle's eyes
    noStroke();
    fill('#4B845C');//darkest green
    ellipse(turtleX-4, turtleY-25, 3, 3);
    ellipse(turtleX+4, turtleY-25, 3, 3);

}


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;}

project-11

For this project I decided I wanted to play around with how turtles worked and what they could look like, so I didn’t start out with anything specific in mind. I ended up with someone that looks almost like electricity – it reminded me of a plasma globe!

The screenshots of it don’t look very cool, you really have to view it in motion.

This does not look cool.
This does not look cool.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 11
*
*/

var turtles = [];
function setup() {
    var colors =[color(250, 45, 125), color(113, 222, 241),
        color(175, 230, 51), color(183, 140, 255), color(255), color(253, 162, 35)];

    createCanvas(600, 600);

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

function draw() {
    background(0);
    fill(0);
    ellipse(300, 300, 300, 300);

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

   
}

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;}

mreyes-looking outwards-MikroKontrolleur

Katharina Hauka and Dominik Hildebrand Marques Lopes, MicroKontrolleur, 2015-2016

MicroKontrolleur is both and engineered instrument that uses gesture as a means of sound making. The instrument can be hooked up to any average microphone and It consists of a series of pulleys and foot pedals that can send signals to a software. The software than manipulates sound depending on what you are doing with the instrument. The instrument is naturally a very body performative act when played and can create a range of sound from small popping or clicking to storm like sounds. The musician playing the instrument must stand close to the microphone, looking as if they are going to sing into it. This breaks the viewer out of the common structure of how music is usually performed. In this is also begins to almost question the power dynamic between a singer and a band.

MikroKontrolleur2016 from Katharina Hauke on Vimeo.

LookingOutwards-11 Sadie Johnson

Hannah Davis, Saif M. Mohammad, TransProse, 2014

Thanks to databases that evaluate the “emotional content” of words based on their emphasis, definitions, and connotations, an algorithm has been created to transform the emotional content of the diction in famous literary novels into music. To create this program, two programmers and artists named Hannah Davis and Saif Mohammed first split novels into four parts – the beginning, earlier middle, later middle, and conclusion. Each emotion from striking words are translated into a note or series of notes, which the creators say was the part where their artistic capabilities shone through the most. After that, the same note or sequence of notes was repeated whenever that emotion was repeated in the source text’s diction.

 

https://arxiv.org/abs/1403.2124

Hannah K-Project 11

sketch-60.js

var turtle1;
var turtle2;
var turtle3;
var turtle4;
var turtle5;
var turtle6;
var turtle7;
var turtle8;
var turtle9;

function setup() {
    createCanvas(500, 500);
    turtle1 = makeTurtle(120, 60);
    turtle2 = makeTurtle(110, 230);
    turtle3 = makeTurtle(120, 350);
    turtle4 = makeTurtle(250, 75);
    turtle5 = makeTurtle(260, 210);
    turtle6 = makeTurtle(250, 375);
    turtle7 = makeTurtle(400, 60);
    turtle8 = makeTurtle(390, 230);
    turtle9 = makeTurtle(400, 350);
}


function draw() {

    // Draw the frame
    fill(255, mouseX, mouseY);
    rect(0, 0, width-1, height-1);

    // Creating turtle 1 / 9
    turtle1.penDown();
    turtle1.setColor(0); 
    for (var i = 0; i < 500; i++) {
        turtle1.forward(10);
        turtle1.right(50);
        turtle1.forward(40);
        if (i % 10 === 0) {
          turtle1.forward(15);
        }
    }

    // Creating turtle 2 / 9
    turtle2.penDown();
    turtle2.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle2.forward(10);
        turtle2.right(65);
        turtle2.forward(40);
        if (i % 10 === 0) {
          turtle2.forward(15);
        }
    }

    // Creating turtle 3 / 9
    turtle3.penDown();
    turtle3.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle3.forward(10);
        turtle3.right(50);
        turtle3.forward(40);
        if (i % 10 === 0) {
          turtle3.forward(15);
        }
    }

    // Creating turtle 4 / 9
    turtle4.penDown();
    turtle4.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle4.forward(10);
        turtle4.right(65);
        turtle4.forward(40);
        if (i % 10 === 0) {
          turtle4.forward(15);
        }
    }

    // Creating turtle 5 / 9
    turtle5.penDown();
    turtle5.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle5.forward(10);
        turtle5.right(50);
        turtle5.forward(40);
        if (i % 10 === 0) {
          turtle5.forward(15);
        }
    }

    // Creating turtle 6 / 9
    turtle6.penDown();
    turtle6.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle6.forward(10);
        turtle6.right(65);
        turtle6.forward(40);
        if (i % 10 === 0) {
          turtle6.forward(15);
        }
    }

    // Creating turtle 7 / 9
    turtle7.penDown();
    turtle7.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle7.forward(10);
        turtle7.right(50);
        turtle7.forward(40);
        if (i % 10 === 0) {
          turtle7.forward(15);
        }
    }

    // Creating turtle 8 / 9
    turtle8.penDown();
    turtle8.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle8.forward(10);
        turtle8.right(65);
        turtle8.forward(40);
        if (i % 10 === 0) {
          turtle8.forward(15);
        }
    }


    // Creating turtle 9 / 9
    turtle9.penDown();
    turtle9.setColor(0);
    for (var i = 0; i < 500; i++) {
        turtle9.forward(10);
        turtle9.right(50);
        turtle9.forward(40);
        if (i % 10 === 0) {
          turtle9.forward(15);
        }
    }

}


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;}

This week for my project, I decided to make several repeating turtles with a changing background. It kind of reminds me of the pattern we had to create for a project in a past week. It was fun revisiting the use of turtles, and I enjoyed making turtles that looked totally different from the meanders we created for the assignment last week. I think the changing background adds a cool visual effect, and it was something I came up with during the course of making this project. I did not really start this project with an exact plan, like I usually do, but I enjoyed it nonetheless and feel much more comfortable using turtles now.