Author: Yunzhou Song

yunzhous_final project_resubmission

I reposted this project so that audio file would work.

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Final Project

var trees = [];
var treeWidth = 50;
var treeHeight = 67;
var FL = 380;//y position of finish line
var numMiss = 0;
var combo = 0;
var score = 0;
var happy = "https://i.imgur.com/vDITqlq.png";//happy charlie brown
var backImg = "https://i.imgur.com/4QArmk0.jpg";//background image
var gamescreen = "https://i.imgur.com/kLeHBF4.jpg";//start screen
var CharlieBrown = "https://i.imgur.com/8OMKsmc.png";
var ChristmasTree = "https://i.imgur.com/mQ5fO5A.png";
var drawScreen = 0;//determines if start screen should be drawn
var mySnd;//background music
var count = 1; //framecount after game starts
var gameEnd = false;//determines if game has ended

function preload(){
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/We-Wish-You-A-Merry-Christmas.wav");//background music
    mySnd.setVolume(0.5);
    backgroundImg = loadImage(backImg);
    screenImg = loadImage(gamescreen);
    CLImag = loadImage(CharlieBrown);
    treeImg = loadImage(ChristmasTree);
    happyImg = loadImage(happy);
}

function setup() {
    createCanvas(480, 480);
    if (drawScreen == 0){//initial screen
        image(screenImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        fill(0);
        textSize(24);
        textAlign(CENTER);
        text("Click To Start", width/2, height - 40);
        text("CHARLIE BROWN'S", width/2, 50);
        text("CHRISTMAS TREE", width/2, 80);
    }
}

function draw() {
    if (count % 3150 == 0){//music ends
        gameEnd = true;//game ends
        text("Press R To Restart", width/2, height - 40);
        count = 1;//reset count to 1
    }

    if (drawScreen == 0){
        //nothing happens
    }
    else if (gameEnd == false) {//if not initial screen, and game hasn't end, do following
        count += 1;//count frames after game starts
        print(count);
        image(backgroundImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        line(0, FL, width, FL);//finish line
        fill(0);
        textSize(20);
        text("Combo " + combo, width - 60, 30);
        text("Score " + score, width - 50, 60);
        treeFunctions();//trees dropping from sky
        addTree();
        var CLx = mouseX - 20;
        if (CLx > width){
            CLx = width - 50;
        }
        image(CLImag, CLx, FL);//charlie brown image with cursor
    }

}

function keyPressed(){
    if (keyCode == 82){//if R is pressed
        gameEnd = false;//gameEnd becomes false, game restart
        mySnd.play();//music restart
    }
}

function mousePressed(){//after mouse is pressed, draw screen becomes 1,
                        //initial screen disappears and music starts playing
  if (drawScreen == 0) {
    drawScreen = 1;
    mySnd.play();
  }
}

function makeTree(bx, by){//make tree object
    var tree = {x: bx,
                y: by,
                w:treeWidth,
                h:treeHeight,
                speed: 3,
                move: treeMove,
                display: treeDisplay,
                click:treeClick,
                miss:treeMiss,
                died: false,//after clicking on the tree, the tree dies and disappear
                counted: false,
                countedMiss: false,
    }
    return tree;
}


function treeDisplay(){//draw tree
    if(!this.died) {
        image(treeImg, this.x, this.y);
    }
}

function treeMove()  {
    this.y += this.speed;//move trees by speed

    //change tree speed and the game gets harder
    if (count > 560 & count < 1100) {
        this.speed = 5;
    }
    if (count > 1100 & count < 2000) {
        this.speed = 6;
    }
    if (count > 2000 & count < 3150) {
        this.speed = 7;
    }

}

function treeFunctions(){//update tree's position and display them
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
        trees[i].click();
        trees[i].miss();
    }
}

function addTree(){//add new trees
    var spacing = 40;

    if (count % 35 == 0) {
        trees.push(makeTree(30 + random(10) * spacing, 0));
    }

}

function treeClick(){
    //if click on tree, tree disappear
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && mouseY > this.y && mouseY < this.y + this.h){
        this.died = true;
    }
    //if click on tree at the finish line, get one point
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && this.y > FL - this.h && this.y < FL + this.h && !this.counted){
        image(happyImg, width - 50, FL);
        this.counted = true;
        combo += 1;
        score += 1;
    }
}

function treeMiss(){
    //if miss one tree, combo starts from 0
    if (this.y >= FL + 5 & !this.countedMiss && !this.counted){
        numMiss += 1;
        combo = 0;
        this.countedMiss = true;
    }
}

My final project a game called “Charlie Brown’s Christmas Tree”. Christmas trees would randomly drop form the sky and if the player clicks on the trees, they would disappear. However, the only way the player can get score is by clicking on the tree when it’s at the finish line. If the player continuously getting the tree he or she will receive a combo. If he or she missed one tree the combo would start from zero. The flash start with an start screen and the game only starts when players click on the screen. The game ends when the music ends, and if the players press “R” it will restart.

yunzhous-final project

To view the project please go to new

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Final Project

var trees = [];
var treeWidth = 50;
var treeHeight = 67;
var FL = 380;//y position of finish line
var numMiss = 0;
var combo = 0;
var score = 0;
var happy = "https://i.imgur.com/vDITqlq.png";//happy charlie brown
var backImg = "https://i.imgur.com/Yn5c4pP.jpg";//background image
var gamescreen = "https://i.imgur.com/dboLTcb.jpg";//start screen
var CharlieBrown = "https://i.imgur.com/8OMKsmc.png";
var ChristmasTree = "https://i.imgur.com/mQ5fO5A.png";
var drawScreen = 0;//determines if start screen should be drawn
var mySnd;//background music
var count = 0; //framecount after game starts

function preload(){
    mySnd = loadSound("We Wish You A Merry Christmas.wav");//background music
    mySnd.setVolume(0.5);
    backgroundImg = loadImage(backImg);
    screenImg = loadImage(gamescreen);
    CLImag = loadImage(CharlieBrown);
    treeImg = loadImage(ChristmasTree);
    happyImg = loadImage(happy);
}

function setup() {
    createCanvas(680, 480);
    if (drawScreen == 0){//initial screen
        image(screenImg, 0, 0);
        textSize(22);
        textAlign(CENTER);
        text("Click To Start", width/2, height - 40);
    }
}

function draw() {
    if (drawScreen == 0){
        //nothing happens
    }
    else{//if not initial screen, do following
        count += 1;//count frames after game starts
        image(backgroundImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        line(0, FL, width, FL);//finish line
        fill(0);
        textSize(20);
        text("Combo " + combo, width - 60, 30);
        text("Score " + score, width - 50, 60);
        treeFunctions();//trees dropping from sky
        addTree();
        image(CLImag, mouseX - 20, FL);//charlie brown image with cursor
    }
}

function mousePressed(){//after mouse is pressed, draw screen becomes 1,
                        //initial screen disappears and music starts playing
  if (drawScreen == 0) {
    drawScreen = 1;
    mySnd.play();
  }
}

function makeTree(bx, by){//make tree object
    var tree = {x: bx,
                y: by,
                w:treeWidth,
                h:treeHeight,
                speed: 3,
                move: treeMove,
                display: treeDisplay,
                click:treeClick,
                miss:treeMiss,
                died: false,//after clicking on the tree, the tree dies and disappear
                counted: false,
                countedMiss: false,
    }
    return tree;
}


function treeDisplay(){//draw tree
    if(!this.died) {
        image(treeImg, this.x, this.y);
    }
}

function treeMove()  {
    this.y += this.speed;//move trees by speed
}

function treeFunctions(){//update tree's position and display them
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
        trees[i].click();
        trees[i].miss();
    }
}

function addTree(){//add new trees
    var spacing = 50;

    if (count % 50 == 0) {
        trees.push(makeTree(30 + random(12) * spacing, 0));
    }

}

function treeClick(){
    //if click on tree, tree disappear
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && mouseY > this.y && mouseY < this.y + this.h){
        this.died = true;
    }
    //if click on tree at the finish line, get one point
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && this.y > FL - this.h && this.y < FL + this.h && !this.counted){
        image(happyImg, width - 50, FL);
        this.counted = true;
        combo += 1;
        score += 1;
    }
}

function treeMiss(){
    //if miss one tree, combo starts from 0
    if (this.y >= FL + 5 & !this.countedMiss && !this.counted){
        numMiss += 1;
        combo = 0;
        this.countedMiss = true;
    }
}

My final project a game called “Charlie Brown’s Christmas”. Christmas trees would randomly drop form the sky and if the player clicks on the trees, they would disappear. However, the only way the player can get score is by clicking on the tree when it’s at the finish line. If the player continuously getting the tree he or she will receive a combo. If he or she missed one tree the combo would start from zero.

I used a local server. Therefore, to load the html file, you would need to:

  1. download the zip file and unzip yunzhous_final project
  2. set up a local server
  3. open html file in google chrome

yunzhous-LookingOutward-12

I will start with Deemo, a game where I got inspiration for the final project from. This game is done by Rayark. This music game allows user to play the correct nodes that correspond with the background music. What I really admire about the project is that it creates a background story for players. The player play the game to help a tree grow, and the growth of the tree helps a little girl in the game. The visual effect and music choice are all great.  I attached an video below demonstrating this game. However, I think the game has one weakness. It might be better if the player were able to do more actions rather than simply pressing the screen at the correct time.

To explore more possible interaction with simple geometries, I looked at project Three Drops by Scott Snibbe. This interactive exhibition allows people to interactive with virtual water in three different ways: showering, stopping water drops from reaching the ground, and attracting water molecules. Even a simple element, water, can exist in many phases. In my project, I will try to incorporate more ways to interactive with the computer program.

Deemo by Rayark

Three Drops by Scott Snibbe. Read more here.

 

yunzhous- Final-Project-Proposal

My inspiration for the final project comes from my favorite music game, Deemo, by Rayark company. I’ve always interested in game design and this time I want something that involves with sound. In this game, a background music will be played since the start. Bubbles will randomly appear from the top of the screen and move downward, each representing a node. The sound of the node will be played if bubbles are clicked. Players are expected to click on the bubble only when its center is roughly at the finish line, so the node played will correspond to the background music. If the bubble is clicked at the correct time, it will shine and the player gets one point. If the player continuously getting the bubble at the right time, the combo number will be displayed at the top right corner.

The speed of the bubbles are constant. I will manually count and arrange when the bubble should appear and be clicked, to correspond to the background music. Sounds for different nodes will be loaded to p5js, and the bubbles will shine when certain conditions are met (clicked at the right time, using if statement). The time will probably be counted using millis() function.

If time allows I will try to add some background story to this game, making it more appealing.

yunzhous-LookingOutward-11

Houdini1

Houdini 2 

Houdini3

Simon Russell’s project, The Creatures of Prometheus, is a series of Generative visualisation of Beethoven’s ballet. Houdini, the algorithm used to generate visual effects, reads the notation and emits particles using the pitch to derive their height and amplitude to derive their speed. The color of the particles emitted is also affected by the volume of each node.
This project might not be the most visually compelling computational music. However, I admire this attempt to break down, analyze and display aspects of music through an accurate function. Math is involved in the process of visualizing, rather than feelings or emotion. I think this is the true visualization of music.
For the algorithm, I’m guessing it can take a piece of music, analyze and turn it into some sort of data, and use the data to generate geometries according to the user’s setting.
Read more here

yunzhous-project-11

forgot to put my code up:
sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Project-11

var col;//coolor of turtle
var myTurtle = [];//array to store turtles
var degree = 20;//turn by degree

function setup() {
  createCanvas(480, 480);
  background(220);
  frameRate(10);
}

function draw() {
  for(var i = 0; i < myTurtle.length; i++) {
    col = map(mouseX, 0, width, 0, 255);//color according to mouseX
    myTurtle[i].setColor(col);
    myTurtle[i].setWeight(2);
    myTurtle[i].penDown();
    myTurtle[i].forward(20);
    myTurtle[i].right(degree);
    degree += 2;//degree constantly changing
  }
}

function mouseDragged() {
  myTurtle.push(makeTurtle(mouseX, mouseY));//make new turtle when mouse is pressed
}



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 make something that make turtles along the curve that mouse is dragged. Then the turtle automatically moves and create random visual effect. The color of the stroke would also be controlled by mouseX, giving the image a little variety. I intentionally used only greyscale to create a snow&tree effect (because I really want it to snow!)

yunzhous-LookingOutward-10

The projected I chose for LookingOutward10 is Poly Thread by Jenny Sabin. Jenny Sabin is an architectural designer that investigates the intersections of architecture and science, and applies the concepts of math and biology to material structure. Sabin is an associate professor and Director of Graduate Studies in the Department of Architecture at Cornell University. She is a member of the Nonlinear Systems Organization and co-founder of Sabin+Jones LabStudio.
The Poly Thread project is mathematically generated and inspired by cellular networks. The material used, the fabric structure, is digitally knitted, and connected and held together by fiberglass tubing.
I like the project because its form is generate by computer but inspired from the form of cells, which is nature. It is organic and dynamic. As an architectural installation, this form can be applied to architectural design such as facade.
You can read more here

(Poly Thread)

(Poly Thread Detail)

(Poly Thread Exhibition)

yunzhous-project-10

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Project-10

var waves = [];//create an array to hold waves
var mountainPeak1 = 0.03;
var mountainSpeed1 = 0.0003;//speed of mountain
var mountainPeak2 = 0.01;
var mountainSpeed2 = 0.0005;//speed of mountain
var boat;
var lighthouse;
var bX = 480;//x position of boat

function setup() {
    createCanvas(480, 440);
    //create initial collection of waves
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        waves[i] = makeWave(rx);
    }
}

function preload() {//load images of boat and lighthouse
    boat = loadImage("https://i.imgur.com/7ehKMrX.png"); // boat image
    lighthouse = loadImage("https://i.imgur.com/8foDjEk.png")//lighthouse image
}

function draw() {
    sun();//draw sun
    mountain1();//draw mountain1
    mountain2();//draw mountain2
    waterBackground();//draw water

    image(lighthouse, 350, height/2);//draw lighthosue
    //draw waves
    updeteAndDisplayWave();
    addWave();
    removeWaves();
    //draw boat
    makeBoat();
}

function waveDisplay(wave){ //draw waves
    var radius = 10;//radius increment of wave
    fill(255);
    stroke(39, 55, 81);
    strokeWeight(2);
    //create 4 rows of waves
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 80, this.y - 60, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 20, this.y - 40, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 50, this.y - 20, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x, this.y, this.number*radius, this.number*radius, PI, 2*PI);
    }

}

function makeWave(){
    var wave = {x: width,
                y: height,
                number: round(random(2,8)),//control size of each wave
                speed: -1,
                breadth: 50,
                move: waveMove,
                display: waveDisplay
    }
    return wave;
}

function waveMove() {
    this.x += this.speed;//wave moves by the speed
}

function updeteAndDisplayWave(){//update wave's position and display them
    for (var i = 0; i < waves.length; i++){
        waves[i].move();
        waves[i].display();
    }

}

function removeWaves(){//remove waves that's outside of canvas
    var keepWaves = [];
    for (var i = 0; i < waves.length; i++) {
        if (waves[i].x + waves[i].breadth > 0) {
            keepWaves.push(waves[i]);
        }
    }
    waves = keepWaves;

}

function addWave(){//add new waves
    var waveChance = .05;
    if (random(0, 1) < waveChance) {
        waves.push(makeWave(width));
    }

}

function makeBoat(){
    bX -= .5;
    image(boat, bX, 3*height/4);
    if (bX < -40) { // if boat exits left, make it come in right
        bX = width;
    }
}

function mountain1(){//make mountain1
    noStroke(); 
    fill(21, 40 ,73);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak1) + (millis() * mountainSpeed1);
        var y = map(noise(t), 0,1, height/5, height/2);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function mountain2(){//make mountain2
    noStroke(); 
    fill(50, 70, 104);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak2) + (millis() * mountainSpeed2);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function waterBackground(){
    fill(91, 141, 176);
    rect(0, 2*height/3, width, height/3);
}

function sun(){
    //gradient background
    for (var i = 0; i < 480; i++) {
        strokeWeight(2);
        stroke(94 + 1.5 * i, 120 + i, 158 + 0.5 * i);
        line(0, i, width, i);
    }
    //sun
    noStroke();
    fill(254, 255, 241);
    ellipse(350, 90, 120, 120);
}

I wanted to create a landscape with ocean, water, sun, lighthouse, mountain, and to for making it more playful, a paper boat. I started with making mountains using the noise function (the terrain sample code). I used a gradient color for the background using layers of lines. I used two images for the light house and the paper boat. I created waves as objects, and continuously adding waves to the canvas. I create several rows of waves and offset them to make the drawing more dynamic.

PS.I wanted to upload an image of my sketch but for some reason my phone keeps taking images filled with grey color…

yunzhous-LookingOutward-09

Post: Isabella Ouyang, Looking Outwards 06

For looking outward 09, I chose Takashi Murakami’s artwork because his work shows me good art doesn’t need too much complexity. When I think about computer-generated art I always think of complicated shapes, colors, visual effect, etc. However, as Isabella says in her post: “after scaling, coloring, placing “randomly”, it can create a sense of depth out of the superflat drawing”, even simple single prototype (the flower) can make appealing effect.

Also, the “randomness” used in the art is not completely random. Takashi Murakami must have constrained the size of the flowers, saturation of the color and composition deliberately. For example, there are always some small to medium sized white flower in between colorful flowers to balance out the various color and create harmony. I think that’s very important.

(Takashi Murakami, Flowers, flowers, flowers, 2010)