Posted on

Gemini

In this interactive game, the user can control the two stars to move left and right. When the two stars are close to each other, they can fly up together.

Tian Qin

https://vimeo.com/417667995

Description

This project, Gemini is an interactive game. The user can control the two stars respectively with pressing right arrow, left arrow, and A, D to move them to left or right. However, the user can’t control the stars to go up or down. When the two stars are close to each other, there would be an upward force to make them fly upwards. On the contrary, when the distance between these two stars becomes larger than a certain value, the upward force will disappear and the stars will start to fall down. The stars may also be attracted by the gravitational force of the planets. When the blue star, which is larger, reaches the planets, that planet will be lit up.

IMA/IMB Shanghai
Nature of Code
Art,Play/Games
Posted on

Star Touched

Calming constellation visuals with music using p5.js.

Hsiao Jui Lin

https://youtu.be/iBXAX4iYk8Y

Description

This project is mainly an animated visual representation of constellations. Its goal is to provide easy information on what the constellation 'Leo' looks like while creating a relaxing, calming atmosphere for users. This project is not yet complete. The completed version would hopefully contain all 12 zodiac constellations, a separate song for each constellation and more animation for the stars. The animation's deeper meaning is to convey the philosophical thought that the entire universe is an unending cycle by making the animation itself a loop. As for the technical aspect, this project encompasses the key concepts of Nature of Code, including objects, force, oscillation and autonomous agents.

IMA/IMB Shanghai
Nature of Code
Art,Music
Posted on

我【ME】

Me and my bizarre ideas.

Ning Zhou

https://vimeo.com/418466876

Description

This piece was inspired by many art pieces of self-portraits as well as CHANEL's mobile art project by Zaha Hadid. I'd like to explore the novel utilization of p5 and utilize it as a tool for self-exploration and expression. I state one of my recent idea of becoming an astronaut in the project. Meanwhile, doubting the existence of the idea, regarding it as being put a fish tank on my head. I used the posenet to trigger the transition between different scenarios. I would definitely try to extend the story by adding more scenarios and my ideas in the future.

IMA/IMB Shanghai
Nature of Code
Art,Narrative/Storytelling
Posted on

Digital Shaman

An audiovisual performance that visualizes Korean exorcism ritual and shaman vision.

Jonghyun Jee

https://youtu.be/ttlkgcsyaGo

Description

“Digital Shaman” is an audiovisual performance that is inspired by Korean exorcism ritual and shaman vision, powered by p5.js. My project is largely based on FFT, which constantly analyzes the frequency and amplitude of a sound track (bass, mid range, treble). Those parameters, mapped in certain ranges, give variations for the properties of objects (size, rotation, movement, etc.). The first chapter begins with thousands of tiny particles that move along the canvas like a burning incense, which is often used for rituals in East Asia. As the percussion comes in, geometrical patterns appear and respond for bass, mid, or high frequencies of the track. After both visual and audio components reach the climax, they gradually fade out and leave the incense particles only. I projected this sketch to the wall as stage lighting, and gave a dance performance. It visualizes as if the performer was possessed by the shadow behind.

IMA/IMB Shanghai
Nature of Code
Performance,Art
Posted on

西河剑器

An algorithmically-generated music visualization in classical Chinese style

Tian Qin

https://vimeo.com/417663011

Description

In my project, I used the concept of spring to create the simulation of the chord, water ripple, water sleeves, curtain, etc. I also combined the flow field, perlin noise, and some other concepts that we learned in class. I think the visual aesthetic that spring create fits the classical Chinese style very well, which is with solidness in softness and softness in solidness.

IMA/IMB Shanghai
Nature of Code
Art,Music
Posted on

Hollow

Another sound visualizer inspired from glowing ring.

Zhuochen Yuan

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

Description

This is a new sound visualizer made for final project, the main idea is to create a hollow ring rotating in the center. Everything can be absorbed into a small part, but can be expanded into lots of particles as well, everything are in an eternal cycle, from 0 to 1 and from 1 back to 0. The main technique used for this project is flowfield, setting flows in the canvas to control the direction of all the particles. And for synchronization between music and animation is realized by using p5.sound.js,this library is for analyzing music input and returning various parameters. I made a simple beat detection based on volume, every time the beat is detected will let the particles expand/absorb based on different mode, also the volume of the beat will affect the speed of the expansion/absorption. The blocks on the background are for better visuals, the height is controlled by the volume of different frequencies and the color is controlled by the energy of different ranges of frequencies from bass to treble,

IMA/IMB Shanghai
Nature of Code
Art,Music
Posted on

Butterfly Dream

“Am I dreaming of the butterfly, or the butterfly is dreaming of me？”

Qianyi Chen

https://vimeo.com/418304977

Description

Inspired by the story of the butterfly dream written by Zhuangzi, this project aims to illustrate the mind flow of different layers of the dream. From the surface of the dream to the subconsciousness, the audience will go deeper and deeper. With the boundary of virtual and reality being questioned, people are led to Zhuangzi’ inquiry from thousands of years ago – Am I dreaming of the butterfly, or the butterfly is dreaming of me？

IMA/IMB Shanghai
Nature of Code
Performance,Art
Posted on

Particle God

By using kinect, you can use your magic to play with the particle system.

Joseph Yang

https://vimeo.com/418787796

Description

Since we've learned various particle systems and many different particle movements throughout the whole semester, I decided to make a project that can let the user experience different particle effects at the same time. I use Kinect to detect the user's hand and there are some interactions with the particle system based on the hand state of the user. For example, if the user closes his or her hands, the particles would start to follow the position of the hands. Anyway, it's a really fun project to play with.

IMA/IMB Shanghai
Nature of Code
Art
Posted on

ATOM Imagination

A visual simulation of atom structure with music

Haoquan Wang

https://s3.ap-east-1.amazonaws.com/ima.nyu.edu/noc/Kenneth/ATOM/index.html

Description

This project is inspired by the ATOM text editor's icon. By using gravitational force in p5.js, I create an atom structure layer by layer, core to electron, electron to the general sphere of an atom. By adding clicking interaction, audience can build up an atom structure layer by layer.

IMA/IMB Shanghai
INTM-SHU.254.1
Nature of Code
Performance,Art
Posted on

Lost in Dimension

A p5.js visual project utilizing WEBGL

Haoquan Wang

https://youtu.be/T9uPobUEpP8

Description

This is a visual project inspired by teamLab light show and movie Interstellar. Light, in my mind, always represents hope and life. In this special time, people cannot go out to see that fantastic art show. Some of the people even feel desperate and sad in quarantine life. Hence, I wish to use p5.js to bring this amazing light performance nto the digital world, bring hope and happiness to my audience. This project is supposed to be available in multiple media, like VR/AR, mobile devices, and PC. Currently, I mostly work on the laptop. Inspired by Interstellar, I combine light performance with 3d spaces, allowing users to explore 3d space and travel around in the multi-dimensional digital world. Besides light, I also add 3d spheres and 2d rotating triangle into space. By moving around, it will be interesting to feel the encounter of 2d graphs, 3d graphs, and space.

IMA/IMB Shanghai
INTM-SHU.254.1
Nature of Code
Performance,Art