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!

sketch

//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

Fez, created by Phil Fish 2012

Trailer for Fez

The first project is the game Fez, created by Phil Fish. The character in this game lives in a 2D world but one day finds that he has the power to explore a 3D world. This video game is more focused on the beautiful pixel art graphics he has created. It is more of a “stop and smell the flowers” game, as opposed to just quickly trying to get through levels. I really appreciate the general aesthetic of this game and will be inspired by his use of graphics in my own interactive game, by using pixel art. This game notoriously took 5 years to be completely created, which frustrated many gamers that wanted to play the game. I appreciate Fish’s dedication to his work and the standards he has for himself – due to him recreating the game 3 times in order for it to be perfect.

Compared to Fez, the game Persist by adventure islands (created in 2013), is much simpler. However, they are both still utilizing platforms and are centered around the journey of a character. However I do enjoy the use of simple graphics to convey space. I chose Persist by adventure islands because I thought it was a simple game that i could base my own interactive game off of. Using basic key controls to navigate the player as well as a restarting system that returned the player to the beginning of the game if killed, I chose this game because those attributes are very similar to what I want to replicate in my own game. In Persist they could have overlooked having the levels be a bit more different from each other, however I do enjoy the use of a narrative they provide.

http://gamejolt.com/games/persist/15556#close

playable game of persist.

For my final project, I want to create an interactive game. My concept for the game is to have a koala character that is trying to reach the top of a tree. Along the way, he faces a few difficulties such as other koalas and rocks that the koala has to jump over to dodge. The game will be moving upwards and as the koala progresses the player is rewarded with facts about koalas. I want to be able to use the directional keys on the keyboard for the player to use this game. I also might want to experiment with creating pixel art for the background of the game. I was inspired to create this based off of this video.

Because of this video, I will also be putting koala sounds into the game. Here is a quick sketch of general setup of game. The tree would be vertical in the actual game.

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-11-A
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;
}
var hotdog = [];//hotdog array
var turtle1;
var startFrame;
var lightening;//sound file

function preload(){
//  lightening2 = loadSound("lightening2.wav");//background sound
}

function setup() {
    createCanvas(800, 400);
    background(0);
  //  lightening2.play(0, 1, 2);//background sound
    for (var i = 0; i < 100; i++){
      var hotdogplace = random(width);
      hotdog[i]= makehotdog(hotdogplace);
      turtle1 = makeTurtle(mouseX, mouseY);//create turtle
      turtle1.setColor(color(255));
      turtle1.setWeight(2);
      turtle1.penDown();//creating lightening turtle
      resetCanvas();
      frameRate(100);
}
}
function draw() {
  //creating striped background
  colorMode(RGB);
  noStroke();
  from = color(48, 138, 191);
  to = color(200, 255, 50);
  interA = lerpColor(from, to, .33);
  interB = lerpColor(from, to, .66);
  fill(from);
  rect(0, 0, width, 100);
  fill(interA);
  rect(0, 100, width, 200);
  fill(interB);
  rect(0, 200, width, 300);
  fill(to);
  rect(0, 300, width, 400);
  sloth();
  updateandcreatehotdogs();
  removehotdog();
  addnewhotdog();
  showhotdog();
  makehotdog();
  //draws lightening
  var step = (random(width) - random(height));
  turtle1.forward(step);
  turtle1.left(1000);
  if (turtle1.y > width || turtle1.x > height)
  resetCanvas();
}
function resetCanvas(){//creates flashing background after turtle is drawn
  background(0);
  startFrame = frameCount;
  turtle1.penUp();
  turtle1.goto(400, 300);
  turtle1.penDown();
}
function updateandcreatehotdogs(){
    for (var i = 0; i < hotdog.length; i = i + 20){
        hotdog[i].move();
        hotdog[i].display();
}
}
function removehotdog(){ //removes hotdogs after past canvas
    var hotdogToKeep = [];
    for (var i = 0; i < hotdog.length; i++){
        if (hotdog[i].x + hotdog[i].breadth > 0) {
            hotdogToKeep.push(hotdog[i]);
    }
    }
    hotdog = hotdogToKeep;
}
function addnewhotdog() {
    var newhotdogProbability = 0.5;
    if (random(0, 1) < newhotdogProbability) {
        hotdog.push(makehotdog(width));
    }
}
function hotdogmove() {
    this.x += this.speed;
}
function showhotdog() {
    var hotdogHeight = 10;

	  push();
    noStroke();

    //draws four lines of hotdogs

    translate(this.x, 30);
    fill(255, 111, 91);
    ellipse(0, hotdogHeight, 25, 7);
    rectMode(RADIUS);
    fill(240, 182, 66);
    rect(0, hotdogHeight+2, 8, 3);

    translate(this.x, 80);
    fill(255, 111, 91);
    ellipse(0, hotdogHeight, 25, 7);
    rectMode(RADIUS);
    fill(240, 182, 66);
    rect(0, hotdogHeight+2, 8, 3);

    translate(this.x, 100);
    fill(255, 111, 91);
    ellipse(0, hotdogHeight, 25, 7);
    rectMode(RADIUS);
    fill(240, 182, 66);
    rect(0, hotdogHeight+2, 8, 3);

    translate(this.x, 130);
    fill(255, 111, 91);
    ellipse(0, hotdogHeight, 25, 7);
    rectMode(RADIUS);
    fill(240, 182, 66);
    rect(0, hotdogHeight+2, 8, 3);

    pop();
}
function makehotdog(LocationX) {
    var hdog = {x: LocationX,
                breadth: 1000,
                speed: -1.0,
                nstars: round(random(2,8)),
                move: hotdogmove,
                display: showhotdog}
    return hdog;
}
function sloth(x, y){
  //draws sloth
  x = 400;
  y = 350;
  noStroke();
  fill(140, 70, 0);
  ellipse(x, y, 20, 50);
  ellipse(x, y - 40, 30, 30);
  ellipse(x, y + 10, 35, 30);
  //face and body
  ellipse(x + 7, y + 20, 10, 20);
  ellipse(x - 7, y + 20, 10, 20);
  fill(255, 218, 117);
  ellipse(x, y - 40, 20, 20);
  //innerface
  fill(214, 135, 32);
  ellipse(x, y - 40, 17, 8);
  ellipse(x, y - 37, 10, 10 )
  //surrounding eye area
  fill(0);
  ellipse(x - 5, y - 40, 5, 5);
  fill(0);
  ellipse(x + 5, y - 40, 5, 5);
  //eyes
  fill(0);
  ellipse(x + 1, y - 37, 2, 2);
  fill(0);
  ellipse(x - 1, y - 37, 2, 2);
  //nostrils
  noStroke();
  fill(255, 0, 0);
  arc(x, y-34, 5, 5, TWO_PI, PI, CHORD);
  //mouth
}

For this project, I created a sloth-like creature that is continuously getting electrically shocked in the head by lightening in a hotdog storm. The lightening is created by turtles. I originally had lightening sounds that accompanied this project but was unable to have that due to the need of a local server.

Here is a screenshot of the project

Zimoun

http://www.zimoun.net/video.html

157 prepared dc-motors, cotton balls, cardboard boxes 60x20x20cm

Zimoun 2014

Picture of installation

Video of Piece

Since in week 4 I wrote about a piece of music, this week I decided to choose sound artist Zimoun, a swiss artist located in Bern, Switzerland. With Zimoun’s piece “157 prepared dc-motors, cotton balls, cardboard boxes 60x20x20cm” I really enjoy his use of space. Zimoun specializes in creating large-scale sound sculptures composed with simple and functional components. I really admire how he uses simple materials such as cardboard and balls to create grand immersive sculptures. Zimoun uses prepared systems to control the dc-motors in his piece, allowing for him to compute the movements they create. Zimoun is truly an artist who is capable of creating complex imagery and sound from simple space and simple machines. I admire his efficiency and ability to make great art out of commonplace objects, because it proves that great art does not need to be expensive to create. It is art of the common people.

Camille Utterback, Entangled 2015

video of Utterback’s piece Entangled

http://camilleutterback.com/projects/entangled/

I was first drawn to choose Camille Utterback because of her works focusing on permanent public art and installations. I enjoy Utterback’s fascination with the correspondence between linking computational systems to human movement. Utterback’s concentration of interaction between humans and computers led me to choose her piece “Entanglement”. This piece is made up of three layers of fabric that has projected images on them. These images are interactive – throughout the piece, “tangles” of cords will appear that are able to be moved by motions by the viewer. Also, as the viewer walks around the piece, their profile is cast onto the fabric. On the other side of the fabric, their form becomes merely a murky figure. Utterback describes this overlapping imagery as a “mutually negotiated space”. Utterback is an Assistant Professor in Art at Stanford University. She holds a BA in Art from Williams College. She currently lives and works in San Francisco, California.

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project 10
var seaweed = [];
var speed = .5;
var fishes = [];
function setup() {
  createCanvas(600, 400);
  //creating random occurrences of seaweed placement
  for (var i = 0; i < 50; i++){
  var rx = random(width);
  var ry = random(height);
  seaweed[i] = makeSeaweed(rx);
  fishes[i] = makeFishes(rx, ry);
  }
  frameRate(5);
  }

function draw() {
  background(color(10, 75, 88));
  //draw sand
  sand();
  //draw and update seaweed
  showUpdateSeaweed();
  removeOldSeaweed();
  addSeaweed();
  //draw fishes
  showUpdateFishes();
  removeOldFishes();
  addFishes();
}
//creates new seaweeds at beginning of image
function showUpdateSeaweed(){
  for (var i = 0; i < seaweed.length; i++){
  seaweed[i].move();
  seaweed[i].display();
  }
  }
//creates new fishes at beginning of image
function showUpdateFishes(){
  for (var i = 0; i < fishes.length; i++){
  fishes[i].move();
  fishes[i].display();
  }
  }
//removes seaweed when seaweed goes past canvas
function removeOldSeaweed(){
  var keepSeaweed = [];
  for (var i = 0; i < seaweed.length; i++){
  if (seaweed[i].x + seaweed[i].breadth > 0) {
      keepSeaweed.push(seaweed[i]);
    }
    }
  seaweed = keepSeaweed;
  }
//removes fishes once out of canvas
function removeOldFishes(){
    var keepfishes = [];
    for (var i = 0; i < fishes.length; i++){
    if (fishes[i].x > 0) {
      keepfishes.push(fishes[i]);
      }
      }
    fishes = keepfishes;
    }
function addSeaweed(){
  //will create seaweed 50% of the time
  var newSeaweed = 0.5;
  if (random(0,1) < newSeaweed){
     seaweed.push(makeSeaweed(width));
  }
  }
function addFishes(){
  var newFishes= 0.5;
  if (random(0,1) < newFishes){
       fishes.push(makeFishes(width, random(5, 10)));
  }
  }
//allows for seaweed to move offscreen
function moveSeaweed(){
  this.x += this.speed;
  }
function moveFishes(){
  this.x += this.speed;
  this.y += this.speed;
  }
function showSeaweed(){
  //places seaweed at proper place in sand
  var sandHeight = 5;
  var offset = 15;
  //created randomized height of seaweed
  var weedHeight = this.nGrowth * sandHeight;
  strokeWeight(1);
  push();
  translate(this.x, height - offset);
  fill("Green");
  rect(0, -weedHeight, this.breadth, weedHeight);
  stroke(50);
  var bubbleLen = 3;
  var bubblestart = 5;
  var bubbleend = 10;
  //creates bubbles flowing out of seaweed
  for (var i = 0; i < this.nGrowth; i++) {
  fill("lightBlue");
  noStroke();
  ellipse(bubblestart, -bubbleend - (i * weedHeight), bubbleLen, bubbleLen);
}
  pop();
}
//draws fishes
function showFishes(){
  push();
  translate(this.x, this.y);
  noStroke();
  fill("Salmon");
  //fish body
  ellipse(0, 0, 15, 10);
  //fishtail
  triangle(5, 0, 14, 10, 14, -5);
  //fisheye
  ellipse (2, 2, 2, 2);
  pop();
}
function makeSeaweed(LocationX) {
    var sweed = {x: LocationX,
                breadth: 5,
                speed: -10,
                nGrowth: round(random(2,20)),
                move: moveSeaweed,
                display: showSeaweed}
    return sweed;
  }
function makeFishes(LocationX, LocationY) {
      var fishes = {x: LocationX,
                  y : LocationY,
                  breadth: 10,
                  speed: -random(1, 10),
                  move: moveFishes,
                  display: showFishes}
      return fishes;
    }
function sand(){
  strokeWeight(5);
  for (var i = 0; i < width; i++) {
  //creates randomized terrain
  var gradient = noise(i * .004 + millis() * speed)
  var s = height - .20 * height * gradient;
  stroke(color(240, 229, 144));
  line(i, height, i, s);
}
}

For this assignment, I wanted to create an underwater scene which featured a school of fish passing by. Being hesitant with objects, I started to begin simply with them by creating the seaweed. I then added the bubbles coming out of the seaweed. Then, I added the fishes as objects, in attempts to further understand how objects work. With every new element in the animation, I grew to be more comfortable with objects and how they interact – both to each other and to surrounding code. I’m looking forward to being able to create more animations with ease now using objects. Prior to this assignment I was confused by the uses of “this” and how helper functions were used. After this assignment, I am more comfortable with objects.

Original picture

Possible Outcome

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-09-A
var img;
var ImageW;
var ImageH;
function preload(){
  img = loadImage("http://i.imgur.com/Iram3uO.jpg")
}
function setup() {
  img.resize(800, 500);
  ImageW = img.width;
  ImageH = img.height;
   createCanvas(ImageW, ImageH);
   background(100);
   img.loadPixels();
   frameRate(10);
}

function draw() {
      var px = random(ImageW);
      var py = random(ImageH);
      var ix = constrain(floor(px), 0, ImageW -1);
      var iy = constrain(floor(py), 0, ImageH -1);
      var pixel = img.get(ix, iy);
      // image(img, 0, 0);

      var b = brightness(pixel);
      //layer 1 (brightest)
     if (b > 80){
      stroke(255);
      strokeWeight(6);
      textSize(6);
      text("A", ix, iy);
      frameRate(5000);
    }//layer 2
     if (b > 60 & b < 80){
       stroke(191);
       strokeWeight(6);
       textSize(6);
       text("G", ix, iy);
       frameRate(5000);
     }//layer 3
     if (b > 40 & b < 60){
       stroke(128);
       strokeWeight(6);
       textSize(6);
       text("C", ix, iy);
       frameRate(5000);
     }//layer 4
     if (b > 20 & b < 40){
       stroke(64);
       strokeWeight(6);
       textSize(6);
       text("T", ix, iy);
       frameRate(5000);
     }//layer 5 (darkest)
     if (b > 0 & b < 20){
       stroke(0);
       strokeWeight(3);
       textSize(3);
       text(".", ix, iy);
       frameRate(10000);
    }
    }

For this project I chose to use a picture of my sister. It is made up of 5 color tones to create a black to white gradient. In my code, I split up all the possible brightness values into just 5 categories resulting in a simplified gradient of value. My custom pixels were the letters A, C, G, and T. These letters represent the nucleotides that make up our DNA. Each value category corresponds to a specific letter and the darkest value (black) is just a square.

https://courses.ideate.cmu.edu/15-104/f2016/2016/09/22/diana-connolly-looking-outwards-4/

http://www.patatap.com/

Patatap, by Jono Brandel and Lullatone, 2014

An example of what you can create with patatap!

At first I wasn’t that intrigued into the project, until I actually tried using the website. This website makes you sound like a professional tech musician simply by slamming your hand on the keyboard. I agree that this website stays interesting, because every time you press the spacebar you are given 26 new sounds and visuals to play with. I think the coolest thing about this website is that I believe that our class would be able to create something very similar to it with our skill set now. I think that websites like these really captivate the attention of younger audiences and would be great to be used to introduce programming in schools. If kids see that they can be cool DJs if they learn how to program, then I’m sure many would try to learn.

Okunseinde’s Afronaut on the street

Salome Asega & Ayodamola Okunseinde

http://ayo.io/about.html

video presentation

http://www.salome.zone/about/

Salome Asega and Ayodamola Okunseinde are two artists who have collaborated together over many projects including workshops, their museum The Iyapo Repository and many outreach projects that involve going into the streets of Brooklyn and collaborating with passerbys. Their works all address the lack of representation of black people in projections of the future. Salome Asega is a Brooklyn based artist who specializes in interactivity and installation art. Salome studied Design and Technology at Parsons as well as Social Practice at New York University. Okunseide is based in New York and also specializes in interactivity as well as wearable technology. Okunseide also studied Design and Technology at the New School in New York.

I admire both of these artist’s work because they are both highly dependent on participation and interaction of viewers. Asega’s personal work involves creating a collaborative pirate radio station and Okunseinde’s involves him dressing up as an “Afronaut” and walking the streets of New York and interacting with passerbys. I enjoy how heavily exterior variables have the potential to affect these artist’s works. In their presentation they both presented their personal work first and then moved on to their collaborative work. I enjoyed this because it was interesting to see how certain aspects of their personal work still arose in their collaborative work. They also started the presentation with a brief discussion on the discrimination of black people throughout history.