Skip to content

Introduction

ShaderGif is a platform created to help you make art with code.

Currently, there are 2 main languages supported: Javascript and GLSL (Shaders).

Supported platforms

Javascript

Javascript allows many types of creative 2D works: particles, fractals, games, etc. It is probably the most popular language worldwide, since it powers almost all of the web pages you browse everyday.

If you are familiar with Javascript, you can go to the editor and use the <canvas> API to render creative animations by selecting Javascript in the editor selector: shadergif.com/editor/selector

If you are not already familiar with Javascript*, you might prefer starting with p5.js, which is a library integrated as a ShaderGif platform. In this case, go to the next section.

*Note: Even if you are a Javascript expert, p5.js will give you even more power!

The Javascript rendering in ShaderGif works by calling your render(canvas, time) function at every frame. You can then write ctx = canvas.getContext("2d"); and perform any operation with ctx. The time argument loops constantly from 0 to 1. When time is 1, it would be the end of your gif recording.

To learn how you can use the canvas context, I suggest you start with the MDN guide : CanvasRenderingContext2D

Javascript with p5.js

p5.js is a library with useful functions to draw objects. To launch ShaderGif in p5.js mode, head to shadergif.com/editor/selector and select p5.js. Take time to read the provided code at the right.

You will see the setup() and draw() functions which are present in all p5.js sketches.

Take time to read the header and comments. From there, I suggest you look at the 5.js Reference for a list of available functions with documentation. Also, have a look at their Examples to help you get started.

Using the GPU with GLSL

GLSL is a Shading language that runs in your GPU. It can be used to create epic visual effects.

If you have never coded with shaders, I suggest you read coding with shaders.