For the final project, I am collaborating with Min Ji Kim Kim from Section A. Because this is our final project, we wanted to create something that was meaningful for both of us. We decided to create something related to Christinianity since it is an important part of our identities.

Our project is essentially an interactive “storybook”. We will choose 2-3 stories from the Bible and create interactive “pathways” that tell that Bible story. The user will be able to select which story they wanna play/learn about.

There will be a character on the screen that the user will be able to move using the arrow keys. As the character moves along the pathway, there will be objects appearing in the pathway and the background that the user can click on. These objects will either create a special effect on the environment or create a text box with the plot. The user will go through the rest of the pathway and once they reach the end, they will have finished that Bible story. We wanted to make it interactive and fun so that children can enjoy learning about the Bible. 

Read Min Ji’s post for more details.

Also, our inspirations are included in my Looking Outwards 12 .

As an artist, I love working with different materials and techniques in one project. Therefore, I am always very interested in interactive 3D artworks. One artist that caught my attention was Scott Snibbe, an interactive artist who produces art with diverse media including mobile devices, digital projections, and electromechanical sculpture. Scott strives to bring meaning and joy to people’s lives. In his interactive work, he often portrays the interdependence of beings with their environments and each other through bodily interactions. Although it is an older project, His interactive project Boundary Functions caught my attention because it is something that I want to reflect in my final project with Minji Kim Kim. Boundary Functions is a set of lines projected from overhead onto the floor, dividing people in the gallery from one another. It interacts with the amount of people present on the floor. Though my project will not be dependent on the amount of people but will be similar to this project in terms of the “person” or my icon interacting with the floor by walking.

Another artist that I was attracted to was David Bollinger, a generative artist who enjoys tinkering wither various procedural, generative, and algorithm. He creates bunch of different puzzle like images with different textures and execution. My partner and I was inspired by David’s maze/puzzle like games and his usage of color and perspective.

David Bollinger has an album called Crayon Maze and it is a skill building maze and tracing game for toddlers, preschool, kindergarten, and children of all ages. It is basically a learning game for toddlers where they trace an alphabet or a number in a game form. We wanted to do something similar by having a secret message in our maze / puzzle like the secret “Q” in the Crayon maze game. 

sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project 11

var mountainspeed = 0.0005; //speed for mountains 
var mountaindetail = 0.005; //shape/detail for mountains

function setup() {
    createCanvas(480, 480); 
    frameRate(10);   //how fast the mountains are moving
}


function draw() {
    var color1 = color(67, 20, 125); //first color for the sunset
    var color2 = color(255, 102, 235); //second color for the sunset
    noStroke();
    sunsetbackground(0,0,width - 50,height - 50, color1, color2, "C");
    
    noStroke();
//calling all the functions
    moon();
    mountain1();
    mountain2();
    fence();
    bussetting(); 
 }
 //drawing the moon in the background behind everything
 function moon(){
    fill(255);
    ellipse(180,120,50,50);
 }
//drawing the lighter mountain in the back
 function mountain1(){
    fill(204, 162, 102);
    beginShape(); 
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * mountaindetail) + (millis() * mountainspeed);
        var y = map(noise(t), 0,0.8, 0, height);
        vertex(x, y); 
    }
    vertex(width,height);
    endShape();
}
//drwing the darker mountain in the front
function mountain2(){
    noStroke();
    fill(125, 91, 49);
    beginShape(); 
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * mountaindetail) + (millis() * mountainspeed);
        var y = map(noise(t), 0,0.5, 0, height -10);
        vertex(x, y); 
    }
    vertex(width,height);
    endShape();
}

//drawing all the static anchors/ drawing the window and handles
function bussetting(){
    noFill();
    stroke(230);
    strokeWeight(110);
    rect(0,0,450,450);
//bus window
    stroke(180);
    strokeWeight(40);
    rect(60,60,350,350,20);
    strokeWeight(20);
    line(80,200,400,200);
    line(233,200,233,400);

//window opener
    fill(0);
    noStroke();
    rect(80,300,10,30);
    rect(380,300,10,30);

//handle bar
    stroke(20);
    line(0,0,0,100);
    line(120,0,120,95);
    line(240,0,240,95);
    line(360,0,360,95);
    line(480,0,480,95);

//handle
    noFill();
    stroke(80);
    strokeWeight(10);
    triangle(-40,160,40,160,0,100);
    triangle(80,160,160,160,120,100);
    triangle(280,160,200,160,240,100);
    triangle(400,160,320,160,360,100);
    triangle(520,160,440,160,480,100);

}
//drawing the fence infront of the mountains in the landscape
function fence(){
    stroke(200);
    strokeWeight(5);
    line(80 ,350,400 ,350);
    line(80,365,400,365);
    line(80,380,400,380);

    line(125,350,125,400);
    line(140,350,140,400);
    line(300,350,300,400);
    line(315,350,315,400);

}

//drawing the sunset as the background
function sunsetbackground(x, y, w, h, color1, color2, axis) {   
    noFill();
    if (axis == "C") {  // Top to bottom gradient
        for (let i = y; i <= y + h; i++) {
        var inter = map(i, y, y + h, 0, 1);
        var color = lerpColor(color1, color2, inter);
        stroke(color);
        line(x, i, x + w, i);
        }
    }  
    
    }
   

The times where I most often gaze at landscapes or deeply look outside is when I’m on a bus or a vehicle that is why I decide to put this project in a bus setting. I drew the window and handles as static anchors. I went back and studied the terrain assignment we had and used the strategy on this project to create mountains. I also wanted to create a pretty sunset because the one thing I really enjoy about Pittsburgh is their sunset, it’s always vibrant and colorful which I really appreciate. The challenge I had with this project was the sunset and the mountains because even though I studied the code a lot, it still took me a while to figure out everything and get it to how I wanted it to look. 

!!!!!UPDATE!!!!!

GOT IT TO WORK ON WORDPRESS

sketch

// Kristine Kim
// Section D
// younsook@andrew.cmu.edu
// Project -10-Interactive Sonic Sketch


var vacuumnoise;
var fridgenoise;
var dogbarking;
var outsidenoise;
var keynoise;
//global variables for images
var vacuumpic;
var dogpic;
var keypic;

function preload() {
//load pictures
    var vacuumpicURL = "https://i.imgur.com/qbo0LSB.png[/img]"
    vacuumpic = loadImage(vacuumpicURL);
    var dogpicURL = "https://i.imgur.com/j41YK4G.png[/img]"
    dogpic = loadImage(dogpicURL);
    var keypicURL = "https://i.imgur.com/ozegqNz.png[/img]"
    keypic = loadImage(keypicURL);

//load sounds
    vacuumnoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/vacuum.wav")
    
    fridgenoise =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fridge.wav")
    
    dogbarking = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dogbarking.wav")
    
    outsidenoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/birdsoutside.wav")
    
    
    keynoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/keys.wav")

// //vacuuming noise
//     vacuumnoise = loadSound("vacuum.wav");

//  //sound of fridge opening and closing   
//     fridgenoise =loadSound("fridge.wav");

// //sound of dog barking  
//     dogbarking = loadSound("dogbarking.wav");

// //sound of birds chirping outside    
//     outsidenoise = loadSound("birdsoutside.wav");

// //sound of key dropping on a table    
//     keynoise = loadSound("keys.wav");

}


function setup() {
    createCanvas(500, 400);
    useSound()
}
function soundSetup(){
//controlling the volume
    vacuumnoise.setVolume(1);
    fridgenoise.setVolume(1);
    dogbarking.setVolume(1);
    outsidenoise.setVolume(1);
    keynoise.setVolume(1);

}

function draw() {
    background(255, 247, 135);

//dark brown outline around everything
    stroke(102, 77, 27);
    strokeWeight(5);

//drawing the floor
    fill(199, 154, 58);
    rect(-5,280, 510,400);

//drawing the fridge
    fill(245);
    rect(40,100, 100, 200);
    //fridge shadow
    fill(176, 174, 169);
    rect(40, 170, 100, 10);

    // handle
    fill(0);
    rect(125,120,5,40);
    rect(125,190,5,80);

//drawing the windows
    fill(184, 241, 252);
    rect(170,30,130,100);
    rect(350,30,130,100);

    line(235,30,235,130);
    line(170,80,300,80);
    line(415,30,415,130);
    line(350,80,480,80);

    //table legs
    noStroke();
    fill(102, 77, 27);
    rect(210,240, 12, 70);
    rect(380,240, 12, 70);
    
    fill(71, 54, 20);
    rect(290,190, 12, 100);
    rect(450,190, 12, 100);

//drwing the table   
    fill(102, 77, 27);
    beginShape();
    vertex(280,190);
    vertex(480,190);
    vertex(280,190);
    vertex(200,240);
    vertex(400,240);
    vertex(480,190);
    endShape();

//drawing the vaccum image
    image(vacuumpic, 250, 110, 350,250);

//drawing the dog image
    image(dogpic,5,200,300,200);

//drawing the keys image
    image(keypic,260,195,40,40);
}

function mousePressed(){
//If pressed on keys, play sound and if pressed somewher else, pause the sound
    if (mouseX > 260 & mouseX < 300 && mouseY > 195 && mouseY < 235){
        keynoise.play();
        } else {
            keynoise.pause();
        }
//If pressed on dog, play sound and if pressed somewher else, pause the sound
    if (mouseX > 80 & mouseX < 280 && mouseY > 240 && mouseY < 320){
        dogbarking.play();
        } else {
            dogbarking.pause();
        }
//If pressed on vacuum, play sound and if pressed somewher else, pause the sound
    if (mouseX > 300 & mouseX < 480 && mouseY > 100 && mouseY < 300){
        vacuumnoise.play();
        } else {
            vacuumnoise.pause();
        }
//If pressed on fridge, play sound and if pressed somewher else, pause the sound
    if (mouseX > 40 & mouseX < 140 && mouseY > 100 && mouseY < 300){
        fridgenoise.play();
        } else {
            fridgenoise.pause();
        }
//If pressed on right window, play sound and if pressed somewher else, pause the sound
    if (mouseX > 170 & mouseX < 300 && mouseY > 30 && mouseY < 130){
        outsidenoise.play();
        } else {
            outsidenoise.pause();
        }

}

I wanted to create an environment and a setting for this project so I decided to create a kitchen/ living room. I was reminded of my childhood when I was working on this project because I used to play a lot of games where I was allowed to decorate my room or my house so I had a lot of fun with this one. The only problem that I had was that the sounds were not playing on WordPress but it works perfectly fine on a local server. I’m still having this problem, but I couldn’t figure it out. I have attached a zip file of my sounds so that it can be played on the local server.

Caroline Sinders is a machine learning designer/ user researcher, artist, and digital anthropologist who finds a lot of interest in language, culture and images. She creates many projects related to artificial intelligence, natural language processing, abuse, online harassment, and politics in digital, conversational spaces. All of her works are very intriguing and successful but the one that caught immediately caught my attention was her mixed media piece Black Box.

Black Box is a mixed media 3D project vocalizes the current conversation around police, violence, and race. Caroline and her team took the idea of camera phones as citizen journalism and flipped it. The media story within the box they created can only be captured and see with the phone, just like after a plane disaster, we look to the black box for truth. This project is installed in a room and upon entering the room, you hear and see a visualization of John Coltrane’s Alabama. However, an XBOX Kinect triggers the actual camera phone audio from police incidents as you place your phone into the box, creating new and confrontational context to this well known protest song. What I especially love about this project is the fact that the artists challenged where  and how these stories and informations are experienced. They pushed the boundaries of asking themselves how might people engage with content and each other in new and different ways. Of course the whole production of building the box and using technology to execute this idea properly is also very intriguing, but their extra set of details of how and where they displayed their project is very impressive. I really enjoy this project and wish to experience in real life.

WORKS PERFECTLY FINE ON LOCAL SERVER!

(please grade based on the local server:))

sketch

// Kristine Kim
// Section D
// younsook@andrew.cmu.edu
// Project -10-Interactive Sonic Sketch


var vacuumnoise;
var fridgenoise;
var dogbarking;
var outsidenoise;
var keynoise;

function preload() {
//load pictures
    var vacuumpicURL = "https://i.imgur.com/qbo0LSB.png[/img]"
    vacuumpic = loadImage(vacuumpicURL);
    var dogpicURL = "https://i.imgur.com/j41YK4G.png[/img]"
    dogpic = loadImage(dogpicURL);
    var keypicURL = "https://i.imgur.com/ozegqNz.png[/img]"
    keypic = loadImage(keypicURL);

//load sounds
    // var vacuumnoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/vacuum.wav")
    
    // var fridgenoise =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fridge.wav")
    
    // var dogbarking = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dogbarking.wav")
    
    // var outsidenoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/birdsoutside.wav")
    
    
    // var keynoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/keys.wav")

//vacuuming noise
    vacuumnoise = loadSound("vacuum.wav");

 //sound of fridge opening and closing   
    fridgenoise =loadSound("fridge.wav");

//sound of dog barking  
    dogbarking = loadSound("dogbarking.wav");

//sound of birds chirping outside    
    outsidenoise = loadSound("birdsoutside.wav");

//sound of key dropping on a table    
    keynoise = loadSound("keys.wav");

}


function setup() {
    createCanvas(500, 400);
    useSound()
}
function soundSetup(){
//controlling the volume
    vacuumnoise.setVolume(1);
    fridgenoise.setVolume(1);
    dogbarking.setVolume(1);
    outsidenoise.setVolume(1);
    keynoise.setVolume(1);

}

function draw() {
    background(255, 247, 135);

//dark brown outline around everything
    stroke(102, 77, 27);
    strokeWeight(5);

//drawing the floor
    fill(199, 154, 58);
    rect(-5,280, 510,400);

//drawing the fridge
    fill(245);
    rect(40,100, 100, 200);
    //fridge shadow
    fill(176, 174, 169);
    rect(40, 170, 100, 10);

    // handle
    fill(0);
    rect(125,120,5,40);
    rect(125,190,5,80);

//drawing the windows
    fill(184, 241, 252);
    rect(170,30,130,100);
    rect(350,30,130,100);

    line(235,30,235,130);
    line(170,80,300,80);
    line(415,30,415,130);
    line(350,80,480,80);

    //table legs
    noStroke();
    fill(102, 77, 27);
    rect(210,240, 12, 70);
    rect(380,240, 12, 70);
    
    fill(71, 54, 20);
    rect(290,190, 12, 100);
    rect(450,190, 12, 100);

//drwing the table   
    fill(102, 77, 27);
    beginShape();
    vertex(280,190);
    vertex(480,190);
    vertex(280,190);
    vertex(200,240);
    vertex(400,240);
    vertex(480,190);
    endShape();

//drawing the vaccum image
    image(vacuumpic, 250, 110, 350,250);

//drawing the dog image
    image(dogpic,5,200,300,200);

//drawing the keys image
    image(keypic,260,195,40,40);
}

function mousePressed(){
//If pressed on keys, play sound and if pressed somewher else, pause the sound
    if (mouseX > 260 & mouseX < 300 && mouseY > 195 && mouseY < 235){
        keynoise.play();
        } else {
            keynoise.pause();
        }
//If pressed on dog, play sound and if pressed somewher else, pause the sound
    if (mouseX > 80 & mouseX < 280 && mouseY > 240 && mouseY < 320){
        dogbarking.play();
        } else {
            dogbarking.pause();
        }
//If pressed on vacuum, play sound and if pressed somewher else, pause the sound
    if (mouseX > 300 & mouseX < 480 && mouseY > 100 && mouseY < 300){
        vacuumnoise.play();
        } else {
            vacuumnoise.pause();
        }
//If pressed on fridge, play sound and if pressed somewher else, pause the sound
    if (mouseX > 40 & mouseX < 140 && mouseY > 100 && mouseY < 300){
        fridgenoise.play();
        } else {
            fridgenoise.pause();
        }
//If pressed on right window, play sound and if pressed somewher else, pause the sound
    if (mouseX > 170 & mouseX < 300 && mouseY > 30 && mouseY < 130){
        outsidenoise.play();
        } else {
            outsidenoise.pause();
        }

}

sounds

sketch

I wanted to create an environment and a setting for this project so I decided to create a kitchen/ living room. I was reminded of my childhood when I was working on this project because I used to play a lot of games where I was allowed to decorate my room or my house so I had a lot of fun with this one. The only problem that I had was that the sounds were not playing on WordPress but it works perfectly fine on a local server. I’m still having this problem, but I couldn’t figure it out. I have attached a zip file of my sounds so that it can be played on the local server.

Weather Thingy, created by Adrien Kaeser at ECAL( Media and Interaction Design Unit), is a custom hand built sound controller that uses real time climate-related events to control and modify the settings of musical instrument.  The device are made up of two main parts in which are a weather station on a tripod microphone and a custom built controller connected to the weather station. The controller is formulated with a brightness sensor and an interface allowing it to assign the various parameters received to audio effects and it transform climatic data into midi data which can be interpreted by instruments.  

Kaeser was interested in being able to use the controller in Live so that the listeners can feel the impact of the climate on the composition.  It is also possible to use the device in the studio by pre-recording the climate data of a certain place at a certain time. This allows the musician to capture moments that he has found inspiring to create new melodies. I was really interested in this piece because of Kaeser’s use of technology and nature. Not just naturalistic ideas or a project derived from an idea of nature but the actual form and nature. I don’t recall seeing any projects that incorporated such an intricate technique of technology and weather together. I was very impressed by the all prototypes and the process of turning this project into reality. I also admire that it can be controlled live so that the audience can feel the real time impact of the climate on the work.

While researching for this week’s looking outwards, I came across my friend’s Monica Chang’s week 8 Looking Outwards and became very interested. Her post was about Mike Tucker, an interactive designer and director at a company called MagicLeap, who centers around the future of spatial computing. They have collaborated with Radiohead’s Johnny Greenwood and Enclyopedia Pictura for the creation of Kanye West’s video game.

In Monica’s Looking Outwards post, she mentions a virtual app called Tónandi created in collabration with Tucker’s company, Magic Leap and Sigur Rós. Tónandi translates to sound spirit in Icelandic, an interactive audio-visual exploration of the sounds and spirit of Sigur Rós. They claim that Tónandi is a creature with unique sound and personality, inhabiting our environment and inviting interaction. I was very intrigued by this project because of its ability to interact with the environment naturally and how hands and body are all that is needed to execute this project and to connect with the sound creatures around you.

sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project 09: computational portrait

var newimage;

function preload(){
//loads image from imugr.com
    var OGimage = "https://i.imgur.com/nYi2hyU.jpg[/img]"
    newimage = loadImage(OGimage);
}

function setup(){
    createCanvas(480,320);
    background(181, 209, 255);
    newimage.loadPixels();
    frameRate(20);
}

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);
//retrieve colors at a certain location from the image
    var pixelcolorT = newimage.get(ix,iy);
//retrieve colors at mouseX and mouseY location from the image
    var pixelcolorE = newimage.get(mouseX, mouseY)

//draws ellipses controlled by mouseX and mouseY
//draws random diameters
    noStroke();
    fill(pixelcolorE);
    ellipse(pmouseX, mouseY, random(5,15), random(5,15));

//draws text "Miss" and "you" with colors retrieved from OGimage
//and random placements

    fill(pixelcolorT);
    text("Miss", px,py);

    fill(pixelcolorT);
    text("you", py, px);

}

For my project, I used an image of a picture I took of one of my students that I served in Mexico this summer. I played around with different background colors. To add diversity into my project, I added 3 different elements into my piece, two texts and ellipses that drew with random diameters between 5 to 15. A problem I ran into was that my OGimage was bigger than my canvas size so my code was drawing only white ellipses. I went into photoshop and rescaled my image to 480 x 320 pixels and that solved the problem. 

As I was researching through the speakers for the eye of festival 2019, artist Refik Anadol capture most of my attention. He is a media artist from Istanbul, Turkey but currently lives and works in Los Angeles, California. He holds a master of fine arts degree from the University of California, Los Angeles in Media arts master of fine arts degree from Istanbul Bilgi University in Visual Communication Design as well as bachelors of arts degree with summa cum laude in Photography and Video.  He is working in the fields of site-specific public art with an approach of parametric data sculpture and live audio/visual performances. He is famous for his immersive installation approach and he particularly explores space among digital and physical entities by creating a hybrid relationship between architecture and media arts with machine intelligence. 

Refik Anadol is intrigued by the transformation of the subject of contemporary culture requires rethinking of the new aesthetic, technique and dynamic perception of space. Anadol builds his works on the nomadic subject’s reaction to and interactions with unconventional spatial orientations with data and machine intelligence. Embedding media arts into architecture, he questions the possibility of a post digital architectural future in which there are no more non-digital realities. He invites his audience to visualize alternative realities by presenting them the possibility of re-defining the functionalities of both interior and exterior architectural forms.. Anadol’s work suggests that all spaces and facades have potentials to be utilized as the media artists’ canvases. I was super inspired by this artist because of his usage of space and technology and how it creates just a vast atmosphere and incorporates nature and digital and media art altogether so successfully.