hmeng-final project

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Final Project

var mySoundA;
var amp;
var vol = [];

function preload() {
    //Load music Love Lockdown
    mySoundA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Love_Lockdown-online-audio-converter.com.wav");
    mySoundA.setVolume(2);
}

function setup() {
    createCanvas(500, 500);
    //define amplitude and frequency to visualize
    amplitude = new p5.Amplitude();
    fft = new p5.FFT();
    mySoundA.amp(0.2);    
    frameRate(200);
}

function draw() {
    //size of the button
    var bSize = 20;
    background(218, 227, 226);
    noStroke();

//Album art background
    fill(250);
    rect(0, 0, 100, 500);

    fill(128, 15, 120);
    rect(85, 0, 15, 45);
    
    fill(34, 32, 99);
    rect(85, 45, 15, 45);  
    
    fill(242, 235, 97);
    rect(85, 90, 15, 45);   

    fill(141, 214, 204);
    rect(85, 135, 15, 45); 

    fill(92, 182, 224);
    rect(85, 180, 15, 45); 

    fill(53, 156, 120);
    rect(85, 225, 15, 45); 

    fill(242, 182, 241);
    rect(85, 270, 15, 45); 
    
    fill(197, 204, 124);
    rect(85, 315, 15, 45); 

    fill(181, 103, 180);
    rect(85, 360, 15, 45); 

    fill(184, 44, 116);
    rect(85, 405, 15, 45);  
    
    fill(49, 6, 92);
    rect(85, 450, 15, 50);      

//PAUSE button
    fill(0);
    rect(10, height - 30, bSize, bSize);

//PLAY button
    fill(0);
    triangle(10, height - 60, 10, height - 40, 30, height - 50);

//Spectrum represents amplitude
    let spectrum = fft.analyze();
    noStroke();
    fill(255); 
    for (var i = 0; i< spectrum.length; i++){
        let x4 = map(i, 0, spectrum.length, 100, width * 3.5);
        let h4 = -height + map(spectrum[i], 0, 255, height * 0.95, 0);
        rect(x4, height, width / spectrum.length, h4 )
    }

//Beating heart graphic represents amplitude
    let level = amplitude.getLevel();
    let offset = map(level, 0, 1, 0, 80);

//draw first half of the heart    
    strokeWeight(2);
    stroke(220, 30, 30);
    fill(220, 30, 30);
    beginShape();
    vertex(240 - offset, 180 - offset);
    vertex(270 - offset, 165 - offset);
    vertex(300, 180 - offset);
    vertex(330 + offset, 160 - offset);
    vertex(355 + offset, 170 - offset);   
    vertex(375 + offset, 200);
    vertex(355 + offset, 240);
    vertex(330 + offset, 270);
    vertex(290, 335 + offset);
    vertex(275 - offset, 280);
    vertex(240 - offset, 240);    
    vertex(220 - offset, 210);
    vertex(240 - offset, 180 - offset);
    endShape();

//Draw second half of the heart
    strokeWeight(2);    
    stroke(115, 20, 15);
    fill(115, 20, 15);
    beginShape();
    vertex(300, 180 - offset);
    vertex(330 + offset, 160 - offset);
    vertex(355 + offset, 170 - offset);   
    vertex(375 + offset, 200);
    vertex(355 + offset, 240);
    vertex(330 + offset, 270);
    vertex(290, 335 + offset);
    vertex(305 + offset, 270);
    vertex(290 - offset, 245); 
    vertex(300 + offset, 215);        
    vertex(275 - offset, 200);
    vertex(300, 180 - offset);
    endShape();

//Five waveform that visualzie frequency
    //wave A
    let waveform = fft.waveform();
    noFill();
    beginShape(POINTS);
    stroke(150, 10, 10);
    strokeWeight(2);
    for(var i = 0; i < waveform.length; i++){
        let x0 = map(i, 0, waveform.length, 100, width);
        let y0 = map(waveform[i], - 3, 3, 0, height);
        vertex(x0, y0);
    }
    endShape();

    //wave B
    beginShape(POINTS);
    stroke(180, 10, 10);
    strokeWeight(2);
    for(var i = 0; i < waveform.length; i++){
        let x0 = map(i, 0, waveform.length, 100, width);
        let y0 = map(waveform[i], - 1.5, 1.5, 0, height);
        vertex(x0, y0);
    }
    endShape();
    
    //Wave C
    beginShape(POINTS);
    stroke(220, 30, 30);
    strokeWeight(2);
    for(var i = 0; i < waveform.length; i++){
        let x1 = map(i, 0, waveform.length, 100, width);
        let y1 = map(waveform[i], - 0.7, 0.7, 0, height);
        vertex(x1, y1);
    }
    endShape();

    //Wave D
    beginShape(POINTS);
    stroke(230, 50, 50);
    strokeWeight(1);
    for(var i = 0; i < waveform.length; i++){
        let x2 = map(i, 0, waveform.length, 100, width);
        let y2 = map(waveform[i], - 0.4, 0.4, 0, height);
        vertex(x2, y2);
    }
    endShape();

    //Wave E
    beginShape(POINTS);
    stroke(230, 90, 90);
    strokeWeight(0.5);
    for(var i = 0; i < waveform.length; i++){
        let x2 = map(i, 0, waveform.length, 100, width);
        let y2 = map(waveform[i], - 0.2, 0.2, 0, height);
        vertex(x2, y2);
    }
    endShape();

    //Title of the album
    push();
    translate(75, 250);
    rotate(- PI / 2);
    stroke(65);
    fill(65);
    textStyle(BOLDITALIC);
    textSize(25);
    text('808s & Heartbreaks', 0, 0);
    pop();
}

function mousePressed() {
    //play the song when buttonA is clicked
    if(mouseX > 10 & mouseX < 30 && mouseY > height - 60 && mouseY < height - 40){
        mySoundA.play();
    } 
    //pause the song when buttonB is clicked
    if(mouseX > 10 & mouseX < 30 && mouseY > height - 30 && mouseY < height - 10){
        mySoundA.pause();
    }     
}    

In this project, I intend to homage to my favorite artist of all time Kanye West. The project represents a visualization of his song Love Lockdown from his renowned album 808’s & Heartbreaks. The representation and graphic elements are inspired by the original album cover that designed by artist Kaws. While the beating heart visualizes the amplitude of the music, the waveforms which has a gradient of both color and stroke weight visualizes the frequency of the song. As the song goes, the frequency gets increasingly complicated and generates intriguing pattern.

For my final project, I am interested in making a sound visualization. In order to transfer the invisible sound into something visible. I intend to incorporate the project with a series of designed visual elements. By creating a scene based on artist Kanye West’s album cover <808s & Heartbreaks>, the project recomposes the visual features of the album art and display it based on different sound frequency and amplitude. (e.g: the heart shatters as the song goes)

Both the projects below are sound visualization art projects and they intrigue me as transferring invisible elements to visible. Mark Hasegawa-Johnson and Thomas Huang of the Human-Computer Intelligent Interaction research theme led a collaboration that developed new computational methods for creating graphical visualizations of large audio files. The visualizations allow the user to scan an audio recording at 200 times that of real-time, enabling them to discover unexpected, or anomalous, events.

Using an analogy to items sometimes hidden in video games by manufacturers called “Easter eggs”, the researchers employed the term to refer to these unexpected events. Hasegawa-Johnson said the software is designed to free up the analyst by having the computer perform certain tasks, and render the data visually, such as with a spectrogram. The technology is able, for example, to analyze thousands of sound sources in an urban environment

News Feed is a data visualization and sound art installation that reads major worldwide online newspapers, exposing the sentiment of news stories published. As new articles are published from major journals, VADER algorithm analyses and classifies them according to whether they are positive or negative in sentiment. These results are then interpreted and transformed into sound and visual meanings, making the audiovisual installation to perform accordingly with the data.

“This much I’m worth [The self-evaluating Artwork]” by female digital artist Rachel Are is a digital art piece that continually displays its sale value through a series of complex algorithms called “the endorsers”.   It is constructed with materials that have a history loaded with association. Implicated in the history of neon is its use in the sex trade, its cultural significance today is more commonly a trope of contemporary art.  It is both a functional object and spectacle seeking to question values, worth and algorithmic bias.​

hmeng-project-11

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-11-Generative Landscape

var sushi = [];

function setup() {
    createCanvas(480, 480);
    frameRate(50);
    //set an initial group of sushi
    for (var i = 0; i < 3; i++){
        var rx = random(width);
        sushi[i] = makeSushi(rx);
    }
}

function draw() {
    background(255, 200, 200);
    
    //the lattern
    fill(30);
    rect(60, 20, 40, 160);
    rect(78, 0, 5, 20)
    
    fill(235, 70, 70);
    stroke(235, 70, 70);
    strokeWeight(50);
    rect(60, 60, 40, 80)
    noStroke();
    
    //ribs on lattern
    for(i = 0; i < 8; i++){
        fill(120, 0, 0);
        rect(35, 57 + i * 12, 90, 1.5);
    }

    //the belt
    fill(50);
    rect(0, 320, width, 80);
    fill(180);
    rect(0, 400, width, 10);

    //the table
    fill(255, 237, 199);
    rect(0, 410, width, 190);

    //the plate
    fill(255);
    ellipse(170, 440, 300, 40);
    fill(220);
    ellipse(180, 435, 200, 20);
    fill(250);
    ellipse(186, 438, 180, 20);

    //thie chopsticks
    fill(250);
    rect(385, 435, 35, 10);
    fill(128, 55, 0);
    quad(400, 430, 405, 430, 455, 480, 443, 480);
    fill(128, 55, 0);
    quad(390, 430, 395, 430, 435, 480, 425, 480);

    updateSushi();
    removeSushiOutOfView();
    addSushi();
}


function updateSushi() {
    for (var i = 0; i < sushi.length; i++) {
        sushi[i].move();
        sushi[i].display();
    }
}

function removeSushiOutOfView() {
    //remove sushi from array if it's out of sight
    var sushiToKeep = [];
    for (var i = 0; i < sushi.length; i++) {
        if (sushi[i].x + sushi[i].breadth > 0) {
            sushiToKeep.push(sushi[i]);
        }
    }
    sushi = sushiToKeep; //remember the surviving sushi
}

function addSushi() {
    //with a very small probability, add a new sushi to the end
    var newSushiProb = 0.005; 
    if (random(0,1) < newSushiProb) {
        sushi.push(makeSushi(width));
    }
}

function sushiDisplay(){

    //rice
    stroke(this.c3);
    strokeWeight(10);
    strokeJoin(ROUND);
    fill(this.c3);
    rect(this.x, 350, this.breadth, this.height);

    //salmon on top of rice
    var top = 350 + this.height;
    var top2 = 350 + this.height - 5;
    stroke(255, this.c1, this.c2);
    fill(255, this.c1, this.c2);
    rect(this.x - 10, top, this.breadth + 20, 20);
    noStroke();
    fill(255, this.c1 + 50, this.c2 + 80);
    triangle(this.x, top2, this.x + 10, top2, this.x + 5, top + 15);
    triangle(this.x + 30, top2, this.x + 40, top2, this.x + 35, top + 15);
    triangle(this.x + 60, top2, this.x + 70, top2, this.x + 65, top + 15);
    
    //the kelp
    fill(0);
    rect(this.x + this.breadth / 2, top2, 30, -this.height + 5);
}

function sushiMove(){
    this.x += this.speed; 
}

function makeSushi(startX){
    var mySushi = {x: startX,
                speed: -1.0,        
                breadth: random(80, 120),
                height: -random(50, 70),
                c1: random(100, 150),
                c2: random(50, 90),
                c3: random(240, 255),
                move: sushiMove,
                display: sushiDisplay}
    return mySushi;
}

In this project, I intend to create this “rotation sushi” scene. Using generative drawing methods, sushi with different shapes, sizes and toppings come out and move along the belt.

For this week’s looking outwards, I researched The Commodore 64, which is an 8-bit home computer introduced in January 1982 by Commodore International. The computer is evolutionary as it features a programming music function. The computer stores a certain track of sound and computerized it into its memory. By labeling and storing the music file, user can mix different tracks and mix them with different pace and the same time to compose music. The project is in 1984 and it opens up the possibility of the intersection between computer and music. And it also changes people’s perspective of music composition from a traditional method.

hmeng-project-10

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-10-Interactive Sonic Sketches

var mySoundA;
var mySoundB;

function preload() {
    mySoundA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundA.wav");
    mySoundA.setVolume(2);

    mySoundB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundB.wav");
    mySoundB.setVolume(2);

    mySoundC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundC.wav");
    mySoundC.setVolume(2);

    mySoundD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundD.wav");
}

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

}
function draw() {
    var bSize = 16;

    background(255, 201, 54);

//draw the play station
    noStroke();
    fill(255);
//the body of the play station    
    rect(150, 100, 180, 270);
    
    rect(150, 90, 180, 10);
    rect(150, 370, 180, 10);
    rect(140, 100, 10, 270);
    rect(330, 100, 10, 270);
    
    ellipse(150, 100, 20, 20);
    ellipse(330, 100, 20, 20);
    ellipse(150, 370, 20, 20);
    ellipse(330, 370, 20, 20);

//the screen 
    fill(150);
    rect(160, 110, 160, 110);
    ellipse(160, 110, 16, 16);
    ellipse(320, 110, 16, 16);
    ellipse(160, 220, 16, 16);
    ellipse(320, 220, 16, 16);

    rect(160, 102, 160, 8);
    rect(160, 220, 160, 8);
    rect(152, 110, 8, 110);
    rect(320, 110, 8, 110);

    fill(30)
    rect(160, 110, 160, 110)

//Left button
    fill(0);
    rect(160, 280, 50, 10);
    rect(180, 260, 10, 50);

//Right button A
    fill(255, 0, 0);
    ellipse(290, 270, bSize);
//Right button B
    ellipse(290, 300, bSize);  
//Right button C
    ellipse(275, 285, bSize);
//Right button D
    ellipse(305, 285, bSize);    
}

function mousePressed() {
//fill the screen blue when button is clicked
    fill(138, 218, 255);
    rect(160, 110, 160, 110);

//play soundA when buttonA is clicked
    if(mouseX > 282 & mouseX < 298 && mouseY > 262 && mouseY < 278){
        mySoundA.play();
    }
//play soundB when buttonB is clicked    
    if(mouseX > 282 & mouseX < 298 && mouseY > 292 && mouseY < 308){
        mySoundB.play();
    }
//play soundC when buttonC is clicked
    if(mouseX > 267 & mouseX < 283 && mouseY > 277 && mouseY < 293){
        mySoundC.play();
    }
//play soundD when buttonD is clicked
    if(mouseX > 297 & mouseX < 313 && mouseY > 277 && mouseY < 293){
        mySoundD.play();
    }    
}

In this project, I explored the sound upload in p5js and mimicked the Nintendo Family Computer with corresponded game sound effects.

hmeng-project 09

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-09-Custom Pixel

var underlyingImage;

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

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(70);
}

function draw() {
    var x = random(width);
    var y = random(height);
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

//set randomized dimensions for the geometry
    var a1 = random(2, 10);
    var a2 = random(8, 15);
    var a3 = random(2, 15);
    var b1 = random(10, 20);
    var b2 = random(20, 50);

    noStroke();
    fill(theColorAtLocationXY);

//draw quadrians according to the image
    quad(x, y, x + a1, y - b1, x + a2, y, x + a3, y + b2);

//draw ellipses in random sizes along the mouse
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, random(5, 20));


}

//refresh the canvas when the mouse is pressed
function mousePressed(){
    clear();
}

In this project I chose a portrait of myself that was taken by someone else. To represent the portrait in a more interesting way, I explored different geometries and layered them together.

In this week’s Looking Outwards, I was interested in my classmate Fanjie Jin’s post about the randomness in art. The artist he researched is Cy Twombly. He creates large scale free handed calligraphy work using paint. According to the post, the artist creates his art pieces by completely relying on his intuitive feelings about composition, shape and colors. It brings up an interesting discussion about what is random and what is not in art. Even though the artist catches his intuitive stroke to create the paintings, he still maintain some degrees of control in his work since it was his hand and mind that determine the final work. I think what random about art is the artist come up with a methodology or workflow of creating and then he loses his control of his own workflow and let the invention does its own work without being affected by the artist himself.

link: https://n-e-r-v-o-u-s.com/about_us.php

Jessica Rosenkrantz and Jesse Louis-Rosenberg are the founders of N.E.R.V.O.U.S System Lab. They focused on a broad range of digital fabrication technique that engages computational design. Their design were strongly influenced and inspired by natural phenomena such as growing, florescence and other organic form. By incorporate generative thinking of these natural patterns and extract them into computational logic, they transfer the form into a wide range of design such as fashion garments, jewelries housewares and furnitures. One of their project studies the growing patterns of plants. They abstract these growing and categorize them into several directions for study such as “growing points”, “expanding lines” and “edge growing”. And by studying these discrete differential geometry, mass customization, differential growth, they form their unique design language and workflow. What I admire about their work is they reinterpret the organic and natural growing process and apply computational logic to them.