markusgaelli / glsl-projectron

WebGL demo to evolve data that projects into a given target image

GLSL-Projectron

---

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:

Live demos:

• Create a projection (uncheck "Paused" to begin)
• View one I made earlier
• or this other one

I also wrote a blog post here explaining the algorithm, and how I made it run fast on the GPU.

Installation & Usage

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..

Known issues:

• Doesn't detect most error cases (just whether WebGL is supported)
• Library treats input images as if they were square. To use for other aspects, just run it normally and change the aspect of the canvas you use to display the results.

---

Credits

Made with 🍺 by Andy Hall. MIT license.