Arden Wolf – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

I am interested in creating an interactive animation. I was inspired by the Patatap project where the user plays the key board as an instrument to also make an animation. I would like to use different sounds and create different characters for each key to create a chorus of made up animated characters. I am interested in making this an interactive animation using sound but I am also interested in making this more “game like”.I was thinking, if the user already pressed all the keys and reveals the entire chorus of characters, this could reveal phase two of the “game” or interactive animation where u can control the different noises or songs the chorus sings all or the dance moves they perform all together.

looking outwards

I am interested in an interactive project. I am inspired by the James Cameron Avatar Exhibition made in 2011 and Connected Worlds. The Avatar exhibition uses a interactive projection screen where visitors come into Pandora’s climate and socialize with the characters. There are luminescent floating jellyfish creatures that glide in the planets forest and glowing woodsprites appear when the audience move suddenly, making the experience feel real like a act and react interaction. Connected worlds is an interactive connected ecosystem by Design I/O in collaboration with the New York Hall of Science. It is a large scale immersive interactive ecosystem that is composed of six interactive ecosystems spread out throughout the hall of science. The viewers can use physical logs to move water from the waterfall flowing across the floor into different environments and can use their hands to plant seeds. Plants grow and creatures appear based off of the state of the environment (caused by the visitors) and this causes a chain reaction of behaviors.

http://design-io.com/projects/ConnectedWorlds/

https://www.snibbe.com/education-entertainment#/james-cameron-avatar-exhibition/

looking outwards

https://studio.carnegiemuseums.org/evaluating-dawn-chorus-48b82e051967

Mobile technology has changed the way we interact with everything in our everyday lives including museums. Dawn Chorus is an app that is also useful outside of the museum exhibition. The app is a natural history designed alarm clock exploring the idea of “museum as utility.” Dawn chorus takes its inspiration from the natural phenomenon the singing of a bunch of birds in the dawn of each day. Like the birds each dawn, the app grows louder as different birds join in the chorus allowing for a natural musical way to wake up. I was inspired by this project because of the approach to tackling a concept of museum as utility, combining inspiration from nature and the mobile app.

project 11

sketch.js


var myTurtle;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(0);
    myTurtle = makeTurtle(width / 2, height / 2);
    myTurtle.setColor(color(255, 200, 200));
    myTurtle.setWeight(1); 
    myTurtle.penDown();
    resetCanvas();
    frameRate(10);
}

function draw() {
    var step = (frameCount - startFrame)/25.0;
for(var i = 0; i <= 10000; i++){

    myTurtle.forward(step);
    myTurtle.left(9.0);

        myTurtle.forward(step);
        myTurtle.left(10);
        myTurtle.forward(step);
        myTurtle.left(10);
        myTurtle.forward(step);
        myTurtle.left(20);
        myTurtle.forward(step);

     myTurtle.right(137.507764); 
    myTurtle.forward(i*.2);

    if (myTurtle.y > height) resetCanvas();
}
}
function resetCanvas() {
    background(0);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width / 2, height / 2);
    myTurtle.penDown();
}


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

I was interested in the idea of overlaying the lines that I could create with the turtle graphics that I learned in the previous assignments and having them progress on the screen as well.

landscape

sketch.js

var terrainSpeed = 0.001;
var terrainDetail = 0.005;


function setup() {
    createCanvas(480, 300);
    frameRate(10);

    
  

}
 
function draw() {
    background(0,50,400);
  
    for (var x = 0; x < width; x++){

        var t =((millis()*terrainSpeed));
        var y = map(noise(t), 0,1, 0, height);
          vertex(x, y); 
    }
    
    
    noFill(); 
    noStroke();
    beginShape(); 
    fill(50,112,255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    endShape();


    noFill(); 
    noStroke();
    beginShape(); 
    fill(0,112,255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed*2);
        var y = map(noise(t), 0,1, 10, height);
        vertex(x, y); 
    }
    endShape();
    
     beginShape(); 
     fill(0,200,255)
    for (var x = 0; x < width; x++) {
        var t = (y * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,10, 5, height*2);
        vertex(x, y); 
    }
    endShape();

      beginShape(); 
     fill(0,100,255)
    for (var x = 0; x < width; x++) {
        var t = (y * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,3, 5, height*3);
        vertex(x, y); 
    }
    endShape();



    noFill();
    
//yellow
    stroke(255,255,0)
    strokeWeight(150)
    ellipse(240, 150, width/2 +180, height+130);

//gray 
    stroke(100)
    strokeWeight(30)
    ellipse(240, 150, width /2  +60, height-20);

//outline
    stroke(0);
    strokeWeight(4)
    ellipse(240, 150, width /2 +30, height - 50);
//nails

//nail 1(upper middle)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(240, 10, 15, 15);
fill(225)
noStroke(0);
ellipse(238, 9, 5, 5);
//nail 2 (down middle)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(240, 290, 15, 15);
fill(225)
noStroke(0);
ellipse(238, 289, 5, 5);
//nail 3 (left)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(90, 150, 15, 15);
fill(225)
noStroke(0);
ellipse(88, 149, 5, 5);
//nail 4 (right)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(390, 150, 15, 15);
fill(225)
noStroke(0);
ellipse(387, 149, 5, 5);

//nail 5
fill(100)
stroke(40)
strokeWeight(2)
ellipse(130, 55, 15, 15);
fill(225)
noStroke(0);
ellipse(128, 54, 5, 5);

//nail 6

fill(100)
stroke(40)
strokeWeight(2)
ellipse(350, 55, 15, 15);
fill(225)
noStroke(0);
ellipse(348, 54, 5, 5);

//nail 7
fill(100)
stroke(40)
strokeWeight(2)
ellipse(350, 245, 15, 15);
fill(225)
noStroke(0);
ellipse(348, 244, 5, 5);

//nail 5
fill(100)
stroke(40)
strokeWeight(2)
ellipse(130, 245, 15, 15);
fill(225)
noStroke(0);
ellipse(128, 243, 5, 5);



}

For this project I decided to do an underwater scape and portray the ripples, waves and movement of the water when you see it beneath the surface . I made a submarine window and made the interior of the submarine yellow inspired by the classic Beatles song “ Yellow Submarine”. For the window I added the typical bolts that you see inside of a submarine circular window. I played with the terrain example code, to create the movement in the underwater waves portraying the different colors and shapes that the underwater ripples have. The underwater scenery inspires me as it contrasts but also is similar to the shapes in the ground terrain of landscapes.

looking outwards 10

http://www.tinafrank.net/webdesign/wirel/

For this looking outwards I decided to look into Tina Frank. Her body of work is largely data visualization projects, but for this looking outwards I will specifically talk about her online interactive data visualization piece called “The Changing Religious Landscape of Vienna”. This piece was sponsored by WIREL and made in 2013 as a collaboration with Ramon Bauer. Frank designed all the graphics and such for this project. The data was gathered on looking at religious diversity in Vienna and its changes over the years. The project also attempts to tackle age diversity, sex diversity, and more and combine them to properly examine how certain religious populations may be changing. The design interface is very user friendly, all the data can shift when moving your mouse around the interactive piece. The interface is also very easy to understand, and although based on Vienna–– this same technique could be applied with many other data sets and still be applicable. Tina Frank’s other work is graphic design and data viz, as well as some audiovisual art videos.

looking outwards 9

I chose Rani Randell’s Looking Outwards 1 about Angela Washko’s interactive artwork titled “The Game”. This piece is a dating simulation video game which tackles examines public opinion concerning behavioral patterns and limited gender classifications such as female exploitation, sexism, homophobia and misogyny. The interactive video game came from years of research on “dating coaching” and “pick up artists,” such as Roosh V who wrote a book for men on how to pursue sex with women. I like this work because it is an interesting and empowering way of approaching this problem of misogynistic behavior in a male dominated world. I agree with Rani when she says that Angela’s piece “explores a future in which women can rebel against unwanted male attention and have more agency in a virtual world.” The virtual world is male dominated and toxic hypermasculinity where sexist, misogynist, homophobic and other intolerant behaviors are encouraged.Through her work, she initiates and creates new forums for discussions about feminism in spaces most hostile toward it.

project 9

sketch.js

/*
Arden Wolf
ardenw@andrew.cmu.edu
Section B
project 09

*/


var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/JSqV6vs.jpg?2";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(413, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1000);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    var size = random(7,20);
    var pie = random(HALF_PI, QUARTER_PI, TWO_PI,PI)

    noStroke();
    fill(theColorAtLocationXY);
    //ellipse(px, py, size, size);
    arc(px, py, size, size, size, pie);




    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    arc(pmouseX, pmouseY, size, size, size, pie);
}

I randomized the size and the arc degrees as the shapes that make up the image and also made the color at mouse the same shapes so that the viewer can interact and contribute to the creation of the image.

looking outwards 8

Eyeo 2014 – Darius Kazemi from Eyeo Festival on Vimeo.

Programmer Darius Kazemi’s work focuses mostly on building autonomous bots and generative toys that do random and absurd things. His intention for these projects is mostly to make himself laugh but in the end he finds the bots doing interesting unexpected things on the internet. He has created a twitter bot called “Autocharts” where once a day it tweets an absurd flow chart and he has also created a tumblr bot called “Scenes from the Wire”. His best known project “Amazon Shopper randomizer” is a program that he gives a 50 dollar amazon gift card once a month and the program buys random items, specifically books, cds, and dvds and nails it to his house. He made the bot’s amazon account from scratch and essentially the program works with amazon’s algorithms from the recommended list to create a personality for the bot as he keeps buying every month. Kazemi creates this interesting dynamic between the bot, amazon and himself as the bot delivers $50 worth of content that he can watch, read or listen to each month. In his programming work Kazemi makes a point about composing for infinity – meaning that a simple for loops ( in a few seconds) can generate more information than a human being can consume in a lifetime. This is a fact that creative programmers confront when making art with code and what the difference between the traditional creative process.

Author: Arden Wolf

final project ARDEN WOLF

project

looking outwards

looking outwards

project 11

landscape

looking outwards 10

looking outwards 9

project 9

looking outwards 8