nayeonk1-Final Project


//Na-yeon Kim
//Section B
//Final project

//global variables
var music;
var amp;
var volHistory = [];
var spectrumHistory = [];
var wave = [];
var fft;
var rainSize = 5;
var streams = [];
var w = 960;
var h = 540;

//load the song
function preload() {
    music = loadSound('city.mp3');

//setup canvas, music, aplitude and fft of the music, rainstream
function setup() {
    createCanvas(1920, 1080);
    angleMode(DEGREES);; //play the song

    amp = new p5.Amplitude(0.9, 64); //get the aplitude value of the music
    fft = new p5.FFT(); //get the spectrum analysis value of the music

//generate and render the rains
    var x = 0;
    for (var i = 0; i <= width / rainSize; i++) {
      var stream = new Stream();
      stream.generate(x, random(-1000, 0));
      x += random(10, 50);

//draw lighting and disk changing based on song. render raindrops
function draw() {

    light(0, 0); // lighting that changes with fft
    disk(0, 0); //disk that changes with amp

//render the streams
    streams.forEach(function(stream) {

//function rain-setting values for it-
function rain(x, y, vel, first) {
    this.x = x;
    this.y = y;
    this.vel = vel;
    this.first = first;

//reset raindrops to top when they hit the bottom
    this.reset = function() {
      if (this.y >= height) {
        this.y = 0;
      } else {
        this.y += this.vel;

//rain stream function. set speed and generation ofr rain drops
function Stream() {
    this.rainDrops = [];
    this.totalDrops = round(random(10, 50));
    this.vel = random(10);

//set the function of generating the rains
    this.generate = function(x, y) {
      var first = round(random(4)) == 1;
      for (var i = 0; i < this.totalDrops; i++) {
        rains = new rain(x, y, this.vel, first);
        y -= rainSize * random(5);
        first = false;
    //setting the rendering funtion to the rain
    this.render = function() {
      this.rainDrops.forEach(function(rains) {
        if (rains.first) {
          fill(170, 50, 130, random(200));
        } else {
          fill(230, 100, 200, 50);
        //draw rain drops
        ellipse(rains.x, rains.y, rainSize, rainSize);

//draw a light that changes it's shapes based on spectrum of the music(fft)
function light() {

    translate(w, h)

//get the value of fft and put them in spectrum array
    var spectrum = fft.analyze();

//erase old spectrum from the array
    if (spectrumHistory.length > width) {
      spectrumHistory.splice(0, 1);

//draw shapes
    for (var i = 0; i < spectrum.length; i++) {
      var spec = spectrum[i];
      var angle = map(i, 0, spectrum.length, 0, 520);
      var r = map(spec, 0, 100, 50, 150);
      var x = r * cos(angle);
      var y = r * sin(angle);

      stroke(y * 2, x / 2, r / 2);

      line(0, 0, x, y);
      line(0, 0, -x, -y);

//draw disk that change its radius based on volum of the music(amp)
function disk(x, y) {
    translate(w, h);

//get the amp level from the music and put them in vol array
    var vol = amp.getLevel();

//erase old volume from the array
    if (volHistory.length > width) {
      volHistory.splice(0, 1);

//more circles on center
    var rad = map(vol, 0, 1, 100, 250);
    fill(50, 50, 200, 100);
    ellipse(x, y, rad, rad);
    fill(200, 50, 50, 100);
    ellipse(x, y, rad - 5, rad - 5);
    fill(50, 50, 200, 100);
    ellipse(x, y, rad - 20, rad - 20);
    fill(255, 25);
    ellipse(x, y, rad - 40, rad - 40);

For the final project, I worked with Jiaxin. It was really fun to work with the friend for something I wanted to do! I’m interested in media art, especially interactive installation art. I proposed this idea to Jiaxin and she also loves to work with Kinect. Since both of us are ETC student, we could get access to all of the equipment like Kinect and projector very easily. So we teamed up and divided works into two. As Jiaxin wanted to work with Kinect, I took charge of background animation and music. I play with sound on p5js and interactive images for days. Meanwhile, me and Jiaxing had several meetings to settle down the idea on this project. We worked on mood board first to see how we are picturing the outcome.


And then we moved on to work on actual work process. For me, it was getting interact images with sound done. I searched on how to make interactive images with sounds in p5js and got some ideas about what I want to create.
First interactive thing is volume. circle on the center of the canvas is changing its radius by music volume. Second is frequency spectrum. It shows analysis of spectrum from low frequency to high frequency, of course, different sound effects have the different frequency.
It was really fun to work on installation art as I wished! I’d love to work on this kind of artwork later again.

Special thanks to Julian Korzeniowsky -a talented and awesome musician- for providing awesome music for our project. this file Final project(Jiaxin_Nayeon)
2.set up a local server
3.(get a Kinect and) open the file in chrome

Nayeon Kim-project 12-proposal

For the final project, I’m going to collaborate with classmate Jiaxin. We are going to create a media art interactive installation, using projection and Makey Makeys. Makey Makeys will be used as input devices, and the projection will project the content created by P5.js. For this media art installation, we are going to create a serious of music visualization animations responding to the input signals from Makey Makeys. The animations will change along with the melody when people interact with the input devices. At the beginning of this installation, there will be a basic melody for people to follow. When people try to use the Makey Makey, they can add new melodies to the existed music,  also change the animations displaying on the projection screen.

nayeonk1-Looking Outwards

Music can be fun
I’m planning to create interactive media art with projection for my final project. For this, I’ve researched some interactive media art with jiaxin, my collaborator for this project, to get some inspiration. One is ‘Music can be fun’. This is interactive website using music to create visual and interactivity. I really liked the way he created visual for music. He’s creative technologist from UK. He also creates other arts with music visualization. You can check he’s astonishing art works at his website down below.

Edan Kwan’s website

The other project that I found for my project is this.

Sonia falcone is a female artist using various types of fabrication and media. Interesting thing about this installation art is that she used not just flat square screen to project the image. She used different small dimensions to make this visuals much more interesting. I got the idea of using projection from this work. It overwhelms people when the art becomes bigger scale. I love the feeling of overwhelmed by atmosphere art created.

Right side of Video Installation-2010

Sonia Falcone’s website

nayeonk1-LookingOutwards-Computer Music

Laurie spiegel is a composer and computer artist. I choose her not only because she is a female artist in computer art area and also she pioneer of new-music scene in history. I always interested in femail artist in USA since I understand how tough to be female artist and become influential artist. Her early musical experiences were largely self-directed, beginning with the mandolin, guital and banjo-it makes her more special-. Spiegel attended Shimer College and Oxford University. After receiving her AB degree in the Social Sciences, she commuted to london to study guitar, teory and composition.

She has worked at Bell laboratories in coputer graphics and is known her algorithmic composition software Music Mouse. When she continues to support herself through software development, she aims to use technology in music as a means of furthering her art rather than as an end in itself.

Laurie spiegel

Best known for her use of interactive and algorithmic logic as part of the compositional process, she worked experimental and prototype-level music and image generation system. Pursuing her concept of visual music, she was a video artist too. In addition to computer software development, she supported herself by both teaching and by soundtrack composition.

Her early computer art 1974
Her early computer art 1974

Laurie Spiegel’s website



var offset = 20;
var px;
var py;
var dy;
var bottom = 200;
var snowFlakes = [];
var started = false;

function preload() {
    img = loadImage("")
function setup() {
    createCanvas(480, 480);
    image(img, 0, 0, img.width / 2.5, img.height / 2.5)

    for (i = 0; i < 10; i++) {
      var flakes = makeTurtle(30 + i * offset, 0);


function draw() {
    var snowX = random(width);
    var snowY = random(height);
    var snowS = random(1, 5);
    for (i = 0; i < 5; i ++) {
      ellipse(snowX, snowY, snowS, snowS)

function mousePressed() {
  var px = mouseX;
  var py = mouseY;

  var flakes = makeTurtle(px, py);
  var edgeL = random(10);

  flakes.setColor(random(200, 255));

  for (var i = 0; i < 20; i ++) {
    for (var j = 0; j < 8; j ++) {
//======= CONDENSED TURTLE CODE =======//
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){
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,
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;}

Suddenly winter has came! I was quiet shocked looking at snow because I could feel that this year also almost finished..

Nayeon-Project10-Generative Landscape


//Na-yeon Kim
//15-104, B section
//Project-10 (Generative Landscape)

var terrainSpeed1 = 0.0001;
var terrainDetail1 = 0.005;
var terrainSpeed2 = 0.0005;
var terrainDetail2 = 0.003;
var terrainSpeed3 = 0.001;
var terrainDetail3 = 0.0005;
var xoff = 0.0;
var terrain = [];
var lines = ["The impossible could not have happened, therefore the impossible must be possible in spite of appearances.",
            "If you confront anyone who has lied with the truth, he will usually admit it - often out of sheer surprise.",
            "You’re the world famous detective, Hercule Poirot.",
            "I see evil on this train. A passenger has died.",
            "My name is Hercule Poirot and I’m probably the greatest detective in the world."]
var index = 0;
var mX = 50;
var trees = [];

function setup() {
    createCanvas(480, 300);
    for (var i = 0; i < 5; i++) {
      var rx = random(width);
      trees[i] = makeTrees(rx);

//draw assets on canvas "orient express"
function draw() {

//display trees on screen
function updateAndDisplayTrees(){
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){

//remove trees that have slipped out of view
function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
    trees = treesToKeep;

//add trees with random probability
function addNewTreesWithSomeRandomProbability() {
    var newTreeLikelihood = 0.05;
    if (random(0,1) < newTreeLikelihood) {

//tree movement
function treesMove() {
    this.x += this.speed;

//tree display function
function treeDisplay() {
    var treeHeight = 100;
    var treeHeight = this.nFloors * treeHeight;
    fill(random(50, 100));
    translate(this.x, height);
    rect(0, -treeHeight, this.breadth, treeHeight);
    ellipse(30, -treeHeight, this.bush, this.bush);

//draw trees
function makeTrees(birthLocationX) {
    var trees = {x: birthLocationX,
                breadth: random(30, 70),
                bush: random(150, 300),
                speed: -150,
                nFloors: round(random(2,8)),
                move: treesMove,
                display: treeDisplay}
    return trees;

//draw moon
function moon() {
    ellipse(mX, 70, 50, 50);
    mX += 0.3;
    //if moon goes further than screen, it goes back to original place
    if (mX > width) {
      mX = 50;

//draw mountain layers
function makeMountain() {

    //farthest mountain
    for (var x1 = 0; x1 < width; x1++) {
      var t1 = (x1 * terrainDetail1) + (millis() * terrainSpeed1);
      var y1 = map(noise(t1), 0, 1, 0, height);
      vertex(x1, y1);
    vertex(width, height)
    vertex(0, height)

    //middle mountain
    for (var x2 = 0; x2 < width; x2++) {
      var t2 = (x2 * terrainDetail2) + (millis() * terrainSpeed2);
      var y2 = map(noise(t2), 0, 1.5, 0, height);
      vertex(x2, y2 + 80)
    vertex(width, height);
    vertex(0, height);

    //closest hill
    for (var x3 = 0; x3 < width; x3++) {
      var t3 = (x3 * terrainDetail3) + (millis() * terrainSpeed3);
      var y3 = map(noise(t3), 0, 2, 0, 200);
      vertex(x3, y3 + 180)
    vertex(width, height);
    vertex(0, height);

// draw train and window
function train() {
    rect(0, 0, width, height);
    rect(0, 0, 50, height)
    rect(430, 0, width, height)
    ellipse(width / 2, 25, 10, 10)

    rect(10, 20, 50, 260, 10);
    rect(420, 20, 50, 260, 10);


//create old film style noise
function oldfilm() {
    for (i = 0; i < 5; i ++) {
      for (j = 0; j < 20; j ++) {
        xoff = xoff + 0.01;
        var offset = random(0, 300)
        var n = noise(xoff) * width;
        strokeWeight(random(0.1, 1));
        line(n * offset, 0, n * offset, height)
    ellipse(random(0, width), random(0, height), random(0, 2), random(0, 4))

//put cc on canvas. change the line everytime mouse is pressed
function quotes() {
    textFont("Times New Roman")
    var x = random(100, 101)
    text(lines[index], x, 240, 300, 100)

//mousepressed function
function mousePressed() {
    index +=1;
    if (index > 4) {
      index = 0;

I saw a trailer of movie “Murder on orient express” few days ago and I decided to choose this as a theme for this project. “Murder on Orient express” is one of my favorite detective novel and I can’t wait to see this movie! I put some old movie style -black & white and old film noise- because I wanted to create lonely and mysterious atmosphere of the train. I also put some of famous quotes from the novel.
Here are the sketch of idea and some inspiration photos from google.


Heather Kelley is a media artist and game designer. She is also co-founder of the Kokoromi-experimental game collective- and faculty of Entertainment Technology Center CMU. Yes! she is one of the faculty of the program I’m in right now. I have talked with her some times to get some feedback about my own project, she always gives good inspiration and critiques.  The video is about she talking about the public future of the game at TED. But here, I’m going to talk about one of her work ‘Superhypercube’.


‘Superhypercube’ is a VR first  person puzzler game launched for playstationVR. In this game, head tracking is critical to accomplish player’s goal. The theme for game is very retro feeling and she also brings the light and space art movement. This game is not only just game but also interactive art.

Heather Kelley(portrait)

As a game designer and media artist, she has created many and diverse works. You can check her tremendous work pieces on her website.

Heather Kelley’s website


Jiaxin wrote a blog post about CG artist Cornelius Dämmrich. His works look like awesome illustrations, but he uses multiple graphic softwares to create lighting, texture and shading. Since I have interest on concept art, this blog post just caught my eyes. Jiaxin said there is no specific story behind his work, but as I see, I can read the story behind it. Story doesn’t necessarily mean to have narrative. If it has detailed concept for background and atmosphere, it can be a story too. In his work, amount of details tell a lot of things. I love how he uses lighting to tell a story. Strong contrast from the image gives a feeling on isolation, and also antipation for something.

Here are more images I found on his websites.

Until the light takes us 2013(in progress)
Until the light takes us 2013(Final work)

Jiaxin’s post
Cornelius Dammrich’s website



var portrait;

//image loading from imgur
function preload() {
    var imageURL = "";
    portrait = loadImage(imageURL);

//setup loadPixel function here & setup frame Rate(speed)
function setup() {
    createCanvas(480, 480);

//draw stitches and ellipses changing there size and length depend on mouse position
function draw() {
    var px = random(width);
    var py = random(height);
    var px1 = random(width);
    var py1 = random(height);
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var col = portrait.get(ix, iy);
    var dia = round(constrain(mouseX / 5, 0, 15))
    var len = round(constrain(mouseY / 5, 0, 10))
    ellipse(px, py, dia, dia)
    strokeWeight(random(0.5, 2))
    line(px1, py1, px1 + len, py1 + len);
    line(px1 + len, py1, px1, py1 + len);


I choose one of the photos from a last year trip to japan. It was fun and interesting trip. So I wanted to make this pixel loading image to be shine as the memory.
Here are some images of portrait.


I found that she is very interesting as an artist.
she was born and raised in Iran during the war. That’s also why her work deals with the political, social and cultural contradictions we face every day. In early stage of her life, she took private creative writing course and learnt about the importance of telling personal narratives. She went to University of Tehran and was awarded her bachelor of arts in social science and media studies. And she moved to USA and attended two more university majoring Digital Media and Media art. She uses technology as part of a philosophical toolset to reflect on object; a poetic mean to document the personal and collective lives we live and our struggles as humans in the 21st century.

The 3D Additivist Cookbook (2016)
She Who Sees the Unknown (2017-2018)

These two images are some of her works that caught my eyes from her website. As a woman artist, she uses sexual images to create her work in non sexual ways. Mean by that, I feel that female’s body represented on her work are very bold and nude. I always love the way of female artist using their gender as a story of their work as it stand alone from other’s -usually male- perspectives.

She also uses her work to fight with political problems. In this video, she used 3D printer to create a sculpture to say something to IS. I admire her braveness and creativeness as an artist.

“Morehshin Allahyari’s website