Author: junfanc@andrew.cmu.edu

Shirley Chen – Final Project – Little Red Riding Hood

For the final project I create a game based on the story of “Little Red Riding Hood”. In this game, the user use mouse to control the position of Little Red to avoid a group of wolves running randomly. The Little Red should try to get more apples, and for each apple she gets the user can earn 10 points. There is another snake which wants to eat Little Red’s apple, so Little Red should get the apple before the snake reaches it. If the snake eats the apple before Little Red reaches it, the user will lose 10 points. The game would be over if the wolves hit Little Red. Little Red’s grandma is very worried about her granddaughter at the bottom right corner. This project is very fun and I enjoy the process of solving different problems that I met.
Have fun playing it! 🙂

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// FINAL PROJECT

var xWolf = [];
var yWolf = [];
var dxW = [];
var dyW = [];
var bushesX = [];
var bushesY = [];
var appleX = 300;
var appleY = 300;
var girl;
var wolf;
var bushes;
var apple;
var grandma;
var count = 0;
var snakeX = 590;
var snakeY = 0;
var textAppear = false;


function preload(){
  girl = loadImage("https://i.imgur.com/X6Tfuu7.png");
  wolf = loadImage("https://i.imgur.com/80Jv2F4.png");
  grass = loadImage("https://i.imgur.com/zTPmG8i.png");
  apple = loadImage("https://i.imgur.com/dgBmn61.png");
  snake = loadImage("https://i.imgur.com/QpLwiaZ.png");
  snakeflip = loadImage("https://i.imgur.com/aGK7Aa3.png");
  bushes = loadImage("https://i.imgur.com/mfdC2Ny.png");
  grandma = loadImage("https://i.imgur.com/3dTTlzG.png");
}


function setup(){
  createCanvas(600, 600);
  imageMode(CENTER);
// Randomly select bushes' location
  for (var i = 0; i < 10; i++){
    bushesX.push(random(20, 580));
    bushesY.push(random(20, 580));
  }
// Randomly select wolf's starting location and speed
  for (var i = 1; i < 15; i++) { 
    xWolf[i] = random(0, width);
    yWolf[i] = random(0, height);
    dxW[i] = random(-4, 4);
    dyW[i] = random(-4, 4);
  }
}


function draw(){
  background(229, 255, 229);
// Draw the bushes as background
  for (var i = 0; i < 10; i ++){
    image(bushes, bushesX[i], bushesY[i]);
  }
// Make the wolves move randomly in the canvas
  for (var i = 1; i < 15; i ++){
    image(wolf, xWolf[i], yWolf[i]);
    xWolf[i] += dxW[i];
    yWolf[i] += dyW[i];
// Make the wolves bounce back if they hit the boundary of the canvas 
    if (xWolf[i] + 10 > width || xWolf[i] - 10 < 0){
      dxW[i] =- dxW[i];
      }
    if (yWolf[i] + 15 > height || yWolf[i] - 15 < 0){
      dyW[i] =- dyW[i];
      }
// Create a girl controled by user's mouse
    image(girl, mouseX, mouseY);
// When the girl hits a wolf the game is over
    if (xWolf[i] > mouseX - 10  & xWolf[i] < mouseX + 10){
      if (yWolf[i] > mouseY - 10 && yWolf[i] < mouseY + 10){
        gameOver();
      }      
    }
  }
// Draw an apple with starting location (300, 300)
  image(apple, appleX, appleY);
// Create a snake that will move to eat apple
  var dx = appleX - snakeX;
  var dy = appleY - snakeY;
  snakeX += dx / 70;
  snakeY += dy / 70;
  image(snake, snakeX, snakeY);

// If the girl gets apple, adds 10 point to the score
// If the snake eats apple, minus 10 point to the score
  fill(255, 153, 175);
  textSize(15);
  text("SCORE: " + str(count), 20, 30);
  if (girlGetsApple()){
    pickAppleLocation(); 
    count +=10;
  }
  if (snakeGetsApple()){
    pickAppleLocation();
    count -=10;
  }
// Grandma is very worried about her granddaughter
  image(grandma, 540, 500);
}

// Randomly pick apple's location
function pickAppleLocation(){
  appleX = random(10, 290);
  appleY = random(10, 290);
}

// If the girl or snake gets apple,
// the apple will change to another location
function girlGetsApple(){
  var d = dist(mouseX, mouseY, appleX, appleY);
  if (d < 13){
    return true;
  }
  else{
    return false;
  }
}
function snakeGetsApple(){
  var s = dist(appleX, appleY, snakeX, snakeY);
  if (s < 13){
    return true;
  }
  else{
    return false;
  }
}

// When the gram is over, screen will appear "GAME OVER!"
// and the game will stop
function gameOver(){
  textAppear = true;
  fill(255, 153, 175);
  textSize(30);
  textStyle(BOLD);
  textFont('Arial');
  text("GAME OVER!", 200, 300);
  noLoop();
}

Shirley Chen-Final-Project-Proposal

For my final project, I want to create an interactive game for the players to create music with different combinations of instruments, beats, and sound effects. The players can select and manage the number of layers of sound  and the types of sound they want to put in to the performance. It will involve the previous lessons about loading sounds.  I got the inspiration from a music app that I introduced in Looking Outward called incredibox. 

Shirley Chen-LookingOutwards-12

For my project, I want to integrate music or beat making into it. I have several apps for beat and music making that I really like. As precedents for my final project, I did research for two of them.
The first one is Incredibox  . It is a music app and website that the player can create different songs or beats by adding or removing people from a band. Each person represents an instrument or sound effect, including percussion, voices, guitar, piano, etc. By managing this band the player can create very cool mixtures. It really attracts me because it allows the players to create an A cappella from instruments and sound effects, creating amazing and unexpected mixture of layers of sounds.

 

The other precedent I really like is a beat making app called iMASCHINE 2. It is  a hardware/software digital audio workstation developed by Native Instruments. Users assign drum kits, instruments and sounds from the included library, to each of the controller’s 16 pads, and can manipulate sounds further by applying effects and plugins. The software also includes tools to capture and manipulate audio samples in real time.

https://www.native-instruments.com/en/products/maschine/maschine-for-ios/imaschine-2/

 

Shirley Chen-Project-11-Composition

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-11


var myTtl = [];
var distance = 0;
var col;

function setup() {
  createCanvas(480, 480);
  background(100, 0, 0);
  frameRate(10);

}

function draw(){
  for(var i =0; i < myTtl.length; i++){
//Two geometries will be drawn alternatively according to the number of mouse click
//First geometry
    if (i % 2 == 0){
      col = map(mouseY, 0, height, 0, 255);
//Color will change according to mouseY
      myTtl[i].setColor(col);
      myTtl[i].setWeight(1);
      myTtl[i].penDown();
      myTtl[i].forward(distance);
      myTtl[i].right(45);
      distance += 1;
//The geometry will become larger and larger
    }
//Second geometry
    else{
      col = map(mouseY, 0, width, 0, 255);
      myTtl[i].setColor(col);
      myTtl[i].setWeight(1);
      myTtl[i].penDown();
      myTtl[i].forward(distance);
      myTtl[i].right(70);
//The direction of drawing the geometry goes backward
      distance -= 1;

    }
  }
}

function mouseClicked(){
//Draw a new geometry per mouse click
  myTtl.push(makeTurtle(mouseX, mouseY));
}



/////////////////////////////////////////
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(144, 255 , 210),
                  weight: 4,
                  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;
}

For this project, I use turtle to draw two different geometries. They appear alternatively according to the number of mouse clicked. As the geometries are drawn, the color of stroke changes gradually. And the starting color is based on the position of mouse X. Whenever the number of mouse clicked is even, the direction of the stroke would go backward so that the geometries that are already drawn will change color again. This project is a great practice for object command.

Shirley Chen-Looking Outward-11 Computer Music

This project is a collection of graphics generated by computer based on the music by visual designer Cyrill Studer. In this project, the graphics are generating and transforming under the influence of music pieces in a subtle but clever and engaging way. This collections of graphics become the music video for this song. I think this is very fascinating for me that they utilize computing as a tool to visualize the music. It allows the viewers to not only experience the music by ear by also by the visual effect. The representation is very direct and related to the common perception, which allows the precise depiction of the music. The visual concept of the entire music video is based on a single form: the ellipse. Through the variation in angles, distortion, arrangement and number of the ellipses, they achieve the visual effect that is closely representation the music in a commonly understandable way and language.

The graphics were generated in Processing, manually controlled and performed with a midi controller and recorded through the Syphon with the Syphon Recorder.

Music Video – Baby Behold by CARVEL

Generated Graphics Based On Music

SOURCE:

https://www.creativeapplications.net/processing/carvel-baby-behold-music-video-by-cyrill-studer/

Shirley Chen-Project10-Lanscape

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Projecct 10 


var mushrooms = [];
var pigs = [];

//Load two images of the pig
function preload(){
  var filenames = [];
  filenames[0] = "https://i.imgur.com/DmGVjxo.png";
  filenames[1] = "https://i.imgur.com/WuMtlCY.png";
  for (var i = 0; i < filenames.length; i++) {
    pigs.push(loadImage(filenames[i]));
  }
}

function setup() {
  createCanvas(480, 480);
//Create the giant mushroom moving at the background
  for (var i = 0; i < 10; i++){
    var rx = random(width);
    mushrooms[i] = makeMushroom(rx);
  }
  frameRate(10);
}



function draw(){
  background(202, 220, 249);
  noStroke();
  fill(135, 196, 165);
  rect(0, 300, 480, 180);
  fill(255, 214, 119);
  ellipse(480, 0, 200, 200);
  updateAndDisplayMushrooms();
  removeMushroomsThatHaveSlippedOutOfView();
  addNewMushroomsWithSomeRandomProbability();
//Display the two images alternatively to create motion
  push();
//Flip the direction of the pig
  scale(-1, 1);
  image(pigs[frameCount % 2], -230, height / 2);
  pop();
}


function updateAndDisplayMushrooms(){
// Update and display the mushrooms
    for (var i = 0; i < mushrooms.length; i++){
        mushrooms[i].move();
        mushrooms[i].display();
    }
}

function removeMushroomsThatHaveSlippedOutOfView(){
    var mushroomsToKeep = [];
    for (var i = 0; i < mushrooms.length; i++){
        if (mushrooms[i].x + mushrooms[i].breadth > 0) {
            mushroomsToKeep.push(mushrooms[i]);
        }
    }
    mushrooms = mushroomsToKeep; 
}



function addNewMushroomsWithSomeRandomProbability() {
// With a very tiny probability, add a new mushroom to the end.
    var newmushroomLikelihood = 0.007; 
    if (random(0,1) < newmushroomLikelihood) {
        mushrooms.push(makeMushroom(width));
    }
}



// Update the position of building for every frame
function mushroomMove() {
    this.x += this.speed;
}
    

// Draw the mushrooms
function mushroomDisplay() {
    var mushroomHeight = this.nHeight * 20; 
    fill(255); 
    stroke(252, 190, 181);
    push();
    translate(this.x, height - 180);
    rect(0, -mushroomHeight, this.breadth, mushroomHeight, 15);
    pop();
    push();
    translate(this.x, height - 180);
    fill(252, 161, 148);
    arc((this.breadth / 2), -mushroomHeight+10, (this.breadth + 60), (mushroomHeight*0.8), PI, 0);
    stroke(200); 
    pop();
}

function makeMushroom(locationX) {
    var mushroom = {x: locationX,
                breadth: 40,
                speed: -1.0,
                nHeight: round(random(2,8)),
                move: mushroomMove,
                display: mushroomDisplay}
    return mushroom;
}

For this project, I created a series of giant mushrooms at the background. Learning from the base code provided from the assignment requirement, I used object command to generate rectangles and semicircle to represent a mushroom. Then, I used translate command to move them to the position I want them to be at. I also loaded two images of the pig and displayed them alternatively to create a flying motion. For this project I think it is a good practice for the previous projects relating to load images and also help me to practice my use of object command. It also helps me with previewing the scale command that flip the canvas to the opposite side.

Sketch :

Shirley Chen-Looking Outwards 10

Mouna Andraos and Melissa Mongiat are the founder and principal of Daily tous les jours(DTLJ). This design studio is best known for their work for the interactive public spaces, where the pedestrians are invited to join the interaction and communication with their environment and build up relationship between them.

For this project called Score, they turned the wide-opened parking lot in Bloomington, Minnesota to a playing field of large outdoor game. It is designed to question and challenge typical notions of competition; instead, it encourages collaboration and bonding relationship.  This project is really impressive for me because they use computational skills and design sensitivity to create a engaging, inviting, and interactive public space, changing and forming a more connective and interactive community. Through their design, the public can engage with the environment as well as other people.


“Score”


People Playing “Score”

People Playing “Score”-Aerial View

 

DTLJ Website: http://www.dailytouslesjours.com/work/

Shirley Chen – Project 09 – Portrait

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project 09

var myPic; 
var x;
var y;
var dx;
var dy;
var colAtPoint;
var count = 0;

function preload() {
    var myPiclink = "https://i.imgur.com/uktbZVu.jpg";
    myPic = loadImage(myPiclink);
}


function setup() {
    createCanvas(480, 480);
    background(255);
    myPic.loadPixels();
    x = random(width);
    y = random(height);
    dx = random(-1,1);
    dy = random(-1,1);
    frameRate(20);
}



function draw() {   
    
// get the pixel color for the geometry
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    colAtPoint = myPic.get(ix, iy); 
    noStroke();
    fill(colAtPoint);
//If the number of pressing the mouse is even, then draw ellipse
    if (count % 2 == 0){
        ellipse(x, y, 10);
    }
//If the number of pressing the mouse is odd, then draw sqaure
    else{
        rect(x,y,10,10);
    }

//Update the coordinates of the geometry
    x += dx * 5 ;
    y += dy * 10  ;

//Make the geometry bounces back when it hits the boundry
    if (x > width || x < 0) {
        dx = -dx
    }  
    if (y > height || y < 0) {
        dy = -dy        
    } 

    
}

//When the mouse clicked there is a new serie of geometry being drawn with oppsite direction
function mousePressed() {
    count += 1;
    x = mouseX;
    y = mouseY;
    dx = -dx;
    dy = -dy;

}

For this project I used one of my best friends photo. I used two different geometries – square and circle to gradually reveal the photo by displaying pixels of the photo. The displaying geometry will change between these two by the user clicking the mouse. The square and circle would bounce back when they hit the boundary of the canvas. Therefore, the image will gradually show up at the paths that are drawn by these geometries.


Twenty Second Later

Two Minutes Later

Final

Shirley Chen-Looking Outwards-09

Meandering River is an project that tried to capture the gradual changes and movements of our world rather than just one single snapshot. Based on the sound generated from the river, Onformative used a custom-written algorithm that reinterprets fluctuating river patterns in order to translate the subtle changes in our nature to a visual effect. For me it is very fascinating that they visualized something that is subtle, gradual, easy-to-ignore but certainly happening in our world using computing method. Also, it is fascinating that their ability to deal with the sound data and other senses that are not sight related but eventually visualize these data. For them, art is not a still snapshot of one moment, but a mutative testimony of time, space, and nature.


Meandering River


Details of the Surface


Details of the Surface

The other project they did for sound is the Unnamed Soundsculpture. This moving sound sculpture is based on the recorded motion data of a dancer. They used 3 different Microsoft Kinect cameras and recorded the movement into 3d pointclouds that were synced and exported as one large data set. The final visual effect produced is that particles moving and forming shapes according to the movement of the dancer, which coordinated with the music.

Unnamed Soundsculpture
https://onformative.com/work/unnamed-soundsculpture
Onformative’s Website
https://onformative.com/work

Shirley Chen – Looking Outwards 08 – The Creative Practice of an Individual

Reuben Heyday Margolin is an American artist and sculptor. His main focus is his mechanically driven kinetic sculptures of wave-forms. He started with math and physics in Harvard University, but later he changed his path and got a degree in English. Later, he went to study traditional painting in Italy and Russia. He became obsessed with the movement of green caterpillar, which inspired him to create wave-like sculptures. He then began to make a series of large-scale undulating installations that combine the logic of mathematics with the sensuousness of nature. The scale of his project varies. His exploration of natural elements, forms and shapes using mathematical method provides him new perspectives to generate interesting artwork. I admire his work because his interest in waving, organic, natural forms allow him to combine his mathematical skills and background with his artistic sensitivity. By using his mathematical skills, he create a series parametric installation with tectonic logic. As an architecture student, these patterns and shapes are really fascinating and interesting to me.


Triple Helix

Triple Helix

2013 – 12 feet tall. 1027 strings, 9280 pulleys, wood, steel, aluminum polycarbonate, three electric motors. Video by Chris Potter.