sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Final Project
//Section B

var counter = 0;
var oceanamp = 100;
var oceanspeed = 0.001;
var x = 150;
var polarbearURL = "https://i.imgur.com/dQOjRSb.png"


function preload() {
    polarbear = loadImage(polarbearURL);
}

function setup() {
    createCanvas(600, 400);
    background(180, 240, 250);
  
    fill(150, 75, 0);
    rect(380, 365, 10, 30);
    rect(440, 365, 10, 30);
    rect(500, 365, 10, 30); //Treetrunks

    fill(0, 255, 0)
    triangle(370, 365, 385, 325, 400, 365);
    triangle(430, 365, 445, 325, 460, 365);
    triangle(490, 365, 505, 325, 520, 365); //Tree Leaves
}

function draw() {
    fill(255, 100, 0);
    rect(400, 30, 100, 50); //button
    
    fill(255);
    textSize(13);
    text("Click", 435, 50); //click text on button

    strokeWeight(2);
	stroke(255);
	line(300, 0, 300, 400); //Divider down the middle

    noStroke();
    fill(255, 204, 51)
    ellipse(150, 100, 30, 30) //sun

    fill(255);
    rect(50, 250, 200, 200); //Iceberg
  
    noFill();
    rect(360, 330, 40, 20);
    rect(420, 330, 40, 20);
    rect(480, 330, 40, 20); //Windows

    ocean();

    imageMode(CENTER);
    image(polarbear, 150, 240, 50, 50);

    if (counter == 1) {
        fire1();
    } 
    if (counter == 2) {
        fire2();
    }
    if (counter == 3) {
        fire3();
    }
    if (counter == 4) {
        factory();
        ocean2(); //Increase water levels afer iceberg sinks
        newsun(); //New sun after factory is built
        textSize(30)
        text("GAME OVER", 210, 200)
    }
}

function ocean() {
    fill(0, 0, 250); 
    noStroke();
    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var position2 = x * oceanamp + (millis() * oceanspeed);
        var y = map(noise(position2), 0, 10, height/1.4, height); 
        vertex(x, y); 
    }
    vertex(width/2, height);
    vertex(0, height);
    endShape(); //The Ocean
}

function ocean2() {
    fill(0, 0, 250); 
    noStroke();
    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var position2 = x * oceanamp + (millis() * oceanspeed);
        var y = map(noise(position2), 0, 10, height/2, height); 
        vertex(x, y); 
    }
    
    vertex(width/2, height);
    vertex(0, height);
    endShape(); //The new ocean after the iceberg sinks
}

function newsun() {
    fill(255, 51, 51);
    ellipse(150, 100, 60, 60); //bigger and stronger sun to appear 
}

function factory() {
    fill(100);  
    rect(350, 300, 180, 200); //factory body

    triangle(350, 300, 410, 250, 410, 300); 
    triangle(410, 300, 470, 250, 470, 300);
    triangle(470, 300, 530, 250, 530, 300); //Ceiling
  
    fill(250);
    rect(360, 330, 40, 20);
    rect(420, 330, 40, 20);
    rect(480, 330, 40, 20); //Windows
}

function fire1() {
    fill(255,0,0);
    ellipse(385, 375, 46, 46);
    triangle(361, 375, 385, 310, 409, 375)
    fill(255, 255, 0);
    ellipse(385, 375 ,30 ,30); //fire 1
}

function fire2() {

    fill(255,0,0);
    ellipse(445, 375, 46, 46);
    triangle(421, 375, 445, 310, 469, 375)
    fill(255, 255, 0);
    ellipse(445, 375, 30, 30); //fire 2
}

function fire3() {
    fill(255,0,0);
    ellipse(505,375,46,46);
    triangle(481,375,505,310,529,375);
    fill(255,255,0);
    ellipse(505,375,30,30); //fire 3
}

function mousePressed() {
    if (mouseX < 500 & mouseX > 400 && mouseY < 80 && mouseY > 30 ){
        counter = counter + 1; 
    } //Counter that keeps track of elemets to be appeared when button is clicked
}


  

 

As I initially had trouble selecting a theme for my final project, I decided to follow Professor Dannenburg’s suggestion to make a climate change themed work. As I appreciated art not only for its aesthetics but also for the message it sends to the public, I thought creating a project that sends a message about global warming could be rewarding.

I wanted to show how the actions of humans can have a detrimental impact on the livelihood of polar bears. Although it was already a common topic, I wanted to express that human beings ultimately have the power to preserve or destroy the environment that these animals were dependent on.

As such, I created a “button” that emulated real life actions that caused global warming and the destruction of the ice caps. Each click creates a fire that would burn the trees and finally create a factory. After the action sequence is completed, the player will have destroyed the ozone layer, causing the ice cap to melt and kill the polar bear.

I think art is inspiring as it serves as a versatile instrument where artists can communicate their beliefs and ideas to their viewers. Such message may be very personal such as the sentiment of happiness or sorrow or even socially conscious, trying to bring about changes that the artist believes in.
Such socially conscious art projects are valuable as it finds an easy way to communicate messages to the public. Not only is it easier to understand, such projects tend to resonate with the audience if interesting.

As such, I decided to go ahead with Professor Dannenberg’s suggestion to make a project with the theme of global warming. My previous blog posts had two global warming projects with vastly different ways of communicating the message. In my project, I will use both sympathy and entertaining interaction to communicate my message.

In order to clearly depict the how the wrongdoings of human beings are causing climate change, I will reserve one section of the project where the user can add pollution to the atmosphere through the destruction of trees and creation of factories. As the number of factories grow, the sun on the right hand side to grow bigger causing the ice caps to melt until the bears and penguins eventually submerge.

The point of the project is to portray that our own actions can cause global warming and cause the poor animals to die. Through interesting interaction and pity felt during this “game”, I hope that my message will reach its audience.

As Professor Dannenberg suggested a global warming themed project, I searched some up as inspiration for my own project.

The one project I saw regarding global warming was the game “Climate Quest”. I think it is very interesting that the makers of the game used climate change as the main theme of a video game. This is interesting as global warming is normally a fairly boring topic that people tend to avoid. Through making a game out of it, the makers devised a clever way to communicate their message to the players.

A more classic climate project artwork, this poster uses sentiments to communicate its message to the audience. Although an interactive game is also a very interesting way to communicate this message, one using sympathy is also a crucial one. The two projects have the same theme but very different methods of communicating the message to the audience.

Link: https://earthgames.org/games/climatequest/ (Climate Quest)

Link: https://www.redbubble.com/people/stormslegacy/works/19765199-global-warming-polar-bear-and-cubs?p=poster (Global Warming Polar Bear and Cubs)

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 11

var skyspeed = 0.001;
var skyamp = 0.001; //calm fluctuations like the skyline
var grassspeed = 0.001;
var grassamp = 5; //to make fluctuations grasslike

function setup() {
  createCanvas(480, 480);
} 

function draw() {
    background(255); //white background to represent cloud filled sky
    sky(); //draws sky
    grass(); //draws grass
    totoro(); //draws totoro
    
}


function sky(){
  fill(102, 225, 225); 
  beginShape(); 
  for (var x = 0; x < width; x++) {
    var position = x*skyamp + (millis()*skyspeed);
    var y = map(noise(position), 0, 10, height/5, height);
    vertex(x, y); 
  }
  vertex(width, height);
  vertex(0, height);
  endShape();
}

function grass(){
  fill(0, 255, 0); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var position2 = x*grassamp + (millis()*grassspeed);
            var y = map(noise(position2), 0, 3, height/1.4, height); //height adjustment to make totoro 'walk' on grass
            vertex(x, y); 
      }
      vertex(width, height);
      vertex(0, height);
    endShape();
}



function totoro(){ 
  
  translate(200,300) //translate Totoro as it was made seperately in web editor

  fill(30,144,255);
  ellipse(50,50,40,50); //body
  
  fill(135,206,250);
  ellipse(50,57,15,20); //arm
  
  fill(0);
  triangle(48,67,50,69,52,67); //claw
  
  fill(135,206,250);
  triangle(60,28,55,15,50,25); //ear
  
  fill(255,203,138);
  triangle(58,28,55,21,52,25); //inner ear
  
  fill(255);
  ellipse(60,38,7,7); //eye
  
  fill(0);
  ellipse(60,38,3,3); //pupil
  ellipse(69,42,3,3); //nose
 
}

For the landscape project, I chose my recurring character Totoro to walk across the grass with a beautiful skyline.

A project designed and implemented by a female artist is the KitesFight by Eva Schindling. Schindling focused heavily on the application of technology in the realm of media art. She received a MSc. in Art and Technology from Chalmers University in Sweden and a degree in Interaction and Media Design from FH Joanneum in Austria. Schindling’s range of artwork is very wide with architectural Trojan Horse and simple sound projects. Out of such an extensive array of projects, I selected the KitesFight as it seems very similar to the projects that we engage with during this course.

The project features many triangles that interact with one another depending on a number of rule sets. The algorithm changes varying by the volume of the sound inputted. Then, the triangles follow each other, repel each other, and attach with one another. As we have been working on projects where different shapes interact with one another and we also just did the Sonic Art Project, I believe that though further practice. Such complex projects can be feasible.

http://www.evsc.net/projects/kitesfight

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 10

var sound1;
var sound2;
var sound3;
var sound4;

function preload() {
    sound1 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/378641__13fpanska-kolar-jan__fire-stick-shake-2.wav');
    sound2 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/476202__djmistressm__rain-drips.mp3');
    sound3 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/85602__jankoehl__walk-forest02.wav');
    sound4 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/459977__florianreichelt__soft-wind.mp3'); //saving sounds
}

//I have no clue why the sounds are not loading 


function setup() {
    createCanvas(400, 400);
    background(220);
    useSound(); 
}

function soundSetup() {
    sound1.setVolume(1); 
    sound2.setVolume(1);
    sound3.setVolume(1);
    sound4.setVolume(1);
}

function draw() {
fill(0,0,0);
rect(0,0,200,200); //black square

fill(255,0,0);
noStroke();
ellipse(100,150,50,50);
noStroke();
triangle(78,140,100,100,122,140)
fill(255,255,0);
ellipse(100,160,30,30); //fire


fill(0,255,0);
rect(0,200,200,200);
fill(220,180,130); //green square
  
rect(100,350,10,40);
fill(0,100,0);
triangle(90,360,105,300,120,360) //tree

fill(0,0,255);
rect(200,0,200,200); //Blue Square
  
for (var x=210; x<600; x=x+20) {
   for(var y=10; y<190; y= y+20) {
   stroke(135,206,235);
   fill(135,206,235);
   rect(x,y,1,10); //rain on background
        }

fill(255);
rect(200,200,200,200); //White Square
  
fill(130,200,230);
rect(270,350,70,5);
arc(280, 325, 60, 60, HALF_PI, PI); //wind symbol
}
}


function mousePressed() {
    // When mouse is pressed, appropriate sounds play

    if (mouseX < 200 & mouseY < 200) {
        sound1.play();
    } else {
        sound1.pause();
    } //Makes sound 1 for black square

    if (mouseX > 200 & mouseY < 200) {
        sound2.play();
    } else {
        sound2.pause();
    } //Makes sound 2 for blue square)

    if (mouseX < 200 & mouseY > 200) {
        sound3.play();
    } else {
        sound3.pause();
    } //Makes sound 3 for green square)

    if (mouseX > 200 & mouseY > 200) {
        sound4.play();
    } else {
        sound4.pause();
    } //Makes sound 4 for white square

}

For this project I used “The Last Airbender” as the theme. I drew the four elements and had sounds that correlated to the element playing when the mouse is clicked.

(Grace Day Used)

A computational music project that I found inspiring was the “Weather Thingy”by Filip Visnjic. The project was mainly composed of two parts: one being a weather station and other being a controller. The basic mechanics of the project was that it would gauge wind and rain levels with its sensors. And then, the controller had receptors that could translate such weather data into audio effects, after interpretation with built-in instruments. The controller also had screens where the artist can amplify or constrain sounds.

This project was inspiring that it used sounds from nature to recreate music. Ironically, Filip uses a computer software to interpret sounds such as rain, wind, and thunder. This project is incredible in that it gives musical artists various novel sounds effects to work with. Filip also gave the machine the ability to save certain sounds to later give musicians inspiration.

The “Weather Thingy” uses various software such as C++, Arduino, and MIDI protocol.

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 9

var Hyun;

function preload() {
    var myImageURL = "https://i.imgur.com/Up7Loks.jpg";
    Hyun = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480); //Converted the picture size to 480 by 480
    background(0);
    Hyun.loadPixels();
    frameRate(100000000000000000); //Increased frame rate so picture renders faster
}

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 = Hyun.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px+5, py, 4, 4); //Mickey Mouse left ear
    ellipse(px, py+6, 10, 10); //Mickey Mouse Head
    ellipse(px-5,py,4,4); //Mickey Mouse right ear

    var theColorAtTheMouse = Hyun.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    rect(pmouseX, pmouseY, 1, 1);
}

For this project, I used a picture of my good friend Hyun Kang. He really likes Disney movies and Mickey Mouse so i made the recurring shape as the classic Disney logo.

As an inspirational project that my peers have assessed, I chose Karl Sims Flow. I completely agree with Sarah Choi’s assessment that the piece is most notable for its use of nature’s existing motion such as gravity and flow of water. However, one important aspect to note is some of the other motions inspired by works of other painters such as Van Gogh. Through using Gogh’s classic bush stroke, Sims recreates the Starry Night in a modern fashion

One other notable thing is that although the motion itself captures nature, the color orientation of the rippling effects are quite uncommon. Just as Sarah said, the co-existing randomness and configured motion is interesting. I also think the co-existence of the natural motion and artificial colors are also notable. This piece represents the variables of nature and randomness governed by the movement of human beings. That concept lying behind the implementation of the art is that different factors of the peice is all being controlled by the audience to create a truly mesmerizing motion depicted with natural motion and artificial colors.

Link to post: https://courses.ideate.cmu.edu/15-104/f2019/2019/09/06/sarah-choi-looking-outwards-02/

Link to original work: http://www.karlsims.com/flow.html

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-07

function setup() {
    createCanvas(480, 480);
    		
}

function draw() {
	background(0,0,0);
	push();
	translate(width/2, height/2); //placing curve at center
	drawBicorn();
	pop();
}

function drawBicorn(){

	var x;
	var y;
	var w = map(mouseX,0,width,0,200); // changes length of the curve through mouse control
	var h = map(mouseY,0,height,0,200) // changes height of the curve through mouse control
	
	stroke(255,0,0);
	beginShape();
	for(var i = 0; i <200; i ++){
	var t = map (i, 0, 200, 0 ,200);
	x = (w*sin(t)); //x coordinate equation for Bicorn
	y = (h*sin(t)*cos(t)); //y coordinate equation for Bicorn
	vertex(x,y); // placing curve at center
	}
	endShape(CLOSE);

}

For this project, I was very conflicted about choosing the curve as I was not knowledge about the realm of mathematical graphs. Having only known parabolas and hyperbolas, I was surprised to see the myriad of curves on the reference website. Many of the curves seemed somewhat randomly drawn without specific symmetry or shape. As I appreciate symmetry, I decided to select the Bicorn curve. The curve represented a variety of objects such as a ribbon, the infinity sign, and a mask. I tried to develop an abstract visualization of Deadpool’s mask.

I also thought of Spiderman whilst making the project, prompting me to create a web like structure to assimilate spiderwebs when creating the mask.