Get Started

What is gifboy?

With gifboy you can create tiny GIF animations by writing Lua code. The link to a GIF is at the same time its code. Animations are created on-the-fly and can be easily shared. Try it out.

Example: gifboy.io/text("hello world").html

Structure of a gifboy app

A gifboy app has a very simple structure, there are basically two parts:

The draw() function: this is the core function and will get executed every frame for drawing.
Everything else: Code before/after the draw block can be used to initialize app variables.
Or you can define more functions to be called by the core function to give your app more structure.

Alternatively, depending on your coding style, you can get rid of the draw function block completely and use the render() function instead. This function will draw a new frame based on the current draw state. This can be useful and more economical, if you want to manually control the timings of your animation and don't need a recurring draw call as provided by the draw function block.

A Code Example

Here is a simple example how a gifboy app looks like. We are going to build the animation below.

1-- Declare variables
2local angle=0
3local color=7
4
5-- This function gets called every frame
6function draw()
7
8   angle=angle+4                       -- increase angle by 4 each frame
9   clear(12)                           -- clear the screen (to blue)
10   translate(80,80) rotate(angle)      -- rotate the screen around the center (position 80, 80)
11   icon("B",-10,-10,8)                 -- draw a red heart
12   rotate(-angle) translate(-80,-80)   -- undo the rotation
13   text("this rocks!",48,120,color)    -- draw a text (with color) at 48, 120
14   if angle>180 then color=0 end       -- change text color to black, if angle is >180
15   if angle>360 then stop() end        -- stop the animation after a full rotation
16
17end

In summary:

Define variables that you want to re-use in your app
Define the draw() function and add draw commands and logic for your animation. (Alternatively, use the render() function to manually draw frames.)
Run the code and share your work!

Features

gifboy follows the design philosphy of creativity by limitation. There are some very focussed features:

Feature	Description
Number of Colors	16 interchangeable colors at a time. See the Color Palette.
Animation Length	Default is 3 seconds, maximum is 20 seconds (can be stopped earlier, depending on desired looping behaviour or frames can be shown for a longer time).
Animation Speed (Frames Per Second)	60 frames per second as default (but can be changed).
Resolution	160x160 pixels. Perfect for retro graphics afficionados.
Language	Lua with ca. 40 dedicated commands. See the Documentation.
Interface	Code can be entered directly into the URL bar. The name of a GIF file is also its code. #gifception Your work can be shared instantly.
Code Size	There is no explicit code size limit enforced by the editor. However, since gifboy animations are represented as URLs, there is a 'natural' restriction how long your code can get, i.e. around 2k characters can be considered as upper limit.

What can I do with gifboy?

gifboy can be used to

create small animations and generative art
test some visual ideas quickly
just fiddle around with Lua in your browser (which is a treat by itself :D)
learn coding tricks from the community by studying code examples

Editor and URLs

On the homepage there is a code editor that can be used to write gifboy apps. The editor will transform the code into gifboy-friendly URLs and has auto-completion for all available commands.

Where to go next

Wanna go beyond drawing blue backgrounds and some blinking text?

View the Examples page to get some inspiration.

Or check out the Documentation which lists all available commands.