GAN ANIMATIONS

Using RunwayML and P5.js

RESOURCES

• Companion Tutorial Video to this codebase

DOWNLOADS

• P5.js - Requests random images from StyleGAN and saves them to your computer
• Runway - Generates the StyleGAN images for P5
• P5 Dom - Allows you to save files from P5 canvas images
• Toxic Libs - Generates the simplex noise in order to randomize our images

EXAMPLES

• Coding Train Introduction to Runway
• Accompanying P5 Sketch to Generate Rainbow Images
• Original Code from Shiffman for creating animated transition between images
• My adapatation

MORE INFO

• Intro to StyleGAN

INSTRUCTIONS

• Download, install and run Runway
• Download P5, P5 Dom, and ToxicLibs
• Create a workspace in runway running StyleGAN
• In runway under styleGAN options, click Network, then click "Run Remotely"
• Open the index.html file from the github repo in your browser.
• To output a video from Runway, choose Output > Video and give it a place to save and select your desired frame rate.
• To output a video from Processing, turn the images output from the browser from an image sequence to a video using a tool like Premiere / AfterEffects, or other free online resource.

BIGGAN TRANSITIONS

Someone on Youtube asked if the same effect could be applied to BigGAN. Yes! If you look at Runway, the input specification is a bit different - it wants a z of 140 floats, and a category as the input, and for the output, you will be getting the image as a variable called generatedOutput. I've included an example in this repo of how to do this. Just follow the same steps above but load biggan.html instead of index.html.