Animated StyleGAN image transitions

Smooth transitions between synthetic GAN-generated landscapes with Runway ML and P5.js

machine learning, runway, styleGAN, p5.js

What you'll be making:

Animated StyleGAN image transitions


  • Download and Install Runway
  • Download P5.js, P5 Dom, and ToxicLibs
  • Create a workspace in runway running the StyleGAN model
  • In runway under styleGAN options, click Network, then click "Run Remotely"
  • Clone this Github Repo
  • 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.

Video Tutorial: