## Final Project

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 redX;
var spikeExample;
var cactiExample;
var heaven;

}

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

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

textSize(10);
stroke(255);
fill(255);
text("TRY TO SAVE PEEWIE", 10, 150);
textSize(9);
text("GIVE UP ON PEEWIE", 505, 150);
image(redX, 535, 160, (redX.width/10), (redX.height/10));
}

//accelerate koala with gravity

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

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){
}
return false;
}
``````

Image Citations

obama holding koala http://www.vox.com/xpress/2014/11/15/7226815/barack-obama-koala

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

## mdambruc LookingOutwards-12

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.

## mdambruc Final-Project-Proposal

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.

## mdambruc-Project-11

``````//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 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 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();
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;
}
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);
fill(240, 182, 66);
rect(0, hotdogHeight+2, 8, 3);

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

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

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

pop();
}
function makehotdog(LocationX) {
var hdog = {x: LocationX,
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

## LookingOutwards-11-mdambruc

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.

## LookingOutwards-10-mdambruc

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.

## mdambruc-Project-10

``````//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
removeOldSeaweed();
//draw fishes
showUpdateFishes();
removeOldFishes();
}
//creates new seaweeds at beginning of image
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;
}
//will create seaweed 50% of the time
var newSeaweed = 0.5;
if (random(0,1) < newSeaweed){
seaweed.push(makeSeaweed(width));
}
}
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");
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,
speed: -10,
nGrowth: round(random(2,20)),
move: moveSeaweed,
display: showSeaweed}
return sweed;
}
function makeFishes(LocationX, LocationY) {
var fishes = {x: LocationX,
y : LocationY,
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.

## Project-09 mdambruc

Original picture

Possible Outcome

``````//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-09-A
var img;
var ImageW;
var ImageH;
}
function setup() {
img.resize(800, 500);
ImageW = img.width;
ImageH = img.height;
createCanvas(ImageW, ImageH);
background(100);
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.

## mdambruc-LookingOutwards-09

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.

## mdambruc-LookingOutwards-08

Okunseinde’s Afronaut on the street

Salome Asega & Ayodamola Okunseinde