Final Project- Sofia Syjuco – Don’t Touch The Lava!

lavascreenshot

For my final project, I created a small game. I was inspired by the game many of us played as kids, with only one rule: don’t touch the lava! It’s a fun and simple game that I wanted to recreate in a digital format, to reflect on what we’ve learned this semester, and make something nostalgic and cheerful to combat the stress of year’s end.

To play the game, press any key to jump.
Your goal is to land atop each piece of furniture, and survive as long as you can. There’s some wiggle room (to make up for how kids will climb and latch onto furniture) but if you miss too many pieces of furniture, you’ll fall into the lava!
Stay alive as long as you can to rack up points. Boosters will give you 10 points each. Survive until 100 points to win!

*Don’t worry, it’s not meant to be a difficult game! As long as you pay attention, it should be a light-hearted, nostalgic experience.


Options to Play:
(I’ve posted these options, instead of embedding it, because this project requires the p5.play library from Molleindustria to work. p5.play is included in the downloads below.)
1. link to compressed zip file:finalproject_sofiasyjuco
2. link to download: https://www.dropbox.com/sh/emyra5s8hvgg71k/AADEDrgWffYkxI3NPN7VeSkHa?dl=0

Looking Outwards 12- Sofia Syjuco

In this last Looking Outwards, I looked through projects in the infinite-runner and side-scrolling genres of games. These would be especially interesting and relevant to my final project, because I intend to create a kind of infinite-runner/side-scroller game.

http://www.canabalt.com/

The first project that I was inspired by was the game Canabalt by Adam Saltzman for the Experimental Game Project. I thought this game was very interesting because, while thematically it’s a pretty simple game, its aesthetics and strict color scheme make it a very visually appealing game, and add a sense of drama. I really admire the way that art can not only just make a game look ‘good’, but it can actually play such a deciding role in whether the game’s experience itself is good. The graphics don’t have to be hyper-realistic, it’s all in the artistic sensibilities of the artist. The only thing I think that was overlooked was adding more appeal and interest to the game itself – jumping over buildings as a suit-clad office worker looks alright, but quickly loses luster.

http://www.swordandsworcery.com/

The second project I looked to for inspiration was Sword and Sworcery, by Superbrothers. It’s not an infinite runner, but it is a very beautifully created side-scroller. I really admire the art of it, how nostalgic it is even when it isn’t exactly what retro games used to look like – it still retains some feeling of the past. I want to use Sword and Sworcery as an art inspiration for my project, and study it for how I can incorporate visuals into my side-scrolling game. As my project will be a game that many will remember from childhood, I want its art to suggest something nostalgic and fond memories.

Both of these projects are very different in terms of what kind of games they are, and what the user experience is, but I think that I can learn a lot from the both of them in order to create the kind of game that I’m imagining.

Final Project Proposal – Sofia Syjuco

For my final project, I’d like to propose making an interactive game with the skills we’ve learned this semester. I want to base this game off the game children sometimes play at home, where they pretend the floor is lava and they try to jump on furniture to keep off the floor.

The game would be a side-scroller, where you play as a child jumping through their house and avoiding the lava floor. Furniture will be randomly generated and scroll in from the right (there will be different kinds, like sofas, desks, chairs, cabinets… etc.) The longer you survive, the more points you rack up. Grabbing objects and power-ups will also increase your point total, and power-ups can give you speed or jump boosts.

I think this project is within scope, and encapsulates many of the ideas that we’ve learned this semester.

img_9407
Sketch of what the game’s layout would look like.

Project 11 Freestyle – Sofia Syjuco

sketch

//Sofia Syjuco
//section A
//smsyjuco@andrew.cmu.edu
// Assignment - 11- c

var turtle1;// create a turtle

function setup(){
    createCanvas(700,400);// create a canvas
    turtle1 = makeTurtle(width/2,height/2);// make the first turtle
}
function draw(){
  
    background(235,100,210,10); // fill the background with white
    turtle1.penDown();// start drawing
    turtle1.setColor(255); //set the color to white
    turtle1.setWeight(5);// weight to 6
    

    turtle1.turnToward(mouseX, mouseY, 30);// turn the turtle towards the mouse
    turtle1.forward(1);// move the turtle forward
}

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

week-11-screenshot

I spent a long time tinkering with the turtle trying to figure out exactly how to turn it towards the mouse, and it was such a relief to discover it was actually pretty simple! From there it was just tweaking certain numbers and values, and trying to get an interesting result.

Sofia Syjuco – Looking Outwards 11

Metallophone
Changxi Zheng

http://www.cs.columbia.edu/~cxz/publications/metallophone.pdf

 

https://www.inverse.com/article/7556-a-computer-scientist-is-building-the-musical-instruments-of-the-future

A work in the area of music that I found particularly interesting was the new musical instrument developed by Changxi Zheng. It’s called the “zoolophone,” a metallophone where each bar is shaped like a different animal. But the stylized shapes of the instrument aren’t nearly the most interesting thing about it, nor what I admire most. Zheng used computational design to create each bar, instead of painstakingly carving out each bar so that they vibrate perfectly. The computer tests and retests each bar, so that there is even less room for error, and when struck with a mallet, actually produces three notes (or a full chord).
I don’t know much about the algorithms used by Zheng to generate this work, but it’s really cool to think that, outside the intricate programming to carve out each piece, from this course we’ve been taught enough to know that the process beyond that is probably something along the lines of ‘if’ statements and continually testing until it works!
The artist’s sensibilities manifest in the final form by making each bar into a stylized animal shape – which is pretty incredible to think about, given instruments usually use regular bar shapes because it’s so difficult to get the sounds right with irregular shapes.

 

Sofia Syjuco – Looking Outwards 10

http://www.liaworks.com/theprojects/elements-an-android-experiment/

LIA

ELEMENTS an Android Experiment

2015

LIA’s project “Elements an Android Experiment” is a very interesting application that she developed for Android. It takes what the device can see through its camera, and creates an entirely unique pattern on the screen of the device. Each time the camera shifts, the pattern changes. I really admire the way that this makes art portable, and in the hands of any user. Through it is the artist herself that makes this experience possible, it gives the viewer agency, and the ability to look at the world through a new perspective.

I couldn’t find where LIA studied, or what specifically she studied, but her CV does say that she lives and works in Vienna, and has been producing work since 1995. Her work consists of programming, and she identifies her medium as “code.” She uses programming as a way to let the viewer experience her art on a “subconscious” level.

Project 10 – Sofia Syjuco

sketch

//Sofia Syjuco
//section A
//smsyjuco@andrew.cmu.edu
// Assignment - 10-c

var boats = [];// create an array to store the boats


function setup(){
    createCanvas(600,400,100);// create a canvas
    background(230);// set the background color

    for (var i = 0;i<5;i++){ // for loop to populate the array with boats
        var fb = random(2*width);
        boats[i] = makeBoat(fb);
    }
    frameRate(10);// frame rate at 10 fps
}

function draw(){
    noStroke(); // no strokes around shapes

    //bottom layer of ocean
    push();
    fill(100,150,255,80);
    rect(0,200,600,150);
    pop();

    callMoveAndDisplayBoats();// call the function to update boats on screen
    addNewBoat();// add new boats
    clearBoat();// clear boats when they pass the left edge of the screen

    push();
    //top layer of ocean
    fill(50,150,255,90);
    rect(0,300,600,100);
    pop();

}

function makeBoat(startLocationX){// main boat function, stores all the important information
    var boat = {x: startLocationX,
                display: boatDisplay,
                move: boatMove,
                speed: -1.0 * random(0.75,2),
                sailColorR: round(random(0,255)),
                sailColorG: round(random(0,255)),
                sailColorB: round(random(0,255)),
                boatHeight: 50,
                boatWidth: 100,
    }
    return boat;
}
function boatDisplay(){// this function displays the boat, holds the code to draw it basically
    push();
    arc(this.x,290,this.boatWidth,this.boatHeight,0,PI,CHORD);
    fill(this.sailColorR,this.sailColorG, this.sailColorB);
    triangle(this.x-50,220,this.x-50,280,this.x+40,280);
    pop();
}
function boatMove(){// keeps boats moving by adding the "speed" to the x value each time
    this.x += this.speed;
}
function addNewBoat(){// adds new boats to the array depending on a probability of 0.001
    var newBoatChance = 0.001;
    if (random(0,1)< newBoatChance){
        boats.push(makeBoat(width));
    }
}
function clearBoat(){// clear boats away once they pass screen edge
    var boatsToKeep = [];// by constantly putting acceptable boats into a new array of "to keep" boats
    for (var i = 0; i<boats.length; i++){// check with each loop
        if (boats[i].x > 0){// if the boat x is greater than screen edge
            boatsToKeep.push(boats[i]); // put it in the "too keep" pile, basically
        }
    }
    boats = boatsToKeep; // assign the boats to keep to boats
}
function callMoveAndDisplayBoats(){ // this function contains the instructions to move and display boats
    for (var i = 0;i<boats.length;i++){
        boats[i].move();
        boats[i].display();
    }
}

img_9401

When I saw the prompt was generative landscape, I really wanted to make something to do with ships. I thought it could be interesting to vary the type of hulls and sails and such, but time constraints narrowed my process down to something else: making a regatta. I liked the idea of still having random boats, with sails different colors, but instead of making that the main random aspect of the piece, the speed of the boats was the focus. So that watching them pass becomes more of an activity, and less a passive perusal of what colors are currently on the screen.

Looking Outwards 9 – Sofia Syjuco

Look Good In
Shannon Case Looking Outwards
null
Anna Powell-Smith
Look Good In

In looking through previous Looking Outwards posts, I found Shannon Case’s post on Anna Powell-Smith, a web developer. Shannon links to a website that Powell-Smith designed, which gathers shoes that are being sold all over the UK, and places them in one repository that can easily be searched through, with filters that range from the ordinary (size or price), to the more creative (style, color, toe, heel, back).

I think that the cited project is really quite interesting, and I very much respect Anna Powell-Smith for her work. But I disagree with Shannon that this a project to admire. While it is a change of power dynamic from usually male-created capitalistic ways of selling women products, it is simply a website that links to more things to further perpetuate our consumer society.

Sofia Syjuco – Project-09

sketch
Screenshot of Portrait

var portraitPhoto; // variable to store the photo link
var colorAtPixel; // variable to store the color
var ellipseSize = 20; // variable to store the ellipse size

function preload(){
  portraitPhoto = loadImage("http://i.imgur.com/sn5iIEZ.jpg"); //load in the portrait photo
}

function setup() {
  createCanvas(800,800); // create a canvas at the photo's dimensions
  portraitPhoto.loadPixels(); // load in the pixels for the photo
}

function draw() {
  background(255);// draw in a background
  noStroke(); // no strokes around shapes
  
  
  for(var r = 0;r<=width+1;r+=ellipseSize){ // go through all the rows of pixels
    for(var c = 0;c<=height+1;c+=ellipseSize){ // go through all the columns of pixels
      colorAtPixel = portraitPhoto.get(r,c); // check what the color is in the photo
      fill (colorAtPixel); // fill it with that color
      ellipse(r,c,ellipseSize,ellipseSize); // draw a circle
    }
  }
noLoop();//just run draw once
}

I was very intrigued by the work of Danny Rozin, and how just that simple repetition of shapes could still manage to convey human features – but I wanted to work with color, not with shadows. So I tried to develop something that is in keeping with the simplicity of Rozin’s style, but incorporates colors to make the portrait more recognizably human.

Looking Outwards – 08 – Sofia Syjuco

Mimi Son

Mimi Son studied at the Copenhagen Institute of Interaction Design for Interaction Design, and got her MA in Interaction Design from the Landsdown Centre of Middlesex University in London. She is both a teacher, of Interactive Storytelling at Kaywon School of Art and Design, and an art director at her own studio, Kimchi and Chips.
I really admire Son for her work. As a woman excelling in the fields of both art and technology, she’s created some incredible works and has gained recognition for it. I really admire her tenacity to gain such a breadth of education in such a specialized topic, teach it, and create her own studio.
Son has a natural charisma when she presents. She makes jokes, is charmingly self-deprecating, and creates a good relationship between her and her audience. I think I can really learn from her techniques, and work to cultivate a atmosphere of interest and humor in my presentations.