intro history flow tools techniques ascii maker shaders svg animation exercise part 1: explore part 2: story review resources

Vibe Coding for Film: Make Your Own Flow Tools

by Kaloyan Kolev, Google Creative Lab

Most filmmaking tools are built for you — someone else decided what buttons you get, what effects you need, and how things should look. In this workshop, we flip that around. You will learn to build your own microtools that generate animated visuals, and use AI as a creative partner to get there faster.


1. Intro

Code is a creative medium, just like paint or a camera. What makes this moment especially exciting is that AI can now help you write that code. You can describe what you want in plain English, and a model like Gemini will generate working code that you can then tweak, remix, and make your own.


A Brief History of Generative Art

Using computers to make art is not new. Artists have been doing this for over sixty years, and the work they produced still feels remarkably fresh. Understanding this history helps us see where our tools come from, and where they might go next.

The Pioneers (1960s–70s)
In the 1960s, artists at Bell Labs — people like Lillian Schwartz, Ken Knowlton, and Michael Noll — began using room-sized mainframe computers to generate visual art and animation. They had no screens to preview their work; they wrote programs, waited for the machine to render output onto film, and then watched the result. Despite these constraints, they created mesmerizing pieces that explored perception, symmetry, and motion in ways that were impossible by hand.

Fractals & the Demoscene (1980s–90s)
Personal computers brought generative art out of the lab and into bedrooms. The Mandelbrot set — an infinitely complex image generated from a tiny equation — became a cultural icon. Meanwhile, the demoscene emerged: a global subculture of coders who competed to create elaborate audiovisual programs, often squeezed into just 64kb. These programmers treated the computer itself as an instrument, generating textures, 3D shapes, and music entirely through algorithms.

The Flash Era (late 1990s–2000s)
Macromedia Flash gave artists a single tool that combined vector drawing, animation, and scripting — all running in the browser. Communities like Newgrounds became hubs for independent creators. Flash democratized web animation in a way nothing had before.

Open-Source Creative Coding (2001–2010s)
In 2001, Casey Reas and Ben Fry at the MIT Media Lab created Processing — a free, open-source language designed specifically for artists. Its web-native successor, p5.js, brought the same philosophy to the browser. Tools like Three.js and Shader Toy followed, making GPU-powered graphics accessible to anyone with a text editor.

The AI Era (2023–now)
Today, you can prompt large language models like Gemini using plain language, and they can write the code for you. The barrier to entry has essentially disappeared: if you can describe an idea, you can build it. The tools and libraries are the same as before, and knowing the code helps a lot, but getting started is easier than ever.


Getting started with Flow & Flow Tools

Throughout this workshop we will use Flow, an AI creative studio by Google that lets you create and edit images and video. Earlier this year Flow launched Tools, an AI coding environment which lets you create bespoke tools and workflows in natural language – image effects, custom shaders and more. Today, we'll start with 3 pre-made Flow Tools, then remix them to make them our own.

Tech check: please make sure you're signed into Flow on your laptop before we start.

2. Technique Examples

We will explore three distinct techniques for generating visuals with code. Each one uses a different technology and produces a very different aesthetic.

Prompt describe what you want
→
LLM Gemini writes the code
→
Code you tweak & remix
→
Visuals animation appears

1. ASCII Film Maker using p5.js

Open in Flow ↗

Under the hood, we use p5.js, a JavaScript library designed for creative coding, to define shapes and represent them with characters.

2. Abstract Geometry using Shaders

Open in Flow ↗

Shaders are tiny programs that run directly on your computer's graphics card. Because the GPU processes millions of pixels simultaneously, shaders can produce incredibly complex, fluid visuals at full speed — things like swirling kaleidoscopes, infinite geometric tunnels, or organic, lava-like surfaces. We write these shaders in a language called GLSL. The code is often surprisingly short — sometimes just 10–20 lines — but the visual results are extraordinarily rich because mathematics does the heavy lifting.

3. Animated Text and Micrographics using SVG

Open in Flow ↗

SVG (Scalable Vector Graphics) is a format for describing images using mathematical shapes — lines, curves, circles, and text — rather than pixels. Because everything is defined by geometry, SVG graphics stay perfectly sharp at any size, and every element can be individually animated with JavaScript. This makes SVG ideal for typography animations, hand-drawn-style illustrations, and animated diagrams that feel alive and responsive.

3. Exercise

Now it's your turn. Pick one or two of the tools above, open them in Flow, and start making them your own. There is no wrong answer here — the goal is to experiment, break things, and discover happy accidents. The exercise has two parts: first, we'll try changing the system instructions and add sliders to give us hands-on control, then we'll bring in our own footage and modify it with our tools.


Part 1 — Hands-on Exploration

Your first goal is simple: remix the tools to make them your own. Add a slider that controls a parameter, or modify the AI prompt to shift the visual style.

  1. Open one of the tools in Flow: Tap Remix at the top and select the project where you want to save your new tool.
  2. Add a slider: Ask the agent to add sliders that control parts of the generation so you can adjust values without editing code. I.e. the size of the grid, the line thickness, the animation speed.
  3. Try extreme values: See what happens when the speed is 1000? What if the size is 0.1?
  4. Modify the generation prompt: All the applets use AI generation, so try changing the text prompt. Ask the agent to expose the system instruction in a text field in an editable text field. Then modify the prompt to ask for things like 'minimalist composition', 'monochromatic palette,' 'lots of motion,' etc.
ASCII ↗ Shaders ↗ SVGs ↗

Part 2 — Combine the tool with your media

Bring your own images, video, or webcam feed into your code and use your tool to manipulate, filter, or overlay them.

  1. Add a media loader: Ask the agent to add a file uploader or enable the webcam inside your tool.
  2. Process the media with code:
    • ASCII Maker: Feed the video/image frame to the generator to convert pixel values directly to text.
    • Shader Generator: Pass your media as a texture (uniform) and use the shader to distort or colorize it.
    • SVG Animator: Overlay sharp vector graphics or animated text over the top of your video.
  3. Modify your generative movies with Omni: Record and save your animations to the Flow grid. Then, use Omni to modify them.
ASCII ↗ Shaders ↗ SVGs ↗

4. Review & Sharing

Paste the link to your tool in the shared document, and we will take turns showing our short films to the group.

Remember: every project you built today is a starting point, not a finished product. Take the code home, keep experimenting, and see where it leads you.

5. Resources

Want to go deeper? Here are some links, tools, and readings to continue your exploration of code-driven filmmaking and generative art.

History

Workshops & Learning