glitch art

pixel art

pixel sorting

rtrdgtzr - Minter's Guide

18 Aug 2023333 EDITIONS

1 TEZ

Overview

rtrdgtzr (/ˈɹɛ.tɹoʊ ˈdɪdʒɪtaɪzə(ɹ)/, pronounced same as retro digitizer) is a long-form collaborative collection. Minters are in fact authors of minted tokens, as they provide an input image which serves as the central motif and choose the effect stack for the artwork. To facilitate this, minting process provides an intuitive interface as well as WYSIWYG (what you see is what you get) for full control of the final outcome. This is a responsibility which goes beyond of what is expected of an average collector. Because of this, the entire collection will be reserved and distributed to select artists for a symbolic price. Motivation behind this is to elevate the overall quality of the collection. The minter can then sell their artwork on the secondary market and keep half the royalties for all resales in perpetuity.

NOTE: EPILEPTIC TRIGGER WARNING! - some animations in this article feature flashing graphics, proceed with caution if you have a condition

Quick minting guide

After minting a ticket for rtrdgtzr, a token will be reserved for the minter during the grace period. An artwork can be minted into the rtrdgtzr collection using this ticket. Minting process is as follows:

Start screen : press any key to start.
Era screen : select an era for the effects by clicking on the screen ( '80s or '90s ).
Drop screen : drop an image onto the screen (drop area also selects the output format - square , portrait or landscape ). Image will be automatically cropped, resized and centered to the maximum available dimension for that format.
Image editing : use keyboard keys to adjust compression quality , quantization level and image border . Click on the image to add / remove pixel squares which will be later filled with an animated pattern. The goal is to reduce characters in the signal close to the maximum allowed (2000), but this is not a requirement (experiment and see!). When done, click Refresh in the minting UI to proceed.
Effect editing : first, deactivate Auto-refresh params toggle to make it easier to change the params. Set seed number to select an effect stack (unique set of 1000 seeds is provided for every minter wallet address). Set brightness , contrast , light and dark threshold in the minting UI to adjust the original input image and influence the output. Click Refresh again to update the output. Resize your browser window to get a larger or a smaller output (makes cycling through seed numbers faster). This is just a preview and will not affect your artwork in any other way as all output scales are always accessible later. NOTE: generating an output in full resolution can take a while, please be patient.
When you are happy with the output , write the title in the UI field (will appear as a token feature) and press Mint . Your wallet address will appear under author feature.

Minting workflow on fxhash website

Elements and concepts

This section will provide a list of important elements and concepts behind the collection, together with a visual guide and (when necessary) logic of their implementation in the code. For the full code base, please refer to the rtrdgtzr repository on GitHub. A base for many of the concepts described here is signal processing theory, specifically JPEG compression algorithm. We would recommend reading Alex Dowad's JPEG Series, Part I: Visualizing the Inverse Discrete Cosine Transform and Omar Shehata's Unraveling the JPEG first, then studying an interactive code example JPEG Sandbox to get an understanding of how JPEG compression works. Throughout this article we are using an AI generated image of William Gibson, author of Neuromancer, whose techno-dystopian novels inspired the collection. Effect stacks in rtrdgtzr were originally developed for the ǥᵍłˡŧᵗȼᶜħʰvᵛɍʳsˢ collection released on GlitchForge in 2023. In terms of narrative, aesthetics and tech, they form an artistic continuum.

Signal

Signal is the core element behind the collection. It is a string of Chinese Han ideographs which encode the input image and store it in compressed form on-chain through params mechanic. It has a maximum length of 2000 characters. Although the fxhash platform supports storing params in much larger length, keeping in the spirit of retro graphics, we imposed this length constraint for the collection (to learn more on how params mechanic works on fxhash, please refer to their docs directly). To increase the number of pixels which can be stored on-chain (where the token params are stored), we apply a custom JPEG compression algorithm to the input image and encode DCT (discrete cosine transform) coefficients for each 8x8 pixel square into the signal string. When editing the input image, quality parameter controls the number of absolute largest coefficients which can be stored for the pixel square (10 for the highest quality, 1 for the lowest). Even at the highest quality, we only need to store 10 characters to represent 64 pixels (8x8 square), which is a compression ratio of 15.6%. Higher compression ratio is achieved by decreasing the quality and quantization levels, and by "removing" the pixel squares (making them transparent). There are three ways we made signal string more compact:

Value + position : Each ideograph character encodes both a DCT coefficient value (used in JPEG compression) AND the position of that coefficient in the 8x8 square of pixels. We can do this because we have 20,992 ideographs in the Unicode block to choose from (Chinese Han, CJK Unified Ideographs) which is more than enough to map onto 64-pixel positions for each pixel square and their pixel values.
Quantization : DCT coefficients have a maximum of 2040 levels, but with quantization (used in JPEG compression) we can reduce this number by a factor between 10 and 121. This gives us less levels to map to ideograph characters. Default quantization value is 1, but we can increase it to 10 to achieve higher compression (this reduces the quality of the image).
Run-length encoding : Whenever a buffer character in the signal string repeats, it is replaced by another character which indicates how many times a repetition is done. For example, there are characters which represent a repetition of a buffer character 黑 (used for zero-valued coefficients) and alpha character 门 (used to indicate that the 8x8 square of pixels is transparent).

A minter will input an image on the drop screen which will in turn be serialized into a signal. This signal will contain the compressed version of the image, stored on-chain using params mechanic and loaded each time the artwork is generated and displayed in the browser. This serialization is done for each 8x8 pixel square of the image separately. For quality set to 10 (maximum), there will be 10 characters in the signal representing each square of pixels (less if the quality is reduced). rtrdgtz uses a grayscale version of the image as a base for serialization. Instead of storing brightness values for each pixel, we store DCT (discrete cosine transform) coefficients which can be used to reconstruct a square of pixels in an approximate way. This is the basis of JPEG compression algorithm. Furthermore, we map those coefficients (both the values and their "position" or phase) to Unicode characters (2 bytes or 4 hex values each) using character maps. There are two maps: character-to-coefficient map and coefficient-to-character map. These maps are not stored beforehand but are generated from scratch at the very beginning through code, utilizing the fact that Unicode encoding is available in all modern browsers.

Signal string param will be created automatically when the image is dropped onto the drop screen. You can see it in full by opening your browser console or by pressing C key during image editing phase.

Quality

Quality refers to the number of absolute largest DCT coefficients stored for each 8x8 pixel square. There are 64 DCT coefficients in total, but we can select 10 that contribute most information in the image (this is the basic principle of JPEG compression). Due to quantization, many small coefficients get rounded down to zero, so when we select the largest ones, there could still be many that remain zero. This is especially true for pixel squares which are very uniform in brightness and gradient (for example in the image background). If your input image has large patches of uniform brightness and gradient, these will contribute to a larger compression. Reducing the quality parameter reduces the number of coefficients stored, and at lower levels will produce an image with square patches of regular-looking gradients.

Use arrow keys LEFT and RIGHT to change the quality during image editing phase.

Quantization

JPEG compression algorithm works by quantizing DCT coefficients for each 8x8 square patch of pixels. This is done using a JPEG quantization table which is designed empirically to preserve the level of detail for the most relevant coefficients and is stored in the code. This means that when translated to pixel values, pixel brightness levels are not smooth but discrete, which produces visual compression artefacts in the image. Original JPEG algorithm uses Huffman coding to efficiently store those quantized coefficients. In rtrdgtzr we are not using Huffman coding, instead we map both coefficient values and their position in the 8x8 pixel square using an ideograph (Unicode character). This is less efficient, but works well for our purposes.

Use arrow keys UP and DOWN to change quantization during image editing phase.

Format

Input images are automatically converted to one of three chosen formats:

square - 160 x 160 pixels
portrait - 128 x 200 pixels
landscape - 200 x 128 pixels

The smallest number of characters needed to store pixel information for these formats is 400 (compression ratio of 1%) with quality set to 1, while the maximum decompressed signal length is 4000 characters with quality set to 10 (compression ratio of 12%). All three formats have the same total number of pixels and therefore also the same decompressed signal length. But, outputs derived from the same input image will most probably have a different compressed signal length. This is because the pixel squares get compressed differently depending on what is in them, with uniform patches compressing more and those with higher variation in brightness and gradient compressing less.

Choose the format by dropping your input image to the appropriate location on the drop screen (left, middle and right). You can redrop an image during image editing phase to change the image or the format. Format cannot be changed once you proceed to effect editing.

Comparison of era '80s (left) and '90s (right) effect stacks - the only difference is the lack of dithering in latter.

Era

Effect stacks are divided in two large groups according to the decade that inspired them:

'80s - includes Floyd-Steinberg dithering, pixel sorting and tinted layers
'90s - same as the '80s except no dithering, instead JPEG artefacts are more prominent

Choose the era of the output by clicking on the era screen (after start screen). This will fix the era param for all effects after and cannot be changed manually again. If you want to choose a different era, you have to reload the minting page and start from the beginning.

Seed

Parameters for effects cannot be chosen directly, instead a seed number is used as an intermediate value. Minting process is WYSIWYG (what you see is what you get) with minter's wallet address and seed number used as the seed for the PRNG (pseudo-random number generator). This makes the randomness deterministic and easily reproducible for every individual minter. It also makes it unique, meaning that no two minters will get the same collection of effects to choose from. There are 1000 seed numbers available for every wallet address. The same seed will always give you the same effect, even if you reload the image or change its format or compression parameters. If you see an effect you like, just remember the seed associated with it and you can always use it, even if you mint a different artwork later (provided you are minting from the same wallet address). Correspondingly, the same seed will create a different effect for a different minter, although depending on the effect type, some might look very similar. In the end, all outputs use a 3-bit color palette, which has only eight colors.

Choose the seed by selecting a number from 0 to 999 on the number slider from the minting UI during effect editing phase. Press Refresh to apply the effect. Note that it can take some time for the animation to render, but you can always reduce your browser window size to get a smaller output scale which will render faster.

Effect stacks

After the parameters for the input image are chosen during during image editing phase, two effect stacks are chosen at random (this selection is deterministically based on the seed) and applied to the main image and its background respectively. The background is revealed beneath the transparent pixel squares that were removed during image editing (originally these show up as blue). There are six effect stacks: mono, hi-fi, noisy, corrupted, abstract, lo-fi. In spirit of the retro graphics, rtrdgtzr uses a 3-bit color palette, which gives us only eight colors in total: white and black (basic), red, green and blue (primary), and magenta, cyan and yellow (secondary). With era parameter set to '80s, pixel colors are always pure because dithering is applied at different stages of post-processing. If you zoom into your output (no matter the output scale, which can range from 1 to 10) you will only see these eight colors. With era parameter set to '90s pixels will have tonal shading as well, even though tinting colors are still chosen from the basic 3-bit palette.

You cannot directly choose the effect stacks applied to the image. You can only choose the seed number which will give you a random (but deterministic) selection of effect stacks, one applied to the main image and the other to the background (seen under transparent pixels).

Examples of noisy (above) and corrupted (below) effect stacks.

Dithering

Dithering is applied to all effects from the '80s era. From a technical standpoint, dithering is an intentionally applied form of noise used to randomize quantization error, preventing large-scale patterns such as color banding in images. It is way to display more colors with a limited color palette. As rtrdgtzr uses a 3-bit palette (eight colors), dithering is essential for shading of image parts. The type of dithering used is Floyd-Steinberg dithering with manually curated parameters. Each seed number, aside from determining the combination of colors from the palette, also determines the combination of dither parameters used in the effect stack. You can use Keith Jenkins interactive app dither-dream to explore variable parameters for Floyd-Steinberg dithering.

You cannot directly choose the combination of dither parameters in the output. You can only choose the seed number which will give you a random (but deterministic) selection of dither parameters from a curated list.

Examples of abstract (above) and lo-fi (below) effect stacks.

Pixel sorting

Pixel sorting is a technique of sorting pixels in a certain row or column according to their color or brightness value. Pixel sorting used in rtrdgtz applies additional color aberration to this sorting, producing a glitchy, distorted aesthetics. It is applied to some effects in different combinations. The algorithm is originally adapted from Kim Asendorf's ASDFPixelSort repository.

effects with pixel sorting : noisy , corrupted , abstract , lo-fi
effects without pixel sorting : mono , hi-fi

You cannot directly choose the pixel sorting parameters in the output. You can only choose the seed number which will give you a random (but deterministic) selection of pixel sorting parameters.

Examples of increasing light (left) and dark thresholds (right) - notice the change in color gradation between the layers of the image.

Input image adjustments

During effect editing phase it is possible to adjust four image parameters using minting UI. Brightness and contrast are self-explanatory. For best results, make sure the input image already has good contrast and sufficient brightness. Some effect stacks are splitting the image into 2 or 3 layers based on brightness of pixels and applying post-processing to them separately. Light and dark thresholds control how these layers are defined. These are meant to give the minter a more fine-tuned control of how the effects are applied to the image. When in doubt, just leave them as they are. The parameters that can be set ar:

brightness : global brightness adjustment, scale 0.0 - 2.0, default 1.0
contrast : global contrast adjustment, scale 0.0 - 1.0, default 0.5
light threshold : pixels brighter than this value will be separated as the "lighter" layer (if used in the effect stack), scale 0 - 100, default 45
dark threshold : pixels darker than this value will be separated as the "darker" layer (if used in the effect stack), scale 0 - 100, default 30

NOTE: Some effects will create flashing patterns. Setting light threshold to just above or below 50 (45, 55...) can reduce flashing for the main image (this parameter doesn't affect the parts where pixel squares were removed).

You can adjust brightness, contrast, light and dark threshold using number sliders from the minting UI during effect editing phase.

Generate outputs quicker by reducing the size of your browser window.

Output

Every rtrdgtzr token is a 5-frame animated artwork. These frames are generated at the beginning and cycled with a fixed framerate (10 fps) to show the animation. All effects provide a pixel-perfect output which cannot be easily scaled to an arbitrary number without deteriorating the visual quality. Because of this, the artwork will always render into the largest possible integer scale that fits into the browser window (you can see this output scale value in the browser console). You can change the scale of the output using LEFT and RIGHT arrow keys, or by changing the size of the browser window and refreshing the page. Output scale is a number from 1 to 10, which are the only scales the artwork can be scaled to. Each one provides a slightly different level of detail. You can export the animation into a gif using G key (current scale of the artwork will be used) or into a png using S key. All scales of the artwork can be accessed and changed at any time using LEFT and RIGHT arrow keys (your artwork is never "fixed" to one scale). You can think of this as your artwork having 10 different versions, each one a scaled version of the other.

NOTE: GIF export will not work during minting due to sandboxing. You can export the GIF animation only after the artwork has been minted.

Export a 5-frame gif animation in the current scale by pressing G key. Export a still png image by pressing S key. Change the artwork scale by pressing LEFT and RIGHT arrow keys (10 scales available) or by resizing your browser window and refreshing the page (you will get the largest possible which fits into the window).

Examples of outputs with a randomized signal string - these will have "noise" as a type under token features.

Randomized params

Minting UI provides a Randomize Params button by default. If you press it, it will randomize all artwork params, including the signal string. Because signal is a code-driven param, it cannot be set manually in any other way except by dropping an image or by randomizing the params. Signal randomized in this way will produce a random string of Latin characters, not Chinese Han ideographs, which cannot be deserialized into DCT coefficients. When the code detects such characters, it will assign random coefficients to the pixel square. Together with random quality parameter (which determines how characters are grouped together to be interpreted as DCT coefficients for each pixel square) and random probability that a pixel square will be transparent, this random signal string will be parsed into a seemingly random (but deterministic) output. Such iterations will have "noise" as a type under token features, as opposed to "signal" for all outputs produced through dropping an image. Initially, we wanted to prohibit these types of iterations through code safe guards, but after some experimentation, we decided to leave them in, even embrace them. Hopefully, some beautiful iterations of this random noise will be minted into the final collection.

NOTE: Influence of pressing Randomize Params button on the final output has not been extensively tested. It should be treated as an experimental feature and used at your own risk. You might end up with a completely broken (blank) output.

Press "Randomize Params" button in the minting UI to get a random set of parameters, including a random signal string which will produce a noised output. If there is no output appearing, try to set contrast, brightness, light and dark thresholds closer to their default values before refreshing the page.

Collection curation

As mentioned at the beginning, rtrdgtz is a collaborative collection. It was greatly inspired by fxhash collections Universal Rayhatcher by and Pensado a mano by , both inovative at the time in their use of params mechanics. In a similar way, rtrdgtzr it is just an editor, a beginning of the journey. It can only gain significance by minters minting the artworks into it. Because of this, all minting spots will be reserved initially, with reserves being released to select artists. If you want to contribute as an artist, reach out! We will offer reserve spots for a symbolic price. To immediately answer the questions:

Why such a low price? Because we are releasing the collection during hard market conditions (August 2023) we don't want to focus on the price at all. We want everybody to have an equal opportunity to contribute to the collection, and we don't want the price to be a factor there. Additionally, we want to allow the value of the collection to accrue in the secondary market, which will primarily benefit the minters themselves.
Then why not setting the price to zero? Because we believe "minimal commitment" is important to prevent exploitation and abuse of our generosity. It will hopefully deter bad actors from hoarding minting tickets. We also want to encourage minters to use their tickets shortly after they are purchased, so we will set a very short grace period (all in the name of experiment).

If you want to support us as a collector, please consider collecting the pieces from the collection. We want to explore different modes of co-creation, including collaborations, commissions, give aways etc. You can follow the progress of the campaign on our main X account (formerly twitter), or just follow .

Conclusion

This collection is also an official entry to the fxhackathon 2023: co-creation interfaces. Development on the collection started some time before the guidelines for the hackathon were announced, and we realized that the core idea of the collection - to store a compressed version of the image on-chain, would be an interesting minting mechanic to explore. In this case, guidelines for the hackathon and our own core principles aligned perfectly, as we left our code open (unminified and unobfuscated), available on public repositories, and well documented through writing so it can serve as inspiration to others. We believe that by sharing our code openly, we are raising the standard of all generative art on the platform and benefiting the entire Tezos NFT ecosystem and beyond. Thus, we see our support for open generative tools as a mission every generative artist should partake in.

rtrdgtzr is created by in 2023.

Code and article by .

Est tempora vero facere est placeat tempore quos. Consequatur nam deserunt sint nulla magni recusandae ab autem. Voluptas sed incidunt harum necessitatibus porro enim illo. Ab quam commodi veritatis. Dolor iure esse unde sint. Facere reprehenderit nostrum illo temporibus voluptatibus. Vero sapiente sint culpa. Cum rerum aut et. Minima suscipit animi hic molestias blanditiis repellendus. Impedit vel est dolor autem et molestias assumenda iste. Nobis laboriosam doloribus iusto omnis eum sunt. Ratione ut omnis consequatur minus. Sapiente eum id dolor modi aut voluptatem eligendi. Voluptatibus sint nihil quibusdam quod accusamus et. Perferendis impedit debitis minima culpa sit omnis fuga. Rerum voluptatem est sit. Iusto pariatur qui doloribus et asperiores. Ex sed ullam perferendis nostrum. Aut quas adipisci sed consequatur explicabo ut.

suscipit animi hic molestias blanditiis repellendus. Impedit vel est dolor autem et molestias assumenda iste. Nobis laboriosam doloribus iusto omnis eum sunt. Ratione ut omnis consequatur minus. Sapiente eum id dolor modi aut voluptatem eligendi. Voluptatibus sint nihil quibusdam quod accusamus et. Perferendis impedit debitis minima culpa sit omnis fuga. Rerum voluptatem est sit. Iusto pariatur qui doloribus et asperiores. Ex sed ullam perferendis nostrum. Aut quas adipisci sed consequatur explicabo ut.

rtrdgtzr - Minter's Guide

Overview

NOTE: EPILEPTIC TRIGGER WARNING! - some animations in this article feature flashing graphics, proceed with caution if you have a condition

project name project name project name

Quick minting guide