Skip to content

Instantly share code, notes, and snippets.

@mattdesl

mattdesl/palette-btoa.js

Last active December 14, 2023 21:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattdesl/58b806478f4d33e8b91ed9c51c39014d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattdesl/58b806478f4d33e8b91ed9c51c39014d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mattdesl revised this gist Apr 6, 2021. 1 changed file with 14 additions and 2 deletions.
    16 changes: 14 additions & 2 deletions palette-btoa.js
    View file
    Original file line number Diff line number Diff line change
    @@ -26,5 +26,17 @@ var txt = a.map(palette => {
    return btoa(uint8)
    }).join(`:`)

    // decompress without # prefix (318 bytes)
    var k=`G28/EMW0reTNKewZ:lr3oJGqFNIPksWj2:tiOxbhj5ScvBWtZ9:cyZ7wpxbYIbe:55+bdyFAy4yW:pFzXPQcJl3jEWJO2QKOZ:bfbRXqU0iLyG:b0iV1ab8OVHDTigWf9UM:WEmOWWpcnVPuwwk1OgSA:Z671Lq52biN24F19:yhXIqYrNApPDhW4N:tlzS/Cu6WaZpLyyZ`.split`:`.map(b=>Array.from(atob(b),c=>('00'+c.charCodeAt().toString(16)).slice(-2)).join``.match(/.{6}/g))
    // decompress without # prefix (313 bytes)
    var k=`G28/EMW0reTNKewZ:lr3oJGqFNIPksWj2:tiOxbhj5ScvBWtZ9:cyZ7wpxbYIbe:55+bdyFAy4yW:pFzXPQcJl3jEWJO2QKOZ:bfbRXqU0iLyG:b0iV1ab8OVHDTigWf9UM:WEmOWWpcnVPuwwk1OgSA:Z671Lq52biN24F19:yhXIqYrNApPDhW4N:tlzS/Cu6WaZpLyyZ`.split`:`.map(b=>[...atob(b)].map(c=>c.charCodeAt().toString(16).padStart(2,0)).join``.match(/.{6}/g))

    console.log(k);

    function hexToRGB(str) {
    var hex = str.replace(/^#/, "");
    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    var num = parseInt(hex, 16);
    var red = num >> 16;
    var green = (num >> 8) & 255;
    var blue = num & 255;
    return [red, green, blue];
    }
  2. mattdesl revised this gist Apr 6, 2021. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    # code-golfing color palettes in JavaScript

    If you need to code-golf a set of predefined RGB color palettes, how would you do it?

    **Problem:** Each palette has a variable amount of RGB colors. The program output should closely match the input palettes, in string hex code format (with or without `#` prefix) so that it can be fed into Canvas2D APIs. Solution must be valid JavaScript code.

    **Proposed Solution:** Turn each palette into a base64 encoded string. During decoding, use `atob` to convert the Base64 palette to a set of hex codes.

    **Other Solutions?** Maybe with RGB565 or RGB444? Please comment if you have any other solutions. :)
  3. mattdesl revised this gist Apr 6, 2021. 2 changed files with 30 additions and 0 deletions.
    30 changes: 30 additions & 0 deletions palette-btoa.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    // Polyfill so we can run this in Node.js as well
    if (typeof atob !== 'function') {
    var atob = a => Buffer.from(a, 'base64').toString('binary')
    var btoa = b => Buffer.from(b).toString('base64');
    }

    // 511 bytes after minify
    var a=[
    ["#1b6f3f", "#10c5b4", "#ade4cd", "#29ec19"],
    ["#96bde8", "#246a85", "#3483e4", "#b168f6"],
    ["#b623b1", "#6e18f9", "#49cbc1", "#5ad67d"],
    ["#73267b", "#c29c5b", "#6086de"],
    ["#e79f9b", "#772140", "#cb8c96"],
    ["#a45cd7", "#3d0709", "#9778c4", "#5893b6", "#40a399"],
    ["#6df6d1", "#5ea534", "#88bc86"],
    ["#6f4895", "#d5a6fc", "#3951c3", "#4e2816", "#7fd50c"],
    ["#58498e", "#596a5c", "#9d53ee", "#c30935", "#3a0480"],
    ["#67aef5", "#2eae76", "#6e2376", "#e05d7d"],
    ["#ca15c8", "#a98acd", "#0293c3", "#856e0d"],
    ["#b65cd2", "#fc2bba", "#59a669", "#2f2c99"],
    ];

    // turn into base64 encoded strings
    var txt = a.map(palette => {
    const uint8 = new Uint8Array(palette.map(n => hexToRGB(n)).flat())
    return btoa(uint8)
    }).join(`:`)

    // decompress without # prefix (318 bytes)
    var k=`G28/EMW0reTNKewZ:lr3oJGqFNIPksWj2:tiOxbhj5ScvBWtZ9:cyZ7wpxbYIbe:55+bdyFAy4yW:pFzXPQcJl3jEWJO2QKOZ:bfbRXqU0iLyG:b0iV1ab8OVHDTigWf9UM:WEmOWWpcnVPuwwk1OgSA:Z671Lq52biN24F19:yhXIqYrNApPDhW4N:tlzS/Cu6WaZpLyyZ`.split`:`.map(b=>Array.from(atob(b),c=>('00'+c.charCodeAt().toString(16)).slice(-2)).join``.match(/.{6}/g))
    0 palette.js → palette-split.js
    View file
    File renamed without changes.
  4. mattdesl revised this gist Apr 6, 2021. 1 changed file with 8 additions and 5 deletions.
    13 changes: 8 additions & 5 deletions palette.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // 505 bytes
    const testPalette = [
    // 511 bytes after minify
    var a=[
    ["#1b6f3f", "#10c5b4", "#ade4cd", "#29ec19"],
    ["#96bde8", "#246a85", "#3483e4", "#b168f6"],
    ["#b623b1", "#6e18f9", "#49cbc1", "#5ad67d"],
    @@ -15,8 +15,11 @@ const testPalette = [
    ];

    // compress
    const txt = testPalette.map((n) => n.join("").replace(/\#/g, "")).join("Z");
    const txt = a.map((n) => n.join("").replace(/\#/g, "")).join("Z");
    console.log(txt);

    // decompress (337 bytes)
    `1b6f3f10c5b4ade4cd29ec19Z96bde8246a853483e4b168f6Zb623b16e18f949cbc15ad67dZ73267bc29c5b6086deZe79f9b772140cb8c96Za45cd73d07099778c45893b640a399Z6df6d15ea53488bc86Z6f4895d5a6fc3951c34e28167fd50cZ58498e596a5c9d53eec309353a0480Z67aef52eae766e2376e05d7dZca15c8a98acd0293c3856e0dZb65cd2fc2bba59a6692f2c99`.split`Z`.map(p=>p.match(/.{1,6}/g))
    // decompress without # symbol (342 bytes)
    var p="1b6f3f10c5b4ade4cd29ec19Z96bde8246a853483e4b168f6Zb623b16e18f949cbc15ad67dZ73267bc29c5b6086deZe79f9b772140cb8c96Za45cd73d07099778c45893b640a399Z6df6d15ea53488bc86Z6f4895d5a6fc3951c34e28167fd50cZ58498e596a5c9d53eec309353a0480Z67aef52eae766e2376e05d7dZca15c8a98acd0293c3856e0dZb65cd2fc2bba59a6692f2c99".split`Z`.map(c=>c.match(/.{6}/g));

    // decompress with # prefix (356 bytes)
    var h="1b6f3f10c5b4ade4cd29ec19Z96bde8246a853483e4b168f6Zb623b16e18f949cbc15ad67dZ73267bc29c5b6086deZe79f9b772140cb8c96Za45cd73d07099778c45893b640a399Z6df6d15ea53488bc86Z6f4895d5a6fc3951c34e28167fd50cZ58498e596a5c9d53eec309353a0480Z67aef52eae766e2376e05d7dZca15c8a98acd0293c3856e0dZb65cd2fc2bba59a6692f2c99".split`Z`.map(c=>c.match(/.{6}/g).map(s=>'#'+s));
  5. mattdesl revised this gist Apr 6, 2021. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions palette.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // the input palettes (505 bytes minified)
    const testPalettes = [
    // 505 bytes
    const testPalette = [
    ["#1b6f3f", "#10c5b4", "#ade4cd", "#29ec19"],
    ["#96bde8", "#246a85", "#3483e4", "#b168f6"],
    ["#b623b1", "#6e18f9", "#49cbc1", "#5ad67d"],
    @@ -14,8 +14,9 @@ const testPalettes = [
    ["#b65cd2", "#fc2bba", "#59a669", "#2f2c99"],
    ];

    // compress the palettes
    const txt = testPalettes.map((n) => n.join("Y").replace(/\#/g, "")).join("Z");
    // compress
    const txt = testPalette.map((n) => n.join("").replace(/\#/g, "")).join("Z");
    console.log(txt);

    // now we can decompress in our script (365 bytes)
    `1b6f3fY10c5b4Yade4cdY29ec19Z96bde8Y246a85Y3483e4Yb168f6Zb623b1Y6e18f9Y49cbc1Y5ad67dZ73267bYc29c5bY6086deZe79f9bY772140Ycb8c96Za45cd7Y3d0709Y9778c4Y5893b6Y40a399Z6df6d1Y5ea534Y88bc86Z6f4895Yd5a6fcY3951c3Y4e2816Y7fd50cZ58498eY596a5cY9d53eeYc30935Y3a0480Z67aef5Y2eae76Y6e2376Ye05d7dZca15c8Ya98acdY0293c3Y856e0dZb65cd2Yfc2bbaY59a669Y2f2c99`.split`Z`.map(p=>p.split`Y`)
    // decompress (337 bytes)
    `1b6f3f10c5b4ade4cd29ec19Z96bde8246a853483e4b168f6Zb623b16e18f949cbc15ad67dZ73267bc29c5b6086deZe79f9b772140cb8c96Za45cd73d07099778c45893b640a399Z6df6d15ea53488bc86Z6f4895d5a6fc3951c34e28167fd50cZ58498e596a5c9d53eec309353a0480Z67aef52eae766e2376e05d7dZca15c8a98acd0293c3856e0dZb65cd2fc2bba59a6692f2c99`.split`Z`.map(p=>p.match(/.{1,6}/g))
  6. mattdesl created this gist Apr 6, 2021.
    21 changes: 21 additions & 0 deletions palette.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    // the input palettes (505 bytes minified)
    const testPalettes = [
    ["#1b6f3f", "#10c5b4", "#ade4cd", "#29ec19"],
    ["#96bde8", "#246a85", "#3483e4", "#b168f6"],
    ["#b623b1", "#6e18f9", "#49cbc1", "#5ad67d"],
    ["#73267b", "#c29c5b", "#6086de"],
    ["#e79f9b", "#772140", "#cb8c96"],
    ["#a45cd7", "#3d0709", "#9778c4", "#5893b6", "#40a399"],
    ["#6df6d1", "#5ea534", "#88bc86"],
    ["#6f4895", "#d5a6fc", "#3951c3", "#4e2816", "#7fd50c"],
    ["#58498e", "#596a5c", "#9d53ee", "#c30935", "#3a0480"],
    ["#67aef5", "#2eae76", "#6e2376", "#e05d7d"],
    ["#ca15c8", "#a98acd", "#0293c3", "#856e0d"],
    ["#b65cd2", "#fc2bba", "#59a669", "#2f2c99"],
    ];

    // compress the palettes
    const txt = testPalettes.map((n) => n.join("Y").replace(/\#/g, "")).join("Z");

    // now we can decompress in our script (365 bytes)
    `1b6f3fY10c5b4Yade4cdY29ec19Z96bde8Y246a85Y3483e4Yb168f6Zb623b1Y6e18f9Y49cbc1Y5ad67dZ73267bYc29c5bY6086deZe79f9bY772140Ycb8c96Za45cd7Y3d0709Y9778c4Y5893b6Y40a399Z6df6d1Y5ea534Y88bc86Z6f4895Yd5a6fcY3951c3Y4e2816Y7fd50cZ58498eY596a5cY9d53eeYc30935Y3a0480Z67aef5Y2eae76Y6e2376Ye05d7dZca15c8Ya98acdY0293c3Y856e0dZb65cd2Yfc2bbaY59a669Y2f2c99`.split`Z`.map(p=>p.split`Y`)