WebGL demo to evolve data that projects into a given target image
This is a WebGL/GPGPU demo I made to try out shader programming. It generates random 3D polygons which resemble a given target image when projected. Basically it's similar to this, but done in 3D and on the GPU.
After many generations, you get a chaotic bunch of polygons that align into an image, but only from just the right angle:
I also wrote a blog post here explaining the algorithm, and how I made it run fast on the GPU.
git clone [this repo]
cd glsl-projectron
npm install
npm start
That serves a local build of the "Create" demo linked above, in localhost:8080
.
Use npm run build
to rebuild the static version in /docs
.
To use this as a dependency, follow the example in /demo/maker.js
:
import { Projectron } from 'path/to/glsl-projectron'
var proj = new Projectron(canvasElement)
var img = new Image()
img.onload = () => { proj.setTargetImage(img) }
img.src = 'path/to/image.png'
//..
proj.runGeneration() // many times..
proj.draw(x,y) // once per frame..
Made with 🍺 by Andy Hall. MIT license.