Everyone can be a programmer, and every programmer can be an artist!

About ShaderGif

ShaderGif is a free and open source home for art made with code.

The editor

The ShaderGif editor is a simple web coding tool divided in 2 columns.

Left: a visual preview + tools to generate gifs.
Right: a text editor where you type code (Javascript or GLSL, depending on selected language).

Languages and platforms

Currently, ShaderGifs allows you to make gifs using:

What is javascript?

Javascript is a very popular programming language. It powers most of the websites you use everyday. You can use it to make gifs with ShaderGif, without any CSS or HTML knowledge.

We suggest you try the examples in ShaderGif and search the web for <canvas> javascript to discover all the methods that you can use!

What is p5.js?

p5.js is a Javascript library created by Lauren McCarthy inspired by the processing language.
You can find more information about it here. Come back with code samples and try them in ShaderGif!

Pricing

View pricing page

What is a GLSL shader?

A shader is a tiny piece of code that runs in your GPU to generate all the epic visuals you see in today's games, movies, etc.

A shader is a tiny piece of code that runs in your GPU to generate all the epic visuals you see in today's games, movies, etc.

GLSL (Open GL Shading Language) is a shading language that looks like C code.

Shaders are very exiting to code, look at ShaderGif's examples, in the GLSL section, and try adding your artistic touch to these!

Why register?

Registering allows you to publish gifs on the homepage and save drafts for later.

Why play gifs on the homepage instead of running the code?

  1. You don't have to maintain the code ever.
  2. Browsers don't need to compute your gif again.

Instead of trying to support all graphics cards, CPU, browser, etc. ShaderGif works with gifs and preview videos. Gifs just work. They work everywhere. Also, gifs can be shared easily on the internet, which makes them an awesome medium. Of course, gifs have some problems (artifacts, big size), but the big size is compensated by the generation of video previews and the artifacts actually give gifs their beauty.

For the details, we actually play video versions of the gifs to reduce size.

The following image is an example of a video version of a gif(0.5MB). Here is the original gif link : gif (2.12MB). If you compare, you will see that the video saves a lot of network and is quite similar visually.

How to use the editor?

The editor contains a preview at the left and the code at the right.
The various panels at the left can be collapsed by clicking on the blue title bar.
To create gifs, there is a "+ Create gif" button. Be patient, since this process takes some times.

I frequently start from the "circle.glsl" example and build up from there:

Start with sample code

How to upload a gif?

First you need to register. Then, in the shader editor, click the "Create gif" button.
The encoding will take a few seconds.
Once it's ready, the gif will appear at the bottom of the page.
If you wish, you can add a title and post it.
It will be shown on the front page.
The uploading will take a few seconds, it's normal.
The server is rendering a video preview of the gif for the homepage.

What are some of your nice features?

LocalStorage Backup

When you hit CTRL+R in the editor (/editor/ or /shader-editor/), you don't lose the code,
unless you where browsing an URL like /editor/316/edit.
Be careful in this case because the original shader will be loaded.
This means you can leave your work in progress in the editor and it should be there when you come back,
but when you try another shader's code, it gets overridden.
To back up your shaders a bit more safely, use the "draft" saving feature.

What is the history of ShaderGif?

For current stats, look bellow.

Stats

What are some considerations when making gifs?

The ShaderGif editor shows the size of your gifs in kilobytes.
Making small gifs is an art. To save bandwidth, upload time and encoding time:

If you need hundreds of frames of a shader you just coded (because you want to share it outside of ShaderGif), it is better to download the zip and make a video with an external software.

Contributing and sending feedback

To create github issues github.com/antoineMoPa/shadergif/issues

To contribute to the code and documentation: github.com/antoineMoPa/shadergif

Start Coding

If you have never used shaders before, you will get more pointers in the documentation (doc.shadergif.com)

Or just try it, if you don't feel like reading now:


Don't have an account yet?

With an account, you can post public gifs and save drafts.


Sign up!