nahyunk1 & yugyeonl Final



How to open up and run the file:

  1. download and unzip the files below.
  2. nahyunk1-yugyeonl-final project
  3. songs
  4. extract “sound1”, “sound2”, and “sound3” music files from the songs folder and put them into the “assets” folder inside the final project folder.
  5. turn on terminal or node and run local server.
  6. access the sketch.js inside the final project folder.
  7. play and enjoy the songs by entering either 1, 2, 3 on your keyboard.

The project file was too large so we had to upload the songs separately in another folder along with the zip file of our code. Our project was based on the idea of generating animation with the kiwi bird and creating its walkthrough with the incorporation of music affecting the background of the landscape. There are three parts to the scenes: pressing 1 on your keyboard will affect your current scene to an urban landscape. Similarly, when either 2 or 3 is pressed, different scenes and music replace the current scene with different parts of the landscape responding to the beat, frequency, and the amplitude of the music assigned. The parts of the landscapes were drawn with the incorporation of the FFT(); function and the p5.Amplitude(); function which analyzes the frequency and the volume of the music when it is played. Some of the interesting factors that our animation consisted was the sun beam which would draw itself in an ellipse in a form of measured frequency and the stars and the moon which brightens and glistens depending on the beat of the music played at night. Throughout, we put a lot of effort learning and incorporating the p5.sound materials, creating a variety of landscapes with music chosen according to the mood of our scenes, and generally coding different functions and figuring out ways for our code to understand the switching of the scenes and the play of different music files.

**scene 2 consists of a song that is relatively louder than the other scenes that contain music files. We’ve put code for the sound of the song to be reduced, but the song still plays comparatively loud. Please be careful with the volume of your headphones.

 

sketch

var kiwi;             
var kiwiX = 200;        //kiwi locationX
var kiwiY = 310;        //kiwi locationY
var tree = [];          //array of trees
var treeAssets = [];
var shell = [];         //array of shells
var shellAssets = [];
var coin = [];          //array of coins
var coinAssets = [];
var gem = [];           //array of gems
var gemAssets = [];
var buildings = [];     //array of buildings
var ocean = [];         //array of mountain
var mountain = [];      //array of ocean
var stars = [];         //array of stars
var clouds = [];        //array of clouds
var sound1;
var sound2;
var sound3;
var amplitude; 
var volArray = [];      //array that stores volume
var timeState = "morning";    //determines initial state of time

function preload() {
    sound1 = loadSound("assets/sound1.mp3");
    sound2 = loadSound("assets/sound2.mp3");
    sound3 = loadSound("assets/sound3.mp4");
    var treeLinks = ["assets/palmtree0.png", "assets/palmtree1.png", 
                    "assets/palmtree2.png", "assets/palmtree3.png"];
    //load tree images
    for (var t = 0; t < treeLinks.length; t++) {
        treeAssets[t] = loadImage(treeLinks[t]);
    }
    //load shell images
    for (var i = 0; i < 1; i++){
        shellAssets[i] = loadImage("assets/shell.png");
    }
    //load coin images
    for (var i = 0; i < 1; i++){
        coinAssets[i] = loadImage("assets/coin.png");
    }
    //load gem images
    for (var i = 0; i < 1; i++){
        gemAssets[i] = loadImage("assets/gem.png");
    }
}

function setup() {
    createCanvas(1000, 700);
    imageMode(CENTER);
    //load amplitude
    amplitude = new p5.Amplitude();
    //load fft 
    fft = new p5.FFT();
    sound1.setVolume(1);
    sound2.setVolume(0.00000001);
    sound3.setVolume(1);
    //create initial set of trees
    for (var i = 0; i < 4; i ++) {
        var treeX = random(width);
        tree[i] = makeTrees(treeX);
    }
    //create initial set of shells
    for (var i = 0; i < 5; i ++) {
        var shellX = random(360, width);
        shell[i] = makeShells(shellX);
    }
    //create initial set of coins
    for (var i = 0; i < 5; i ++) {
        var coinX = random(360, width);
        coin[i] = makeCoins(coinX);
    }
    //create initial set of gems
    for (var i = 0; i < 5; i ++) {
        var gemX = random(360, width);
        gem[i] = makeGems(gemX);
    }
    //create initial set of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    //create initial set of clouds
    for (var i = 0; i < 10; i++) {
      var cloudX = random(width);
      var cloudY = random(height/2);
      clouds[i] = makeClouds(cloudX, cloudY);
    }
    //create kiwi animation
    createKiwi(kiwiX, kiwiY);  
    //ocean
    makeOcean(height - 220, 30, 0.00005, 0.0005, color(197, 227, 234));
    makeOcean(height - 180, 80, 0.00005, 0.001, color(225, 211, 185));  
    //mountain
    makeMountain(height - 400, 200, 0.00005, 0.0025, color(15));
    makeMountain(height - 350, 300, 0.00015, 0.006, color(0));
}

function draw() {
    if (timeState == "morning") {
        morning();
        if (sound1.isPlaying() == false){
          sound1.play();
        }  else if (sound2.isPlaying() ==  true){
          sound2.stop();
        }  else if (sound3.isPlaying() ==  true){
          sound3.stop();
        }
    } if (timeState == "afternoon") {
        afternoon();
        if (sound2.isPlaying() == false){
          sound2.play();
        }
        else if (sound1.isPlaying() ==  true){
          sound1.stop();
        } else if (sound3.isPlaying() ==  true){
          sound3.stop();
        }
    } if (timeState == "night") {
        night();
        if (sound3.isPlaying() == false){
          sound3.play();
        }  if (sound1.isPlaying() == true){
          sound1.stop();
        }  else if (sound2.isPlaying() ==  true){
          sound2.stop();
        }
    } 
}

function keyPressed() {
    if (key == '1') {
        timeState = "morning";
    } if (key == '2') {
        timeState = "afternoon";
    } else if (key == '3') {
        timeState = "night";
    }
}

function morning() {
    //gradient background color
    var from = color(125, 133, 216);
    var to = color(220, 224, 251);
    setGradient(0, from, to, 3.5 * height / 5);
    //lines in the background showing frequency
    skyFreq(0, 125);
    //sun
    makeSun(width / 4 - 100, 550, 236, 191, 113, 300);
    //ground
    noStroke();
    fill(96, 91, 103);
    rect(0, 3.5 * height / 5 - 10, width, 0.5 * height / 5);
    fill(127, 109, 123);
    rect(0, 4 * height / 5 - 10, width, height / 4);
    //clouds
    updateAndDisplayClouds();
    addClouds();
    //buildings
    updateAndDisplayBuildings();
    addBuildings();
    //kiwi
    drawKiwi();
    //coins
    updateAndDisplayCoins();
    addCoins();
}

function afternoon() {
    //gradient background color
    var from = color(20, 140, 172);
    var to = color(209, 255, 249);
    setGradient(0, from, to, 3.5 * height / 5);
    //lines in the background showing frequency
    skyFreq(100, 48);
    //ocean & sand
    noStroke();
    moveOcean();
    //sun
    makeSun(3 * width / 4, 90, 243, 229, 202, 150);  
    //sun outline based on frequency
    sunFreq();     
    //trees
    updateAndDisplayTrees();
    addTrees(); 
    //kiwi
    drawKiwi();     
    //shells
    updateAndDisplayShells();
    addShells();
}

function night() {
    //gradient background color
    var from = color(25, 0, 51);
    var to = color(51, 0, 102);
    setGradient(0, from, to, 3.5 * height / 5);
    //stars
    updateAndDisplayStars();
    removeStars();
    addStars();
    drawStars();
    //moon
    makeMoon();
    //mountain
    strokeWeight(random(0.2, 0.4));
    stroke(random(0,255), random(0,255), random(0,255));
    moveMountain();
    //ground
    noStroke();
    fill(18, 13, 17);
    rect(0, 3.5 * height / 5, width, 1.5 * height / 5);
    //kiwi
    drawKiwi();
    //gems
    updateAndDisplayGems();
    addGems();
    //sound
}

function setGradient (y, from, to, length) {
    //top to bottom gradient (background)
    for (var i = y; i <= length; i++) {
        var inter = map(i, y, width, 0, 1);
        var c = lerpColor(from, to, inter);
        stroke(c);
        strokeWeight(2);
        line(0, i, width, i);
    }
}

function makeSun(sunX, sunY, r, g, b, diam) {
    noStroke();
    //glowing gradient sunlight
    for (var i = 0; i < 30; i++) {
        var value = random(7, 8);
        var transparency = 100 - value * i;
        fill(r + 2 * i / 3, g + 7 * i / 3, b + i, transparency);
        ellipse(sunX, sunY, diam + 20 * i, diam + 20 * i);
    }
    //sun
    fill(r, g, b, 100);
    ellipse(sunX, sunY, diam, diam);
}

function sunFreq() {    //sun outline
    angleMode(DEGREES);
    //analyze level of the amplitude
    var vol = amplitude.getLevel();
    //array that pushes the volume in the array
    volArray.push(vol);
    stroke(255);
    strokeWeight(.5);
    noFill();
    push();
    translate(width - 240, 90);
    scale(2.5);
    //shape that represent the range of the frequency
    beginShape();
    for (var i = 0; i < 360; i ++){
        var r = map(volArray[i], 0, 1, 10, 100);
        var x = r * cos(i);
        var y = r * sin(i);
        vertex(x ,y);
    }
    endShape();
    pop();
    //360 because the reperesentation draws in an ellipse
    if (volArray.length > 360){
        volArray.splice(0, 1);
    }  
}

function skyFreq(offset, spacingX) {    //background lines
    var w = width / spacingX;
    //anaylze the fft
    var spectrum = fft.analyze();
    push();
    translate(0, offset);
    beginShape();
    //draws the frequency level as lines behind the ocean
    for (var i = 0; i < spectrum.length; i++){
        var angle = map(i, 0, spectrum.length, 0, 360);
        var amp = spectrum[i];
        var r = map(amp, 0, 256, 40, 200);
        var y = map(amp, 0, 256, height, 0);
        stroke(255);
        strokeWeight(0.5);
        line(i * w, height, i * w, y);
    }
    endShape();
    pop();
}

function cityFreq() {

}

function makeMoon() {
    //size of moonlight depends on the amplitude
    for (var c = 0; c < 30; c++){
        var level = amplitude.getLevel();
        noStroke();
        fill(217, 154, 100, (10 - c) * level * 50);
        ellipse(850, 150, 90 + (10 * c) + level, 90 + (10 * c) +  level);
        stroke(255, 223, 181);
        fill(255, 223, 181);
        ellipse(850, 150, 100, 100);
        fill(252, 240, 224);
        ellipse(858, 150, 85, 85);
    }
}

function drawKiwi() {  //create kiwi   
    push();
    translate(kiwiX, kiwiY);
    scale(0.6, 0.6);
    drawSprites();
    pop();
}

function createKiwi(x, y) {  //create sprite at a random position
    kiwi = createSprite(x, y);
    kiwi.addAnimation("assets/kiwi0.png","assets/kiwi1.png",
                  "assets/kiwi2.png","assets/kiwi3.png","assets/kiwi4.png","assets/kiwi5.png","assets/kiwi6.png",
                  "assets/kiwi7.png","assets/kiwi8.png","assets/kiwi9.png","assets/kiwi10.png",
                  "assets/kiwi11.png","assets/kiwi12.png","assets/kiwi13.png","assets/kiwi14.png");
}

function makeOcean(landscapeY, landscapeR, landscapeS, landscapeD, landscapeC) {
    var landscape = {ly: landscapeY,     //locationY
                range: landscapeR,      //range of how far landscape goes up
                speed: landscapeS,      //speed of the landscape
                detail: landscapeD,     //detail (how round/sharp)
                color: landscapeC,      //color of the landscape
                draw: drawLandscape}
    ocean.push(landscape);
}

function makeMountain(landscapeY, landscapeR, landscapeS, landscapeD, landscapeC) {
    var landscape = {ly: landscapeY,     //locationY
                range: landscapeR,      //range of how far landscape goes up
                speed: landscapeS,      //speed of the landscape
                detail: landscapeD,     //detail (how round/sharp)
                color: landscapeC,      //color of the landscape
                draw: drawLandscape}
    mountain.push(landscape);
}

function drawLandscape() {  //generating landscape from code provided
    fill(this.color);
    beginShape();
    vertex(0, height);
    for (var i = 0; i < width; i++) {
        var t = (i * this.detail) + (millis() * this.speed);
        var y = map(noise(t), 0, 1, this.ly - this.range / 2, this.ly + this.range / 2);
        vertex(i, y); 
    }
    vertex(width, height);
    endShape(CLOSE);
}

function moveOcean() { //move the landscape
    for (var i = 0; i < ocean.length; i++) 
        ocean[i].draw();
}

function moveMountain() { //move the landscape
    for (var i = 0; i < mountain.length; i++) 
        mountain[i].draw();
}

//palm trees
function updateAndDisplayTrees() {
    //keeps the trees moving along the x-axis
    for (var i = 0; i < tree.length; i++) {
        tree[i].moveTree();
        tree[i].drawTree();
   }
}

function drawTrees() { //draws the trees
    image(treeAssets[this.nFloor], this.x + 200, this.y - 100);
}

function moveTrees() { //move the trees
    this.x -= this.speed;
}

function addTrees() { //places in more trees into the array
    var newTreesProbability = 0.0015;
    if (random(0, 1) < newTreesProbability) {
        tree.push(makeTrees(width));
   }
}

function makeTrees(originX) {
    var palmtrees = {
        x: originX,
        y: random(400, 420),
        speed: 0.55,
        nFloor: floor(random(0, 3)),
        moveTree: moveTrees,
        drawTree: drawTrees}
    return palmtrees;
}

//shells
function updateAndDisplayShells() {
    //keeps the shells moving along the x-axis
    for (var i = 0; i < shell.length; i++) {
        shell[i].moveShell();
        shell[i].drawShell();
    }
}

function drawShells() { //draws the shells
    push();
    translate(this.x + 100, this.y);
    scale(0.25, 0.25);
    image(shellAssets[0], 0, 0);
    pop();
}

function moveShells() { //move the shells
    this.x -= this.speed;
}

function addShells() {  //places in more trees into the array
    var newTreesProbability = 0.0035; 
    if (random(0, 1) < newTreesProbability) {
        shell.push(makeShells(width));
    }
}

function makeShells(shellX) {
    var shells = {
        x: shellX,
        y: 610,
        speed: 1,
        moveShell: moveShells,
        drawShell: drawShells}
    return shells;
}

//budilings
function updateAndDisplayBuildings(){
    //keeps the buildings moving along the x-axis
    for (var i = 0; i < buildings.length; i++) {
        buildings[i].move();
        buildings[i].display();
    }
}

function addBuildings() {  //places in more buildings into the array
    var newBuilding = 0.006; 
    if (random(0,1) < newBuilding) {
        buildings.push(makeBuilding(width));
    }
}

function moveBuildings() { //move the buildings
    this.x -= this.speed;
}

function drawBuildings() { //draws the buildings
    var floorHeight = 45;
    var bHeight = this.nFloors * floorHeight; 
    push();
    noStroke();
    fill(this.buildingC); 
    translate(this.x, height - 180);
    rect(0, -bHeight, this.breadth, bHeight);
    for (var y = 0; y < this.nFloors; y++) {
        for (var x = 0; x < 6; x++){
            noStroke();
            fill(255, 221, random(100, 150));
            rect(x * (this.breadth / 7) + 10, -25 - (y * floorHeight), this.breadth / 12, 20);
        }
    }
    pop();
}

function makeBuilding(buildingX) {
    var building = {x: buildingX,
        breadth: random(100, 125),
        speed: 0.55,
        buildingC: color(random(150, 225), random(100, 175), random(100, 175)),
        nFloors: round(random(4, 10)),
        move: moveBuildings,
        display: drawBuildings}
    return building;
}

//coins
function updateAndDisplayCoins() {
    //keeps the coins moving along the x-axis
    for (var i = 0; i < coin.length; i++) {
        coin[i].moveCoins();
        coin[i].drawCoins();
    }
}

function drawCoins() { //draws the coins
    push();
    translate(this.x + 100, this.y);
    scale(0.3, 0.3);
    image(coinAssets[0], 0, 0);
    pop();
}

function moveCoins() { //move the coins
    this.x -= this.speed;
}

function addCoins() { //places in more coins into the array
    var newTreesProbability = 0.0035;
    if (random(0, 1) < newTreesProbability) {
        coin.push(makeCoins(width));
   }
}

function makeCoins(coinX) {
    var coins = {
        x: coinX,
        y: 610,
        speed: 1,
        moveCoins: moveCoins,
        drawCoins: drawCoins}
    return coins;
}

//gems
function updateAndDisplayGems() {
    //keeps the gems moving along the x-axis
    for (var i = 0; i < gem.length; i++) {
        gem[i].moveGems();
        gem[i].drawGems();
    }
}

function drawGems() { //draws the gems
    push();
    translate(this.x + 100, this.y);
    scale(0.3, 0.3);
    image(gemAssets[0], 0, 0);
    pop();
}

function moveGems() { //move the gems
    this.x -= this.speed;
}

function addGems() { //places in more gems into the array
    var newTreesProbability = 0.0035;
    if (random(0, 1) < newTreesProbability) {
        gem.push(makeGems(width));
   }
}

function makeGems(gemX) {
    var gems = {
        x: gemX,
        y: 610,
        speed: 1,
        moveGems: moveGems,
        drawGems: drawGems}
    return gems;
}

//stars
function updateAndDisplayStars() {
    //keeps the stars moving along the x-axis
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}

function removeStars() {  //remove stars out of canvas
    var starsKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsKeep.push(stars[i]);
            }
    }
    stars = starsKeep; //remaining stars
}

function addStars() { //places in more trees into the array
    var newTreesProbability = 0.0075;
    if (random(0,1) < newTreesProbability) {
        stars.push(makeStars(width));
    }
}

function moveStars() {  //move the stars
    this.x -= this.speed;
}

function drawStars() { //draws the coins
    strokeWeight(random(0.5, 3));
    stroke(random(0, 255), (0, 255), (0, 255));
    push();
    translate(this.x, 20);
    // the size of the stars depends on the amplitude 
    for (var i = 0; i < stars.length; i++) {
        var level = amplitude.getLevel();
        var size = map(level, 0, 1, 0, 1);
        fill(random(0, size), (0, size), (0, size));
        ellipse(random(10, 3.5 * height / 5), random(10, 3.5 * height / 5), size, size);
    }
    pop();
   }

function makeStars(birthLocationX) {
    var star = {
        x: birthLocationX,
        breadth: 50,
        speed: 1,
        move: moveStars,
        display: drawStars}
    return star;
 }

 //clouds
function updateAndDisplayClouds() {
    //update the clouds' position & draw them
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].draw();
    }
}

function makeClouds(cloudX, cloudY) {
    var cloud = {x: cloudX,             //locationX of cloud
        y: cloudY,                      //locationY of the cloud
        offsetX: random(30, 100),
        offsetY: random(100, 175),
        breadth: random(300, 400),      //width of the cloud
        speedC: -random(1, 2),          //speed of the cloud
        nFloors: round(random(2, 8)),   //multiplier that determines the height of the cloud
        transparency: random(20, 60),   //transparency of the cloud
        move: moveClouds,
        draw: drawClouds}
    return cloud;
}

function drawClouds() {
    var multiplier = 5; //multiplier that determines the height of the cloud
    var cloudHeight = this.nFloors * multiplier;
    ellipseMode(CENTER);
    noStroke();
    fill(255, this.transparency);
    //cloud height reacts to the amplitude
    var level = amplitude.getLevel();
    push();
    translate(this.x, height / 2 - this.offsetY);
    ellipse(this.breadth/2, -cloudHeight, this.breadth, cloudHeight + 500 * level);
    pop();
    push();
    translate(this.x, height / 2 - this.offsetY - 50);
    ellipse(this.breadth/2 + this.offsetX, -cloudHeight, this.breadth, cloudHeight + 500 * level);
    pop();
}

function moveClouds() {
    //move clouds by updating its x position
    this.x += this.speedC;
}

function addClouds() {
    //new clouds from the right edge of the canvas
    var newCloudsProbability = 0.0075;
    //likliness of new clouds
    if (random(0, 1) < newCloudsProbability) {
        var cloudX = width;
        var cloudY = random(height / 2);
        clouds.push(makeClouds(cloudX, cloudY));
    } 
}

Project 12 Proposal – nahyunk1

For this final project, I will be working with Yugyeong Lee in section B. We are going to design and generate a reactor that will respond to sound ranging from simple noises to music pieces that embody numerous pitches and noise amplitude. We will assign limitations by mapping each of these levels to provide different animations reacting to different set of ranges. Through this project, we will explore the mechanism of sound reactors and how they can be visually represented to the eye. We will possibly attempt to provide an interactive version of the product once we accomplish the creation of the reactor to general preloaded sound files so that once the built-in microphone hears and understands music coming out from another device, it will present according images / animations that we have assigned for that certain range of value. Additionally, here’s a link that provides a small emblem that responds to the assigned music given in the video.

https://www.youtube.com/watch?v=5yX6NyhCwAI

nahyunk1 – Looking Outwards 12

https://www.youtube.com/watch?v=O0gAgQQHFcQ

Some of the most successful coding projects that I think are admirable are games. Programming games in entertainment has been of the most popular areas in the exceeding market and through high-level coded programs, the game culture have become one of the crucial factors that cannot be overlooked in its impact in today’s society. One of the examples that I have is Flappy Bird created by dotGEARS on May 14th 2013. Although the creator of the game was unhappy about the fact that the game got very successful, the game’s success in relation to its comparatively basic program occupied the popular trend proved the successfulness of coding programs in games. The other project is tetris created by Alexey Pajitnov in 1984. The game, created in Russia while Alexey was working at a science academy, marks for one of the earliest and oldest games to exist and still remain popular in our current generation. Both of the games implement rather simple coding skills to generate and create game systems that outlive/will outlive decades. However, throughout their time spent learning and attaining the usage of such language, their effort and time in relation to the product that looks rather simple isn’t something that should not be overlooked.

nahyunk1 – project 11 Composition

sketch

//Na Hyun Kim
//section B
//nahyunk1@andrew.cmu.edu
//Project-11

var r = 255;
var g = 255;
var b = 255;
var turtle =[];
var counter = 30;
function setup() {
    createCanvas(400, 400);
    background(0);
    ellipseMode(CENTER);
    //position of the turtle.
    for (var t = 0; t < counter; t ++) {
      turtle[t] = makeTurtle(0, 0);
      turtle[t].setColor(color(random(0,r), random(0,g), random(0,b))); //set color
      turtle[t].setWeight(random(0.5,4)); // set weight
      turtle[t].penDown;
      }
      strokeJoin(MITER);
      strokeCap(PROJECT);
      frameRate(30);
}

function draw() {
  for (var t = 0; t < counter; t ++) {
    turtle[t].setColor(color(random(0,r), random(0,g), random(0,b))); //stroke random colors
    turtle[t].setWeight(random(0.5,4));
    turtle[t].turnToward(t,mouseY, turtle[0].angleTo(pmouseX+5, pmouseY-10)); //turn along mouse movement.
    turtle[t].forward(turtle[t].distanceTo(mouseX, mouseY));//move along mouse movement.
  }
}

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 is a semi-free drawing turtle that reacts to the movement of the mouse and creates an image that resembles to a ball of rubber. The lines build up as the person interacting moves her mouse across the screen.

nahyunk1 – Looking Outwards 11

https://www.youtube.com/watch?v=S-T8kcSRLL0&feature=share

sound art incorporates sound with an existing visual piece, generating a new meaning through the convergence of the two medium. Music as itself is a singular form of art that can exist on its own and portray a meaning or thought. The project that I found from this week’s looking outwards was Ge Wang’s computational musical instruments in Stanford. He laid out a series of machines in which he could install an app or program a set of codes that loop into a playable instrument. Ge incorporated his computer engineering skills to create a sound machine which people can interact and also utilize in creating music. Throughout the talk, I realized that his project much related to what I was learning in my other class which also incorporates computer language with musical form of art.

nahyunk1 – Project 10 Landscape

sketch

//NaHyun Kim
//section B
//nahyunk1@andrew.cmu.edu
//Project 10 - landscape

var tSpeed = 0.0013;
var tDetail = 0.002;
var stars = [];
var r = 255;
var g = 255;
var b = 255;

function setup() {
    createCanvas(400, 500);
    frameRate(10);

    for (var s=0; s<1; s++){
      var place = random(width);
      stars[s] = makeStars(place);
    }
}

function draw() {
  var Col = color(25,0,51) //dark purple;
  var Col2 = color(51, 0, 102)// lighter purple;
  //background color
  for (var i=0; i < height; i++) {
   var gradi = map(i, 90, 300, 0, 1);
   var Lerp = lerpColor(Col, Col2, gradi);
    stroke(Lerp);
    line(0, i, width, i);
   }

   //stardust
  updateAndDisplayStars();
  removeStars();
  starGenerate();
  starDisplay();

   //moon
   for (var c=0; c<10; c++){
     noStroke();
     fill(217,154,100,(10-c)*1)
     ellipse(310, 30, 40+(10*c), 40+(10*c));
     noStroke();
     fill(255, 223, 181);
     ellipse(310, 30, 50, 50);
     fill(252, 240, 224);
     ellipse(313, 30, 45, 45);
   }

   //rolling mountains behind
   strokeWeight(0.1);
   stroke(random(0,r), random(0,g), random(0,b));
   fill(20);
   beginShape();
     for (var x = 0; x < width; x++) {
       var t = (5*x * tDetail) + (millis() * tSpeed/10);
       var y = map(noise(t/4), 0, 1, 0, 600);
       curveVertex(x, y);
     }
   curveVertex(500, 1000);
   curveVertex(0,width);
   endShape(CLOSE);

  noStroke();
  fill(0);  //rolling mountain tops
  beginShape();
    for (var x = 0; x < width; x++) {
        var t = (5*x * tDetail) + (millis() * tSpeed/2);
        var y = map(noise(t/2), 0,1, 1, 600);
        curveVertex(x, y);
     }
  curveVertex(500, 10000);
  curveVertex(0,width);
  endShape(CLOSE);
}

function updateAndDisplayStars(){
    // Update and display stars
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}

function removeStars(){
       var starsKeep = [];
       for (var i = 0; i < stars.length; i++){
           if (stars[i].x + stars[i].breadth > 0) {
               starsKeep.push(stars[i]);
           }
       }
       stars = starsKeep; //remaining stars.
}
function starGenerate() {
       // add stars
       var likelyStar = 0.009;
       if (random(0,1) < likelyStar) {
           stars.push(makeStars(width));
       }
   }
//update position
function starsMove() {
       this.x += this.speed;
   }
function starDisplay() {
       strokeWeight(random(0.5,3));
       fill(random(0,r), random(0,g), random(0,b));
       stroke(random(0,r), random(0,g), random(0,b));
       push();
       translate(this.x, 20);
       for (var i = 0; i < stars.length; i++) {
           point(random(10,200), random(10,200));
       }
       pop();
   }
function makeStars(birthLocationX) {
     var starr = {x: birthLocationX,
                 breadth: 30,
                 speed: -0.003,
                 move: starsMove,
                 display: starDisplay}
     return starr;
 }

I created this image based on the time when I was looking out the window of a car at night on a highway next to mountainous forests. I had multichromatic stars appear and disappear which made it seem like they were actual stars and had the background of the mountain respond to the starlights to emphasize the surreal scenery. I also created the brightness effect of the moon by creating a series of ellipses with fading hues of the color of the moon.

nahyunk1 – Looking Outwards 09

An environmental designer and an architect, Filipa Valente completed her studies in the Bartlett School of Architecture in London and in SciArc of Los Angeles. Her works mostly are focused in managing design in many architectural projects across the world which exists in places such as China, US, and Lybia. Filipa also produces environmental installations besides her architectural projects which not only uses materials that convey the idea of her themes but also expresses aesthetic purpose. One of her works named ‘Liminoid Garden’ is a project that is similar to one of the pieces that I made which makes use of neon lights and conveys spacial mood with the materials used. The way her piece is executed is admirable in her use of media art and motion censors that react in light whenever people interact with the piece. I hope to be able to create a piece one day that adds spacial mood to the audience interactively.

http://www.filipavalente.com/art/#/liminoid-blooms/

‘Liminoid Garden’ (2014)

 

nahyunk1 – Project 09 Pixel Art

sketch

//Nahyun Kim
//Section B
//nahyunk1@andrew.cmu.edu
//Project 09

var img;

function preload(){
  img = loadImage("https://i.imgur.com/cKWLZzM.jpg");

}
function setup() {
  createCanvas(600, 600);
  img.loadPixels();
  frameRate(2000);
  image(img, 0,-20);
  background(255);

}

function draw() {
  var x = floor(random(600));
  var y = floor(random(600));
  var Col = img.get(x, y);
  stroke(Col);
  strokeWeight(random(0.5, 2));
  noFill();
  rect(x, y, 30, 30);
  strokeWeight(0.5);
  text("be forever hazy..", 5, 10);
}

My intentions of presenting an obscured image came out successful by filling strokes with pixel colors and and doing noFill(); instead of the other way, which would stylize blocks of filled rectangles draw my image. I wanted to have the image appear in a way that is more neat in its build up. It also stylizes my picture as glassy and translucent, which helped my initial thought get executed clearly. Here are some screenshots of my picture being built up to its finished look.

nahyunk1 – Looking Outwards 09

For this assignment, I read Harry’s looking outwards post 6, which talked about Mark Wilson’s,‘e4708’(2008), an artwork generated by a computer. When I read his post, I was able to quickly connect to the post of my own which also talked about randomly generated artworks that computers created “on its own”. The notion which Harry brings up in his post questioning whether the computer’s ability to randomly create artworks is a valid statement or not was something that I wondered as I read the post about my article.

https://courses.ideate.cmu.edu/15-104/f2017/2017/10/06/dnam-looking-outwards-06/

http://mgwilson.com/

nahyunk1 -Looking Outwards 08

https://vimeo.com/channels/eyeo2012

Jake Barton, a designer who focuses on audience engagement upon his ideas through storytelling, talks about unity in different representations of an idea and finding a new filter(a mode) for people to perceive things around the world using creative and technological expressions. He also indicates that through these new modes of looking at the world in a different way, we are permitted to look at the “…’probable’ to the ‘plausible’ to the ‘possible'”(28:49). Certain works such as the interactive doodle screen which people could draw line figure and the screen searches paintings that contain similar curvature of that line, Jake encourages different disciplines such as coding, art and media to collaborate and help people to find the new mode of perception. Towards the beginning of his speech, he lays down a mediation before starting his lecture by how this lecture won’t define the word creativity. Such usage of speech skills in his presentation seemed to be successful for the audience who could possibly hold different ideas about such topic.

https://localprojects.net/
Founder of local projects: Jake Barton