For this final project, I created a “Catch & and Run” game. As a player, you need to use your mouse to control the position of a thief. Your goal is to collect coins in order to earn score.

Instructions:

1. Use you mouse to control the position of the thief.
2. Move the thief onto the coin in order to collect it and earn score.
3. After the coin is collected, the next one will spawn randomly elsewhere.
4. Avoid the cops when moving towards the coins, if you get caught, it’s GG.
5. Good luck and have fun!

sketch

//Final Project
//Yinjie Tian
//yinjiet@andrew.cmu.edu
//Section D

var theif;
var cop;
var copX = [];
var copY = [];
var dx = [];
var dy = [];
var coinX = 300;
var coinY = 300;
var coin;
var count = 0;
var carX;
var carX2;
var carY;
var carY2;
var carSpeed;
var showText = false;

function preload(){
  thief = loadImage("https://i.imgur.com/lcp6pIM.png");
  cop = loadImage("https://i.imgur.com/ndxH6Uh.png");
  coin = loadImage("https://i.imgur.com/fKFvpra.png");

}

function setup(){
 	createCanvas(600, 480);
 	imageMode(CENTER);
//creating two cars moving in opposite direction
 	carX = 200;
 	carX2 = 350;
 	carY = 0;
 	carY2 = height - 60;
 	carSpeed = random(1,5);
// Randomly select cops' starting location and speed
  for (var i = 1; i < 15; i++) { 
    copX[i] = random(30, width - 30);
    copY[i] = random(40, height - 40);
    dx[i] = random(-2, 5);
    dy[i] = random(-2, 5);
  }
}

function draw(){
	background("grey");
//street background
	fill("white");
	noStroke();
	rect(0,0,100,150);
	rect(0,330,100,150);
	rect(500,0,100,150);
	rect(500,330,100,150)
//crosswalks
	rect(110, 50, 20, 100);
	rect(150, 50, 20, 100);
	rect(190, 50, 20, 100);
	rect(230, 50, 20, 100);
	rect(270, 50, 20, 100);
	rect(310, 50, 20, 100);
	rect(350, 50, 20, 100);
	rect(390, 50, 20, 100);
	rect(430, 50, 20, 100);
	rect(470, 50, 20, 100);
	
	rect(110, 330, 20, 100);
	rect(150, 330, 20, 100);
	rect(190, 330, 20, 100);
	rect(230, 330, 20, 100);
	rect(270, 330, 20, 100);
	rect(310, 330, 20, 100);
	rect(350, 330, 20, 100);
	rect(390, 330, 20, 100);
	rect(430, 330, 20, 100);
	rect(470, 330, 20, 100);

//cars moving
	fill("red");
	rect(carX, carY, 40, 60);
	carY += carSpeed;
	if(carY > height){
		carY = -60;
	}
	fill("blue");
	rect(carX2, carY2, 40, 60);
	carY2 -= carSpeed;
	if(carY2 < -60){
		carY2 = height;
	}
// Make the cops move randomly in the canvas
 	for (var i = 1; i < 8 ; i ++){
  	image(cop, copX[i], copY[i]);
  
    copX[i] += dx[i];
    copY[i] += dy[i];

// bounce back if cops hit boundary
    if (copX[i] + 30 > width || copX[i] - 30 < 0){
      dx[i] =- dx[i];
      }
    if (copY[i] + 40 > height || copY[i] - 40 < 0){
      dy[i] =- dy[i];
      }
// if theif got caught
	 if (copX[i] > mouseX - 15  & copX[i] < mouseX + 15){
     	if (copY[i] > mouseY - 20 && copY[i] < mouseY + 20){
     		endGame();
      }      
    }
// if theif got hit by car1
	 if (carX > mouseX - 15  & copX < mouseX + 15){
     	if (carY > mouseY - 20 && carY < mouseY + 20){
     		endGame();
      }      
    }
// if theif got hit by car2
if (carX2 > mouseX - 15  & carX2 < mouseX + 15){
     	if (carY2 > mouseY - 20 && carY2 < mouseY + 20){
     		endGame();
      }      
    }
  }
   
// create theif
	image(thief, mouseX, mouseY);
	
// randomly placing coin 
	image(coin, coinX, coinY);

// scoreboard
	textSize(20);
	fill("white");	
  	text("SCORE: " + str(count), 260, 30);

// if theif gets the coin  	
	if (coinStolen()){
		coinPlace();			
  		count +=10;
	}
}

function coinPlace(){
	coinX = random(30, width - 30);
	coinY = random(30, height - 30);
}

function coinStolen(){
	var d = dist(mouseX, mouseY, coinX, coinY);
	if(d < 20){
		return true;
	}
	else {
		return false;
	}
}


function endGame(){	
	showText = true;
	fill("pink");
	textSize(50);
	textStyle(BOLD);
  	textFont('New Roman');
	text("GGWP! Please Refresh", 50, height/2);
	noLoop();
}

For the final project, I’m going to design a “catch and run” game. There will be two “characters” in the game where one represents the cop and the other one represents the thief. Players need to use their mouseclick to control the movement of the “thief”. The mission of the “thief” is to collect all the coins floating in the canvas. There will be other elements such as bombs that can result in penalty if thief touches.

sketch

// Project 11
//Yinjie Tian
//yinjiet@andrew.cmu.edu
//Section D

var terrainSpeed = -0.0005;
var terrainDetail = 0.005;
var aSol = [];
var starMove = 0;
function preload(){
  var filenames = [];
  filenames[0] = "https://i.imgur.com/KK7jv48.png";
  filenames[1] = "https://i.imgur.com/pEsBfR6.png";
  for (var i = 0; i < filenames.length; i++) {
    aSol.push(loadImage(filenames[i]));
  }
}

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

function draw() {
    background(0);
    //stars
    for(var x = starMove; x < width + starMove; x+=10){
        var y1 = random(0, height);
        var y2 = random(0, height/2);
        var y3 = random(0, height/3);
        var y4 = random(0, height/4);
        stroke(255);
        point(x-starMove, y1);
        point(x-starMove, y2);
        point(x-starMove, y3);
        point(x-starMove, y4);
    }
    starMove += 10;
    //sun
    sun();
    //mountain
    mount();
    //aurelion sol
    push();
    image(aSol[frameCount % 2], width/5, height / 3);
    pop();
}
//draw sun
function sun(){
    noStroke();
    fill("yellow");
    ellipse(width/3*2, height/3, 200,200);
    fill("orange");
    ellipse(width/3*2, height/3, 150,150);

    
}
//draw mountain
function mount(){
    noStroke();
    beginShape();
    fill("brown");
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 0.5, 100, 350);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

}

For this project, I used images of one of the character in League of legend called “Aurelion Sol” and made her fly over randomized mountain. Moreover, randomized stars are in the background and move to the left of the canvas to create the sense of “Aurelion Sol” flying forwards. The “sun” is actually one of the character’s skills.

Feminism in Degital Design

The Game: The Game is a video game design by Angela Washko. The game presents contents relating politics, tactic practices of male pick-up artist, seduction community and feminism advocating aspects. Like a dating simulator, players can experience coaching lessons of seduction from pick-up artists. The game provides players opportunities to explore the structure of social behaviors as well as revealing the danger and complexity of this path.

Angela Washko, an artist, writer and facilitator, is devoted in creating new topics of feminism in the spaces. Living and working in Pittsburgh, Angela Washko is currently an assistant professor of College of Art at carnegie Mellon University.

Game download link: https://thegamethegame.org/download/

Computer Music —— The Emerging Art of Algorithmic Music

Ville-Matias Heikkila, a Finnish artist and computer programmer, has been experimenting with algorithmic music with the help of computer programs. He proposed that we need to not only listen to the music, but also be able to visualize it to enhance the impact that music can bring to us.

Heikkila says that sometime, codes and algorithms can generate surprisingly interesting music by repeating only two or three arithmetic operations. Therefore, he is really interested in creating audio and visual artworks with simple programs but in a rather disorganized way.

sketch

// Project 10
//Yinjie Tian
//yinjiet@andrew.cmu.edu
//Section D

var unit = 50
var angle = 0

function preload() {
    s1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound1.wav");
    s2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound2.wav");
    s3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound3.wav");
    
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(640, 480);
    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    myOsc = new p5.TriOsc();
    myOsc.freq(880.0);
    myOsc.setType('sine');
    myOsc.amp(0.1);
    myOsc.start();
}



    // you can replace any of this with your own code:
function draw() {
    background(0);
    fill(mouseX, mouseY, 150);
    rect(0, 0, width, 160);
    fill(150, mouseY, mouseX);
    rect(0, 160, width, 160);
    fill(mouseY, 150, mouseX);
    rect(0, 320, width, 160);
    var len = 480 - mouseX
    var sta = 640 - mouseY 
    var freq = mouseX * 10

    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;

    var freq = mouseX * 10
    var amp = len
    myOsc.freq(freq);
    
}

function mousePressed() {

    if (mouseY > 0 & mouseY < 160){
        s1.play();
    } else {
        s1.pause();
    }

    if (mouseY > 160 & mouseY < 320){
        s2.play();
    } else {
        s2.pause();
    }

    if (mouseY > 320 & mouseY < 480){
        s3.play();
    } else {
        s3.pause();
    }


}

For this project, I used my project 3 as the base image. I created 3 mouse press zones in different colors and when someone presses mouse on these three zones, three different sounds will play. The sound will pause if someone presses the mouse on a different zone.

sketch

//Project-09
//Yinjie Tian
//yinjiet@andrew.cmu.edu
//Section D
var protrait;

function preload() {
    protrait = loadImage("https://i.imgur.com/tOfQhhw.jpg");
}

function setup() {
    createCanvas(400, 450);
    background(0);
    protrait.loadPixels();
    frameRate(100);
}

function draw() { 
    var x = random(width);
    var y = random(height);
    var pix = protrait.get(x, y);

    stroke(pix);
    var lengthmap = constrain(map(15, 0, y, 0, 20), 5, 50);
    var weightmap = constrain(map(3, 0, 10, 0, x), 0.1, 3);

    push();
    strokeWeight(weightmap);
    line(x + random(-10, 10), y + random(-10, 10), x + lengthmap, y + lengthmap);   
    pop();

   
}

I played with random stroke length and weight to create this portrait I chose.

I’m also really into Japanese installation art work, just like what’s in Mike Fanjie’s LookingOutwards-04, a type of traditional Japanese sound ornament called “Chijukinkutsu” is a perfect example for both visual string artwork and music instrument. It uses the mechanisms of vibration created by strings and there is a sewing needle hanging onto the the strings above each little cups filled with water. When electricity goes through the strings, needles would gently touch the surface of the water and create subtle sounds. This installation requires so much precision in many different aspects, such as, the position of each cup, the amount of water in the cups, the tention of each strings and etc… Moreover, when I looked at the artwork in a bigger aspect, I was inspired by its dynamic form and there is certain design element that I can integrate into my architectural design.

a slient place — jonathan harris

For this art project, Jonathan’s initial idea was to make a project that incorporates ideas of ancient language. He thought that since drawings and photographies would be presented wordlessly, therefore viewers would be free to integrate their own interpretations.

Moreover,  Jonathan felt that the Internet has become a cacophony, where its promise of informational omniscience no longer feels plausible and desirable. Since he has always fascinated by the concept of “oracles” in shaping human thoughts. He referenced some of the ancient work in different countries — augury (in ancient Rome), the I Ching (in China), the Tarot (in Europe), and Rorschach tests (in western psychology). Jonathan wants to create ambiguity in the rational mind in order to unlock views subconscious, stimulating their own insights to arise.

sketch

//Yinjie Tian
//Section D
//yinjiet@andrew.cmu.edu
//Assignment 06

var x = []; 
var y = [];
var dx = []; 
var dy = []; 
var color = []; 


function setup() { 
    createCanvas(480, 480);
    angleMode(DEGREES);
    for (i = 0; i < 100; i++) { 
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
        color[i] = color(random(255), random(255), random(255));
        
    }
    frameRate(5);
}


function draw() {
 
    background(0);
 
 //stars at the background   
    noStroke();
    for (i = 0; i < 100; i++) {  // for each stars at the back ...
        fill(color[i]);
        ellipse(x[i], y[i], 10, 10);
        x[i] += dx[i];
        y[i] += dy[i];
        
        if (x[i] > width) x[i] = 0;        //horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       //vertically
        else if (y[i] < 0) y[i] = height;
    }

        var h = hour();
        var m = minute();
        var s = second(); 
        var ring = random(1, 50);

//planets (clock)
    push();
    noStroke();
    
    translate(width/2,height/2);
    rotate(s * (360/60));


    fill(0, 200, s * 5);
    ellipse(200, 0, 80+ring, 80+ring);
    fill(0);
    ellipse(200, 0, 80, 80);
    fill(200, 200, s * 5);
    ellipse(200, 0, 60, 60);
    
    line()

    pop();
    
    push();
    noStroke();
    fill(200, m * 5, 200);
    translate(width/2,height/2);
    rotate(m*(360/60));
    
    ellipse(60, 0, 40, 40);
    pop();
    
    push();
    noStroke();
    fill(h * 25, 200, 200);
    translate(width/2,height/2);
    rotate(h*(360/12));
    
    ellipse(100, 0, 20, 20);
    pop();

//center rotational axis
    strokeWeight(4);
    stroke(255)
    line(width / 2 - 25, height / 2, width / 2 + 25, height / 2);
    line(width / 2, height / 2 - 25, width / 2, height / 2 + 25);
    fill(255, 0, 0);
    ellipse(width/2, height/2, 10, 10); 

}

I was inspired by how the solar system operates like a clock that all the planets are rotating around the sun. For the clock I created, I drew three planets rotating around the center point where the nearest one represents hour, the medium one represents minute and the furtherest one tells the second.