6 |
7 | Apply an eight-color terminal palette to an image. Use keyboard controls to choose a theme, set thresholds, and cycle hues.
8 |
9 | https://pal.constraint.systems
10 |
11 | ## How it works
12 |
13 | ### Applying the base colors
14 |
15 | Pal looks at each pixel of the image. It first looks at luminance. If the luminance value is lower than the `lothresh` threshold, the pixel is set to black. If the luminance value is higher than the `hithresh` threshold, the pixel is set to white. If it is between the thresholds, it uses a formula to calculate the hue. The pixel is then set to the closest hue (from red, yellow, green, blue, magenta and cyan). If the color has no hue (if its red, green, and blue values are equal) it is set to black or white based on a luminance threshold of 0.5.
16 |
17 | ### Applying a theme
18 |
19 | To apply a theme Pal uses the palette categories from the base color values: red pixels are set to whatever is in that theme's red slot, etc. An alternative way to do it would be to recalculate the closest hue based on the theme's colors (this is how color palettes are usually applied). But Pal doesn't do that. Pal uses the calculations from the base colors and applies the theme on top of that. For black and white Pal uses the background and foreground colors from the theme. It uses whichever one is darker for the black pixels (so dark themes use the background color for black while light themes use the foreground color).
20 |
21 | `shue` shifts the hue slots according to its value. The background and foreground colors remain the same.
22 |
23 | ### The shader
24 |
25 | I use a [shader](https://github.com/constraint-systems/pal/blob/master/shaders/shaders.js) to apply the themes. Originally I was doing canvas pixel manipulation, but the rendering was taking a long time. Switching to a shader made the theme changes instantaneous. I used [Mike Riethmuller's wonderful guide to get the shader working](https://www.madebymike.com.au/writing/canvas-image-manipulation/), modifying it to fit inside a React app. I'm pretty sure I'm not supposed to use so many if statements in a shader, so if anyone wants to clue me in to a better way to write [the fragment shader](/constraint-systems/pal/blob/master/shaders/shaders.js) I'd be happy to hear it.
26 |
27 | ### Themes
28 |
29 | The themes are from the [Gogh terminal color scheme project](https://github.com/Mayccoll/Gogh). I converted them into a more minimal [JSON file](https://github.com/constraint-systems/pal/blob/master/s/theme_min.js). Let me know if you'd like a theme added and have the color values.
30 |
--------------------------------------------------------------------------------
/components/nav.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Link from 'next/link'
3 |
4 | const links = [
5 | { href: 'https://zeit.co/now', label: 'ZEIT' },
6 | { href: 'https://github.com/zeit/next.js', label: 'GitHub' },
7 | ].map(link => {
8 | link.key = `nav-link-${link.href}-${link.label}`
9 | return link
10 | })
11 |
12 | const Nav = () => (
13 |
54 | )
55 |
56 | export default Nav
57 |
--------------------------------------------------------------------------------
/out/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/constraint-systems/pal/7cdc1d2006735674f419e2a8fcbbd1ef86f4246e/out/.nojekyll
--------------------------------------------------------------------------------
/out/404.html:
--------------------------------------------------------------------------------
1 |