My project changed a lot from what I originally intended. At first I wanted a more traditional, Mario-like 8 bit game. However, while I was working on my project I started watching the show Supergirl and fell in love with it, so I wanted to make a game based off of her. Instead of running around and jumping, the player character (Supergirl) flies through the air to save Lois Lane, all while trying to avoid obstacles in her way.
This was a lot of fun to make, and hopefully in the future I can make something more complex!

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Final Project
*
*/

var started = false;
var gameOver = false;
var terrainSpeed = 0.0003; //speed of hills
var terrainDetail = 0.005;
var terrain = [];
var cloudX = [];
var cloudY = [];
var birdX = [];
var birdY = [];
var treeX = []; // the trees are actually buildings, for reference - changed my mind last minute
var treeH = [];
var speedMod = 0;
var img1; // supergirl
var img2; // airplanes
var img3; // buildings
var img4; // clouds

function preload() {
  img1 = loadImage("http://i.imgur.com/5AvuM6o.png"); // loads supergirl image
  img2 = loadImage("http://i.imgur.com/fYFcwdh.png") // loads airplane image
  img3 = loadImage("http://i.imgur.com/FJQoEeU.png") // loads building image
  img4 = loadImage("http://i.imgur.com/8ULSzx0.png") // loads cloud image
}


function updateLocation(){ //moves the objects
	for(i = 0; i < cloudX.length; i++){
		cloudX[i] = cloudX[i] - 1 - speedMod/200;
			if(cloudX[i] < -150){ //makes the clouds go away
				cloudX.splice(i,1);
				cloudY.splice(i,1);
			}
	}
	for(i = 0; i < birdX.length; i++){
		birdX[i] = birdX[i] - 1 - speedMod/200;
			if(birdX[i] < -100){ //makes the birds go away
				birdX.splice(i,1);
				birdY.splice(i,1);
			}
	}
	for(i = 0; i < treeX.length; i++){
		treeX[i] = treeX[i] - 1 - speedMod/200;
			if(treeX[i] < -150){ //makes the buildings go away
				treeX.splice(i,1);
				treeH.splice(i,1);
			}
	}
}

function drawCloud(x, y){ //creates cloud
	image(img4, x, y);
}

function drawClouds(){ //places clouds
	for(i = 0; i < cloudX.length; i++){
		drawCloud(cloudX[i], cloudY[i]);
	}
}

function drawBird(x, y){ //creates airplane
	image(img2, x, y);
}

function drawBirds(){ //places airplanes
	for(i = 0; i < birdX.length; i++){
		drawBird(birdX[i], birdY[i]);
	}
}

function drawTree(x, h){ //creates building
	image(img3, x, height-h-20);
}

function drawTrees(){ //places buildings
	for(i = 0; i < treeX.length; i++){
		drawTree(treeX[i], treeH[i]);
	}
}

function checkGameOver(){
	for(i = 0; i < treeX.length; i++){
		x = treeX[i];
		h = treeH[i];
		if(!(mouseX < x - 20 || mouseX > x + 142 + 20 || mouseY < height - h - 20 || mouseY > height)){
			gameOver = true;
			break;
		}
	}
	for(i = 0; i < birdX.length; i++){
		x = birdX[i];
		y = birdY[i];
		if(!(mouseX < x - 20 || mouseX > x + 102 + 20 || mouseY < y - 10 || mouseY > y + 83)){
			gameOver = true;
			break;
		}
	}
}

function setup(){
	createCanvas(600, 400);
	noCursor();
}

function draw() {

	if(gameOver == true){
		background(0);
		fill(255, 0, 0);
		textSize(60);
		textAlign(CENTER);
		text("GAME OVER", width/2, height/2);
		textSize(30);
		textAlign(CENTER);
		text("Oh no! Now who will save Lois?", width/2, 280);
		fill(255);
		textSize(20);
		textAlign(CENTER);
		text("click to try again", width/2, 350);


		if(mouseIsPressed){
			gameOver = false;
			started = false;
			treeX = [];
			treeH = [];
			cloudX = [];
			cloudY = [];
			birdX = [];
			birdY = [];

			speedMod = 0;
		}
	}

	else{

	if(started == true){ // loads game
		speedMod++;
    	background(190, 240, 255);

    	fill(255, 0, 0);
    	textSize(16);
    	textAlign(CENTER);
    	text("Score = " + speedMod, 50, 20);

    	checkGameOver();

    	drawClouds(); // draws clouds
    		if(random(0, 100) < 1 + speedMod/2000){
    			cloudX.push(700);
    			cloudY.push(random(20, 200));
    		}
    

    	drawBirds(); // draws airplanes
   			if(random(0, 100) < 0.5 + speedMod/2000){
    			birdX.push(700);
    			birdY.push(random(20, 200));
    		}

    	drawTrees(); // draws buildings 
    		if(random(0, 100) < 0.5 + speedMod/2000){
    			treeX.push(700);
    			treeH.push(random(20, 200));
    		}

    	updateLocation();

    	image(img1, mouseX - 30, mouseY - 30); // supergirl

	}

	else{ // starting screen
		background(140, 220, 235);

		fill(255, 0, 0);
  		textSize(60);
  		textAlign(CENTER);
  		text("SUPERGIRL", width/2, 150);

  		fill(0, 0, 255);
  		textSize(20);
  		textAlign(CENTER);
  		text("Lois Lane is in trouble! Can Supergirl get there in time?", width/2, height/2);
  		text("Don't hit the buildings or the airplanes!", width/2, 240);

  		fill(255);
  		textSize(30);
  		textAlign(CENTER);
  		text("Press any key to play!", width/2, 300);
 		
 		if(keyIsPressed === true){
 			started = true;
 		}

	}
}

}

Since I’m using Mario as a sort of model for my project, since it is the game that made platformers what they are, I wanted to discuss Mario. I wanted to then compare it to another similar game, and since Mario is a professionally made game it seemed unfair to compare it to an indie game. The original Mario Bros game was released in 1983, so I decided to compare it to Zelda II:The Adventure of Link (released in ’87) since it’s also a platformer developed by Nintendo in a similar time period.

Both the original Mario game and the second Zelda game were created by Shigeru Miyamoto, Miyamoto designing the former and producing the latter. Mario originally came from the game Donkey Kong. Mario, while it was original at the time, has become sort of the standard model for platformer games. Zelda II was completely different – while it is still essentially a platformer, the original Zelda was not, where instead you looked down from above (a top-down game like in Pokemon). Because of all the changes to the game – most notably how it was a side-scroller, included “lives” similar games like Mario and Sonic, and the inclusion of experience points – it ended up being not particularly well-received.
While I’ve played the original Mario, I’ve never played the second Zelda game. However, I do admire the risks they took in changing the Zelda series so drastically. Because of the reaction these changes wouldn’t stick, but I still found their bold choices to be inspiring. I also happen to prefer side-scrolling games to top-down, so I may be a little biased.
Mario, while again very “typical” of platformers, is still extremely fun and extremely difficult. While the gameplay, like all early 8-bit games, is rather simplistic, it’s still a very hard game to beat. There’s no ability to save, you can’t go back once you’ve left a certain area, and there’s a ton of levels that increase in difficulty. It’s quite impressive to me to see that this game completely stood the test of time. Sure, new Mario games are fun, but I think that the original is the best designed out of the ones I’ve played – I usually only play the later games because they’re easier to beat and I’m terrible at video games.

For my final project, I want to do some sort of simple platformer game, similar to one like the original Mario. While I’m not 100% set on the details re:how things will look (like the player character/setting/etc) I know it will be 8-bit style. You can’t go back to anything once it’s left the screen (i.e you can move forward right past the screen and it’ll move, but not back left past the edge of the screen) both to emulate Mario and to avoid everything being very slow because it has to load too much.
It will probably be a typical fantasy setting, and the player character will be a girl. And it will definitely involve rescuing a princess, because lesbian princesses.

This Looking Outwards, I decided to focus on what is probably the funniest use of computer music ever: autorap.

The autorap app is by Smule, a company that makes mobile apps and is located in San Francisco. It was founded in 2008, by Jeff Smith and Ge Wang, who is a Stanford Ass. Professor. The idea is that you can record yourself speaking/singing/whatever, and it will turn that recording into “”rap.”” I use this term loosely. It really just autotunes whatever you record, but it’s honestly hilarious.

Here’s a video of Ge Wang testing the app, which I highly recommend everyone watch because again, it’s hilarious:

They also have a very pretty graphic moving in the background when you record, which I thought was a nice touch.

For this project I decided I wanted to play around with how turtles worked and what they could look like, so I didn’t start out with anything specific in mind. I ended up with someone that looks almost like electricity – it reminded me of a plasma globe!

The screenshots of it don’t look very cool, you really have to view it in motion.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 11
*
*/

var turtles = [];
function setup() {
    var colors =[color(250, 45, 125), color(113, 222, 241),
        color(175, 230, 51), color(183, 140, 255), color(255), color(253, 162, 35)];

    createCanvas(600, 600);

    for(i = 0; i < colors.length; i++){ // creates multiple turtles
        var turt = makeTurtle(width/2,height/2);
        turt.setColor(colors[i]);
        turt.penDown
        turtles.push(turt);
    }
}

function draw() {
    background(0);
    fill(0);
    ellipse(300, 300, 300, 300);

    for(i = 0; i < turtles.length; i++){
        turtles[i].forward(random(50));
        turtles[i].left(random(100));
        turtles[i].forward(random(50));
        turtles[i].right(random(50));
        if(turtles[i].distanceTo(300, 300) > 300){
            turtles[i].goto(300, 300);
        }
    }

   
}

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;}

Chloe Varelidi is an indie game designer and developer. One of her projects, Pandemoji, is “a silly classroom game which uses a webcam and face recognition software to provide a playful opportunity for tweens to talk about their emotions.”

Her code is located here. The way the game works is a person stands in front of a webcam and watches “Pandemojis” (which are exactly what they sound like: panda emojis) fall from above. They then move and “catch” one to wear on their (virtual) face. A countdown is given and then a screenshot is taken. The goal of this is for the images to later be used in a classroom discussion of emotions and specifically how we express emotions through our facial expressions.

For this project, I wanted to keep the landscape design relatively simple so I could focus on actually understanding what I was coding.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 10
*
*/

var terrainSpeed = 0.0003; //speed of hills
var terrainDetail = 0.005;
var terrain = [];
var treeX = [];
var treeY = [];
var treeN = [];
var cloudX = [];
var cloudY = [];



function updateLocation(){ //moves the trees + clouds
	for(i = 0; i < treeN.length; i++){
		treeX[i] = treeX[i] - 1;
			if(treeX[i] < -50){ //makes the trees go away
				treeX.splice(i,1);
				treeY.splice(i,1);
				treeN.splice(i,1);
			}
	}
	for(i = 0; i < cloudX.length; i++){
		cloudX[i] = cloudX[i] - 1;
			if(cloudX[i] < -50){ //makes the clouds go away
				cloudX.splice(i,1);
				cloudY.splice(i,1);
			}
	}
}


function drawTree1(x, y){ // creates tree type 1
	var tw = 20; // tree width
	var th = 70; // tree height
	fill(80, 40, 20);
	rect(x, y, tw, th); // tree trunk
	//tree leaves
	fill(150, 230, 80);
	ellipse(x + tw/2, y - 20, 40, 40);
	ellipse(x, y, 40, 40);
	ellipse(x + tw, y, 40, 40);
}

function drawTree2(x, y){ // creates tree type 2
	var tw = 10; // tree width
	var th = 40; // tree height
	fill(80, 40, 20);
	rect(x, y, tw, th); // tree trunk
	//tree leaves
	fill(150, 230, 80);
	ellipse(x + tw/2, y - 25, 50, 50);
}

function drawTree3(x, y){ // creates tree type 3
	var tw = 15; // tree width
	var th = 50; // tree height
	fill(80, 40, 20);
	rect(x, y, tw, th); // tree trunk
	//tree leaves
	fill(150, 230, 80);
	ellipse(x, y, 30, 30);
	ellipse(x + tw, y, 30, 30);
	ellipse(x, y - 20, 30, 30);
	ellipse(x + tw, y - 20, 30, 30);
}

function drawTrees(){ //places trees
	for(i = 0; i < treeX.length; i++){
		if(treeN[i] == 1){
			drawTree1(treeX[i], treeY[i]);
		}
		if(treeN[i] == 2){
			drawTree2(treeX[i], treeY[i]);
		}
		if(treeN[i] == 3){
			drawTree3(treeX[i], treeY[i]);
		}
	}
}

function drawCloud(x, y){ //creates cloud
	var cw = 80;
	var ch = 20;
	fill(255);
	ellipse(x, y, cw, ch);
}

function drawClouds(){ //places clouds
	for(i = 0; i < cloudX.length; i++){
		drawCloud(cloudX[i], cloudY[i]);
	}

}


function setup(){
	createCanvas(600, 400);
}

function draw() {
    background(190, 240, 255);

    drawClouds();
    if(random(0, 100) < 1){
    	cloudX.push(620);
    	cloudY.push(random(20, 200));
    }
    
    noStroke();
    fill(0, 80, 0);
    beginShape(); //creates "noise" for hill background
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    vertex(width,height);
    endShape(CLOSE);

    fill(0, 120, 0); //creates foreground
    rect(0, 300, 600, 400);

    drawTrees();
    updateLocation();

    if(random(0, 100) < 1){
    	treeX.push(620);
    	treeY.push(300);
    	var n = random(0,3);
    	if(n < 1){
    		treeN.push(1);
    	}
    	else if(n < 2){
    		treeN.push(2);
    	}
  		else{
  			treeN.push(3);
  		}
    }

}

Rhea’s post for Looking Outwards 2, about William Latham, was fascinating. He creates these cool-looking computer generated graphics using what he calls the “mutation” code that almost look like organisms. They’re almost mistakable for actual images of viruses or the like.
I find these specific generations of his fascinating, though I would like to see more of his work.

For this project, I decided to use a more amusing photo of my boyfriend.

I used randomly generated squares, which change size depending on the position of your mouse. Here’s some examples of what it might look like:

I tried to get the picture to generate on the faster side, though this was about as fast as I could make it, because even if I made the frame rate 2000 it didn’t appear to be faster than 50.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 08
*
*/

var underlyingImage;

function preload() {
    var cem = "http://i.imgur.com/yOjwaHP.jpg";
    underlyingImage = loadImage(cem);
}

function setup() {
    createCanvas(422, 750);
    background(255);
    underlyingImage.loadPixels();
    frameRate(50);
}

function draw() {
    var px = random(width);
    var py = random(height);

    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var colorXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(colorXY);
    rect(px, py, mouseX/10, mouseY/10);
}

Disk Inventory X is a program for Mac OS X that visualizes the data on your computer. It shows you how much size each of your files/programs/etc takes up, as well as organizing them by color. You can even click on each of the rectangles (which represent your data) which will tell you exactly what they are and how much space they take up. What’s neat about this program is it shows you literally everything on your computer, and it puts them all together so you can see them relative to each other.

Disk Inventory X was released in March 2004 by Tjark Derlien as a “disk space manager” program. It was inspired by WinDirStat, which is essentially the same thing but for Windows. Disk Inventory X “shows the sizes of files and folders in a graphical treemap.” It is also completely free, and you can download it here.

macbreak_minute_2005-10-14_disk_inventory_x_1-0b