Skip to content

CosmoMyzrailGorynych/FilterJS

Repository files navigation

FilterJS

Made with Riot.js Made with Stylus Made with Pug Made with TypeScript Made with NW.js

FilterJS is a node-based procedural texture generator. It is easily extensible, and was made to add a free and open-source alternative to similar projects.

You can create textures for any kind of project, e.g. for private or commercial use.

Screenshot

Disclaimer: Though there is much room for optimization, FilterJS is a rather slow generator if compared, for example, to Filter Forge or Substance Designer.

Prebuilt binaries

Available on:

How to run FilterJS from the source code

You will need node.js and gulp.js. Run npm install --global gulp-cli to install Gulp.

  1. Clone or download the repo;
  2. Run npm install in its root folder;
  3. Run npm install in the ./app folder;
  4. Run gulp in the root of the repo.

The first run will download the needed binaries of nw.js, but then the gulp command will run FilterJS just in seconds.

How to hack on FilterJS

  1. Make a fork;
  2. Do a regular run with gulp;
  3. Edit files in the ./src/ folder;
  4. Changes will appear automagically after saving. Avoid losing unsaved filters!

Before you commit

  • Make your commits as atomic as possible. Commit one serious change at a time.
  • Make sure the gulp lint task shows no errors. Warnings are ok until you understand what you are doing, but they can still reveal some common gotchas. Stylint will tell false positives on every riot-tag, because it's an old rubbish, but keep an eye on its other warnings.
  • Use gitmoji guide for naming your commits. Use the imperative mood, like :sparkles: Add a "Blend" block to Processing. Add two emojis to better describe a commit, if needed.

Help wanted!

You can help FilterJS grow by creating new nodes! See the existing ones in the ./src/js/blocks/ folder as an example. There is much to do, including:

  • Text, shape, image drawing and scattering;
  • generic pattern makers (like checkerboard, bricks, etc.);
  • canvas-based transforms, masking and overlays;
  • turning pixel-based noise generators to canvas-based (WebGL-powered);
  • new noise generators;
  • and everything you can come up with.

Last but not least, you can help FilterJS just by telling about it to your friends, writing blog posts, etc.