The Fireboy and Watergirl

It will bring back your childhood memories.

Helen Dorjderem, Jessica Dong

https://drive.google.com/file/d/1eGfhwW4YjUEfyZeQFYsPLrMZy_COyvnb/view?usp=sharing

Description

This is a 2020 version of the Fireboy and Watergirl game that was popular in the early 200's. The earlier version only allowed users to play from one device, but we can't do that anymore in this difficult situation as everyone is in different places. We tried to create version of this game which allows users to play remotely during this pandemic.

IMA/IMB Shanghai
Creative Coding Lab
Play/Games

Indigo Cheddar

An interactive generative art experience that involves different types of audio and music reactivity.

Gabriel Chi, Rachel Wen

https://www.youtube.com/watch?v=Q70swfG7C1s&feature=emb_logo

Description

Indigo Cheddar is a generative art experience that incorporates the music or audio reactivity through p5.js' sound library. By making use of the sound.js and different particle systems, we have created a fun and interactive experience for users to experience. Indigo Cheddar has 3 separate “rooms”, where users can interact with different audio reactive examples, making use of sliders to adjust color, size and etc.

The project itself was created by Rachel Wen and Gabriel Chi, both working on different halves of the project, on the particle system and music reactivity, respectively.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Art

Grow

An interactive sketch that illustrates the positive correlation between positivity and progress.

Kennedy Cambra-Cho

https://youtu.be/lhD7-eXps8g

Description

This is an interactive installation that depicts the relationship between positivity and progress using the speech library and sentiment analysis.Growth and progress are reflected in each additional branch added to the tree.

The p5 sketch will depict a seedling that will progress or regress depending on the users’ input. Using the built in microphone, users are able to talk to the budding seedling. If the tree intakes words deemed positive, the seedling will continue to grow. However, if only negative terms are registered the tree's growth will halt and stall.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Sound,Art

Fortune

A web-based interactive divination project.

Sumner Feng

https://youtu.be/dM7PHJfr27E

Description

Fortune is a web-based interactive divination system, in which users can draw cards to get fortune-telling results. The project also adds diverse characters and stories to the divination process, which hopefully will provide unforgettable experiences for users. The ways of interaction include sound, music, card game. With multiple interactive functions, this project aims to engage users in the imagined world “the forgotten land”.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Narrative/Storytelling,Play/Games

iSketch

A drawing pad that enables user to draw in a special way!

Emily Qiu

https://youtu.be/C1eXYdK5s4c

Description

Painting is a popular branch of art which has thousands of years history. Given its popularity and history, painting is also one of the most mature forms of art that embraces many different patterns of expressions with different drawing tools. Hands and drawing tablets are two common ways of drawing nowadays but have you ever thought about drawing with your laptop? This project intends to enable people to realize this dream. Based on Javascript and P5, iSketch is a web page where users can freely display their drawing creativity. By combining several basic P5 functions such as line, color and erase, iSketch can enable users to realize the effect of traditional hand painting. While via using functions like slider, shapes and animation, iSketch can give users much more new drawing experience such as producing their ideal color or drawing with changing shapes. Painting is an old form of art while coding is a new pattern of expression. By merging these two art elements, this project is aimed not only to extend the portfolio of painting, but also act as a bridge between connecting the old and the new.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Play/Games

Music Interaction Game

Click mouse or press keyboard to interact with the game.

Linda Li

https://youtu.be/_5mpz8SGahg

Description

“Music Interaction Game”is a music game consisting of keyboard interaction and background music. By pressing any key on the keyboard, user can hit notes on the screen and get a certain number of scores. To start the game, users can click the “START” button on the upper left corner. This button will trigger background music. There will be notes floating on staves at the bottom as long as the music starts to play. Different from other music games, this game is totally for entertainment and relaxation, which means it’s much easier for users to attain a higher score. Hope this game can release your pressure and provide you a pleasant experience.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Music,Play/Games

Art Memory Game

Memorize the given drawing and try to draw a replica!

Christina Chung, Jessica Lu, Sam Zheng

https://youtu.be/PThGOG_Y1u8

Description

This project is created to be competitive yet enjoyable online game. The art-memory game is designed to be a simple memorization and to step up its level if the user is interested in continuing the game.This game is made up of simple shapes: ellipses and rectangles and the user is given thirty seconds to memorize the position of these shapes. We have designed for this game, the shapes' position will be restricted to the left hand canvas. In addition, the shapes will have different size, but all of them are the same color. After thirty seconds is up, the left-hand canvas will be “hidden” and the user will be given sixty seconds to re-draw these shapes, on the right hand of the white canvas by dragging the mouse. When dragging the mouse the given output is red, the color, therefore, the user does not need to worry about changing ink color and the size of the brush. We have also designed that for the user's interaction with mouse drag to be restricted to the right hand canvas. If the user does drag the mouse outside the canvas, the red ink will not be displayed. After sixty seconds is up, the user can compare their drawing to the given drawing. If the user would like to play again, he/she can press the play again feature. However, the point for the play again feature is that the amount of shapes are increased, with still thirty seconds to memorize and sixty seconds to re-draw it.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Play/Games

Circles

Modify the circles to create your own pattern

Jessica Dong

https://youtu.be/piWDTs8MOgA

Description

With symmetric structure, anyone can use the simplest geometrical shapes to build aesthetic patterns. You can change the size and color to see which colors fit each other best and the animation makes the process more interesting.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Art

The Way Home

An interactive board game.

Sumner Feng, Emily Qiu

https://www.youtube.com/watch?v=ha_oCoIV4qg&feature=youtu.be

Description

The way home is a web-based interactive board game. In this game, players would play a character who was sent to an unknown world by accident and try to find the way home. The main goal for the player is to throw dice to move to different blocks and interact with upcoming events before reaching the terminal. This project presents multiple interactive methods including choices, mouse click, key press and more to lead players to diverse storylines and ends. In the process of the adventure, players would get to know more about this strange world and the character.

IMA/IMB Shanghai
INTM-SHU.135.1
Creative Coding Lab
Narrative/Storytelling,Play/Games