Elizabeth – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

elizabew-final project

Click on either of the two choices that are available to continue through the story.

(Try the closet route!)

//calls beginning function to start the game over
var scene = new beginning();

//holds background images
var bg = [];

var bgURL = [
  //outside image
  "https://i.imgur.com/NhThk6g.jpg",
  //lake reflection image
  "https://i.imgur.com/GA10Vet.jpg",
  //image of both lake and forest
  "https://i.imgur.com/c6C6zEC.jpg",
  //cat image
  "https://i.imgur.com/4zrzVTj.jpg",
  //true ending image
  "https://i.imgur.com/LADTQJI.jpg"];

function setup() {
  createCanvas(480, 450);
}

function preload(){
  // load images from URL
  for (i = 0; i < bgURL.length; i++){
    bg.push(loadImage(bgURL[i]));
  }
}

//LIST OF SCENES
function beginning() {
  this.sentence = "You wake up surrounded by complete darkness." +
  " Your body aches and you hear the faint sound of growling behind you." +
  " You pull your red hood around yourself to keep warm." +
  " You feel around and find two doors." +
  " One with a round knob and one of with a square knob.";
  this.left = new sit1();
  this.right = new sitA();
  this.lefttext = "go through the round knobbed door";
  this.righttext = "go through the square knobbed door";
  this.fillcolor = "black";
}

//Round knobbed door
function sit1() {
  this.sentence = "You immediately begin to sprint out the door." +
  " The fresh air hits your face like cold knives. Outside." +
  " You look behind you to hear the growling rumble louder." +
  " She's waking up too.";
  this.left = new sit2();
  this.right = new death("You wait and see what happens." +
  " The beast begins to wake up and it immediately sees you" +
  " She's angry and you know exactly why." +
  " She leaps towards you in a familiar fashion," +
  " mouth wide open and ready to bite down...");
  this.lefttext = "RUN!!!!";
  this.righttext = "Wait and see what happens";
  this.fillcolor = "";
  this.b = "outside";
}

function sit2() {
  this.sentence = "You run away before the beast could notice you leaving." +
  " You see a forest and a lake in the distance";
  this.left = new sitOne();
  this.right = new sit3();
  this.lefttext = "Run towards the forest";
  this.righttext = "Run towards the lake";
  this.fillcolor = "";
  this.b = "treeAndLake"
}

function sit3() {
  this.sentence = "As you run towards the lake," +
  " you stop by the edge of the water," +
  " mesmorized by your own unrecognizable reflection...";
  this.left = new death("You can't help but continue staring at yourself." +
  " Bright blue eyes and a long red cape embracing your frail body." +
  " You hear growling beghind you... GIVE...IT...BACK.... ");
  this.right = new sitThree();
  this.lefttext = "Keep staring at your own reflection";
  this.righttext = "Pull your eyes away and continue running";
  this.fillcolor = "";
  this.b = "reflection"
}

function sitOne(){
  this.sentence = "Start running faster and faster through the forest," +
  " trees flashing past you." +
  " You hear the growling not too far behind...";
  this.left = new death("You climbed up the tree as fast as you could." +
  " Right as you grabbed a second branch," +
  " you feel your hood getting tugged, pulling you down with it...");
  this.right = new sitTwo();
  this.lefttext = "Climb up a tree";
  this.righttext = "Hide in the bushes";
  this.fillcolor = "flashing green";
}

function sitTwo(){
  this.sentence = "You jump into a nearby bush and wait..." +
  " the sound of a frustrated growling felt close," +
  " but it seems to have disappeared now.";
  this.left = new sitThree();
  this.right = new sit3();
  this.lefttext = "Keep running!";
  this.righttext = "Run back towards the lake";
  this.fillcolor = "";
  this.b = "outside";
}

function sitThree(){
  this.sentence = "You decide to keep running." +
  " As you run you trip over a soft rock." +
  " Wait, that's a cat!";
  this.left = new sitFour();
  this.right = new sitFour();
  this.lefttext = "Pet the cat";
  this.righttext = "Scratch the cat's belly";
  this.fillcolor = "";
  this.b = "cat";
}

function sitFour(){
  this.sentence = "The cat purrs and rolls around on the ground." +
  " After a few minutes it gets up.";
  this.left = new sitneutralending();
  this.right = new sitneutralending();
  this.lefttext = "Follow the cat";
  this.righttext = "Why wouldn't you follow this cat?";
  this.fillcolor = "";
  this.b = "cat";
}

//Neutral ending
function sitneutralending(){
  this.sentence = "(Neutral ending) You follow the cat into a small den." +
  " I guess this is a nicer ending."
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "";
  this.b = "outside";
}

//--------------------
//Square knobbed door
function sitA() {
  this.sentence = "You open the door and find yourself looking into a closet." +
  " You run in and shut the door as quietly as you can." +
  " She's awake now too.";
  this.left = new sitB();
  this.right = new death("You decided to scream on the top of your lungs." +
  " Immediately and without warning, the beast breaks through the closet" +
  " door. Did you have a death wish?");
  this.lefttext = "Stay quiet and hope she leaves";
  this.righttext = "SCREAM!!!";
  this.fillcolor = "black";
}

//Closet scene
function sitB() {
  this.sentence = "You decide to sit quietly in the closet." +
  " After what seemed like hours, the growling disappeared...";
  this.left = new sitC();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "Walk out";
  this.fillcolor = "black";
}

function sitC() {
  this.sentence = "You felt uneasy and decided to stay in the closet." +
  " You lean back onto the back of the closet and surprisingly," +
  " you fell into a hole that leads outside!";
  this.left = new sitD();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "Crawl outside";
  this.fillcolor = "black";
}

function sitD(){
  this.sentence = "You STILL decide to stay in the closet for some reason." +
  " Maybe you're still feeling uneasy..." +
  " Time continues to pass as it usually does."+
  " Are you even going to continue on this journey?";
  this.left = new sitE();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "CRAWL OUTSIDE";
  this.fillcolor = "black";
}

function sitE(){
  this.sentence = "You still stay in the closet. This is not like the narnia" +
  " wardrobe. There is nothing special about this closet." +
  " Why do you want to stay in here so badly?";
  this.left = new sitF();
  this.right = new sit1A();
  this.lefttext = "Stay in the closet";
  this.righttext = "Crawl. Outside. Now.";
  this.fillcolor = "black";
}

function sitF(){
  this.sentence = "Okay, you've committed, we'll stay in this dumb closet."+
  " I even took away the 'crawl outside' button. I hope you're happy with yourself.";
  this.left = new sitG();
  this.right = new sitG();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitG(){
  this.sentence = "I bet you're happy about this endless loop,"+
  " Even if you change your mind you won't get it back, you're gonna have to" +
  " refresh this whole game manually.";
  this.left = new sitH();
  this.right = new sitH();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitH(){
  this.sentence = "...";
  this.left = new sitI();
  this.right = new sitI();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitI(){
  this.sentence = "..........";
  this.left = new sitJ();
  this.right = new sitJ();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitJ(){
  this.sentence = "..................";
  this.left = new sitK();
  this.right = new sitK();
  this.lefttext = "Stay in the closet";
  this.righttext = "Stay in the closet";
  this.fillcolor = "black";
}

function sitK(){
  this.sentence = "Okay, I'm just going to push you outside. Shoo!";
  this.left = new sit1A();
  this.right = new sit1A();
  this.lefttext = "OUTSIDE";
  this.righttext = "GO. OUTSIDE.";
  this.fillcolor = "black";
}

//To grandmothers house we go!
function sit1A(){
  this.sentence = "You walk outside to see the beast far off in the distance," +
  " obviously looking for you. But you have other plans...";
  this.left = new death("You dance(?) towards the beast flailing about,"+
  " probably hoping to get eaten. (I bet you were the same person wanting to" +
  " stay in that closet...)");
  this.right = new sit1B();
  this.lefttext = "Ignore your plans and dance towards the beast";
  this.righttext = "Head towards the smoke in the nearby forest";
  this.fillcolor = "";
  this.b = "outside";
}

function sit1B(){
  this.sentence = "You run through the forest, to grandmother's house." +
  " She'll protect you from the beast. You hear the beast" +
  " catching up to you, desperate to get what you've stolen back..." +
  " You notice that there is a large pit nearby";
  this.left = new sit1C();
  this.right = new goodishending();
  this.lefttext = "Continue running towards grandmother's house";
  this.righttext = "Wait to push the wolf into the pit";
  this.fillcolor = "flashing green";
}

function sit1C(){
  this.sentence = "You finally reach the door of the house" +
  " The beast is not far behing you. 'GRANDMOTHER' you scream, let me in!" +
  " Hurry!!";
  this.left = new trueending();
  this.right = new death("You decide to keep running, but the beast gets to you." +
  " And you were so close too!");
  this.lefttext = "Wait for grandmother to open the door";
  this.righttext = "Keep running!";
  this.fillcolor = "";
  this.b = "outside";
}

//True ending
function trueending(){
  this.sentence = "(True Ending) Soon after, the door opens." +
  " It's almost impossible to hide your grin..." +
  " You look back at the girl in wolfs skin that was chasing you," +
  " desperate to get her hood back." +
  " 'My, what big teeth you have, little riding hood'!";
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "";
  this.b = "trueEnd";
}

//Death scene when the beast gets you
function death(sentence) {
  this.sentence = sentence;
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "red";
}

//Good ending where you kill the beast
function goodishending(){
  this.sentence = "(Good Ending) You push the wolf into the pit. Hooray!" +
  " Now nothing is in your way...";
  this.lefttext = "";
  this.righttext = "";
  this.fillcolor = "";
  this.b = "outside";
}

function draw() {

  //Determining background color
  if (scene.fillcolor == "red"){
    background(171,6,11);
  }
  else if (scene.fillcolor == "blue"){
    background(0, 6, 34);
  }
  else if (scene.fillcolor == "flashing green"){
    frameRate(8);
    var r = random(0, 8);
    var g = random(0, 60);
    var b = random(0, 5);
    background(r, g, b);
  }
  else if (scene.fillcolor == "green"){
    background(2, 26, 8);
  }
  else if (scene.fillcolor == "black"){
    background(0);
  }
  else {
    background(0);
  }

  //Creates background images
  if (scene.b == "outside"){
    image(bg[0], 0, 0, 480, 450);
  }
  if (scene.b == "reflection"){
    image(bg[1], 0, 0, 480, 450);
  }
  if (scene.b == "treeAndLake"){
    image(bg[2], 0, 0, 480, 450);
  }
  if (scene.b == "cat"){
    image(bg[3], 0, 0, 480, 450);
  }
  if (scene.b == "trueEnd"){
    image(bg[4], 0, 0, 480, 450);
  }


  //Story text details
  fill(200);
  textSize(12);
  text(scene.sentence, 50, 270, 380, 80);
  //left text decision
  text(scene.lefttext, 50, 380, 100);
  //right text decision
  text(scene.righttext, 300, 380, 100);

  //Reset button text
  if (scene.lefttext == "") {
    text("click here to start over", 180, 370);
  }


}

//Creating "buttons" for choices and for reset
function mouseClicked(){

  //Reset button
  if (scene.lefttext == "") {
    if (mouseX > 180 & mouseX < 300 && mouseY > 360 && mouseY < 380){
       //resets game
       scene = new beginning();
    }
  }

 else{
   //left button decision
   if (mouseX > 50 & mouseX < 130 && mouseY > 370 && mouseY < 420){
     scene = scene.left;
   }
   //right button decision
   if (mouseX > 300 & mouseX < 440 && mouseY > 370 && mouseY < 420){
     scene = scene.right;
   }
 }

}

I decided to create a choose-your-own-adventure game! My initial idea was to focus on having no visuals—using only text and sound to guide the user through the story—but ultimately ended up using both visuals and text together, and just text on its own.

The story was difficult to write in its own right and I don’t claim that it is that good, but the point of this game is that most of the endings the user runs into will build on the story of the game. I decided to focus mainly on using objects (since that was the most difficult part of this class for me and I wanted to make sure I ended this class with the knowledge of how to use them).

elizabew – Looking Outwards – 12 – sectionE

For my final project, I want to create a choose your own adventure game. The idea first came when I was stuck in a rut and could not decide on what to do, so a friend of mine told me that a “choose your own adventure game” would have an interesting ending and would be doable with what I’ve learned from in this class.

Some of the games that immediately came to mind for me are: Undertale, The Stanley Parable, and MUD—but i will just be discussing The Stanley Parable and MUD in this post.

The Stanley Parable is an interactive, fictional PC game designed by Davey Wreden initially, and then designed by both him and Davey Wreden in the official remake. I’ve played choose your own adventure games before, but this was the game that really got me into the genre. I admire not only the interesting and unique story, but its immersing effect on the player that pulls them into a world without using action-packed gameplay; while only being guided by only a narrator, visual elements, and sound. There are numerous endings that creates a replay value since every new decision that is made creates a whole new story. I may be biased since this game bring up a feeling of nostalgia, but I still find it to be one of the best in its genre.

MUD is an online, text-based role-playing game where users interact with the world based on only keywords—no visuals or sound. It is considered to be one of the roots of rpg games and an inspiration for other games in the late 1970s and early 1980s. The game had a preprogrammed game, but it allowed multiple players to interact using online chat, player vs player, and interactive fiction. Players would only be able to interact with one another and with the world by typing in commands and reading/viewing descriptions of the environment around them, objects near them, and the other players in the world. This game was incredibly popular, and goes to show that visuals are not always needed to play an interesting and immersive game.

MUD1 screenshot.gif — Example of how MUD worked

elizabew – project – 12 – Proposal – Choose your adventure

Inspired by many rpg and choose your adventure games that I’ve played throughout the years, I wanted to create one of my own (granted, it’ll be much simpler than the ones I was inspired by).

The story for this project is still up in the air to potentially change, but I want to create an escape horror story. It starts out with your character (possibly a narrator instead) inside a pitch-black building, trying to figure a way out. Most of the endings will be considered “bad endings” with one “neutral ending” and one “true ending”. Instead of focusing on graphics, I thought it would be more tense if the user is placed in a situation where they can’t see where they are, but they can hear the sounds around them. The only thing they can “see” is just the text options that they can choose to allow them to continue along the story.

The interactive part of the game will be the choices the user makes. I considered randomizing some of the story branches – but i felt it would complicate the story more and potentially confuse the player.

elizabew – Looking Outwards – 11 – sectionE

Atlås from binaura on Vimeo.

For a computational music piece, I decided to look into Agoston Nagy’s work, Atlås—a guided and generative music experience made for iOS. What I really admire about this application is that not only does it let users discover and create music with “interactive sonic sounds”, but it allows users to be transferred to a beautiful digital environment that is visually unlike traditional music. It generates tasks in between spaces that are solved by the application itself within the digital environment ( without the need for users to know how to solve it) which helps to make the application more than just a “music maker.

The app is made using javascript and the p5js library that is embedded in a Swift iOS application. The sound is written in Pure Data—”a graphical programming language to develop interactive sonic events”.

Agoston Nagy says that he wanted to create something that creates a narrative which would help to guide users through an experience. He wanted to bring up thought provoking questions that are focused on communication between people. He applied these thoughts into the app by bringing up these questions in between the music experiences.

Screenshots of the application—questions appear throughout the computational music experience

elizabew – project – 11 – composition

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 11

var myTurtle = [];//array to store turtles
var movingTurtle = []; //array to store moving turtle
var d = 100; //degrees to keep movingTurtle moving
var dl = 50;//degrees to keep movingTurtle moving

function setup() {
  createCanvas(480, 480);
  background(32,50,103);
  frameRate(10);
}

function draw() {
  for(var i = 0; i < movingTurtle.length; i++) {
    //moving "bats"
    movingTurtle[i].setColor(color(25,61,mouseX));
    movingTurtle[i].setWeight(.5);
    movingTurtle[i].penDown();
    movingTurtle[i].forward(10);
    movingTurtle[i].right(d);
    movingTurtle[i].forward(2);
    movingTurtle[i].left(dl);
    movingTurtle[i].forward(15);
    d = d + 5; //makes the turtle move around the canvas continuously
    dl = dl + 2;
  }

  for(var i = 0; i < myTurtle.length; i++) {
    myTurtle[i].setColor(color(255,248,193));
    myTurtle[i].setWeight(2);
    myTurtle[i].penDown();
    myTurtle[i].forward(20); //flower/star shape
    myTurtle[i].right(90);
    myTurtle[i].forward(40);
    myTurtle[i].right(45);
    if (i % 10 == 0) { //every 10, large star
      myTurtle[i].setColor(color(255,224,9));
      myTurtle[i].forward(50);
      myTurtle[i].left(180);
  }
}

}

function mousePressed() {
  myTurtle.push(makeTurtle(mouseX, mouseY));//turtle appears when mouse is pressed
}

function mouseDragged(){
  movingTurtle.push(makeTurtle(mouseX, mouseY)); //turtle follows mouse dragging
}

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

Image using both mousePressed and mouseDragged

For this project, I wanted to create turtles that look like stars in the night sky, while also adding texture that could imitate fog. I made it so that the fog would change color as well in order to somewhat mirror the way fog changes tone depending on where the light source is.

At first I drew different star patterns on paper and then transferred my two favorite into the program. I made it so that smaller stars appear more often than the larger stars in an effort to imitate the “north star” with smaller stars surrounding it. I’m fairly happy with how it turned out, but if I could, it might have been fun to play with adding more visually different stars into the mix.

elizabew – Looking Outwards – 10 – sectionE

The woman I decided to focus on is Lauren McCarthy—an artist who is currently based in LA and Brooklyn and who focuses on exploring social and technological systems. She graduated from MIT with a BS in Computer Science and Art and Design and also holds an MFA from UCLA. She is also the creator of p5.js!

Her ongoing project, Follower, is a service that “follows” you. If the user is selected, they download an app and wait for a day. At the end of the day, the user is given a photo of themselves that was taken by the Follower. While obviously not an app meant for everyday use—such as facebook, gmail, twitter, etc—Follower is meant to create a more obvious relationship between a user and the idea of being under surveillance. What I really admire about this project is how it confronts the idea that people want to feel connected or have attention, like followers on twitter and instagram or friends on facebook. She brings up a good point that some people would even buy followers! A competing idea to this would be Google tracking, NSA monitoring, etc. which people tend to have a greater distaste for—but why is that? This project makes being followed feel more “real”, and really makes the user ask themselves what it meant to them.

For more information, visit Lauren’s website: http://lauren-mccarthy.com/

elizabew- project – 10-landscape

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 10

var coralspeed = 0.0004;
var coralDetail = 0.005;
var largercoralspeed = 0.0001;
var largercoralDetail = 0.01;
var terrainSpeed = 0.0005;
var terrainDetail = 0.002;

var filearray = [];
var files = [
    "https://i.imgur.com/iWIzq30.png",//coral image
    "https://i.imgur.com/UaGovr7.png",//fish image
    "https://i.imgur.com/kzzaYE9.png"]//golden fish image
var corals = []; //5 every time
var fishes = []; //8 every time
var rarefishes = [];

function preload() {
  for (i = 0; i < files.length; i++){ //preload body
    filearray.push(loadImage(files[i]));
  }
}

function setup() {
	createCanvas(400, 400);
	frameRate(10);

  for(i = 0; i < 5; i++){
    corals.push(makeCoral()); //number of coral
  }
  for(i = 0; i < 8; i++){
    fishes.push(makeFish()); //number of fish
  }
  for(i = 0; i < 1; i++){
    rarefishes.push(makeRareFish()); //one gold fish
  }

}

function draw(){
	background(3,23,71);
	sandandcoral();

  for(i = 0; i < corals.length; i++){ //drawing and moving coral
    corals[i].draw();
    corals[i].move();
  }
  for(i = 0; i < fishes.length; i++){ //drawing and moving fish
    fishes[i].draw();
    fishes[i].move();
  }
  for(i = 0; i < rarefishes.length; i++){ //drawing and moving rarefish
  rarefishes[i].draw();
  rarefishes[i].move();
  }

  }


//rarefish

function makeRareFish(){
  var rarefish = { rimage: filearray[2],
            rxPos: random(0, width),//random initial x position
            ryPos: random(50, 200), //random y position
            rwidth: random(45, 80), //random width
            rheight: random(45, 70), //random height
            rSpeed: random(-2, -6), //random speed
          }
  rarefish.draw = drawRareFish; //calls to drawFish
  rarefish.move = moveRareFish; //calls to moveFish
  return rarefish;

}

function drawRareFish(){ //draws rare fish
  image(this.rimage, this.rxPos, this.ryPos, this.rwidth, this.rheight);

}

function moveRareFish(){ //moves rare fish
  this.rxPos += this.rSpeed;
  if (this.rxPos < 0){
    this.rxPos = width; //remakes fish once it hits the end
  }
}


//FISH

function makeFish(){
  var fish = { fimage: filearray[1],
            fxPos: random(0, width),//random initial x position
            fyPos: random(50, 250), //random y position
            fwidth: random(45, 80), //random width
            fheight: random(45, 70), //random height
            fSpeed: random(-2, -6) //random speed
          }
  fish.draw = drawFish; //calls to drawFish
  fish.move = moveFish; //calls to moveFish
  return fish;
}

function drawFish(){ //draws fish
  image(this.fimage, this.fxPos, this.fyPos, this.fwidth, this.fheight);

}

function moveFish(){ //moves fish
  this.fxPos += this.fSpeed;
  if (this.fxPos < 0){
    this.fxPos = width; //remakes fish once it hits the end
  }
}


//CORAL

 function makeCoral(){ //object coral
  var coral = { cimage: filearray[0],
            cxPos: random(0, width), //random initial x position
            cyPos: random(300, 350), //random y position
            cSize: random(35, 100), //random size
            cSpeed: random(-5, -10) //random speed
          }
  coral.draw = drawCoral; //calls to drawCoral function
  coral.move = moveCoral; //calls to moveCoal function
  return coral;
}


function drawCoral(){ //draw coral
  image(this.cimage, this.cxPos, this.cyPos, this.cSize, this.cSize);

}

function moveCoral(){ //moving coral
  this.cxPos += this.cSpeed;
  if (this.cxPos < 0){
    this.cxPos = width; //remakes coral once it hits the end
  }
}


//TERRAIN

function sandandcoral() {

  //larger coral background
  beginShape();
  noStroke();
  fill(2,13,39);
  for (var x = 0; x < width; x++) {
      var t = (x * largercoralDetail) + (millis() * largercoralspeed);
      var y = map(noise(t), 0,1, 300, height-400);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //coral background
  beginShape();
  noStroke();
  fill(37,62,103);
  for (var x = 0; x < width; x++) {
      var t = (x * coralDetail) + (millis() * coralspeed);
      var y = map(noise(t), 0,1, 400, height-250);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //sand
  beginShape();
  noStroke();
  fill(167,159,146);
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(t), 0,1, 300, height);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

}

I had a lot of difficulty with this project since I still wasn’t fully comfortable with making objects and I ran into a the issue of having too many ideas and not knowing how to implement all of them.

My initial idea was to randomize different colored fish with a shark appearing onlysometimes while pieces of coral moved by with the sand terrain.

My final idea only implements randomly sized fish, one randomly sized golden fish, and some coral that moves past with the changing terrain. However, I’m pretty happy with the final product. It doesn’t look the exact way I wanted it too, but happy accidents are okay too.

elizabew – Looking Outwards – 09 – sectionE

I decided to look through my friend Rachel Farn’s work, and I found her discovery of the media visual artist Alex Mcleod to be interesting. I found that her focus on his piece Mystic Pond (2010) really drew me into wanting to read more about the artist — this image of the piece looked unreal.

I absolutely agree with Rachel that his art connects traditional artists and graphic animation. Alex creates “paintings” that push the limits of traditional artists while integrating modern technology into his work. The works show so much detail that it’s fun to look at one piece and try to dissect it. (His work Forest City (2011) reminded me of The Hobbit)

To add to what she’s already written, I would also like to say that Alex’s work really grasps landscapes in an otherworldly way — some of his work reminds me of futuristic films. And while incredibly bright and colorful, there’s a hint of uncomfortableness from these unsettling works. It is almost like each photo describes a different world and it’s up to the viewer to figure out what kind of place it is. To me, personally, I find that most of them look like dystopian, sometimes even alien places.

CLICK HERE for Rachel Farn’s Looking Outward

Click here for more on Alex Mcleod

elizabew-Project-09-Portrait

sketch

//Elizabeth Wang
//elizabew@andrew.cmu.edu
//Section E
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/wlqq6AA.jpg"; //loads image
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1000);
}

function draw() {

    var x = random(width); //finds random x value on canvas
    var y = random(height); //finds random y value on canvas
    var ix = constrain(floor(x), 0, width - 1);
    var iy = constrain(floor(y), 0, height - 1);
    var color = underlyingImage.get(ix, iy); //gets color

    push();
    fill(color); //calls for color from image
    noStroke();
    var rw = random(1, 15); //random width of rectangles
    var rh = random(1, 15); //random height of rectangles
    rect(x, y, rw, rh); //rectangles
    pop();


}
function mouseDragged() { //when user presses and drags mouse over image, makes a bunch of random cirlces
    var colorAtMouse = underlyingImage.get(mouseX, mouseY);
    fill(colorAtMouse);
    var ew = random(5, 25); //random width of ellipses
    var eh = random(5, 25); //random height of ellipses
    noStroke();
    ellipse(mouseX, mouseY, ew, eh);
}

For this project, I was initially inspired by the style that one of my favorite painters, Jeremy Mann, uses. To me his paintings visually express an almost pixelated and futuristic-esque view of cities, and I wanted to add that sharpness and softness into this project as well.

I ended up choosing a more artsy portrait of one of my good friends. I felt that the green and white of the flower would make the final piece more visually interesting since most likely they won’t be 100% discernible.

Final product when using mousePressed and waiting for random rectangles to cover the entire canvas.

Overall I am pretty satisfied with the results. I achieved the sharpness I wanted from the small rectangles, and the softness that the user is able to put in themselves using mousePressed.

elizabew – Looking Outwards – 08 – sectionE

Eyeo 2014 – Adam Harvey from Eyeo Festival // INSTINT on Vimeo.

The speaker I found interesting is Adam Harvey. He is an artist, technologist, and designer, and research based in Berlin — with a focus on the societal impacts of networked data analysis technologies: computer vision, digital imaging, and counter surveillance. He graduated from Interactive Telecommunications (ITA) in NYU and received his bachelor of arts degree from Pennsylvania State University. During his time at ITA, he explored different and imaginative uses for communications technologies, including their augmentations, how they could improve, and how they can improve people’s lives.

I’ve always admired how technology can merge with art and design in different ways, and Adam Harvey’s projects really embody that idea. I also admire his focus on a very relatable topic to an everyday user of technology: privacy and surveillance. My favorite project of his would be a product that he made, called “The OFF Pocket”. It is a bag accessory of sorts for mobile phones, and it is able to block all wireless signals from reaching the phone — this way, users are able to shield off unwanted tracking.

During Adam’s presentation, he goes through a very interesting introduction that leads into why privacy is important to each individual’s control and personal power. I really admire the overall structure and the well-researched ideas he brings up. A clear strategy that he uses is to bring up topics that most people would be able to relate to and how he brings up why people should care about what he is talking about. Whenever I will be able to present my work, I hope to be able to use these strategies as well.

For further reading on Adam Harvey’s work, visit his website: https://ahprojects.com/