For my final project, I wanted to create a game – coding video games is one of the reasons why I chose to take this class. The two projects I found dealing with this subject is Flappy Bogost by Greg Borenstein, and Method Random by Rafael Lozano-Hemmer.
Flappy Bogost is a spin off of the popular game, Flappy Bird. It uses multiple generative landscapes to create a game in which an object must “flap” its way around the obstacles provided. One of the things that I think could have been improved is the reasoning for the landscape and obstacles – currently it is a desert landscape with green chillies as the obstacle. I believe something with a theme could make this game more appealing to its users.
Method Random was created with the intention of creating a grid of random sized squares, with a different fill in each color. There is a series of nine algorithms that perform different tasks, mainly different seeds for generating numbers for individual R, G, and B values. This could be useful for generating random colors in my final project.
For my final project I would like to engage what skills I have learned in creating and illustrating animations in p5js and bringing those skills into an interactive application that allows the user to bring changes into their background. So sort of an interactive green-screen with animation idea that is curated specifically for the purposes of trying to bring design ideas into the environment the user is in. I am not entirely sure what the parameters for the design will be as I have not explored all of the possible moves I could make using augmented reality yet. However for a start, I most certainly want the augmented reality animation created with p5js to be informative and useful as a tool to the user. After looking at some examples in how to engage the user with an animation, I found augmented reality as a common method for making such engagement happen. Though there are less examples and resources available specifically curated towards the p5js library, there are several for javascript available online. In terms of the resources that are available for working with the p5js library, I found TangibleJS, to be a tool that can be used to bringing interactivity to code that relies on the p5js library. In terms of precedent assignments that were worked on in class that relate to the concept of augmented reality and animation, the raining letters with webcam assignment is one such example of the concept of augmented reality being implemented with p5js.
For this week’s looking outwards, I am going to write about two projects that I found inspiring for my final project.
“Inside” is one of my favorite games. It is a puzzle-platformer adventure game developed and published by Playdead in 2016. The player controls a boy in a dystopic world, solving environmental puzzles and avoiding death.
The second project that I found interesting is called “Minicade” by Chloe Varelidi who is an indie game designer/ developer. (year unknown) It is a mobile web-app that makes it super easy way to create games with your friends while learning to code along the way. Each person can add a link to one or more games to a custom playlist and instantly play them as one massive game. Here are three examples.
Comparing the two games I showed above, the most impressive aspect for “Inside” is that the game does not have any written clues that tell you how to play this game, but since the controls of the game are very easy, players are still able to enjoy the game. As for the “Minicade”, different from other Arcade Mode games, the players are able to customize the games themselves which let people learn while playing games.
For the shortcomings of “inside”, since there are no guidance systems in the game, players tend to depend on other people’s successful strategies if they are stuck in the game. It would potentially spoil the gaming experience. As for Minicade, since the number of games is still limited. Players might be tired of the games really easily.
For my final project I want to engage in an augmented reality application that uses a webcam to change one’s background setting. One project that I found integrating p5js into an augmented reality platform was a project called Kalopsia.
The image above shows a picture of how flower animations are graphed onto a succulent.
Kalopsia utilizes similar scripts used for facial recognition with a webcam to project Japanese-inspired drawings. However, in this application, the AR becomes more a tool for sculpting and detailing.
The second project I looked at was created for a company called VariousWays, and utilizes ar.js to create the augmented reality effect. In the short video it can be seen how an artist who wants to hand out their business card, can integrate a brief example of their work without having to hand out a full portfolio.
The image above shows an object with the business card owners initials on it.
Overall, the purpose of both projects traces back to the desire to bring another dimension to how we perceive our surroundings. Where the project Kalopsia seeks to bring beauty to regular objects, whereas the augmented reality business cards seek to augment the impact of a card, by bringing interactivity to it. However, both projects seek to bring an interesting detail to an everyday object/object that might be perceived in 2D but with 3D notions, become far more expressive. One aspect that I think could be further integrated into both projects is some form of application or connection of the AR image to a social media platform or other users. That way the AR doesnt just work on one scale.
For the final project, I want to create an animation with a bit of interaction and sound effects. In my studio I am currently working on a thesis project dealing with the environment and cohabitation/negotiation of boundaries between human and more-than-human species, and creating installations for endangered species as well as synanthropic species to share urban space. I am inspired by the works of Joyce Hwang and Sarah Gunawan , and I want to create an animation that documents the vision of such installation projects and their impacts on our environment.
I have identified the green spaces along the MLK Jr. East busway in the Hill District, Pittsburgh, and I want to focus my animation on one scene and 3 different species of animals: bats, black throat warblers, and raccoons. The animation will show buses and trains pass by at a certain interval of time, and a key press will add an installation of an artificial “nest” for a certain type of animal. Initially the background sound will be city noises, and as the number of birds are added, the bird sound will get louder and city noises get quieter. Below is a rough sketch of my ideas.
For the final project, Kai Zhang and I are planning to build a web game that resembles something similar to the game that was popular in 2014 on mobile platforms -Flappy Bird. The only thing that the player needs to do is to tap the screen so that the bird flaps the wings and ascend to avoid falling or obstacles.
The idea of the game would be similar, but the style of the graphics would definitely be more original. Also, additional to the original game, we are thinking about adding more operations into the game. For example, the bird is able to spit out bullets to destroy the cloest obstacle, but the bullets would be limited to a certain number.
Since we decided to do a collaborative project, one person might focus on the generative background and the scoring system. The other one might focus on the general movement of the bird, but more detailed ways of collaboration might be mentioned more in the next post.
For this week’s looking outwards, I decided to look at the works from Chloe Varelidi(http://varelidi.com) and Kaho Abe(http://kahoabe.net/portfolio). They are both new media artists and game designers working with a variety of mediums and often produce projects that are a mix of digital and physical artifacts.
Chloe Varelidi is the founder of Humans Who Play, a design firm that uses play as educational and creative tools. What really inspires me about her work is that she could always manage to bridge that creative gap and make coding easily accessible to everyone. In her projects there are also always a physical artifact to help understand the coding work that’s going on behind the scenes, and makes the process of play more meaningful and informative.
project oiko by Chloe Varelidi
Oiko is a project created for younger kids to learn about environmental and energy saving strategies by reminding them to turn off the lights. She managed to make the process fun and playful rather than tedious.
project tinkerly by Chloe Varelidi
Tinkerly is a project to foster creativity, with a digital interface on an ipad that can be combined with physical paper models to create avatars and scenes for children.
Kaho Abe is an American Japanese artist focusing on designing for social interactions and experiences that enhance the relationship between people. Previously a fashion designer, her interest in wearable technology and game design combined to create projects that engage behaviors, gestures, and custom controllers.
Her animation Window Vistas is a generative landscape video that documents her travel on a train. I am hoping to do something similar for my final project and learning from her how she created 3D-looking landscape elements.
screenshot of her animation Window Vistas
Hit Me! is a wearable game device that engages two players and speculators, and tests for their agility, strength, and ability to take quick snapshots. The interactive headpiece has a button and camera that connects wirelessly to a screen. The objective is to hit the opponent’s button, and then take a snapshot of them using your own camera.
Both artists’ work are inspiring, especially how they made digital artifacts tangible and accessible to everyone. Although it would be hard for me to incorporate physical artifacts in my final project, I was inspired by their style, method and intent for their project to be educational and informative.
For my project proposal, I am creating an animated children’s book. I have found two interactive stories that, while more advanced, have really interesting levels of interactivity.
The first project is “ENOUGH” by Isaac Cohen. This project is an animated story that loads as the user clicks the logo. I find this project really interesting because of its high level of interactivity from the words moving with the mouse and the jellyfish-like creature following the mouse.
The second project is “a short journey” directed by Cher Ami. I appreciate this project for its very direct animation and creative use of interactivity. As each screen loads there is a “drag here” button that the user pulls across a line to begin the animation. For example the one on the right, zips the bag. When the animation ends, it moves to the next page.The aesthetic of this animation is truly beautiful.
While both projects, are graphically quite different, they both grab the user and pull them into the story, through quite simple (to the user) animations. It’s really exciting to see how this concept can be produced and animated in such different ways.
For my project, I am proposing an animated children’s book. Each time the user clicks the arrow, it will move to a new page of the book. I am proposing that each page has one animation triggered by the user clicking on highlighted text. An animation could be the sun moving, plants growing, or rain falling.
The story is about a lion who is a farmer and his plants are dying in the hot sun so he needs to figure out how to make it rain. After interacting with a few other animals, he finally realizes he has to dance to make it rain (subject to change!)
I am still considering whether the majority of the animation will be hand coded in p5.js or if that will be specifically for the animated objects. It depends on how complicated the final storyline becomes. It may be easier to do a hybrid where the static objects are drawn and the animated objects are coded.
I believe this project will help me learn more about interactivity and animation within p5.js. I am excited to see how this process goes!
Regarding the project “Drum Kit” (http://ronwinter.tv/drums.html), this is an computational, interactive music project that plays drum-related sound that correlates with a specific key of the keyboard. I admire that it is under a certain theme (of drums), but I feel like there could have been volume control of the general program, so that users could put a background music and use “Drum Kit” at the same time.
Drum Kit
Regarding the project “Rave” (https://rave.dj/mix), this is a website that allows users to mash up two songs that are uploaded. It’s pretty cool in a way that it generates smooth mashup of music, but it would have been improved by allowing the users to change the mashup of songs, instead of automatically generating it.
Rave
The two above projects are very different from each other even though they both utilize music to create something new. Rave focuses more on using existing songs to create a new song, while Drum Kit focuses on using different sounds to create a song.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2020/08/stop-banner.png)
