Rendering Techniques

"All the different ways you can manipulate pixels to create dweets." -- magna

This page lists some different strategies for creating images. It was compiled from the #dweet-rendering-techniques channel in Discord.

General

Use 2D context primitives like fillRect, arc etc.

Using ImageData to directly read/write pixels (createImageData, getImageData, putImageData).

Using text/emoji with fillText.

Shader-like techniques where you loop through pixels (or chunkier blocks) to determine what colour they are going to be.

1. Render entire frame using a loop

2. Use a single loop and compute X/Y using modulus or bitshifting and bitmasking versus using two nested loops for X and Y

3. Use t to slooowly render the entire screen

Image copying

Draw on only the top line of the canvas, then use drawImage(c,0,1) to copy the entire canvas down one pixel. This creates a scrolling effect. For example: d/6065, d/9083, d/9095, d/9216

Or using drawImage(...) in general, to copy the image onto itself, and create complex patterns that way. For example: d/3557, d/5120, d/6711

Blur/zoom/light rays by pasting a copy of the canvas to a larger area using drawImage. d/9134

Same technique to produce tunnels. d/2330

Fractals by pasting a copy of the canvas to a smaller area using drawImage.

Using alpha / transparency

globalAlpha for transparency and globalCompositeOperation or fill arguments such as 'evenodd' to use algorithms to fill in pixels

Alpha can also be obtained with the R() function, or with rgba() or hsla().

Using < 1 pixel for transparency, e.g. draw a rectangle that is 0.5 x 0.5 to make it look like 25% transparency. Example: d/3632

Using alpha to blur the edges of objects to create motion blur effect. Example: d/9307

Using alpha when clearing the screen, to leave a trail behind

x.fillStyle=R(255,255,255,0.02)
// 0.02 can be modified - lower means longer trail
x.fillRect(0,0,2e3,2e3)
x.fillStyle='{whatever}'
// your code here

Then moving elements will leave trails behind them

More techniques

Glitching using gettting a base-64-encoded string using toDataURL, manipulating the text, and pasting the glitched image back using drawImage (new Image + set src)

Stacked animation using multiple off-screen buffers (canvases). Example: https://www.dwitter.net/d/2462

Using bitmap data encoded in unicode characters (charCodeAt) to draw "sprites"

Using clearRect instead of fillRect to punch out white rectangles from a dark background

Plotting random dots with probability weightings, to create different shades in different parts of the image. For example: d/3632, #stochastic

Instead of using a loop for an axis, use t to draw a scene in horizontal or vertical "scan lines" in time.

Using SVGs. d/7115 d/7144 #path2d