Looking-Outwards-10

I looked at Emily Gobeille’s projects for this week’s looking outwards, and I really like her work Carnival Cruise, which is an interactive aquarium that she designed for Arnold R&D. Her work was displayed on store windows across 6 cities, and change depending on the viewer. Generally, though, she appears to have a diverse selection of interactive projects for a variety of employers.

Picture of her display in a store front; taken from http://zany parade.com

Gobeille designed it so that viewers can call and enter a fish designed from the sounds they make into the aquarium. They also can just have the fish react depending on their movement. The fish are described much like Pokemon in how they are able to be evolved and fed each time you call in.

I really like this project because it’s so interactive and fun. Anyone can play and admire it as they walk past, and it seems like it would make someone’s day brighter if they were to see it, which I think is important for a project to do.

 

The video for her project can be seen below, while the link can be found here.

 

Carnival Interactive Aquarium from Todd vanderlin on Vimeo.

Sarita Chen – Project 10 – Landscape

sketch
 

// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project 10
var hills = [];
var clouds = [];
var blocks = [];
var pipes = [];


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of hills
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        hills[i] = makeHill(rx);
    }


    for (var i = 0; i < 5; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }

    for (var i = 0; i < 5; i++){
        var rx = random(width);
        blocks[i] = makeBlock(rx);
     }   

    for (var i = 0; i < 1; i++){
        var rx = random(width);
        pipes[i] = makePipe(rx);
     } 

    frameRate(20);
}


function draw() {
    background(112,166,255); 
    
    displayHorizon();

    updateAndDisplayHills();
    removeHillsThatHaveSlippedOutOfView();
    addNewHillsWithSomeRandomProbability(); 

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();

    updateAndDisplayBlocks();
    removeBlocksThatHaveSlippedOutOfView();
    addNewBlocksWithSomeRandomProbability();

    updateAndDisplayPipes();
    removePipesThatHaveSlippedOutOfView();
    addNewPipesWithSomeRandomProbability();

    backgroundDesign();
}


function updateAndDisplayHills(){
    // Update the building's positions, and display them.
    for (var i = 0; i < hills.length; i++){
        hills[i].move();
        hills[i].display();
    }
}

function updateAndDisplayClouds(){
 
    for (var i = 0; i <clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}

function updateAndDisplayBlocks(){
 
    for (var i = 0; i < blocks.length; i++){
        blocks[i].move();
        blocks[i].display();
    }
}
function updateAndDisplayPipes(){
 
    for (var i = 0; i < pipes.length; i++){
        pipes[i].move();
        pipes[i].display();
    }
}

function removeHillsThatHaveSlippedOutOfView(){
    var hillsToKeep = [];
    for (var i = 0; i < hills.length; i++){
        if (hills[i].x + hills[i].breadth > 0) {
            hillsToKeep.push(hills[i]);
        }
    }
    hills = hillsToKeep; // remember the surviving buildings
}

function removeCloudsThatHaveSlippedOutOfView(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if(clouds[i].x + clouds[i].breadth > 0){
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

function removeBlocksThatHaveSlippedOutOfView(){
    var blocksToKeep = [];
    for (var i = 0; i < blocks.length; i++){
        if(blocks[i].x + blocks[i].breadth > 0){
            blocksToKeep.push(blocks[i]);
        }
    }
    blocks = blocksToKeep;
}

function removePipesThatHaveSlippedOutOfView(){
    var pipesToKeep = [];
    for (var i = 0; i < pipes.length; i++){
        if(pipes[i].x + pipes[i].breadth > 0){
            pipesToKeep.push(pipes[i]);
        }
    }
    pipes = pipesToKeep;
}

function addNewHillsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newHillLikelihood = 0.007; 
    if (random(0,1) < newHillLikelihood) {
        hills.push(makeHill(width));
    }
}

function addNewCloudsWithSomeRandomProbability(){
    var newCloudLikelihood = 0.007;
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}


function addNewBlocksWithSomeRandomProbability(){
    var newBlockLikelihood = 0.007;
    if (random(0,1) < newBlockLikelihood) {
        blocks.push(makeBlock(width));
    }
}

function addNewPipesWithSomeRandomProbability(){
    var newPipeLikelihood = 0.002;
    if (random(0,1) < newPipeLikelihood) {
        pipes.push(makePipe(width));
    }
}


// method to update position of building every frame
function hillMove() {
    this.x += this.speed;
}

function cloudMove(){
    this.x += this.speed;
}

function blockMove(){
    this.x += this.speed;
}

function pipeMove(){
    this.x += this.speed;
}


// draw the building and some windows
function hillDisplay() {
    var floorHeight = 30;
    var hHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill(255,213,48);
    stroke(255,175,48);
    ellipse(0, -hHeight, this.breadth+50, hHeight+100);
    
    pop();
}

function cloudDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(10,bHeight,this.breadth+100,bHeight/2);
    pop();

    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(30,-bHeight-200,this.breadth+100,bHeight/2);
    pop();



}

function blockDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(140,78,47);
    rect(30,-bHeight-100,30,30);
    pop();



}

function pipeDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(77,175,28);
    rect(30,-bHeight-50,50,70);
    rect(20,-bHeight-50,70,10);
    pop();



}


function backgroundDesign(){
    fill(120,224,60);
    noStroke();
    rect(0,350,600,50);


    fill(255,212,71);
    rect(0,370,600,50);

   }

function makeHill(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: hillMove,
                display: hillDisplay}
    return bldg;
}

function makeCloud(birthLocationX){

    var cloudV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(1,10)),
        move: cloudMove,
        display: cloudDisplay}
    return cloudV;
}

function makeBlock(birthLocationX){

    var blockV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(5,5)),
        move: blockMove,
        display: blockDisplay}
    return blockV;
}

function makePipe(birthLocationX) {
    var pipeV = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: pipeMove,
                display: pipeDisplay}
    return pipeV;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

My project is just a remake of the first world in Super Mario. There are pipes, the basic hills in the background, clouds and item blocks.

Michal Luria – Project 10 – Landscape

mluria-10

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-10-Project
*/

var x = []; //circle X
var y = []; //circle Y
var circSize = []; //size
var circHue = []; //hue
var myParticles = []; //particles
var nParticles = 700;

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

    //build an initial array of particles
    for (var i = 0; i < nParticles; i++) {
        var rx = random(width);
        var ry = random(height);
        myParticles[i] = makeParticle(rx, ry, 0, 0);
    }

    //set color to HSB
    colorMode(HSB, 100);
    frameRate(20);

}


function draw() {

    background(0);
    fill(255);
    noStroke();

    
    push();

    //draw particles according to gravity and repulsion forces
    //the first part of the code implements the particle code we learned in class

    var gravityForcex = 0;
    var gravityForcey = 0.05;
    var mutualRepulsionAmount = 2.5;
 
 
    for (var i = 0; i < myParticles.length; i++) {
        var ithParticle = myParticles[i];
        var px = ithParticle.px;
        var py = ithParticle.py;
 
        if (mouseIsPressed) {
            ithParticle.addForce(gravityForcex, gravityForcey);
        }
 
        for (var j = 0; j < i; j++) {
            var jthParticle = myParticles[j];
            var qx = jthParticle.px;
            var qy = jthParticle.py;
 
            var dx = px - qx;
            var dy = py - qy;
            var dh = sqrt(dx * dx + dy * dy);

            if (dh > 1.0) {
                var componentInX = dx / dh;
                var componentInY = dy / dh;
                var proportionToDistanceSquared = 1.0 / (dh * dh);
                var repulsionForcex = mutualRepulsionAmount *
                    componentInX * proportionToDistanceSquared;
                var repulsionForcey = mutualRepulsionAmount *
                    componentInY * proportionToDistanceSquared;
                // add in forces
                ithParticle.addForce( repulsionForcex,  repulsionForcey);
                jthParticle.addForce(-repulsionForcex, -repulsionForcey);
            }
        }
    }
 
    for (var i = 0; i < myParticles.length; i++) {
        myParticles[i].bPeriodicBoundaries = false;
        myParticles[i].bElasticBoundaries = true;
        myParticles[i].update(); // update all locations
    }
 
    for (var i = 0; i < myParticles.length; i++) {
        myParticles[i].draw(); // draw all particles
    }

    //----=====end of particle code=====-----//

    pop();

    //set the likelihood of a circle showing up
    var newCircleLikelihood = 0.3;
    if (random (0,1) < newCircleLikelihood){
        //if new circle is created, push a random location, size and hue
        x.push(random(0, width));
        y.push(random(0, height)); 
        circSize.push(random(0,2));
        circHue.push(random(0,100));
    }
    
    //for the circle array length
    for (var i = 0; i < x.length; i++) {
        var ex = x[i]; //set new x
        var ey = y[i];  //set new y
        var eCirc = circSize[i]; //set new circle size
        var eHue = circHue[i]; //set new hue
        fill(eHue, 100, 100); 

        //every 5 circles draw a moving triangle instead
        if (i % 5 == 0){
            triangle(ex, ey, ex+random(-20,20), ey, ex+(random(-20,20)), ey-random(-20,20));

        //if not triangle, draw circle
        } else {
            ellipse(ex,ey, eCirc, eCirc);  //draw the new circle
        }

        circSize[i] += random(0,3); //make the circle grow in side

        //code to move the circle slightly out of the center
        if (x[i] > width/2) { //if on the left side - move left
            x[i]+=3 ;
        } else { //if on the right side - move right
            x[i]-=3 ;
        }

        if (y[i] > height/2) { //if the circle is on the bottom half
            y[i]++ ; //move down
        } else { //if on the top half
            y[i]-- ; //move up
        }

        if (circSize[i] > height) { //if the circle is too big

            x[i] += 1500; //move it to the side
            y[i] += 1500;
        }
    }


}


// Implementation of partical code with variation
//Mutual repulsion, with optional gravity

// Update the position based on force and velocity
function particleUpdate() {
    if (this.bFixed == false) {
        this.vx *= this.damping;
        this.vy *= this.damping;
  
        this.limitVelocities();
        this.handleBoundaries();
        this.px += this.vx;
        this.py += this.vy;
    }
}


// Prevent particle velocity from exceeding maxSpeed
function particleLimitVelocities() {
    if (this.bLimitVelocities) {
        var speed = sqrt(this.vx * this.vx + this.vy * this.vy);
        var maxSpeed = 10;
        if (speed > maxSpeed) {
            this.vx *= maxSpeed / speed;
            this.vy *= maxSpeed / speed;
        }
    }
}


// do boundary processing if enabled
function particleHandleBoundaries() {
    if (this.bPeriodicBoundaries) {
        if (this.px > width) this.px -= width;
        if (this.px < 0) this.px += width;
        if (this.py > height) this.py -= height;
        if (this.py < 0) this.py += height;
    } else if (this.bHardBoundaries) {
        if (this.px >= width) {
            this.vx = -abs(this.vx);
        }
        if (this.px <= 0) {
            this.vx = abs(this.vx);
        }
        if (this.py >= height) {
            this.vy = -abs(this.vy);
        }
        if (this.py <= 0) {
            this.vy = abs(this.vy);
        }
    }
}


// draw the particle as a white circle
function particleDraw() {
    fill(255);
    noStroke();
    ellipse(this.px, this.py, 2, 2);
}


// add a force to the particle using F = mA
function particleAddForce(fx, fy) {
    var ax = fx / this.mass;
    var ay = fy / this.mass;
    this.vx += ax;
    this.vy += ay;
}


// make a new particle
function makeParticle(x, y, dx, dy) {
    var p = {px: x, py: y, vx: dx, vy: dy,
             mass: 1.0, damping: 0.9,
             bFixed: false,
             bLimitVelocities: false,
             bPeriodicBoundaries: false,
             bHardBoundaries: false,
             addForce: particleAddForce,
             update: particleUpdate,
             limitVelocities: particleLimitVelocities,
             handleBoundaries: particleHandleBoundaries,
             draw: particleDraw
            }
    return p;
}
  



 

For the landscape project this week, I wanted to create a project that would give the sense of outer space, with shapes flying your way. In order to do this, I used different shapes in different sizes and colors, and tried to code their movement to seem to move in your direction. In order to make it more interesting, I also added shape shifting triangles.

For the background of the project, I used the particle code we learned in class, because I liked the way it shifts slowly, similar to how we would see movement of something that is very far away.

Attached is a sketch of my initial idea on paper:
project-10-sketch

LookingOutwards-10

Base 8 by Chris Sugrue is an interesting piece that explores the negative spaces and movements between fingers, hands and arm in order to create the field of augmented reality. I highly admire the creative influence people have over this augmented reality drawn by the device. I think the designs are really elegant and visually pleasing, despite being based on technology.

Chris is a artist and programmer that works on interactive installations, audio-visual performances and experimental interfaces. She studied Fine Arts in Design and Technology at Parsons School of Design and has been utilizing technology in her artwork ever since.  Some of her other designs, such as Delicate Boundaries, also utilize lighting and user input in a similar way.

Base 8, Chris Sugrue, 2008

 

Looking Outwards 10

1

This project is a urban infrastructure designed for public area. The device use plastics to create the close space, and inflated with medicinal fog for people to stop by, breathe and connect. It is aim to reinvigorate the Thames River Path, inviting more people to come to the riverside. The devices integrate both plants and human into one space, and try to create a interactive system to make environment suitable for both human and plants. I find this project very interesting because it brings people to reconsider the relation between natural environment and human in an urban context.

The Horticultural Garden by Loop.ph from James Maiki on Vimeo.

Karla Torio Rivera is one of the designers for the production and fabrication. She works as an individual artist in England, digging into ideas for progression within culture, the environment and humanity, and did a lot of unpaid charitable activities like this one.

Project 10 – Simin Li

siminl-project10

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 10

var clowns = [];
//store the clown fish
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
//used to control sea rocks

function setup() {
    createCanvas(600, 400); 
    // create an initial collection of fish
    for (var i = 0; i < 4; i++){
        var rx = random(width);
        var ry = random(0.8 * height);
        clowns[i] = makeClownFish(rx,ry);
    }
    frameRate(10);
}

function draw() {
    background(160);
    seaViewer(150,200);
    seaViewer(450,200);
    seaRocks(); 
    updateAndDisplayClownFish();
    removeClownFishThatHaveSlippedOutOfView();
    addNewClownFishWithSomeRandomProbability(); 
    fill(41,115,179,0.2);
    rect(0,0,width,height);

}

function updateAndDisplayClownFish(){
    // Update the fish's positions, and display them.
    for (var i = 0; i < clowns.length; i++){
        clowns[i].move();
        clowns[i].display();
    }
}

function removeClownFishThatHaveSlippedOutOfView(){
    var clownsToKeep = [];
    for (var i = 0; i < clowns.length; i++){
        if (clowns[i].fishX + clowns[i].fishWidth > 0) {
            clownsToKeep.push(clowns[i]);
        }
    }
    clowns = clownsToKeep; // remember the surviving buildings
}

function addNewClownFishWithSomeRandomProbability() {
    // With a very tiny probability, add a new fish to the end.
    var newClownLikelihood = 0.009; 
    if (random(0,1) < newClownLikelihood) {
        clowns.push(makeClownFish(width,random(0,0.8 * height)));
    }
}

// method to update position of fish every frame
function clownFishMove() {
    this.fishX += this.speed;
    this.fishY += noise(-this.speed,this.speed);
    //randomize speed
}

//draw the clown fish
function clownFishDisplay(){
    var fishHeight = this.fishWidth / 2;
    noStroke();
    fill(255,this.greeness,0);
    beginShape();
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY - fishHeight * 2 / 3);
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY - (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth, this.fishY);//tail of fish
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY + (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY + fishHeight / 3);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY + fishHeight * 1 / 6);
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX, this.fishY);//head of fish
    endShape();
    //draw body
    
    noStroke();
    fill(255);
    beginShape();
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY - fishHeight * 2 / 3);
        curveVertex(this.fishX + this.fishWidth / 3 + this.headStripe, this.fishY - fishHeight * 1 / 3);
        curveVertex(this.fishX + this.fishWidth / 3 - 0.3 * this.headStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY + fishHeight / 3);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY + fishHeight * 1 / 6);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY - fishHeight * 1 / 3);
    endShape();
    //draw head stripe

    noStroke();
    fill(255);
    beginShape();
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY - (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 7 / 8 + this.tailStripe, this.fishY - (fishHeight / 6));
        curveVertex(this.fishX + this.fishWidth * 7 / 8 + 0.3 * this.tailStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth * 7 / 8 - this.tailStripe, this.fishY + (fishHeight / 6));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY + (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth * 2 / 3 + this.tailStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
    endShape();
    //draw tail stripe 
    
    fill(0);
    ellipse(this.fishX + 0.1 * this.fishWidth, this.fishY - fishHeight * 0.05,fishHeight / 10,fishHeight / 10);
    //draw eye
}

function seaViewer(windowX,windowY){
    //draw submarine outside window 
    strokeWeight(3);
    stroke(90);
    rectMode(CENTER);
    noFill();
    rect(windowX,windowY,240,340,80,80,80,80);
    fill("LightBlue");
    noStroke();
    rect(windowX,windowY,200,300,70,70,70,70);
    nail(windowX,windowY - 160, 12);
    nail(windowX,windowY + 160, 12);
    nail(windowX - 110,windowY, 12);
    nail(windowX + 110,windowY, 12);
    nail(windowX - 100,windowY - 120, 12);
    nail(windowX + 100,windowY + 120, 12);
    nail(windowX - 100,windowY + 120, 12);
    nail(windowX + 100,windowY - 120, 12);

}

//draw nails on window
function nail(nailX, nailY, nailSize){
    noStroke();
    fill(100);
    ellipse(nailX,nailY,nailSize,nailSize);
    var screwlength = nailSize / (4 * sqrt(2));
    strokeWeight(1);
    stroke(0);
    line(nailX - screwlength,nailY - screwlength,nailX + screwlength,nailY + screwlength);
    line(nailX - screwlength,nailY + screwlength,nailX + screwlength,nailY - screwlength);
}

//draw sea rocks
function seaRocks(){
    fill(11,20,61);
    noStroke();
    push();
        translate(0,80);
        //move down 80
        beginShape(); 
        vertex(0, height); 
        for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail) + (millis() * terrainSpeed) * 3 / 4;
            var y = map(noise(t), 0,1, 0, height );
            vertex(x, y); 
        }
        vertex(width, height); 
        endShape();
    pop();
}

//create an object to store clownfish
function makeClownFish(birthLocationX,birthLocationY) {
    var clownFish = {                
                fishX: birthLocationX,
                //x location of fish
                fishY: birthLocationY,  
                //y location of fish              
                fishWidth: random(30,120),
                //width of fish
                greeness: random(30,140), 
                //G value of the fish body color
                move: clownFishMove,
                //move the fish
                speed: -random(0,4),
                //randomize horizontal speed
                display: clownFishDisplay,
                //draw fish
                headStripe: random(-8,8),
                //randomize the stripe on head
                tailStripe: random(-5,5)
                //randomize the stripe on tail
}
    return clownFish;
}


In this project I wanted to depict a view of marine life in front of a submarine window. The camera is following the submarine from outside. At first I only changed the color and size of the fish, then I realized I could make variations in the patterns of the fish as well.

file_000

AndrewWang-LookingOutwards-10

Filtered Transparencies – Filipa Valente 2014

Filipa used interactive video projects transposed onto transparent fabrics that were could be interacted with by the audience to create holographic images and animations. It was showcased at the PASEO festival in Taos. I really appreciate the creativity that went into this artwork. I also really like how she made it an interactive experience for the audience in order to create a more personal feeling for them.

Filipa is an architect SBA/media artist who is based in Los Angeles, California. She studied to finish her BSc in Architecture at the Bartlett school of Architecture in London, and then went on to complete her Masters in Media Art and Architecture MEDIASCAPES at SciArc in Los Angeles. She has experience collaborating with several different well known architectural practices such as the Zaha Hadid Architects, Wilkingson Eyre Architects, Amanda Levete Architect, and the Synthesis Design + Architects in Los Angeles. Through this Filipa developed her own personal work and frequently participates in projects with other artists and architects.

Michal Luria – Looking Outwards – Women Practitioners

3D printed fashion with sensors / Anouk Wipprecht

The project I will present this week is a project by Anouk Wipprecht. Anouk combines fashion with computation, and uses both new fabrication technologies (laser cutting and 3D printing) and electronics and sensors.

Anouk Wipprecht designing a fashion collection inspired by cars. source

Fashion has been repetitive for quite a long while. Although new trends are introduced each season, they are always adapted from some previous decade. What I like about this project is that Anouk suggests a new way of thinking about fashion and presents a new direction that gives an idea of what fashion of the future might look like, and what it can bring along with it.

Fashion is a way to express ourselves, and why not use extraordinary ways to do so? In her project, Anouk embeds car sensors and lights to create a new type of interaction with a wearable prototype. The dress reacts to the person’s surrounding and to others who approach them. The final prototype resulted in a both a novel way in which people can express themselves, as well as a new way to interact with other people around us, using the wearable technology we own.

Looking Outwards 10 – Female Artists

Artist: Karolina Sobecka

Project: Wildlife

Karolina Sobecka’s ‘wildlife’ caught my interest. The project places ‘wildlife’ in the city center thereby uniting two antithetical concepts – cities and wildlife. A tiger projected onto building facades by the sidelights of a moving car, runs alongside the car, picking up speed when the car accelerates, slowing down, stopping and even looking towards the viewer when the car stops. The tiger’s speed is modelled on the wheel rotation of the car which is picked by a sensor. The tiger can be seen panting when the car stops. The project is surreal but brings excitement to the boring monotony of a city night. It seems to me that the tiger is a 3d animation whose movement is then tagged to the sensor on the car wheels through computational algorithms.

Karolina Sobecka is an independent artist.  According to her linkedin webpage, she earned her Bachelor of Fine Arts at the School of Art Institute of Chicago, went on for a Master of Fine Art at California Institute of Arts and a Doctor of Philosophy, DXARTS Digital and Experimental Art at the University of Washington. She is an adjunct professor at Rhode Island School of Design. She is the director of Flightphase, a creative agency in science communication and consultancy that uses art to craft messages on climate, emerging technology and synthetic biology.

wildlife1

Denise Jiang – Project 10

I created a scene of a spaceship travelling in space. The stars and the planets are randomized moving away from the spaceship. The planets are getting smaller(as they should be) as they move toward the edge of the screen. In the control room there is a flashing red button and a screen “monitoring” the condition of the spaceship.

sketch

//create objects
var planets = [];
var stars = [];
var redStar = [];

function setup() {
	createCanvas(600, 400);
    frameRate(8);
	// initial planet and stars
		var initialX = random(width);
		planets[0] = makePlanets(initialX);
		redStar[0] = makeRedPlanets(initialX);
		redStar[1] = makeRedPlanets(initialX);
		for (var i = 0; i < 100; i++) {
			stars[i] = makeStars(initialX);
		}
}

function draw() {
	background(0);
	PlanetsinMotion();
	addPlanets();
	StarsinMotion();
	addStars();
	redStarinMotion();
	addRed();
	spaceship();
 	
 	//flashing button
	if (second() & 2 > 0) {
		fill("red");
	} else fill(0);
	noStroke();
	ellipse(170, 260, 5, 5);
	//make screen and moving red line
	fill(226, 223, 222);
	stroke(65, 73, 86);
	strokeWeight(2);
	rect(420, 170, 60, 50);//screen
	beginShape(); 
	noFill();
	stroke("red");
	strokeWeight(1);
    for (var x = 0; x < width-540; x++) { //moving red line
        var t = (x * 0.009) + (millis() * 0.0003);
        var y = map(noise(t), 0, 0.13, 40, 45);
        vertex(x+420, y+140); 
    }
    endShape();

   
}

// all about the planets
function PlanetsinMotion() {
	for (var i = 0; i < planets.length; i++) {
		planets[i].move();
		planets[i].display();
	}
}
function addPlanets() {
	var maybeAdd = 0.004;
	if (random(0,1) < maybeAdd) {
		planets.push(makePlanets(width));
	}
}
function moveplanets() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function displayplanets() {
    fill(187, 210, 247);
	noStroke();
	ellipse(this.x, this.y, this.randomsize, this.randomsize);//blue planets
	this.randomsize += -0.01;
}
function makePlanets(planetX) {
	var plt = { x: planetX,
		        y: height/2,
		        speedX: -1.0,
		        speedY: -0.5,
		        randomsize: random (10, 100),
		        move: moveplanets,
		        display: displayplanets,
		        }
    return plt;
}

//all about the red stars
function redStarinMotion() {
	for (var i = 0; i < redStar.length; i++) {
		redStar[i].move();
		redStar[i].display();
	}
}
function moveRed() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function displayRed() {
	fill(122, 43, 19);
	noStroke();
	ellipse(this.x, this.y, this.randomsize, this.randomsize);
	this.randomsize += 0.005;
}
function addRed() {
	var maybeAdd = 0.003;
	if (random(0,1) < maybeAdd) {
		redStar.push(makeRedPlanets(width));
	}
}
function makeRedPlanets(redX) {
	var red = {x: random(200,400),
		       y: random(height-50, height-100),
		       speedX: -0.5,
		       speedY: -0.7,
		       randomsize: random(5, 8),
		       move: moveRed,
		       display: displayRed
	           }
	return red;

}

//all about the stars
function StarsinMotion() {
	for (var i = 0; i < stars.length; i++){
		stars[i].move();
		stars[i].display();
	}
}
function displayStars() {
	stroke("yellow");
	point(this.x, this.y);
}
function addStars() {
    var maybeAdd = 0.6;
	if (random(0,1) < maybeAdd) {
		stars.push(makeStars(random(width-50, width)));
	}
}
function moveStars() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function makeStars(StarX) {
	var str = {x: random(width),
	           y: random(height),
	           speedX: -1.0,
	           speedY: -0.5,
	           move: moveStars,
	           display: displayStars,
	       	   }
	return str;
}

//creating the interior of spaceship
function spaceship() {
	noStroke();
	fill(53, 58, 66);
	rect(0, 315, width, height-315);//floor
	fill(95, 105, 122);//light color
	quad(287, 0, 357, 0, 419, 26, 397, 53);//3rd wall 1
	quad(311, 255, 173, 249, 184, 269, 311, 271);//2nd wall 1
	quad(27, 213, 0, 223, 0, 269, 30, 269);//1st wall 3
	quad(30, 269, 25, 381, 0, 361, 0, 269);//1st wall 4
	fill(81, 90, 104);// medium light
	quad(419, 26, 397, 53, 409, 126, 497, 110);//3rd wall 2
	quad(311, 255, 311, 271, 476, 276, 497, 250);//3rd wall 4
	quad(311, 330, 311, 271, 184, 269, 186, 339);//2nd wall 2
	triangle(495, 0, 357, 0, 419, 26);//1st wall 1-3
	fill(73, 81, 94);//slightly dark
	quad(409, 126, 497, 110, 497, 250, 311, 255);//3rd wall 3
	quad(476, 351, 476, 276, 311, 271, 311, 330);//3rd wall 6
	quad(600, 87, 497, 110, 419, 26, 495, 0);//4th wall 1
	triangle(495, 0, 600, 87, 600, 0);//4th wall 1-2
	fill(62, 68, 78);//dark
	quad(476, 276, 497, 250, 497, 334, 476, 349);//3rd wall 5
	fill(144, 156, 175);//lightest
	quad(187, 271, 162, 229, 27, 213, 30, 269);//1st wall 1
	fill(122, 133, 153);//still very light
	quad(30, 269, 187, 271, 186, 357, 25, 381);//1st wall 2
	fill(65, 73, 86);//darkest
	quad(497, 110, 600, 87, 600, 130, 497, 150);//4th wall 2-1
	quad(497, 150, 536, 142, 536, 345, 497, 334);//4th wall 2-2
	quad(536, 345, 536, 262, 600, 268, 600, 360); //4th wall 2-3
}