//Shannon Case
//Section D
//scase@andrew.cmu.edu
//final project
var eye = [];
var eyeframes = [];
var jar = [];
var jarframes = [];
var fish = [];
var fishframes = [];
var fl = [];
var flframes = [];
var tummy = [];
var tummyframes = [];
var bubbles = [];
var bubblesframes = [];
var pows = [];
var powsframes = [];
var cigs = [];
var cigsframes = [];
var lips = [];
var lipsframes = [];
var swirl = [];
var swirlframes = [];
var word = [];
var wordframes = [];
//global variables for the arrays to store all of my images
var index;
var index2;
var index3;
var index4;
var index5;
var index6;
var index7;
var index8;
var index9;
var index10;
var index11;
//create index to display images
var s1;
var s2;
var s3;
var s4;
var s5;
var s6;
var s7;
var s8;
var s9;
var s10;
var s11;
//variables for each sound
function preload(){
s1 = loadSound("audio/sound1.ogg");
s2 = loadSound("audio/sound2.ogg");
s3 = loadSound("audio/sound3.ogg");
s4 = loadSound("audio/poppopPOP.ogg");
s5 = loadSound("audio/sound4.wav");
s6 = loadSound("audio/sound6.wav");
s7 = loadSound("audio/sound7.wav");
s8 = loadSound("audio/sound8.wav");
s9 = loadSound("audio/sound9.wav");
s10 = loadSound("audio/sound10.wav");
s11 = loadSound("audio/sound11.wav");
myLoop = loadSound("audio/bgsound.ogg");
//load sounds
eye[0]="images/eye1.png";
eye[1]="images/eye2.png";
eye[2]="images/eye3.png";
eye[3]="images/eye4.png";
eye[4]="images/eye5.png";
eye[5]="images/eye6.png";
eye[6]="images/eye7.png";
eye[7]="images/eye8.png";
jar[0]="images/jar1.png";
jar[1]="images/jar2.png";
jar[2]="images/jar1 2.png";
jar[3]="images/jar2 2.png";
jar[4]="images/jar1 3.png";
jar[5]="images/jar2 3.png";
jar[6]="images/jar1 4.png";
jar[7]="images/jar1 4.png";
fish[0]="images/fish1.png";
fish[1]="images/fish2.png";
fish[2]="images/fish3.png";
fish[3]="images/fish4.png";
fish[4]="images/fish5.png";
fish[5]="images/fish3.png";
fish[6]="images/fish7.png";
fish[7]="images/fish8.png";
fl[0]="images/f1.png";
fl[1]="images/f2.png";
fl[2]="images/f3.png";
fl[3]="images/f4.png";
fl[4]="images/f5.png";
fl[5]="images/f6.png";
fl[6]="images/f7.png";
fl[7]="images/f8.png";
tummy[0]="images/tummy1.png";
tummy[1]="images/tummy2.png";
tummy[2]="images/tummy3.png";
tummy[3]="images/tummy4.png";
tummy[4]="images/tummy5.png";
tummy[5]="images/tummy6.png";
tummy[6]="images/tummy7.png";
tummy[7]="images/tummy8.png";
bubbles[0]="images/bubbles1.png";
bubbles[1]="images/bubbles2.png";
bubbles[2]="images/bubbles3.png";
bubbles[3]="images/bubbles4.png";
bubbles[4]="images/bubbles5.png";
bubbles[5]="images/bubbles6.png";
bubbles[6]="images/bubbles7.png";
bubbles[7]="images/bubbles8.png";
pows[0]="images/pow1.png";
pows[1]="images/pow2.png";
pows[2]="images/pow3.png";
pows[3]="images/pow4.png";
pows[4]="images/pow5.png";
pows[5]="images/pow6.png";
pows[6]="images/pow7.png";
pows[7]="images/pow8.png";
cigs[0]="images/cig1.png";
cigs[1]="images/cig2.png";
cigs[2]="images/cig3.png";
cigs[3]="images/cig4.png";
cigs[4]="images/cig5.png";
cigs[5]="images/cig6.png";
cigs[6]="images/cig7.png";
cigs[7]="images/cig8.png";
lips[0]="images/lips1.png";
lips[1]="images/lips2.png";
lips[2]="images/lips3.png";
lips[3]="images/lips4.png";
lips[4]="images/lips5.png";
lips[5]="images/lips6.png";
lips[6]="images/lips7.png";
lips[7]="images/lips8.png";
swirl[0]="images/swirl1.png";
swirl[1]="images/swirl2.png";
swirl[2]="images/swirl3.png";
swirl[3]="images/swirl4.png";
swirl[4]="images/swirl5.png";
swirl[5]="images/swirl6.png";
swirl[6]="images/swirl7.png";
swirl[7]="images/swirl8.png";
word[0]="images/word1.png";
word[1]="images/word2.png";
word[2]="images/word3.png";
word[3]="images/word4.png";
word[4]="images/word5.png";
word[5]="images/word6.png";
word[6]="images/word7.png";
word[7]="images/word8.png";
//load all the images
for(var a = 0; a<8; a++){
eyeframes[a] = loadImage(eye[a]);
}
for(var b = 0; b<8; b++){
jarframes[b] = loadImage(jar[b]);
}
for(var c = 0; c<8; c++){
fishframes[c] = loadImage(fish[c]);
}
for(var d = 0; d<8; d++){
flframes[d] = loadImage(fl[d]);
}
for(var e = 0; e<8; e++){
tummyframes[e] = loadImage(tummy[e]);
}
for(var f = 0; f<8; f++){
bubblesframes[f] = loadImage(bubbles[f]);
}
for(var g = 0; g<8; g++){
powsframes[g] = loadImage(pows[g]);
}
for(var h = 0; h<8; h++){
cigsframes[h] = loadImage(cigs[h]);
}
for(var i = 0; i<8; i++){
lipsframes[i] = loadImage(lips[i]);
}
for(var j = 0; j<8; j++){
swirlframes[j] = loadImage(swirl[j]);
}
for(var k = 0; k<8; k++){
wordframes[k] = loadImage(word[k]);
}
//put all the images into arrays
}
function setup() {
createCanvas(windowWidth,windowHeight);
myLoop.loop(); //play background sound
background(0,0,80);
imageMode(CENTER);
frameRate(10); //set frame rate for the animations
}
function draw() {
background(0,0,80); //refresh background to play through animations
index++;
if(index < eyeframes.length)
image(eyeframes[index], width/2, height/2, eyeframes[index].width/2, eyeframes[index].height/2);
index2++;
if(index2 < jarframes.length)
image(jarframes[index2], width/2, height/2, jarframes[index2].width/2, jarframes[index2].height/2);
index3++;
if(index3 < fishframes.length)
image(fishframes[index3], width/2, height/2, fishframes[index3].width/5, fishframes[index3].height/5);
index4++;
if(index4 < flframes.length)
image(flframes[index4], width/2, height/2, flframes[index4].width/3, flframes[index4].height/3);
index5++;
if(index5 < tummyframes.length)
image(tummyframes[index5], width/2, height/2, tummyframes[index5].width/3, tummyframes[index5].height/3);
index6++;
if(index6 < bubblesframes.length)
image(bubblesframes[index6], width/2, height/2, bubblesframes[index6].width/3, bubblesframes[index6].height/3);
index7++;
if(index7 < powsframes.length)
image(powsframes[index7], width/2, height/2, powsframes[index7].width/3, powsframes[index7].height/3);
index8++;
if(index8 < cigsframes.length)
image(cigsframes[index8], width/2, height/2, cigsframes[index8].width/3, cigsframes[index8].height/3);
index9++;
if(index9 < lipsframes.length)
image(lipsframes[index9], width/2, height/2, lipsframes[index9].width/2, lipsframes[index9].height/2);
index10++;
if(index10 < swirlframes.length)
image(swirlframes[index10], width/2, height/2, swirlframes[index10].width/2, swirlframes[index10].height/2);
index11++;
if(index11 < swirlframes.length)
image(wordframes[index11], width/2, height/2, wordframes[index11].width/2, wordframes[index11].height/2);
//plays each image if its index is set to 0
}
function keyPressed(){
if(key==="A"){
s2.pause();
s3.pause();
s4.pause();
s1.play();
index=0;
}
if(key==="B"){
s1.pause();
s3.pause();
s4.pause();
s2.play();
index2 = 0;
}
if(key==="C"){
s1.pause();
s2.pause();
s4.pause();
s3.play();
index3 = 0;
}
if(key==="D"){
s1.pause();
s2.pause();
s3.pause();
s4.play();
index4 = 0;
}
if(key==="E"){
s1.pause();
s2.pause();
s3.pause();
s5.play();
index5 = 0;
}
if(key==="F"){
s1.pause();
s2.pause();
s3.pause();
s6.play();
index6 = 0;
}
if(key==="G"){
s1.pause();
s2.pause();
s3.pause();
s7.play();
index7 = 0;
}
if(key==="H"){
s1.pause();
s2.pause();
s3.pause();
s8.play();
index8 = 0;
}
if(key==="I"){
s1.pause();
s2.pause();
s3.pause();
s10.play();
index9 = 0;
}
if(key==="J"){
s1.pause();
s2.pause();
s3.pause();
s9.play();
index10 = 0;
}
if(key==="K"){
s1.pause();
s2.pause();
s3.pause();
s11.play();
index11 = 0;
}
// if the key is pressed for a certain image, this sets the image index to 0, and plays the animation
}
For my final project I chose to do a series of short animations and sounds. I wanted to hand draw each of these animations to contrast with the digital way that they are presented. I spend a lot of time drawing each frame for these animations, and then I edited the frames in photoshop so that they would fit into my code. If you press on any keyboard letter A-K, an animation and sound will play. I really struggled to get the animations to play at first, but once I figured out how to play each one separately as related to a key I spent the most amount of time drawing each animation and editing them in photoshop, and recording/editing sounds .
All of the images in my project were created by me. Most of the sounds were things that I recorded using my iPhone, and a few were dowloaded from Freesound.org. I used Audacity to edit all the sounds so that they matched with my animations.
I have to include a link to download my file, as I have over 100 files in my assets folders and they exceed the maximum file size for a wordpress post. It takes a few seconds for all these assets to load. Also my project needs a local server to run.
Here is an example of one of the animations, but it’s really hard to screenshot these short animations so I would definitely recommend downloading it and trying it yourself 🙂
]]>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!
/*
* 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;
}
}
}
}
]]>The Adventures of Peewie
For my project, I created a short video adventure / educational game which revolves around bringing Peewie home to safety. In the game, using the up arrow button, you jump to avoid the cacti and spiky platforms. I would recommend to constantly stay jumping. If you hit a spiky platform or cacti, the game ends and you see this screen.
If you survive through the whole game, you will see all 4 levels and receive fun facts about koalas at every level. If you make it to the end, you are brought home to safety.
In this picture, Peewie is covering Obama’s face. In my proposal I said that the game would involve the koala climbing a tree but it evolved more into creating a visual experience/story more so than a game. Have fun!
//Mairead Dambruch
//Section C
//Project 12
var platforms = [];//platform array
var koalaY = 0;
var koalaDy = 0; //vertical velocity
var offset = 0;
var barNum = 300;//number of platforms
//picture names
var lostlife;
var congrats;
var cactus;
var spike;
var angel;
var GameOver;
var reload;
var redX;
var spikeExample;
var cactiExample;
var heaven;
var dad;
function preload(){
lostlife = loadImage("http://i.imgur.com/eCYmH15.jpg");
congrats = loadImage("http://i.imgur.com/EQxzwtc.jpg");
cactus = loadImage("http://i.imgur.com/Hp9LFpZ.png");
spike = loadImage("http://i.imgur.com/nRBS4fx.png");
angel = loadImage("http://i.imgur.com/8kZpNEO.jpg");
GameOver = loadImage("http://i.imgur.com/LzK1lnJ.jpg");
reload = loadImage("http://i.imgur.com/tIlOzm8.png");
redX = loadImage("http://i.imgur.com/ENZweGy.png");
spikeExample = loadImage("http://i.imgur.com/GZCztt6.png");
cactiExample = loadImage("http://i.imgur.com/2kTQhSR.png");
heaven = loadImage("http://i.imgur.com/fEk6K32.jpg");
dad = loadImage("http://i.imgur.com/EQxzwtc.jpg");
}
function newPlatform(px, py, pw) {
return {x: px, y: py, w: pw};
}
function setup() {
createCanvas(600, 300);
platforms.push(newPlatform(10, 10, 10));
}
function platRight(p) {
return p.x + p.w;
}
function platLast() {
return platforms[platforms.length - 1];
}
function draw() {
var c = color(123, 234, 223);
var cactusheight = 225;
var cactiO = 200;
var groundO = 35;
var spikeOx = 143;
var spikeOy = 124;
var platformW = 30;
var py = 150;
background(c);
stroke(0);
fill(0);
// the ground
fill(255, 217, 102);
rect(0, height - groundO, width, groundO);
//draw obstacles
fill(255);
stroke(255);
for (var i = 0; i < platforms.length; i++) {
var p = platforms[i];
rect(p.x- offset, p.y , platformW, platformW);
//draws cacti
image(cactus, (p.x - offset) - cactiO, cactusheight ,(cactus.width / 2), (cactus.height / 2));
//draws spikes
image(spike, ((p.x - spikeOx) - offset), p.y - spikeOy, (spike.width * 1.5), (spike.height * 1.5));
}
//time tracker
fill(100);
noStroke();
var timeX = 130;
var timeY = 55;
var ttextX = 5;
var ttextY = 17;
var millisecond = millis();
rect(0, 0, timeX, timeY);
stroke(0);
fill(255);
textSize(10);
text("Milliseconds \nrunning: \n" + millisecond, ttextX, ttextY);
//screen 1
if(millis() > 1 & millis() < 3000){
var s1textX = 230;
var s2textY = 200;
offset = 0;
p.y = 150;
background(255);
stroke(0);
fill(0);
textSize(12);
text("BRING PEEWIE HOME!!", s1textX, s2textY);
}
//instructional screen
if(millis() > 3000 & millis() < 7000){
var itextX = 235;
var itextY = 200;
var itextO = 220;
var imageO = 100;
offset = 0;
p.y = 150;
background(255);
stroke(0);
fill(0);
textSize(12);
text("HIT THE UP ARROW", itextX, itextY);
text("TO AVOID CACTI & SPIKES", itextO, itextO);
image(spikeExample, imageO, imageO, (spikeExample.width/2), (spikeExample.height/2));
image(cactiExample, imageO*4 , imageO, (cactiExample.width/2), (cactiExample.height/2));
}
//Level 1
if(millis() > 7000 & millis() < 9000){
var l1text = 200;
var l1O = 30;
offset = 0;
p.y = 150;
background(255);
stroke(0);
fill(0);
textSize(18);
text("LEVEL 1", l1text, l1text);
text("START JUMPIN'!", l1text, l1O + l1text);
}
//Level 2
if(millis() > 18000 & millis() < 23000){
l2os = 20;
l2textY = 270;
offset = 0;
var l2text = 200;
p.y = 150;
background(255);
stroke(0);
fill(0);
textSize(18);
text("LEVEL 2 FUN FACT", l2text, l2text);
textSize(13);
text("In Aborigine language, the word ‘koala’ means ‘no water’, because the only water", l2os, l2textY);
text("they drink is through eucalyptus leaves.", l2os, l2textY + l2os);
}
//Level 3
if(millis() > 30000 & millis() < 35000){
var l3text = 200;
offset = 0;
p.y = 150;
background(255);
stroke(0);
fill(0);
textSize(18);
text("LEVEL 3 FUN FACT", l3text, l3text);
textSize(15);
text("Koalas have the smallest brain to body size ratio of any mammal - Sorry Peewie!", l2os, l2textY + l2os);
}
//Level 4
if(millis() > 45000 & millis() < 50000){
var l4text = 200;
offset = 0;
p.y = 150;
background(255);
stroke(0);
fill(0);
textSize(18);
text("LEVEL 4 FUN FACT", l4text, l4text);
textSize(15);
text("51% of koalas have chlamydia - Let's hope Peewie is in the 49%!", l2os, l2textY + l2os);
}
//Level 5, End of Game
if(millis() > 55000 & millis() < 1000000){
var l5text = 200;
var l5x = 150;
var l5y = 285;
offset = 0;
barNum = 0;
background(255);
image(heaven, 0, 0, (heaven.width/2), (heaven.height/2));
image(dad, l5text, 70, (dad.width/3), (dad.height/3));
stroke(0);
fill(0);
textSize(30);
text("YOU MADE IT HOME!!", l5x, l5y);
}
// if first platform is offscreen to left, remove it
if (platforms.length > 0 & platRight(platforms[0]) < offset) {
platforms.shift();
}
// if last platform is totally within canvas, make a new one
if (platRight(platLast()) - offset < width) {
var p = newPlatform(platRight(platLast()), // start location
random(150, 250), // height of new platform
barNum); // all platforms have width 200 for now
platforms.push(p); // add to our array of platforms
}
// move the "landscape"
offset += 1;
//koala is moving
var pindex = 0;
var koalaX = 300;
//if platform is behind koala, increase index
if (platRight(platforms[pindex]) - offset < koalaX){
pindex += 1;
}
var py = platforms[pindex].y;
//if koala is above platform, land on base
if (koalaY <= py){
koalaY = min(py - 20, koalaY + koalaDy);
} else {
if (koalaDy < 0){
koalaDy = 0;
}
koalaY = min (height, koalaY + koalaDy)
}
//if koala is past platform base, game over
if (koalaY >= p.y){
offset = 0;
background(0);
//aligns koala to be in angel;
koalaY = 170;
koalaX = 310;
//angel
image(angel, 245, 90, (angel.width/1.8), (angel.height/1.8));
//game over checkerboard
image(GameOver, 110 , 20, (GameOver.width/4), (GameOver.height/4));
image(GameOver, 360 , 20, (GameOver.width/4), (GameOver.height/4));
image(GameOver, 110 , 220, (GameOver.width/4), (GameOver.height/4));
image(GameOver, 360 , 220, (GameOver.width/4), (GameOver.height/4));
//sad koala checkerboard
image(lostlife, 250 , 0, (lostlife.width/2), (lostlife.height/2));
image(lostlife, 500 , 0, (lostlife.width/2), (lostlife.height/2));
image(lostlife, 0 , 0, (lostlife.width/2), (lostlife.height/2));
image(lostlife, 250 , 200, (lostlife.width/2), (lostlife.height/2));
image(lostlife, 500 , 200, (lostlife.width/2), (lostlife.height/2));
image(lostlife, 0 , 200, (lostlife.width/2), (lostlife.height/2));
image(lostlife, 125 , 100, (lostlife.width/2), (lostlife.height/2));
image(lostlife, 375 , 100, (lostlife.width/2), (lostlife.height/2));
//Reload suggester
textSize(10);
stroke(255);
fill(255);
text("TRY TO SAVE PEEWIE", 10, 150);
image(reload, 50, 160, (reload.width/15), (reload.height/15));
textSize(9);
text("GIVE UP ON PEEWIE", 505, 150);
image(redX, 535, 160, (redX.width/10), (redX.height/10));
}
//accelerate koala with gravity
koalaDy = koalaDy + .8;
//draw koala
//face
fill(0);
ellipse(koalaX, koalaY - 20, 20, 20);
//legs
noStroke();
fill(157, 165, 178);
ellipse(koalaX - 7, koalaY + 4, 15, 30);
ellipse(koalaX + 7, koalaY + 4, 15, 30);
//arms
fill(142, 139, 142);
ellipse(koalaX - 14, koalaY, 10, 20);
ellipse(koalaX + 14, koalaY, 10, 20);
//koala head
noStroke();
fill(157, 165, 178);
ellipse(koalaX, koalaY - 20, 55, 50);
//ears
fill(157, 165, 178);
ellipse(koalaX - 20, koalaY - 40, 25, 25);
ellipse(koalaX + 20, koalaY - 40, 25, 25);
//eyes
fill(255);
ellipse(koalaX - 15, koalaY - 20, 15, 15);
ellipse(koalaX + 15, koalaY - 20, 15, 15);
//pupils
fill(0);
ellipse(koalaX - 15, koalaY - 19, 8, 8);
ellipse(koalaX + 15, koalaY - 19, 8, 8);
//eye lids
stroke(0);
fill(206, 159, 204);
arc(koalaX - 15, koalaY - 20, 15, 15, PI, 0, CHORD);
arc(koalaX + 15, koalaY - 20, 15, 15, PI, 0, CHORD);
//nose
fill(0);
arc(koalaX, koalaY - 10, 10, 25, PI, 0);
//mouth
fill(206, 159, 204);
arc(koalaX, koalaY - 7, 7, 7, 0, PI, CHORD);
//ear pink
fill(206, 159, 204);
noStroke();
ellipse(koalaX - 20, koalaY - 40, 15, 15);
ellipse(koalaX + 20, koalaY - 40, 15, 15);
}
function keyPressed() {
if (keyCode == UP_ARROW){
koalaDy = -10;
}
return false;
}
Image Citations
sad koala image http://s95.photobucket.com/user/lilo19951995/media/34533.gif.html
obama holding koala http://www.vox.com/xpress/2014/11/15/7226815/barack-obama-koala
cacti – from Steve the Jumping Dinosaur Chrome loading game
Game Over image is from Pac Man
angel wings – http://www.shutterstock.com/pic-205797616/stock-vector-angel-wings-with-golden-halo-hovering-in-the-dark-wings-and-golden-halo.html
heaven background -http://weknowyourdreams.com/heaven.html
]]>
For my final project I’d like to create visual software that responds to music and could be used as background visuals for performance.
I would like my final project to be something that through mouse control by the VJ or whoever was the controller, you could create new shapes appear or cause the visuals to change and to move in a different direction. I’d like to play with multiple colors and spaces and watching movement move in and out of view.
The sensation I’m looking to create is that of looking out of a window. The visuals go by and the backgrounds and visuals change when the user clicks mousePressed. A few of the visuals I want to create are clouds passing by that when clicked change shape into water that then blends together and then when clicked again can become mountain ranges. These are just starter ideas and I’m sure as I progress I will come up with more as things continue.
The two artists I’m using as inspiration for my final project are Kynd and Luke Twyman.
Kynd’s “At First” are vivid watercolor visuals that they created for a VJ set for the musician Yaporigami. The visuals interact with the music to create beautiful painterly strokes that consume the and transform within the space. I love the feeling of the visuals and the way they move within their constraints and interact with the music.
The other piece is Luke Ywyman’s interactive design for the Helios’ album “Yume”. This interactive design is interesting to me because it gives the viewer the ability to interact both sonically and visually with the work and therefore feel they are also contributing and adding to it.
For my final project, I’d like to create an audiovisual performance instrument so both of these are good examples to draw from in terms of thinking about how I will manifest my own audio visual program. http://thecreatorsproject.vice.com/blog/float-over-a-digital-desert-in-helios-interactive-album
]]>//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Section C 1:30PM
//Assignment 011-C
var turtles = [];
var heart;
function setup() {
strokeWeight(20);
var colors =[ color(113, 222, 241),
color(175, 230, 51), color(183, 140, 255), color(150,20,150)];
createCanvas(550, 550);
for(i = 0; i < colors.length; i++){ // creates multiple turtles
var turt = makeTurtle(325,400);
turt.setColor(colors[i]);
turt.penDown
turtles.push(turt);
}
}
function draw() {
background(0);
fill(0);
strokeWeight(4);
var heart =makeTurtle(325,100);
for (b=0; b<width;b++){
heart.forward(100);
heart.right(45);
heart.forward(100);
heart.right(45)
heart.forward(100);
heart.right(50);
heart.forward(200);
}
for(i = 0; i < turtles.length; i++){
turtles[i].forward(50);
turtles[i].left(100);
turtles[i].forward(50);
turtles[i].right(50);
turtles[i].forward(50);
turtles[i].right(50);
//if(turtles[i].distanceTo(300, 300) > 300){
//turtles[i].goto(300, 300);
//}
for(m = 0; m < turtles.length; m++){
turtles[m].forward(25);
turtles[m].left(50);
turtles[m].forward(25);
turtles[m].right(25);
for(x = 0; x < turtles.length; x++){
turtles[x].forward(5);
turtles[x].left(10);
turtles[x].forward(5);
turtles[x].right(5);
}
}
}
}
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;}
For this project, I wanted to experiment with using turtles and colors as well as geometric shapes. I liked creating a more rigid grey geometric shape with movement and color within it.
]]>For the final project, i was inspired to explore the possibility in the sound visualization area and I beginning think of making sound graphic animation interact with sound track which sound be project into different architectural space to receive different effects.
I try to make the graphics radiator look, so it could fit different architectural space. The actual graphic still needs exploring and the final version would largely depend on the music track chose.
A project that I really found interesting and that pertained to project is one by Bjork Digital. The project is very short but consists of a man moving around and colors, lights, and animations are moving around and seem to react to the way that he moves. The reason why it relates is because initially I was going to include a camera in my project that reads the positioning of your hands based on the lighting. So instead of pressing a key on a keyboard to make the bars rise to the top, you could kind of raise them to the top by yourself like the text rain letter project. The other project that I found interesitng and that pertained to my project was Masaki Fujihata. This project was supposed to take a camera and focus on a specific object until a video came to life with the object that you were focusing on. Going back to my want of using a camera in my project, this could be a really cool interaction between the characters I am using and the person who is playing the game. Unfortunately I do not believe that I can recreate anything that this project has demonstrated.
Björk
James Merry
●ProjectPlanning / Produce and Production
Dentsu Lab Tokyo
Creator: Daito Manabe
Creator: Masaki Fujihata
]]>I grew up near a beach, and I really enjoy the ocean and the peacefulness of the waves, but I’m also really interested by the things under the water. For this final project, I want to create a looping coral reef that shows the different colors and delight of a underwater land that we are not exposed to.
I was to create a delightful moving animation with the use of simple shapes and forms. I also want to limit myself to a few colors to avoid getting too complicated.
I have decided to work on something similar to Patatapfor my final project. So I decided to look at Patatap and a similar creation named Typatone. Patatap creates unique sound and visual when a specific key is pressed, whereas Typatone generates special tones when as the user types. Both are interesting projects in that they bring uniqueness and unpredictability in user experience. Patatap may have been better if there is a clearer indication of which key is pressed so that when users try to create a composition or sound combination they can better utilize their knowledge on which key produces which sound and visual. On the other hand, Typatone may be improved by changing font color or add more visual variations to it. Overall, I really like the idea of Patatap and Typatone as they bring in more variability and color to everyday lives.
Typatone screenshot