Anthony Ra – Final Project

The premise of this game is to prevent a crazy, out-of-control lion from getting a head injury and a concussion. Using the character, Ryan, from the messaging app, Kakao Talk, use the spacebar key to control Ryan in the y-axis and have him avoid the sharp sticks. Continuous head injuries can lead to concussions, brain damage, loss of memory and other medical disorders.

Ryan just ate 50 bags of Gushers and is very jittery. It is your job to prevent him from running into those sticks. Enjoy!!


/* Anthony Ra
Final Project */

var player;
var obstacles = [];
var score = 0;
var terrainSpeed = 0.00025;
var terrainDetail = 0.006;
var gameOverFrame = 0;
var gameOver = false;

function setup() {
    createCanvas(350, 600);
    player = new Player();
    obstacles.push(new Obstacle());


function draw() {
  background(225, 175, 0);
  /* background landscape moving*/
  fill(175, 145, 0);
  vertex(0, height);
  for (var i = 0; i < width; i++) {
    var t = (i * terrainDetail) + (millis() * terrainSpeed);
    var y = map(noise(t), 0, 1, height/12, height/2);
    vertex(i, y);
  vertex(width, height);
  /* obstacles moving from right to left */
  for (var i = obstacles.length - 1; i >= 0; i--) {
    /* when obstacle hits player */
    if (obstacles[i].hits(player)) {
    /* when obstacle leaves the screen */
    if (obstacles[i].offscreen()) {
      obstacles.splice(i, 1);
  /* continuously having the obstacles appear */
  if (frameCount % 30 == 0) {
    obstacles.push(new Obstacle());
  /* when player passes each obstacle */
  if (frameCount % 45 == 0) {


/* game controls for player */
function keyPressed() {
  if (key === ' ') {
    if (gameOver) {

function Player() {
  this.y = height/2;
  this.x = 50;
/* applying earth factors to player */
  this.gravity = 0.5;
  this.lift = -10;
  this.velocity = 0;
/* shows player on the left side of the screen */ = function() {
    fill(204, 102, 0);
    ellipse(this.x - 10, this.y - 15, 10, 10);
    ellipse(this.x + 10, this.y - 15, 10, 10);
    ellipse(this.x, this.y, 40, 37);
    /* eyebrows and eyes */
    line(this.x - 5, this.y - 5, this.x - 10, this.y - 5);
    line(this.x + 5, this.y - 5, this.x + 10, this.y - 5);
    ellipse(this.x - 7.5, this.y, 2, 2);
    ellipse(this.x + 7.5, this.y, 2, 2);
    /* snout and nose */
    ellipse(this.x - 3, this.y + 7, 7, 5);
    ellipse(this.x + 3, this.y + 7, 7, 5);
    ellipse(this.x, this.y + 5, 3, 3);
/* allows player to move in y axis with gravity still in effect */
  this.up = function() {
    this.velocity += this.lift;
    this.velocity += 0.7;
/* applying gravity on player */
  this.update = function() {
    this.velocity += this.gravity;
    this.y += this.velocity;
/* if player touches the bottom of the screen */
    if (this.y > height) {
      this.y = height;
      this.velocity = 0;
/* if player touches top of the screen */
    if (this.y < 0) {
      this.y = 0;
      this.velocity = 0;

function Obstacle() { = random(height * 1/2);
  this.bottom = random(height * 1/3);
  this.x = width;
  this.w = 35;
  this.speed = 3;

  this.highlight = false;
/* when player makes contact with an obstacle */
  this.hits = function(player) {
    if (player.y < || player.y > height - this.bottom) {
      if (player.x > this.x & player.x < this.x + this.w) {
        this.highlight = true;
        return true;
    return false;
/* shows the obstacle coming from the right of the screen */ = function() {
    fill(87, 60, 0);
    rect(this.x, 0, this.w,;
    rect(this.x, height - this.bottom, this.w, this.bottom);
    triangle(this.x,, this.x + this.w,,
      this.x + (this.w/2), + 50);
    triangle(this.x, height - this.bottom, this.x + this.w, height - this.bottom,
      this.x + (this.w/2), height - this.bottom - 50);

  this.update = function() {
    this.x -= this.speed;
/* when obstacles go offscreen */
  this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
/* text on the upper hand side */
function showScore() {
  text("SCORE: " + score, width - 50, 30);
  text("KAKAO RUN", 50, 30);
/* game over */
function gameEnds() {
  text("GAME OVER", width/2, height/2);
  gameOver = true;
/* resetting the game from start */
function reset() {
  gameOver = false;
  score = 0;
  obstacles = [];
  player = new Player();
  obstacles.push(new Obstacle());
  gameOverFrame = frameCount - 1;

Anthony Ra – Looking Outwards 12

I already briefly mentioned two projects that I want to talk about in my proposal, and I will go much more in-depth with these projects.

The first project is the gaming of all of the Super Mario series by Shigeru Miyamoto. What inspires me is the simplicity of the design of the character, the landscape, the premise and the way it codes yet it is popular to the wider audience globally.

The part in this video I want to emphasize is the 2nd part of Miyamoto’s “genius” in work, which is the simplicity. I don’t have to write words like what I am doing right now on instruction on how to play a certain game with the use of design subtlety and positioning. With minimal objects the user can see which direction to go and what the obstacles are; in Mario, the goombas and koopas move in the direction towards him, signaling that it is harmful.

Flappy Bird

The second precedent is a game with similar graphics called “Flappy Bird” developed by dotGears. What makes this game intriguing is how some of this code was programmed in ways that are very similar to what I have learned throughout this semester. One of the more obvious assignments and projects regarding this is the generative landscape, where various sizes and heights of the same object moves from right to left, giving the illusion that the static character is moving from left to right. And also, by implementing changes in velocity and mouse pressing function, I think there is a way for me to create a simple game using the subtle design techniques of both of these projects with enough detail and compelling-ness for a suitable project.

Anthony Ra – Project 12 – Proposal

My goal for this project is inspired by the simplicity of Miyamoto, most notable for creating Mario. The reason his games are so popular is that the controls are not difficult and the user screen is simple. The landscape moves, creating an illusion that the character is moving when in reality, the character is static. My proposal is a simple game where a character (which I haven’t determined the form) tries to avoid obstacles and gains points each time that character goes through obstacles. The game format is very similar to a short-lived app called “Flappy Bird” where an object that moves only in the Y-direction tries to avoid incoming pipes by bouncing through the small openings or else the bird loses.

Because the lines of code may be less than the required 100 lines, there will be a lot of detailing in the background and the objects. I may also play with image uploading for the objects and sound effects for every mouse pressing function.

The simplest possible design if I were to actually code this but of course I won’t lol

Anthony Ra – Project 11 – Composition


/* Anthony Ra
Project-11 */
var ttl;
var start;

function setup() {
    createCanvas(400, 400);
    ttl = makeTurtle(width, height);


function draw() {
    var step = (frameCount - start)/35.0;

function resetCanvas() {
    start = frameCount;
    ttl.goto(width/2, height/2);

function mousePressed() {
    ttl.setColor(random(100, 255));
    ttl.goto(mouseX, mouseY);

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

function turtlePenDown() {
    this.penIsDown = true;

function turtlePenUp() {
    this.penIsDown = false;

function turtleGoTo(x, y) {
    if (this.penIsDown) {
      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;

This week gave me a lot of headaches, so I wanted to return the favor in giving the viewer headaches with a series of hypnotic-like spirals in which it seems that a still image is moving. This piece is completely grayscale in mimicking its one-dimensional pain and one is able to start the animation where the mouse clicks but the animation continues instead of starting back to its original place. This is to imitate the perpetual aching of my head that I have been feeling this past week.

no mouse click, animation as is
implementation of mouse clicks

Anthony Ra – Looking Outwards 11

Thinking of computer music, I immediately thought of a musical trend that has become very popular to the younger demographic this decade – electronic dance music (EDM). EDM is essentially a collection of tracks and synths patched together using a musical software in a computer or application. My favorite EDM artist is Alan Walker, and it is solely a musical opinion rather than a computational one.

Alan Walker uses FL Studio for a lot of his tracks

Alan Walker uses a heavy dose of synth chords with a slow release on his melodies to create more of a soothing product. Within any instrument played on the computer or any synths, he is able to alter the settings and functions using his computer to create the right atmosphere for the given song.

Depending on who he is collaborating with, he also uses Cubase & Logic.

The video above shows his step by step process of patching different computational instruments together and shows us the electronic and synth collaboration with typical instruments. A lot of sounds he makes for his music are plug-ins from softwares like Nexus. Alan Walker is able to achieve his dream in being a musician without some of the fundamental qualities that one would need to become one – the ability to sings or play a musical instrument.

Anthony Ra – Project 10 – Landscape


/* Anthony Ra
Project-10 */

var boats = [];
var c1, c2;

function setup() {
  createCanvas(480, 200);

  c1 = color(255, 70, 0);
  c2 = color(204, 143, 0);

  for (var i = 0; i < 5; i++) {
    var rx = random(width);
    boats[i] = makeBoats(rx);


function draw() {

  /* background gradient */
  for (var i = 0; i < height - 70; i++) {
    var inter = map(i, 70, 110, 0, 1);
    var c = lerpColor(c1, c2, inter);
    line(0, i, width, i);



/* draws ocean at bottom of canvas */
function drawOcean() {
  fill(66, 31, 0);
  rect(0, height - 70, width, 70);
/* draws sun */
function drawSun() {
  ellipse(width/2 + 30, 68, 80, 80);
  fill(255, 235, 0);
  ellipse(width/2 + 30, 70, 80, 80);
  fill(115, 76, 0);
  rect(width/2 + 20, 140, 20, 5, 2.5);
  rect(width/2 + 10, 150, 40, 5, 2.5);
  rect(width/2, 160, 60, 5, 2.5);
  rect(width/2 - 10, 170, 80, 5, 2.5);

function updateAndDisplayBoats() {
  for (var i = 0; i < boats.length; i++) {

function addNewBoatsWithSomeRandomProbability() {
  var newBoatLikelihood = 0.007;
  if (random(0, 1) < newBoatLikelihood) {

function moveBoats() {
  this.x += this.speed;

function displayBoats() {
  translate(0, 35);

  quad(width/2 + this.x - 20, height/2 - 10,
    width/2 + this.x + 20, height/2 - 10,
    width/2 + this.x + 10, height/2,
    width/2 + this.x - 10, height/2);
  quad(width/2 + this.x - 5, height/2 - 15,
    width/2 + this.x + 5, height/2 - 15,
    width/2 + this.x + 10, height/2 - 10,
    width/2 + this.x - 10, height/2 - 10);
  rect(width/2 + this.x - 3, height/2 - 13, 2, 2);

function makeBoats(birthLocationX) {
  var bt = {x: birthLocationX,
  breadth: 50,
  speed: -1.6,
  r: random(0.1, 0.5),
  move: moveBoats,
  display: displayBoats,
  return bt;

One of my favorite places to relax when I am home is Laguna Beach during the sunset. With its warm weather, the tranquility and warming color palette of the sky and ocean reflection makes it a prime destination to stop everything and enjoy the view. Because the setting is so calm, there is very minimal movement overall, barring any unconditional weather or wind. The only thing that moves in this script are the boats faraway, and even the boats seem to be moving at a peaceful movement.

rough sketch and mathematical estimates of placement of boats

Anthony Ra – Looking Outwards 10

Filipa Valente’s Filtered Transparencies 2.0

After a lot of searching through different female interactive artists, Filipa Valente’s overall portfolio caught my eye the most, unsurprisingly, because of her incorporation of both light and architecture. Of her work, I decided to delve deeper into her “Filtered Transparencies 2.0”, an interactive art installation that uses space, sound and layered lights to create an unworldly inhabitable experience.

installation in Lisbon

This installation’s main goal is to clear the user’s head of all habitable boundaries around us to immerse ourselves into an “augmented hologram-like environment”.

this piece creates space without the practical manner of how space is normally made

I am very intrigued in how she incorporates an architectural mindset without the practical logic in how space should be made. A current architecture student would see space using walls or differing elevations or alteration in materials; however, she creates space using an illusion of mass and dimensionality, manipulating oneself in between screens and altering voids.

Filipa Valente’s website

Filtered Transparencies 2.0

Anthony Ra – Project 09 – Portrait


/* Anthony Ra
Project-09 */

var heaven;
var start = 100;
/* spelling of heaven as arrays to fill the image */
var name = ["H", "E", "A", "V", "E", "N"];

function preload() {
    var heavenUrl = "" /* uploading picture */
    heaven = loadImage(heavenUrl);

function setup() {
  createCanvas(400, 400);
  heaven.resize(400, 400);

function draw() {
  /* series of sizes for the letters */
  var size = random(20, 35);
  /* starting point */
  var px = randomGaussian(width/2, start);
  var py = randomGaussian(height/2, start);
  /* values constrained to the picture */
  var heavenX = constrain(floor(px), 0, width);
  var heavenY = constrain(floor(py), 0, height);
  /* getting colors from the picture */
  var col = heaven.get(heavenX, heavenY);
  /* induces the speed of pixels array */
  var i = floor(random(5));
  translate(px, py);
  text(name[i], 0, 0);

I don’t have any pictures of myself because .. I don’t. So, I used a personally funny picture of a dear friend who is always salty. Using a play on his name (Evan), I randomized the letters in the word “HEAVEN” and given each color based on the image. The origin of “Heaven” came from a typo from Au Bon Pain. I increased the rate of the letters appearing to an astronomical amount because I just want to see this face haha.

original photo
3 seconds in
13 seconds in
a lot of seconds in

Anthony Ra – Looking Outwards 09

Meandering River - Kling Klang Klong
Meandering River – Kling Klang Klong

For this looking outwards post, I looked into the post of randomness that Curran Zhang wrote. An art installation by Kling Klang Klong in 2018, this piece that spans through multiple screens utilizes sound composition from the audience to generate parcels of data arranged to create unpredictable currents.

Large-scale art installation

I guess a part of the common ground in which Curran and I were impressed with this work is the involvement of the audience into an already finished final work. As if we, the people, contribute to this well-generated piece.

One thing that is difficult in choosing this project is that I only see articles on this installation and no videos of it in the works. As much as the photos that are available are intriguing and eye-catching, I think that watching its movement and its randomness with a video will allow me to appreciate this installation much more.

material close-up of each particle

What Curran said at the end is very important to the direction of where art and design should go. The importance of collaboration and the uses of different fields in ways that people would think be impossible.

Meandering River – Creative Applications

Anthony Ra – Looking Outwards 07

Ben Fry’s simulated visualization of every street in USA

Ben Fry works head of a design and software consultancy where he combines his knowledge in computer science and graphic design to generate visual data of different sets of information. As a fan of geography and integration of urban areas and habitation, this project called “All Streets” is basically what the title says it is – using his software of TIGER/Line shapefile to generate a series of tiles and prints out a map of every street in that country.

As a person who grew up in Boston, my bias tells me I like this print a lot

What makes me admire these sets of work so much is the negative spaces that generate in between the lines. One can see where the urban areas are, which spaces are largely inhabited and which may be resourcefully insufficient.

Canada is very sparse

The funny thing is that I have to remind myself every time that this is not a density population map or a light pollution map – these are simply streets; however, the magnitude of them is directly correlated to the number of people that use them in a given radius.