A Web-Based Node Image Editor

By Johan Rende (Twitter,Website)

The first procedurally generated piece I made was using photoshop. I felt that I lacked artistic skill, so I started with a cloud then added filter effects and blending modes until it looked good.

Using photoshop for that felt like overkill, so made a web application of that specific workflow. The result was filter stacker (https://jrende.xyz/filterstacker/). It was very limited in what you could do with it, but you could still create some nice images with it. Many years after, I noticed that I had started doing something similar with Blender: I would create a 2D square, and just add nodes to create interesting patterns on it.

I love starting ambitious projects of unclear usefulness, so I decided to create a web app of that workflow as well. https://jrende.xyz/pattern is the result. It is a node-based editor for creating 2D images, using WebGL for the rendering and ReactJS for the interface. It lacks a lot of features and polish, has a lot of quirks, and the only user the interface is friendly towards is myself.

Right now, I’m not sure what direction to develop it in. One is to improve the usability, make into a proper tool, like a web alternative to Substance Designer. The other path is to double down on its quirkiness, let it be purely for fun.

One “feature” is how gradients disregards aspect ratios. When you resize the browser, some parts move differently creating an animations of sorts.

If I wanted it to be useful, I would squash that bug. But effect looks very cool, and I love how a bug can look beautiful.

Another inspiration is glslsandbox.com. In the future, I want my it to have the same invisible user system with the ability to fork images and track how popular ones are copied and modified in multiple generations.