Code Monkey home page Code Monkey logo

gradient-blaster's Introduction

Gradient Blaster

https://gradient-blaster.grahambates.com

Gradient Blaster is a web-based tool to build gradient data for retro platforms using a visual editor. It supports multiple algorithms for colour blending and dithering. The gradient data can be exported in several formats for use with different languages and use cases.

Interface

screenshot

  1. Options
  2. Selected point detail - Editor for the current point
  3. Points track - Draggable/selectable markers of the points defined on the gradient
  4. Preview
  5. Output - Export gradient data in desired format
  6. History - undo/redo changes or reset to default state

Options

Steps:

The number of values in the gradient output i.e. the number of pixels it spans.

Blend mode:

The colour model / algorithm used to interpolate between points in the gradient.

  1. OKLAB: Interpolates values using the OKLAB colour space. This is a perceptual colour space designed for image processing tasks, including creating smooth and uniform looking transitions between colors.
  2. LAB: Interpolates values using the standard LAB colour space.
  3. Gamma adjusted RGB: Converts to linear colour space using the SRGB model prior to interpolation. Applies adjustments for percieved brightness. Based on 'Mark's method'.
  4. Simple RGB: Naive linear interpolation of the raw RGB values.

Target:

The platform and colour mode that the gradient is intended for:

Platform Bit depth Data format
Amiga OCS/ECS 12 bit (4 per channel) Single word:
R3 R2 R1 R0 G3 G2 G1 G0 B3 B2 B1 B0
Amiga OCS/ECS
Interlaced
15 bit (effective) As above, but two alternating frames to give the appearence of blended colours and provide an extra 'fake' bit per channel
Amiga AGA 24 bit (8 per channel) Two words: high/low nibbles
A: R7 R6 R5 R4 G7 G6 G5 G4 B7 B6 B5 B4
B: R3 R2 R1 R0 G3 G2 G1 G0 B3 B2 B1 B0
Atari ST 9 bit (3 per channel) Single word:
__ R2 R1 R0 __ G2 G1 G0 __ B2 B1 B0
Atari STe/TT 12 bit (4 per channel) Single word: LSB first
R0 R3 R2 R1 G0 G3 G2 G1 B0 B3 B2 B1
Atari Falcon 18 bit (6 per channel) Single longword: 2 LSB per byte unused, 3rd byte blank
R5 R4 R3 R2 R1 R0 __ __ G5 G4 G3 G2 G1 G0 __ __
__ __ __ __ __ __ __ __ B5 B4 B3 B2 B1 B0 __ __
Atari Falcon
true colour
16 bit (5 red, 6 green, 5 blue) Single word:
R4 R3 R2 R1 R0 G5 G4 G3 G2 G1 G0 B4 B3 B2 B1 B0

Dither Modes:

  1. Off: no dithering, just hard quantise to the desired bit depth.
  2. Shuffle: Switches pairs of values at colour boundaries to lessen the appearance of banding.
  3. Error diffusion: Applies one-dimesionsal error diffusion to values.
  4. Blue noise: Adds blue noise to data to each channel before quantising.
  5. Blue noise mono: As above, but applies the same noise values across all RGB channels, whereas normally we use a different starting offset for each channel. Less subtle but avoids colour variation in the dithering artifacts.
  6. Golden ratio: Adds noise using an algorithm based on the Golden ratio sequence. Similar to blue noise, this givens an even distribution of noise. Depending on the data either one of these may give better results.
  7. Golden ratio mono: See Blue noise mono
  8. White noise: Applies completely random noise. Generally looks pretty bad, but useful for comparison with other noise algorithms or to create a deliberately noise appearance.
  9. White noise mono: See Blue noise mono
  10. Ordered: Applies +/- offset to odd and even rows. This gives a consistent alternating pattern.
  11. Ordered mono: Applies the same offset to all channels, whereas normally the green channel is flipped +/- for a smoother appearance.

Dither amount:

Multiplier for noise or adjustments applied by the current dithering algorithm.

Shuffle count:

Maximum numer of pairs to swap at each boundary when using the Shuffle dither mode.


Editing

The gradient is defined by a list of fixed points which have a colour value and position. These are then interpolated to provide the intermediate values.

The left hand panel (2) shows the currently selected point and allows you to edit the colour and position. The center panel shows a preview of the gradient (4) and has markers for the points in the track down the left hand side (3).

Adding a point:

Click in the track (3) to add a new point at that position

Selecting a point:

  • Click the marker in the track (3)
  • Navigate using the arrows at the top of the detail panel (2)

Moving a point:

To change to the position of a point you can either:

  • Drag the marker in the track (3)
  • Select the point and edit the 'Position' field (2)

Removing a point:

To remove a point for the gradient can either:

  • Select the point and click the 'Remove' button in the detail panel (2)
  • Drag the point outside of the track (3)

Output

The gradient can be exported in the following formats:

Copper list:

For Amiga targets, outputs data for the Copper to output the vertical gradient based on line wait commands.

Table:

Outputs the raw colour values for each step in the gradient. Supports code generation for several languages, as well as binary download in Big Endian suitable for INCBIN into your code.

PNG Image:

Download a PNG of the gradient preview. This contains the vertical gradient as shown in the preview, but at native resolution and allows you to specify the width. This can then be shared with designers/graphicians.


Links

References

Thanks to…

  • Soundy/Deadliners: for creating the original Gradient Master that provided inspiration for this tool
  • Evil/DHS: For suggestion and technical support implementing for Atari target modes
  • Pink/Abyss: for suggesting the interlace mode

gradient-blaster's People

Contributors

grahambates avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

gradient-blaster's Issues

Atari ST palette data is incorrect

There are 4-bit nibbles produced also in Atari ST palette mode (should be 3-bit).

How to see the bug:

  1. Launch the tool
  2. Switch to Atari ST

See datas such as :
dc.w $ff0,$ff0,$ff0,$ff0,$ff4,$ff3,$ff3,$ff4
dc.w $ff3,$ff3,$ef5,$ff5,$ef4,$ef5,$ef5,$ff5
...
ST should be 0-7 only.

If the first control colour is black, it will fade with ST colours until it reaches the next control colour and then start to output 4-bit nibbles. If the end control colour is black, the last part of the fade will be correct. So it seems fades going from or to black works fine, otherwise not.

Support for Falcon/24-bit mode

Just found your tool, I like it very much.

A small feature request: could you add also the full 24-bit scale for the Falcon format? As there is already a hardware which supports it (SuperVidel), the situation is similar as with ST vs STE palette: it's always a good idea to work natively with the better format.

Feature: output total line counter

Most of the times, when experimenting with different gradients, the need is to end up with the same amount of instructions as the previous copperlist but setting different noise or colour parameters the size of output increases or decreases drastically. This can't obviously be changed but a counter of total lines would be very helpful when trying to match a specific copperlist size.

Misc features suggestion.

What a nice and useful tool!

Here are my suggestions for some extra features:

  • Check to output code in uppercase: DC.W $188,$5FA
  • Check to add leading zeroes to values: DC.W $0188,$0554
  • Enable multiple indexes: DC.W $0182,$0555,$0188,$0555,$0198,$0555,$019A,$0555,$019C,$0555,$019E,$0555
  • Add to the ASM option a WAITS table and a piece of ASM code to recreate runtime the copperlist, with already calculated reserved memory

:)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.