ikaneko 15-104 final project

Unfortunately I ran into trouble while trying to embed my project. Linked above is a zip file that contains my project and the sound files necessary to run it. Clicking the link should begin a download of the zip file. After extracting the file the project should be available just by running the index found in the template-all folder.

For my final project I created a set of wind chimes that the user can interact with. The user can swipe their mouse through the chimes, moving them and causing them to sound when they collide with each other. When the mouse hits a chime it will move in the direction that the mouse was moving with force proportional to how fast the mouse was moving as well. The chimes will also transfer momentum when they collide with each other. The pitches from left to right are C, D, E, G, A, C, and D. The sounds are sampled from a glockenspiel which sounds very similar to wind chimes. (If you swipe really hard and some chimes go off-screen don’t worry, they come back!)

For my final project I want to create wind chimes. They should be able to be pushed by the mouse and make sounds when they collide with each other. The individual chimes will be able to move and react independently to both the mouse and each other. They will be tuned to G, B, D, F#, A, C#, E because it makes a really pretty bright sound. The chimes should react realistically (swinging and losing momentum over time). Chimes will be able to hit each other and create sound without the mouse directly touching them. If I can get everything working, I would also like to find a way to make the amplitude of the sounds change depending on the velocity that the chimes were hit (this step is not going to be a priority though).

ikaneko Generative Landscape

var star = []; // stores the star objects
var ufo = []; // stores UFO's
var moonY = 400; // where the moon surface is


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

    // Pushes background stars on to array
    for(i = 0; i < 20; i ++) {
        star.push(makeStar());
    }

}

function draw() {
    
    noStroke();
    background(0);

    // Populates the background with stars of random location, size, and color
    for(i = 0; i < star.length; i ++) {
        var s = star[i];
        s.draw();
    }

    // Draws sun in the top right
    fill(255, 220, 70);
    circle(410, 50, 60);

    // Draws UFOs offscreen and has them travel left until they vanish
    for(u = 0; u < ufo.length; u ++) {
        var p = ufo[u];
        p.draw();
        p.move();
    }

    removeUFO(); // Removes UFOs when they get offscreen
    addUFO(); // Keeps the remaining UFOs


    // Draws the moon surface at the bottom of the canvas
    fill(220);
    rect(0, moonY, width, height - moonY);
    fill(180);
    ellipse(30, 460, 180, 40);
    ellipse(300, 420, 220, 25);
    

 }

// Returns the star object that gets pushed into the array
function makeStar() {
    return {x: random(0, 410), y: random(moonY) - 20, size: random(10),
        draw: drawStar, color: color(250, 200, random(255)) };
}

// Draws stars of random color, location, and size
function drawStar() {
    fill(this.color);
    circle(this.x, this.y, this.size);
}

// Returns the UFO object that gets pushed into the array
function makeUFO() {
    return {x: width + 100, y: random(moonY), width: random(60, 130),
        draw: drawUFO, color: color(random(255), random(255), random(255)),
        speed: random(-2, -0.5), move: moveUFO};
}

// Draws UFOs of random color, width, location, and speed
function drawUFO() {
    fill(this.color);
    ellipse(this.x, this.y - 10, this.width / 2, 30);
    fill(240);
    ellipse(this.x, this.y, this.width, 20);
}

// This makes sure that the screen isnt flooded with 60 UFOs a second
function addUFO() {
    // Small chance of adding a UFO
    var newUFOChance = 0.007;
    if (random(0, 1) < newUFOChance) {
        ufo.push(makeUFO());
    }
}

// Takes UFOs off the array when they go offscreen
function removeUFO() {
    var ufoToKeep = [];
    for(i = 0; i < ufo.length; i ++) {
        if (ufo[i].x > 0 - ufo[i].width) {
            ufoToKeep.push(ufo[i]);
        }
    }
    ufo = ufoToKeep;
}

// Moves each UFO from left to right
function moveUFO() {
    this.x = this.x + this.speed;
}

Although for this project I didn’t really create the illusion that the viewer is moving. I went by this project’s other name of “stuff passing by”. I wanted this project to feel like you were standing on the moon watching UFOs fly across space. UFOs of random color, size, and speed should fly across the screen from right to left. Also the stars in the background will be different each time you refresh the page. The hardest part about this project for me was keeping track of all the function that I had to make in order to fulfill the requirements of the project. Overall I’m pretty proud of how true to my original idea i was able to stay. While the sketch above is pretty simple, I think it translated very well to an animated project.

In the prompt it mentioned discussing new computational instruments. I asked my friend who is a member of CMU’s exploded ensemble what their favorite piece of tech that they used in the ensemble. What I found out about was a cool instrument called the Seaboard Rise.

What I admire about it is that it took one of the most harmonically capable instruments (the piano) and addressed its main weaknesses. Those being the the lack of different timbres and the limited expressiveness.

The seaboard is very akin to a super synthesizer. You can download and install different sounds that you want the instrument to produce and can change them real time which addresses the timbre problem I previously mentioned. It also allows for slides and vibrato, two very expressive aspects of music that are unavailable to real pianos.

The product was created by the company ROLI, so it hard to pinpoint a specific creator of the project. I think that the pure quality of the instrument shows how much the creators really cared about this and saw the effects it could have on the future of music.

ikaneko Portrait

var img;
var gScale = 0.14; // Scale the image size down
var size = 5; // Size of all the circles and squares

function preload() {
    var portrait = "https://i.imgur.com/xb4QYap.jpg";
    img = loadImage(portrait);
}

function setup() {
    createCanvas(img.width * gScale, img.height * gScale);
    background(255);
    frameRate(60);
    img.loadPixels();

}

function draw() {
    //Draws small circles and squares. The circles are tinted red and the squares are blue

    var cx = random(img.width); 
    var cy = random(img.height);
    var dotColor = img.get(cx, cy);
    var db = brightness(dotColor); // Gets the grayscale value of the pixel

    noStroke();
    fill(db + 150, db + 100, db + 100); // Turns all of the circles a red/brown
    circle(cx * gScale, cy * gScale, size);
    


    var sx = random(img.width);
    var sy = random(img.height);
    var squareColor = img.get(sx, sy);
    var sb = brightness(squareColor);

    fill(sb + 100, sb + 100, sb + 150); // Turns the squares blue
    square(sx * gScale, sy * gScale, size);



    var gx = random((mouseX - 15) / gScale, (mouseX + 15) / gScale); // creates a circle within 30 pixels of the mouse
    var gy = random((mouseY - 15) / gScale, (mouseY + 15) / gScale);
    greenDotColor = img.get(gx, gy);
    var gb = brightness(greenDotColor);

    fill(gb + 100, gb + 150, gb + 100); // Turns these circles green
    circle(gx * gScale, gy * gScale, size);

}

For this project I used a quick picture I took of myself as the base. I played around a bit with what I could do with the colors. Using the brightness feature I basically turned the picture black and white, then added in contrasting colors. Red circles and blue squares will randomly appear to start filling in the picture. Green circles will begin to fill in the picture in an area close to your mouse.

The project I chose was a visual representation of immigration trends done by Pedro M. Cruz and John Wihbey. Both of whom are researchers based at Northeastern University. This project shows immigration trends to the United States based off of the immigrants’ place of birth.

They stated that they were inspired by the way we can see trends in natural history through the rings of a tree. I thought this was a very clear and creative way to represent their data because of the way it shows large trends rather than specific data points.

Each ring of the tree represents 10 years and each color is a region that immigrants are from. The creators obviously took time to make sure it looked visually appealing, through their choice of color and texture. I was not able to transfer the text of the key over to this post, so I highly encourage anyone interested to follow the link posted below.

https://www.nationalgeographic.com/culture/2018/07/graphic-united-states-immigration-origins-rings-tree-culture/

Honestly I had very little idea of what I was doing or where I was going with this project. In the end I just experimented around with different equations until I found something that looked cool. The background of my project is a failed attempt at adding more complex curve. However I kind of liked the randomness that it added so I decided to keep it around. I added a cruciform on top of it which ended up having a very interesting shaped fill space. To finish it off I added a “+” to the center that would rapidly spin, making it look circular.

ikaneko Curves

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

function draw() {
  background(0);

  squiggles();

  drawCruciform();

  drawSpinner();
  

}

// function for background squiggles
function squiggles() {
  strokeWeight(10);
  var x;
  var y;
  var a = width / 2;
  var nPoints = map(mouseY, 0, height, height / 4, height / 2); // It jiggles with y movement
  
  push()
  translate(width / 2, height / 2); // Puts the jumble in the middle of the canvas
  beginShape();
  for (i = 0; i < nPoints; i++) {
    stroke(250, i, 200);
    var t = map(i, 0, nPoints, 0, 2 * PI);  
    x = a * cos(t * (1 - 2 * pow(sin(t), 2))); // Attempted equations
    y = a * sin(t * (1 + 2 * pow(cos(t), 2))); // These didn't turn out how I expected but kinda liked them
    vertex(x, y);
    }
  endShape();
  pop();
 }

 // function for the cruciform
  function drawCruciform() {
    var x;
    var y;
    var a = map(mouseX, 0, width, width / 8, 200); // They move with the mouse
    var b = map(mouseY, 0, height, height / 8, 200);
    var nPoints = 300;
    strokeWeight(20);
    fill(150, 100, mouseX * mouseY / 300); // The interesting fill shape changes color

    translate(width / 2, height / 2); // Centers it around the middle of the canvas
    beginShape();
    
      for(z = 0; z < nPoints; z ++) {
        t = map(z, 0, nPoints, 0, 2 * PI);
        x = a * (1 / cos(t)); // Cruciform equations
        y = b * (1 / sin(t));
        
        vertex(x, y);

      }
    endShape();

    
  }

  function drawSpinner() { // Adds two rectangles to the cent that spin with mouse movement
    fill(200, 250, 200);
    push();
    rotate(mouseX * 10); // Spins very rapidly
    rectMode(CENTER);
    rect(0, 0, 50, 120); // These are already using the same translation as the cruciform
    rect(0, 0, 120, 50);
    pop();
  }

A really cool project I found that uses randomness is a musical piece called “Birds on The Wires” by Jarbas Agnelli. This project likened a picture of birds on a telephone wire to notes on a staff. There just so happened to be 5 telephone wires which correspond to the 5 lines on a musical staff.

While the placement of the birds is not completely random (animals have their biases too) it was still completely out of the artist’s control where the birds decided to land.

This project does a good job at balancing the randomness with the creativity of the artist. While the birds gave him the notes, he freely decided the rhythm that notes would be played. Also in the audio of the piece, you can hear many embellishments in percussion, counter-melodies, and harmonies that where not decided by the birds.

ikaneko abstract clock

// Ian Kaneko
// Project-06

var h = 180; // candle height
var w = 40; // candle width
var b = 340; //y position of the bottom of the candle
var ww = 5; // wick width
var wh = 20; // wick height
var w2 = 150; // outer glow width
var h2 = 190; // outer glow height
var glow1 = 0; // outer glow color
var w3 = 80; // inner glow width
var h3 = 120; // inner glow height
var glow2 = 0; // inner glow color
var fw = 20; // flame width
var fh = 30; // flame height
var w4 = 450; // outer bottom glow width
var h4 = 80; // outer bottom glow height



function setup(){
    createCanvas(480, 480);
    frameRate(1);
    glow1 = color(250, 240, 150);
    glow2 = color(250, 170, 50);
        
}

function draw() {
    background(0);
    noStroke();

    glow1.setAlpha(100);
    glow2.setAlpha(130);
    
    h = 180 - (minute() * (160 / 60)); // Height decreases each minute

    for(i = 0; i < hour(); i ++) { // The number of background candles represents hours
        fill(glow1);
        ellipse(15 + (470 / 24) * i, 100, 20, 40);
        fill(glow2);
        ellipse(15 + (470 / 24) * i, 100, 12, 20);
        fill(250, 240, 240);
        ellipse(15 + (470 / 24) * i, 100, 5, 7); 

        }  
    

    //candle

    //The candle will decrease in height every minute and reset on the hour
    
    glow1.setAlpha(100); // Bottom glow of the candle
    fill(glow1);
    ellipse(width / 2, b, w4, h4);

    fill(220, 210, 210); //The candle itself
    rect(width / 2 - w / 2, b - h, w, h);
    ellipse(width / 2, b, w, 15);
    fill(250, 240, 240);
    ellipse(width / 2, b - h, w, 15);
    fill(0);
    rect(width / 2 - ww / 2, b - h - wh, 5, wh)

    
    fill(glow1); // Outer glow of flame
    ellipse(width / 2, b - h - wh, w2, h2);

    glow2.setAlpha(130); // Inner glow of flame
    fill(glow2);
    ellipse(width / 2, b - h - wh, w3, h3);

    fill(250, 240, 240); // Flame on the candle
    ellipse(width / 2, b - h - wh, fw, fh);


    //The candle flickers every second
    w2 = random(130, 170);
    h2 = random(180, 210);
    w3 = random(70, 90);
    h3 = random(110, 130);
    fw = random(18, 22);
    fh = random(30, 35);
    w4 = random(430, 480);
    h4 = random(75, 85);

   

    

}   

For this project the hardest part was trying to conceptualize a way of telling time that would not just look like a clock. I started to think about what kinds of things naturally change shape overtime. My original idea was an iceberg melting, then I thought of a moon waxing and waning. I ended up choosing a candle melting though because I liked the idea of playing with opacity to show it emitting light. While my clock doesn’t exactly document how many seconds have passed, it does react by randomizing the candle glow every second. The candle gets shorter every minute, and a candle in the distance is lit every hour.

ikaneko wallpaper

var sx = 100; // Horizontal position of first column center
var dH = 50; // Height of diamonds
var dW = 50; // Width from center of diamond to outside edge

function setup(){
    createCanvas(600, 600);

}

function draw() {
    background(250, 230, 230);
    noStroke();

    fill(230, 100, 100);

    for (var a = 0; a < 3; a ++) { // Creates small circles behind the diamonds
        for (var b = 0; b < 12; b ++) {
            ellipse(sx + 200 * a, (dH / 2) + (dH * b), dW, dH);
        }
    }

    // This creates 3 columns of diamonds
    for (var x = 0; x < 3; x ++) {
        for (var y = 0; y < 12; y ++) {
            fill(25 * y, 150, 220);
            quad(sx + 200 * x, dH * y, sx - dW + (200 * x), 
                dH / 2 + dH * y, sx + 200 * x, dH + dH * y,
                 sx + dW + (200 * x), dH / 2 + dH * y); 
        }
    }

    rectMode(CENTER);
    
    for (var z = 0; z < 4; z ++) { // 4 pink stripes
        rect(z * 200, 0, 50, height * 2);
    }

    
    for (var c = 0; c < 4; c ++) { // This creates the lumpy bubble pattern
        for (var d = 0; d < 30; d ++) {
            fill(220, 100, 15 * d);
            circle(c * 200, d * 25, 30);  
        }
        
    }


    noLoop();
}

For this project I was very inspired by the colors of the vaporwave backgrounds. I wanted to keep my design very vertical in nature, so I opted out of creating anything that draws the eyes horizontally. While the background color stays the same, the gradient of the diamonds can sometimes trick the eyes into seeing the lower half of the design as lighter.