![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2020/08/stop-banner.png)
PRESS ENTER
sketch
/* Name : Jonathon Liang / Curran Zhang
AndrewID : Jliang2 / Curranz
Section : Section A
Final Project
*/
var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0004;
var terrainDetail2 = 0.008;
var clouds = [];
var star = [];
var frames = [];
var HeadX = 260;
var HeadY = 325;
var ReflectionY =385
var step= 6;
var machox = 480;
var machoy = 300;
var girlx = 480;
var girly = 340;
var nekx = 480;
var neky = 240;
var towelx = 480;
var towely = 200;
var birdiex = 480;
var birdiey = 300;
function setup() {
createCanvas(480, 480);
//Iniate Clouds
for (var i = 0; i <5; i++) {
var r = random(width);
clouds[i] = makeClouds(r);
}
//Head Image Position
imageMode(CENTER);
frameRate(15);
}
function preload(){
//Cats
cat1 = loadImage("https://i.imgur.com/7hCkrYr.png");
cat2 = loadImage("https://i.imgur.com/TWXWeM0.png");
cat3 = loadImage("https://i.imgur.com/kRxHYt0.png");
cat4 = loadImage("https://i.imgur.com/kkpAzvD.png");
cat5 = loadImage("https://i.imgur.com/Hf9rTYl.png");
birdie = loadImage("https://i.imgur.com/RdcS35J.png");
//Head
var filenames = [];
filenames[0] = "https://i.imgur.com/leN6UXu.png";
filenames[1] = "https://i.imgur.com/dydccNf.png";
filenames[2] = "https://i.imgur.com/dcoiGqR.png";
filenames[3] = "https://i.imgur.com/wez5P2S.png";
filenames[4] = "https://i.imgur.com/9etlno8.png";
filenames[5] = "https://i.imgur.com/yrjv4XT.png";
filenames[6] = "https://i.imgur.com/hW3gKH6.png";
filenames[7] = "https://i.imgur.com/Jg0yJck.png";
filenames[8] = "https://i.imgur.com/dU1rruI.png";
for (var i = 0; i < filenames.length; i++) {
frames.push(loadImage(filenames[i]));
}
}
function draw() {
//Gradient Background
var from = color(250,0,0);
var to = color(270);
gradient(0,width,from,to);
rect(0,0,480,480);
makeMountain1();
makeMoon();
makeStar();
makeMountain1();
makeMountain2();
makeReflection();
updateClouds();
removeClouds();
addClouds();
strokeWeight(.5);
stroke(255);
text("early head gets the bird", 10, 15);
text("touch a cat, you'll be sad", 10, 30);
text("fly too high, and you'll die", 10, 45);
makeHead();
makeCat();
}
function gradient(y,w,from,to){
for (var i = y; i <= height; i++) {
var inter = map(i,y,y+w,0,1);
var col = lerpColor(from,to,inter);
stroke(col);
strokeWeight(2);
line(y,i,y+w,i);
}
}
function makeStar(){
fill(270);
for (var i = 0; i < 100; i++) {
var starX = random(width);
var starY = random(height);
ellipse(starX,starY,1,1);
}
}
function makeMountain1(){
noStroke();
fill(180,0,0);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1.8, height/8, height);
vertex(x, y);
}
vertex(width,height);
vertex(0,height);
endShape();
}
function makeMountain2(){
fill(139,0,0);
noStroke();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
var y = map(noise(t), 0,2, height/2, height);
vertex(x, y);
}
vertex(width,height);
vertex(0,height);
endShape();
}
function makeReflection(){
fill(220,50,50);
rect(0, 375, width, 105);
fill(255,60,60);
noStroke();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
var y = map(noise(t), 0,2, height, height*.5);
vertex(x, y);
}
vertex(width,height);
vertex(0,height);
endShape();
}
function makeMoon(){
noStroke();
fill(255,20);
ellipse(2*width/3,height/4,170,170);
ellipse(2*width/3,height/4,160,160);
ellipse(2*width/3,height/4,150,150);
ellipse(2*width/3,height/4,140,140);
fill(255,200);
ellipse(2*width/3,height/4,120,120);
}
function updateClouds(){
for (var i = 0; i < clouds.length; i++) {
clouds[i].move();
clouds[i].display();
}
}
function removeClouds(){
var keepClouds = [];
for (var i = 0; i < clouds.length; i++) {
if (clouds[i].x + clouds[i].breadth > 0) {
keepClouds.push(clouds[i]);
}
}
clouds= keepClouds;
}
function addClouds(){
var newCloud = .007;
if (random(0,1)<newCloud) {
clouds.push(makeClouds(width))
}
}
function cloudMove(){
this.x += this.speed;
}
function displayClouds(){
fill(255,50);
noStroke();
ellipse(this.x,this.y,this.width,this.height);
ellipse(this.x +10,this.y +10,this.width-10,this.height-10);
ellipse(this.x +20,this.y -10,this.width/2,this.height/2);
ellipse(this.x -20,this.y ,this.width-20,this.height-10);
}
function makeClouds(cloudy){
var cloud= {x: cloudy,
y:random(100, height/2),
speed: random(-.2,-.7),
width: random(50,100),
height:random(20,0),
breadth:50,
move:cloudMove,
display:displayClouds
}
return cloud;
}
function makeHead(){
//Main Head
push();
translate(HeadX,HeadY);
scale(.2,.2);
image(frames[frameCount % 8], 0, 0);
pop();
//Reflection
push();
translate(HeadX,ReflectionY);
scale(.2,-.2);
tint(255,127);
image(frames[frameCount % 8], 0, 0);
pop();
if (keyIsDown(ENTER)){
HeadY -= step;
ReflectionY += step;
} else { HeadY += step;
HeadY = min(HeadY, 350);
ReflectionY -= step;
ReflectionY = max(ReflectionY,405);
}
if (HeadY <= 100) {gameOver()};
}
function makeCat(){
//MachoCat
push();
translate(machox,machoy);
scale(.2,.2);
image(cat1, 0,0);
machox-=1.25;
if (machox < 0) {lmachox = 480};
pop();
if (HeadX + 30 > machox & HeadX-30 < machox && machoy > HeadY && HeadY > machoy - 30) {
gameOver()};
//MachoCat Reflection
push();
translate(machox,419);
scale(.2,-.2);
tint(265,160);
image(cat1, 0,0);
machox-=1.25;
if (machox < 0) {machox = 480};
pop();
//School Girl
push();
translate(girlx,girly);
scale(.18,.18);
image(cat3, 0,0);
girlx-=.8;
if (girlx < 0) {girlx = 480};
pop();
if (HeadX + 30 > girlx & HeadX-30 < girlx && girly > HeadY && HeadY > girly - 30) {
gameOver();}
//School Girl Reflection
push();
translate(girlx,409);
scale(.18,-.18);
tint(265,160);
image(cat3, 0,0);
girlx-=.8;
if (girlx < 0) {girlx = 480};
pop();
//Neka
push();
translate(nekx,neky);
scale(.6,.6);
image(cat4, 0,0);
nekx-=.5;
if (nekx < 0) {nekx= 480};
pop();
if (HeadX + 30 > nekx & HeadX-30 < nekx && neky + 40 > HeadY && HeadY > neky - 10) {
gameOver()};
//Neka Reflection
push();
translate(nekx,509);
scale(.6,-.6);
tint(265,160);
image(cat4, 0,0);
nekx-=.5;
if (nekx < 0) {nekx = 480};
pop();
//Towel
push();
translate(towelx,towely);
scale(.15,.15);
image(cat5, 0,0);
towelx-=5.05;
if (towelx < 0) {towelx = 480};
pop();
if (HeadX + 30 > towelx & HeadX-30 < towelx && towely > HeadY && HeadY > towely - 30) {
gameOver()};
//Birdie
push();
translate(birdiex,birdiey);
scale(-.15,.15);
image(birdie, 0,0);
birdiex-=5.05;
if (birdiex < 0) {birdiex = 480};
if (birdiey+30 > HeadY & HeadY> birdiey-30 && HeadX+30 > birdiex && HeadX-30 < birdiex) {
birdiex=480};
pop();
}
function gameOver() {
fill(0);
textSize(75);
textAlign(CENTER);
textStyle(BOLD);
text("GAME OVER", 240, 240);
noLoop();
}
For the final project, me and Jonathon decided to base our project off of the game Battle Cat. Our original idea was to do a health system for the floating head and have the cats slowly chip off the health. However, that was not doable within our available time. Therefore, we toned down and the goal of the game is to bypass the white cats and try to collect the red bird as much as possible. Flying to high into the sky would also be an instant game over. Over the course of this project, we tried to incorporate as much as we can into it. Ranging from images, array, moving terrain, and objects.