sketch

//Xiaoying Meng
//Section B
//xiaoyinm@andrew.cmu.edu
//final project

var soulmate;//song
var fft;
var w;//width for fft visual
var play = false;
var amp;
var vol = [];

//load song
function preload(){
    soulmate = loadSound('https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/01-SoulMate-feat.-IU-online-audio-converter.com_.mp3');
}
function setup() {
    createCanvas(256,256);
    fft = new p5.FFT(0,64);
    w = width/64;//divide amp visual width
    amp = new p5.Amplitude();
}

function draw(){
    background(255,196,8);
    noStroke();
    //fft visual 
    var spectrum = fft.analyze();
    for (var i=0; i < spectrum.length; i++){
        var amp2 = spectrum[i];
        var y = map(amp2,0,256,height,0);//map fft to canvas height
        //draw rectangles for visual
        fill(255,255,255,200);
        rect(i*w,y-6,w-1,height - y);//rectangles showing different frequencies
        ellipse(random(0,260),y,2,2);//randomly placed dots for filter effect
    }

//amp visual
    push();
    var singlevol = amp. getLevel(); //add single volume to array
    vol.push(singlevol);
    stroke(255);
    noFill();
    for (var i=0; i < vol.length; i++){
        var m = map(vol[i],0,1,height,0);// map volume to canvas 
    }
    pop();
    if(vol.length > width-50){
        vol.splice(0,1);
    }
//d circle degree
    for(var d=0;d<=360; d+=2){

        x1=200+m*cos(d);
        y1=150+m*sin(d);
        x2=200+(m+40)*cos(d+50);
        y2=150+(m+40)*sin(d+50);
        x3=200+(m+80)*cos(d+10);
        y3=150+(m+80)*sin(d+10);            
        x4=200+(m+120)*cos(d+50);
        y4=150+(m+120)*sin(d+50);

        
        strokeWeight(0.3);
        stroke(255);
        //line between 1st and 2nd cimcle
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }
    //distinguish larger amplitude sounds with ellipse
    if (singlevol>0.1){
        ellipse(200,150,120,120);
        noFill();
        stroke(255);
        strokeWeight(2);
        ellipse(200,150,130,130);
    }
        drawButton(); //drawing button
}

function drawButton(){
    //changing between rectangle and triangle
    noStroke();
    fill(255);
    if (play === true){
        rect(10,height-26,20,20);
    }else{
        triangle(10,height-26,30,height-16,10,height-6);
    }
}

function mousePressed(){
    //playing and pausing 
    if(mouseX>10 & mouseX <30 && mouseY > height-26 && mouseY < height-6 ){
        if(play){
            soulmate.pause();
        }else{
            soulmate.play();
        }
        play =! play;
    }
}

I wanted to create sound visualization since we did not do much of this. My final project tries to connect music to visual and express a mood and atmosphere. I always feel cheerful when I listen to this song, Soulmate by Zico. Therefore I used yellow for the visuals. The visuals are created by analyzing the song’s frequency and amplitude. Simply click the play button to enjoy the music.

I’m thinking about creating an interactive visual program with sound effects. The project will have simple geometries falling from the top of the screen. The big black letters in my name are arranged randomly on the screen. The direction of the movement of the geometries is determined by the movement of the mouse. The geometries can bounce off, spin, or be contained by the letters. Music will respond to the bouncing of the geometries. When the users click on the geometries, they will enter different visuals, music, and mood according to the color of the geometries. For example, red will be passionate, blue will be calm and peaceful, and yellow will be lively. I’m interested in the interactive visuals and combining them with music in a harmonious way. I hope to practice my skills on working with sounds and visual effects since I did not work much with sounds during the class.

For the last Lookingoutwards, I’m looking at two projects by LIA and Beatrice Lartigue. The first project is Animal Imagination by LIA. This project uses images from nature and animals to generate abstract geometric patterns and colors. I admire this project because it uses simple geometries to represent the complex nature, creating a different form of art, a different kind of beauty. The second project is Z… by Beatrice Lartigue(only works on phones and tablets). Z… is an interactive project. The user controls the zipper to reveal the shape underneath. It is a neverending exploration and meditation. I admire this project because it is simple yet complex. It engages the user and creates a peaceful mood. Both projects use simple geometries and colors to create visuals, which is what I’d like to do for my final project too. I want to create something visually pleasing, complex yet simple.

click to change colors

sketch

//Xiaoying Meng
//B
//xiaoyinm@andrew.cmu.edu
//Project 11
var myTurtle;
var R = [255,200,150,100,50,0];
var G = [255,200,150,100,50,0];
var B = [0,50,100,150,200,255];
var i=0;

function triangles(){
    for (var i = 0; i < 3; i++){
        myTurtle.penDown();
        myTurtle.forward(5);
        myTurtle.left(120);
    }
}

function setup() {
    createCanvas(480, 400);
    background(0);
}
function mousePressed(){
    //change colors
    i = i+1;
    if (i===5){
        i=0;
    }
}
function draw() {
    myTurtle = makeTurtle(480-mouseX,400-mouseY);
    myTurtle.setColor(color(R[i],G[i],B[i]));
    myTurtle.penUp();

    for (var x=0; x< 100; x++){
        myTurtle.penUp;
        //go out
        var dist = x*2;
        myTurtle.forward(dist);
        
        //draw
        triangles();

        //go back
        myTurtle.penUp();
        myTurtle.left(180);
        myTurtle.forward(dist);
        myTurtle.left(180);

        //rotate angle based on location of mouseX
        var a =180*(3-sqrt(5))-mouseX/100;
        myTurtle.left(a);
    }
}


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){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
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,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
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;}

I wanted to create something interactive with the turtles. Allowing the users to draw with them. But to add some interesting factors, I made the turtle go the opposite direction of the mouse and the “pen” rotate according to mouseX.

I think this is a very interesting project using computational music. The project is called, Weather Thingy – Real time climate sound controller. This project is created by Adrien Kaeser at ECAL (Media and Interaction Design Unit).  Weather Thingy is a sound controller using real-time weather data to modify settings of music instruments. The controller has three weather sensors including a rain gauge, a wind vane, and an anemometer. The device translates weather data to data that musical instruments can use to generate sound. I really appreciate this project because it still allows the musicians to use their creativity since musicians can use the controllers to change the melody in real-time. It creates more potential for music creation, really focuses on the presence and capturing the moments. I guess the algorithm needs to turn the collected weather condition into data, then turn those data into music notes. There must be a system that links the two logically.

sketch

//Xiaoying Meng
//B
//xiaoyinm@andrew.cmu.edu
//Project 10
var ghosts = [];
var frames = [];

//loading background pictures
function preload(){

    var filenames = [];
    filenames[0] = "https://i.imgur.com/UFAJ1Wu.png";
    filenames[1] = "https://i.imgur.com/snYvk3n.png";
    filenames[2] = "https://i.imgur.com/WhWuQcd.png";
    filenames[3] = "https://i.imgur.com/u4YZIhW.png";
    filenames[4] = "https://i.imgur.com/WhWuQcd.png";
    filenames[5] = "https://i.imgur.com/snYvk3n.png";

    for ( var a = 0; a < filenames.length; a++){
        frames.push(loadImage(filenames[a]));
    }
}
function setup() {
    createCanvas(480, 480); 
    frameRate(10);
    // initial collection of ghosts
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        ghosts[i] = makeghost(rx);
    }
}


function draw() {
//display pictures to create motion
    push();
    scale(0.5);
    image(frames[frameCount % 6], -200,10);
    pop();

    updateAndDisplayghosts();
    removeghostsThatHaveSlippedOutOfView();
    addNewghostsWithSomeRandomProbability(); 


}


function updateAndDisplayghosts(){
    // Update ghost positions
    for (var i = 0; i < ghosts.length; i++){
        ghosts[i].move();
        ghosts[i].display();
    }
}


function removeghostsThatHaveSlippedOutOfView(){

    var ghostsToKeep = [];
    for (var i = 0; i < ghosts.length; i++){
        if (ghosts[i].x + ghosts[i].gWidth > 0) {
            ghostsToKeep.push(ghosts[i]);
        }
    }
    ghosts = ghostsToKeep;
}


function addNewghostsWithSomeRandomProbability() {
    // With a very tiny probability, add a new ghost to the end.
    var newghostLikelihood = 0.005; 
    if (random(0,1) < newghostLikelihood) {
        ghosts.push(makeghost(width));
    }
}


// move ghosts
function ghostMove() {
    this.x += this.speed;
}
    

// Draw ghosts
function ghostDisplay() {
    var ghostHeight = this.gHeight * 70; 

    push();
    fill(255,255,255,170); 
    noStroke(0);
    translate(this.x, height -400);
    //enlarge ghosts
    scale(1.5);

    //create ghost body
    beginShape();
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/5-10,ghostHeight/5+30);
    curveVertex(this.gWidth/5+5,ghostHeight/5+20);
    curveVertex(this.gWidth/5+25,ghostHeight/5+40);
    curveVertex(this.gWidth/5+50,ghostHeight/5);
    curveVertex(this.gWidth/5+100,ghostHeight/5);
    curveVertex(this.gWidth/5+80,ghostHeight/5-70);
    curveVertex(this.gWidth/5+50,ghostHeight/5-100);
    curveVertex(this.gWidth/5+25,ghostHeight/5-100);
    curveVertex(this.gWidth/5+5,ghostHeight/5-70);
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/8,ghostHeight/5);
    endShape();

    //creat ghost eyes and mouth
    fill(0,0,0,170);
    ellipse(this.gWidth/5+50,ghostHeight/5-70,this.gWidth/5+5,this.gWidth/5+5);
    ellipse(this.gWidth/5+30,ghostHeight/5-70,this.gWidth/5+5,this.gWidth/5+5);
    ellipse(this.gWidth/5+40,ghostHeight/5-20,this.gWidth/5+5,this.gWidth/5+20);


    pop();
}


function makeghost(birthLocationX) {
    var ghost = {x: birthLocationX,
                gWidth:random(70,80),
                speed: -1.0,
                gHeight:random(2,10),
                move: ghostMove,
                display: ghostDisplay}
    return ghost;
}

Since Halloween just passed, I thought I’d do something spooky. So I thought about ghosts. I found a gif of Simpson “can’t fall asleep” and I thought it was perfect for it.

I’m looking at Mary Franck’s work for this Looking Outwards. Mary Franck is a female artist who works on real-time media and computational design. She studied BA Studio Art: Conceptual and Information Art at San Francisco State University and MDesR: Emerging Systems Technology and Media at SCI-Arc. She now teaches workshops and taught Emerging Technology Studio at Standford University in 2016.

I’m very interested in this particular project of hers, called Diffuse Objects. This project explores digital ornamentation and showcases light and translucence of material. I think the contrast between glass and wood really makes this project interesting. In a gif on her website, we can see light moving through the glass balls, reflecting light waves. Digital exploration creates endless possibilities for ornamentations. The organic form of the wood makes it looks like the piece is growing out of the panel.

I am looking at Lan Wei’s Looking Outwards 4 Sound Art. It is about FUSE*FACTORY’s installation Multiverse. I do agree with Lan Wei that the visual and sound effects working together, making the piece very powerful. I think other than making people “think about life and the universe using their own imagination”, the piece also creates a contrast between the massive universe and the tiny existence that we are. I would argue that the piece almost requires the viewer to be alone with no one else present.  FUSE*FACTORY mentioned that the sound is also generated by a digital system. Both the sound and visuals are real-time, nonrepeating, just like the universe. One can argue that the randomness in this piece perfectly represents the multiverse. The sound effect in this piece makes it more engaging and powerful.

sketch

// Xiaoying Meng
//B
//xiaoyinm@andrew.cmu.edu
//Project 9

var IMG;//store image
var x; //Grid X 
var y; // Grid Y

//load image
function preload(){
    var ImageURL = "https://i.imgur.com/MMbPIxn.png"
    IMG = loadImage(ImageURL);
}

function setup(){
    createCanvas(480,480);
    //Get pixels from image
    IMG.loadPixels();
}

function draw(){
    background(0);
    drawGrid();
}

function drawGrid(){
    //Creating Grid
    for( x=0; x<480; x=x+10){
        for ( y=0; y<480; y=y+10){
            //Colors from image at x,y location
            var theColorAtLocationXY = IMG.get(x,y);
            //Distance between mouse location and circle location
            var d = dist(mouseX, mouseY,x,y);
            //Change circle size according to distance
            var col = map(d,0,480,10,2);
            noStroke();
            fill(theColorAtLocationXY);
            ellipse(x,y,col,col);
        }
    }
}

I used my selfie as the source image. I wanted to create something grid base and also interactive. So I change the sizes of the circles based on the distance between circles and mouse.

Nicky Case is a game designer who makes games that are designed to explain complex social issues.  His talk was very different from a lot of other speakers’. He started by talking about personal stories. He grew up in an abusive family in Singapore and his family did not react well when he came out as queer. He then used this personal experience to create a game helping others come out.

In his talk, he talked about telling stories and making interactive nonfiction about systems. His most famous work including The Evolution of Trust, Parable of the Polygons and A Better Ballot and Fireflies. I really appreciate The Evolution of Trust, this game really makes the player question their worldview and how trust works. By creating these games, Nicky hopes to change people’s heart and mind and makes people understand the world and each other better.