There's an incredible breadth of art people have created on websites like Shadertoy.
You never had to be a programmer to mess around with any of these, just fiddling with random numbers, but doing that manually is tedious. We can automate this.
Mutagen simplifies this process and gives you direct creative control over programs you don't have to understand.
It captures thumbnails of the output, and you can:
- Double click on any thumbnail to mutate it, creating a new thumbnail. Target ones you like in order to create variations on it, and target ones that retain more of the structure of the output, such as the original, for more likely coherent results.
- Single click to view any specimen
Drag a thumbnail onto another to breed the two together, splicing their genes. This creates a new thumbnail.- Drag thumbnails into the breeding box and click Breed to make mixes of the mutations, manifesting as more thumbnails
Mutagen lets you create novel works of art by remixing procedural art thru a visual interface.
- Install Git if you don't already have it.
- Clone the repo.
- Open up a terminal in the project directory.
- For Firefox:
- Install Node.js if you don't already have it.
- Run
npx web-ext runin the project directory - It will open a window with the extension temporarily installed.
- When you make changes:
- It will automatically reload the extension.
- You'll need to toggle Mutagen off and on to inject the updated content script.
- You may need to refresh the page if debugging, to avoid outdated source code in the debugger.
- For Chrome or Chromium:
- Type
chrome://extensionsin the address bar - Turn on Developer mode
- Click "Load unpacked" and select the root of this repository as the folder
- When you make changes:
- Click the Reload button in the Extensions page for changes other than to the content script.
- Toggle Mutagen off and on to inject the updated content script.
- Type
- You may also need to refresh the page (rather than just toggle the extension off and on) if things aren't cleaned up properly, e.g. while working some something that needs new cleanup, like a
setInterval.
- Open up Shadertoy - try "Clover", that's a good one (especially if you've played Five Leaf Clover first)
- Click on the extension icon in the browser toolbar / address bar
I plan on distributing this as a browser extension, and maybe a bookmarklet (pared down version?), but for now:
- Copy the contents of mutagen.js
- Open up Shadertoy - try "Clover", that's a good one (especially if you've played Five Leaf Clover first, haha)
- Open your browser's devtools with F12 or Ctrl+Shift+I or Cmd+Shift+I
- Switch to the console tab if it's not already selected
- Paste and hit enter
- As much as possible of the code should be dedicated directly to the visual structure of the output, rather than technical details like implementing a ray tracer. (The ability to mutate only selected areas of code will help with this.)
- No dramatic scene transitions / camera changes / other dramatic shifts over time, as these can make it hard to understand what's from the mutations and what's part of the original, or compare specimens in general; this is not a dealbreaker tho. (It could help for comparison to reset time to 0 or some point for the screenshots.)
- Fast, because it's not so fun when your computer is lagging 😛
This codebase needs a bit of a glossary, especially since "edit" and "edit point" are two distinct concepts.
- doc: an array of parts representing a loosely parsed program ("document", but always abbreviated "doc" so as not to conflict with the browser global
document) - part: part of a doc - either a string (just some text in the doc), or an edit point object
- edit point: part of a doc to be mutated, represented by an object that holds the original text at that location
- edit: an object that specifies text to override the text of an edit point, referencing the edit point by an index into a doc
MIT-licensed, see LICENSE
DNA icon by Kenton Quatman from the Noun Project