Author: ikaneko@andrew.cmu.edu

Ian Kaneko LookingOutwards-04

Butterfly at Phipps Botanical Gardens

This weeks project comes from our very own CMU, specifically the experimental sound synthesis class. Two years ago, they did a project in collaboration with Phipps Botanical Gardens to create an intriguing soundscape a temporary butterfly exhibit.

I don’t know much about the specific algorithms that were used. However, I do know that they didn’t want to simply create ambient music that would stay on loop. Instead, they created soundscapes that constantly changed with the motion around them, meaning the same music would never happen twice.

The creators were still able to put lots of creativity into the music, even with the more unpredictable aspects of the project. Through the careful design of the synthesizers used, the tempo, and texture of the music they were able to orchestrate the exact feelings they wanted to evoke in the listeners.

Video by CMU detailing the project

Ian Kaneko-Project-04-String-Art

I really wanted to show huge amounts of contrast in my drawing, so I made the strings and background always be opposite of each other in terms of gray value. This also leads to a cool middle point where they are the same color.

ikaneko string art

//Ian Kaneko
//Project 4: String Art

var canvasWidth = 300;
var canvasHeight = 400;
var bkgrnd = 250;
var change = -1;

function setup() {
    createCanvas(canvasWidth, canvasHeight);
    
} 

function draw() {
    background(bkgrnd);
    
    strokeWeight(1);
    
    stroke(250 - bkgrnd);

    bkgrnd = bkgrnd + change;

    if(bkgrnd <= 0){
        change = -change;
    }

    if(bkgrnd > 250){
        change = -change;
    }

    

    for (i = 0; i < 50; i ++){ //diamond forms created by negative space
        line(0, 100 + i * 6, 300, 100 - i * 6); 
    }
    
    for (i = 0; i < 50; i ++){
        line(0, 300 - i * 6, 300, 300 + i * 6);
    }
    
    for (i = 0; i < 50; i ++){
        line(0, 100 - i * 6, 300, 100 + i * 6);
    }

    for (i = 0; i < 50; i ++){
        line(0, 300 + i * 6, 300, 300 - i * 6);
    }

    stroke(150, 100, 150); // colored borders

    for (i = 0; i < 40; i ++){ // purple "web" on top left
        line(0, 200 - 5 * i, i * 5, 0);
    }

    stroke(150, 100, 210);
    for (i = 0; i < 40; i ++){ // purple bottom right web
        line(0, 200 + 5 * i, i * 5, 400);
    }

    stroke(210, 100, 150); // top right web
    for (i = 0; i < 40; i ++){
        line(300, 200 - 5 * i, 300 - i * 5, 0);
    }

    stroke(210, 100, 210); // bottom right web
    for (i = 0; i < 40; i ++){
        line(300, 200 + 5 * i, 300 - i * 5, 400);
    }

    


}

Ian Kaneko Project – 03 – Dynamic Drawing

For this project I made something resembling a solar system. I think the different rotation rates of the circles is my favorite part about this.

ikaneko dynamic drawing

var canvasWidth = 640;
var canvasHeight = 480;
var angle = 0;
var r = 0;
var g = 0;
var b = 0;
var angle = 0;
var star = 0;


function setup() {
    createCanvas(canvasWidth, canvasHeight);
    
} 

// I used canvasWidth and height / 2 for the coordinates of the center of the canvas.

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

    // Background made of blue rectangles

    fill(180, 180, 230);
    rect(0, canvasHeight * 0.75, canvasWidth, canvasHeight / 4);
    fill(160, 160, 200);
    rect(0, canvasHeight / 2, canvasWidth, canvasHeight / 4);
    fill(140, 140, 180);
    rect(0, canvasHeight / 4, canvasWidth, canvasHeight / 4);
    fill(120, 120, 160);
    rect(0, 0, canvasWidth, canvasHeight / 4);

    // Big yellow circle in the middle

    fill(240, 200, 160);
    circle(canvasWidth / 2, canvasHeight / 2, mouseX / 2);
    fill(240, 220, 220);
    circle(canvasWidth / 2, canvasHeight / 2, mouseY / 2);

    // Moving brown rectangles that change with the mouseX

    fill(80, 30, 30);
    rect((canvasWidth / 2) - mouseX, canvasHeight * 0.75, canvasWidth, canvasHeight / 8);
    fill(120, 70, 70);
    rect((canvasWidth / 2) - mouseX, canvasHeight / 4, canvasWidth, canvasHeight / 8);
    fill(140, 90, 90);
    rect(mouseX - (canvasWidth / 2), 0, canvasWidth, canvasHeight / 8);

    // Orbiting ball

    fill(160, 60, 60);
    push();
    translate(canvasWidth / 2, canvasHeight / 2);
    rotate(radians(angle / 2)); // This one should rotate at a slower rate than the other one
    circle(canvasHeight / 4, 0, 100);
    pop();

    fill(240, 150, 150);
    push();
    translate(canvasWidth /2, canvasHeight / 2);
    rotate(radians(angle));
    circle(canvasHeight / 4, 0, 50);
    pop();
    angle = angle + 1;

    // Ball orbits the faster the mouse is to the center of the screen

    var far = (dist(mouseX, mouseY, canvasWidth / 2, canvasHeight / 2));
    
    fill(80, 40, 80);
    push();
    translate(canvasWidth / 2, canvasHeight / 2);
    rotate(radians(star));
    circle(canvasHeight / 4, 0, 70);
    pop();

    star = star + 5 -(far / 100); // It is /100 because the true distance made it spin way too fast.


    // The ball will pass under this bar
   
    fill(100, 50, 50);
    rect(mouseX - (canvasWidth / 2), canvasHeight / 2, canvasWidth, canvasHeight / 8);

    // Slanted bar that changes color (Using arbitrary large numbers to make sure they go off the canvas)

    fill(r, g, b);
    push();
    rotate(radians(35));
    rect(0, 0, 1000, 10);
    rect(0, 200, 1000, 10);
    rect(0, -200, 1000, 10);
    pop();

    r = mouseX
    g = mouseY
    b = mouseX / 2


}

Ian Kaneko-Project 02-Variable Face

For this project I did a simple cartoon face that I could exaggerate features on. I experimented a bit with curveVertex’s for the mouth and I think it turned out pretty good. The hardest part about this was deciding what needed to randomized and what I could lock in place.

ikaneko Variable Faces

// Ian Kaneko
// Section D
// ikaneko@andrew.cmu.edu
// Project-02 Variable Face


var headWidth = 250;
var headHeight = 250;
var noseWidth = 80;
var noseHeight = 80;
var noseY = 160 + noseHeight / 2;
var mouthTopLeftX = 175;
var mouthTopLeftY = 260;
var mouthTopRightX = 225;
var mouthTopRightY = 260;
var mouthBottomLeftX = 160;
var mouthBottomLeftY = 300;
var mouthBottomRightX = 240;
var mouthBottomRightY = 300;
var outsideBrowY = 120;
var insideBrowY = 120;


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

function draw() {
  background(140, 100, 80);
  noStroke();
  
  // Head
  
  fill(200, 230, 250);
  ellipse(200, 200, headWidth, headHeight);
  
  // Mouth
  fill(230, 200, 230);
    
    point(mouthTopLeftX, mouthTopLeftY);
    point(mouthBottomLeftX, mouthBottomLeftY);
    point(mouthTopRightX, mouthTopRightY);
    point(mouthBottomRightX, mouthBottomRightY);
  
  beginShape();
    curveVertex(mouthBottomLeftX, mouthBottomLeftY);
    curveVertex(mouthBottomLeftX, mouthBottomLeftY);
    curveVertex(mouthTopLeftX, mouthTopLeftY);
    curveVertex(mouthTopRightX, mouthTopRightY);
    curveVertex(mouthBottomRightX, mouthBottomRightY);
    curveVertex(mouthBottomRightX, mouthBottomRightY);
  endShape();
  
  // Nose
  
  fill(150, 200, 230);
  ellipse(200, 160 + noseHeight / 2, noseWidth, noseHeight);
  
  // Eyes
  
  fill(130, 100, 150);
  circle(150, 150, 30);
  circle(250, 150, 30);
  
  strokeWeight(7);
  stroke(150, 200, 230);
  line(120, outsideBrowY, 175, insideBrowY);
  line(280, outsideBrowY, 225, insideBrowY);
  
  // Randomize
  
}
function mousePressed() {
  headWidth = random(245, 290);
  headHeight = random(245, 290);
  mouthBottomLeftX = random(150, 180);
  mouthBottomLeftY = random(290, 310);
  mouthBottomRightX = random(230, 250);
  mouthBottomRightY = random(290, 310);
  noseWidth = random(30, 70);
  noseHeight = random(70, 180);
  outsideBrowY = random(100, 140);
  insideBrowY = random(100, 140);
}

12 Tone Serialism

This is less of a specific project but more of a musical movement that occurred in the mid 20th century. Serialism is the systematic composition of music that is completely unbiased in terms of tonal center. Where as most music is written in a key (B major, c minor, etc.), serialistic music equally values each of the 12 notes found in western music.

A key aspect of this form of music is the tone row. Tone rows are mathematically generated lists of the 12 chromatic notes. The only rule to these lists is that each note must appear exactly once. The most famous 12 tone composer was Arnold Schoenberg (1874-1951), he is also credited with the creation of the 12 tone system.

https://www.instructables.com/id/Create-a-Twelve-Tone-melody-with-a-Twelve-Tone-Mat/

This website goes into detail about one way of creating tone rows. While this is not the only way to go about doing it, it is one of the most well known methods.

Example of a tone row using all 12 chromatic notes

While the order of the 12 notes is usually random, the artistry of the composer manifests in how they use the notes presented to them. While most serialistic music sounds extremely jarring to first-time listeners, an incredible amount of thought and care goes into their arrangement.

Composers transform their given notes in many creative ways. Some examples would be transposition, retrograde, and inversions. Often, part of the fun of 12 tone pieces is trying to figure out what the composer did to transform their original tone row into the piece you are hearing.

Example from one of Schoenberg’s 12 tone piano pieces
One of Schoenberg’s orchestral works
(If you have never heard this type of music before it might be pretty surprising)

Looking Outward 01

One cool project that really inspires me is the Bach Harmonizer Doodler. As some may already know, it is an online application that lets you input any two bar melody of your choice and it will harmonize it using Bach’s chorales as reference.

This project was made by the Google Magenta and Google PAIR teams so there were likely many people who worked on it. To create it, they used a machine learning software to teach the AI to recognize patterns in between 306 of Bach’s chorales.

Google was likely inspired to do this by other AI-based “mini-game” projects, one that comes to mind is Akinator in which by you answering minimal questions, the software can guess any character you are thinking of.

While the software of the harmonizer is still far from perfect (if you have taken a harmony course at CMU you know), it is a cool step in computer generated music. As a composer myself, the concept of AI writing its own music is a little frightening but also extremely fascinating. This project inspires me to work harder at my art as to not be outdone by the growth of software such as this.

Bach Harmonizer Doodler

Face Project

ikaneko face project

function setup() {
    createCanvas(600, 600);
    background(200,200,255);

    noStroke();

    fill(250, 130, 170);
    ellipse(300, 300, 600, 600);

    fill(240, 220, 100);
    ellipse(300, 300, 500, 100);

    ellipse(300, 300, 100, 500);

    ellipse(120, 120, 100, 25);
    ellipse(120, 120, 25, 100);

    ellipse(480, 120, 100, 25);
    ellipse(480, 120, 25, 100);

    ellipse(120, 480, 100, 25);
    ellipse(120, 480, 25, 100);

    ellipse(480, 480, 100, 25);
    ellipse(480, 480, 25, 100);

    fill(250, 235, 213);
    ellipse(300, 300, 200, 220);

    fill(140, 185, 220);
    arc(300, 300, 200, 220, PI, 0);

    fill(240, 240, 200);
    arc(300, 300, 100, 100, PI, 0, CHORD);

    fill(140, 185, 220);
    rect(250, 285, 100, 15);

    fill(0);
    ellipse(265, 320, 15, 10);
    ellipse(335, 320, 15, 10);

    stroke(0);
    strokeWeight(3);
    line(270, 365, 330, 365);
   


   }

For this project, I quickly realized that I didn’t have the experience to be able to make anything very detailed or accurate. I decided to go for more of a cartoonish south park style self portrait.