Inspiration

I am a huge fan of cyberpunk. I love its dystopian futuristic feeling, the art style, and the Asian cultural elements. Blade runners, Cowboy Bebop, Ghost in the Shell, are some of my favorite cyberpunk animes and movies. I am so drawn to the world full of huge nylon lights, artificial intelligence, virtual reality, and a mix of high-tech and low-life scenes. Therefore, this time, I decided to experiment with this art style in my creative coding work.

The Code

Playing with Pixels

To change the sketch from the photo-collage to animated pixel art (to make it more like Japanese old anime), I mainly played with changing the pixels with p5.js default functions: the tint() and filter().

Photo Collage

I first collected a series of photos and put them together to create a cyberpunk-version empire state building. I animated the sketch through simple move functions.

Music Generative Visual Effects

I was able to get the amplitude of the background music and then used that variable to create generative visual effects (the pixels will change according to the amplitude of the music).

The “Digital Rain”

To add to the “cyberpunk” feeling of the sketch, I referred to Matrix Digital Rain and added my version of digital rain to the sketch. Now Japanese characters and digits will fall off the screen, making the sketch more futuristic.