Pixelbeams

by Luke Spine

a browser-based tool for creating color-shifting designs, illustrations, and animations.

About

Why Pixelbeams?

I built Pixelbeams as a way to design pixel-based graphics in a way that I like. I am not a graphic designer or an animator, but I hope those who are will enjoy using Pixelbeams for some aspect of their work.

What is Pixelbeams not?

Pixelbeams is most useful for its linear gradient drawing & animation tools. It is not designed for making highly-detailed pixel art, frame-based animations, or high resolution imagery. Some limitations will be addressed in future updates.

Getting Started

To get started with Pixelbeams, simply visit lukespine.com/pixelbeams.

Click or tap anywhere on the canvas to draw. Accessing the menu icon by the page header will open the control panel.
Control panel functionality is organized into five feature groups:

Each group can be opened and closed as needed. In addition to these groups, the control panel has buttons for undo and redo functionality.
The rest of this document details the functions available in each feature group.

Features

Beams

Beams are lines that extend from pixels when they are drawn. They unlock every unique aspect of Pixelbeams.

Directional Arrows

When a directional arrow is toggled, lines are automatically drawn in the arrow's direction each time a pixel is interacted with. These lines are called beams. Beams can extend in up to eight directions. Use the center button labeled with a square to toggle off all beams.

Use the distance text box to set how far beams extend.

Fill

Toggling fill mode disables beams and fills in solid colored areas like a paint bucket.

Using fill with gradient color fills the area with a gradient in the set beam direction. Only one beam direction can be used in fill mode. If no directions are selected, the gradient direction will be down by default.

Color

Pixelbeams supports a main color and a gradient color. Use the swap button to switch the two. When gradient color is enabled, the toggle button will automatically preview the gradient produced from the main color to the gradient color.

Enabling gradient color causes every beam to appear as a gradient of hues from the origin pixel to the end of the beam. It produces the same effect in fill mode; the filled pixels will display as a gradient in the beam direction selected.

Animation

Animation brings Pixelbeams to life. Select the toggle button at the bottom of the feature group to begin drawing pixels that shift between the main color and the gradient color.

When gradient mode is enabled, pixels further from the beam origin are animated after a delay relative to their distance from the origin. The same occurs when using fill mode. This produces a chase effect. Drawing with beams and gradients is the primary way to make flashy animations.

Turning animation off does not stop color shifting globally; it only means that newly drawn pixels will not animate. The only way to stop a pixel from animating is by drawing over it.

Timing

There are two timing controls: frequency and beam time. Both are determined with milliseconds, so smaller numbers generally make the animation faster.

Frequency determines how long it takes a pixel to change color. If two animated beams are drawn with different frequencies, the one with a shorter time will appear more dense.

Beam time only affects animations made with beams or fill mode. It relates to animation delay and determines how long it takes for colors to “move” across a beam. If two animated beams are drawn with different beam times, the one with a shorter beam time will appear to move faster.

Animation Modes

There are three animation modes. Only one can be used at a time.

Canvas

The canvas tab allows for changing canvas size. Width and height dimensions can changed with the +/- buttons or entered manually. Increasing width extends the rightmost column and increasing height extends the bottom row.

Tap “toggle grid” at the bottom to hide or show grid lines. Toggling the grid off may improve performance.

Tesselation

Tessellating the width or height of the canvas doubles its size and duplicates its contents. The two halves are not linked and do not affect each other.

File – Saving & Exporting

Project Files

Pixelbeams projects use the .beams extension. They can be saved directly to any machine by selecting “save” in the File feature group. Selecting “load” opens a prompt to upload a .beams file and continue working on it. Pixelbeams has no cloud saving, so be sure to save frequently when working on anything important.

Exporting

Pixelbeams supports saving JPEG and GIF files. The “pixel size” property determines the resolution of both formats. When set to 30, each pixel in the editor will be 30x30 pixels in the exported file.

GIF frame rate and duration settings are also available for export. Saving is highly recommended before exporting GIFS. All render computation is performed locally and some machines may struggle to render large projects.