31:T724,ResizableApp = ({ result_image, resized_image, OFFSET_X, OFFSET_Y }) => { let resized_clone = React.useMemo(() => copy_canvas(resized_image), [ copy_canvas, resized_image ]); let hover_image = React.useMemo(() => hex_hover(copy_canvas(result_image)), [ hex_hover, result_image ]); // image.width = END_RESULT_WIDTH; let SCALE = Math.min( 400 / result_image.height, (width - 200) / result_image.width ); return jsx` <${Drag} x=${OFFSET_X} y=${OFFSET_Y} onDrag=${({ left, top }) => { mutable OFFSET_X = _.clamp(left, 0, resized.width - MAPS_WIDTH * MAP_SIZE); mutable OFFSET_Y = _.clamp(top, 0, resized.height - MAPS_HEIGHT * MAP_SIZE); }} style=${{ backgroundColor: 'black', display: 'flex', flexDirection: 'column', alignItems: 'center', height: result_image.height * SCALE + 200, width: result_image.width * SCALE, paddingLeft: 100, paddingRight: 100, overflow: 'hidden' }}>

${false /*<${Html} element=${resized_clone} />*/}

<${Html} element=${hover_image} />

`; }32:T4a4,transform_color = { return color => { let [r, g, b, a] = color; var color = new Colour(Colour.RGBA, [r, g, b, a]).convertTo(Colour.LABA); let closest_distance = Infinity; let closest_color = minecraft_colors_as_laba[0]; if (a < 1) { return [0, 0, 0, 0]; } // if (mutable last_color.last_color) { // let distance = mutable last_color.last_color.laba.distanceTo(color); // if (distance < mutable last_color.last_color.closest) { // closest_distance = distance; // closest_color = mutable last_color.last_color; // } // } if (closest_distance === Infinity) { for (let minecraft_color of minecraft_colors_as_laba) { let distance = minecraft_color.laba.distanceTo(color); if (distance < closest_distance) { closest_distance = distance; closest_color = minecraft_color; } if (distance < minecraft_color.closest) { // break; } } } mutable last_color.last_color = closest_color; // if (pixelData.data[a] < transparencyThreshold) { // closestColorIndex = 0; // } return closest_color.rgba.values; }; }33:T558,transform_color_fast = (data, index) => { let r = data[index + 0]; let g = data[index + 1]; let b = data[index + 2]; let a = data[index + 3]; var color = new Colour(Colour.RGBA, [r, g, b, a]).convertTo(Colour.LABA); let closest_distance = Infinity; let closest_color = minecraft_colors_as_laba[0]; if (a < 1) { data[index + 0] = 0; data[index + 1] = 0; data[index + 2] = 0; data[index + 3] = 0; return; } if (mutable last_color.last_color) { let distance = mutable last_color.last_color.laba.distanceTo(color); if (distance < mutable last_color.last_color.closest) { let x = mutable last_color.last_color.rgba.values; data[index + 0] = x[0]; data[index + 1] = x[1]; data[index + 2] = x[2]; data[index + 3] = x[3]; return; } } for (let minecraft_color of minecraft_colors_as_laba) { let distance = minecraft_color.laba.distanceTo(color); if (distance < minecraft_color.closest) { closest_color = minecraft_color; break; } if (distance < closest_distance) { closest_distance = distance; closest_color = minecraft_color; } } data[index + 0] = closest_color.rgba.values[0]; data[index + 1] = closest_color.rgba.values[1]; data[index + 2] = closest_color.rgba.values[2]; data[index + 3] = closest_color.rgba.values[3]; }34:T8a2,function floyd_steinberg(a, b, c, d, pixelData, old_a, old_b, old_c, old_d) { var quant_error_a = old_a - pixelData.data[a]; var quant_error_b = old_b - pixelData.data[b]; var quant_error_c = old_c - pixelData.data[c]; var quant_error_d = old_d - pixelData.data[d]; quant_error_a *= 0.4; quant_error_b *= 0.4; quant_error_c *= 0.4; quant_error_d *= 0.4; var width = pixelData.width * 4; // [x+1][y ] if (d + 4 <= pixelData.data.length && d % width < width - 1) { pixelData.data[a + 4] = pixelData.data[a + 4] + (quant_error_a * 7) / 16; pixelData.data[b + 4] = pixelData.data[b + 4] + (quant_error_b * 7) / 16; pixelData.data[c + 4] = pixelData.data[c + 4] + (quant_error_c * 7) / 16; pixelData.data[d + 4] = pixelData.data[d + 4] + (quant_error_d * 7) / 16; } // [x-1][y+1] if (d + width <= pixelData.data.length && d % width > 0) { pixelData.data[a - 4 + width] = pixelData.data[a - 4 + width] + (quant_error_a * 3) / 16; pixelData.data[b - 4 + width] = pixelData.data[b - 4 + width] + (quant_error_b * 3) / 16; pixelData.data[c - 4 + width] = pixelData.data[c - 4 + width] + (quant_error_c * 3) / 16; pixelData.data[d - 4 + width] = pixelData.data[d - 4 + width] + (quant_error_d * 3) / 16; } // [x ][y+1] if (d + width <= pixelData.data.length) { pixelData.data[a + width] = pixelData.data[a + width] + (quant_error_a * 5) / 16; pixelData.data[b + width] = pixelData.data[b + width] + (quant_error_b * 5) / 16; pixelData.data[c + width] = pixelData.data[c + width] + (quant_error_c * 5) / 16; pixelData.data[d + width] = pixelData.data[d + width] + (quant_error_d * 5) / 16; } // [x+1][y+1] if (d + width <= pixelData.data.length && d % width < width - 1) { pixelData.data[a + 4 + width] = pixelData.data[a + 4 + width] + (quant_error_a * 1) / 16; pixelData.data[b + 4 + width] = pixelData.data[b + 4 + width] + (quant_error_b * 1) / 16; pixelData.data[c + 4 + width] = pixelData.data[c + 4 + width] + (quant_error_c * 1) / 16; pixelData.data[d + 4 + width] = pixelData.data[d + 4 + width] + (quant_error_d * 1) / 16; } }35:T1022,colors_saved = `[{"color":{"r":127,"g":178,"b":56},"number":1,"name":"GRASS"},{"color":{"r":247,"g":233,"b":163},"number":2,"name":"SAND"},{"color":{"r":199,"g":199,"b":199},"number":3,"name":"WOOL"},{"color":{"r":255,"g":0,"b":0},"number":4,"name":"FIRE"},{"color":{"r":160,"g":160,"b":255},"number":5,"name":"ICE"},{"color":{"r":167,"g":167,"b":167},"number":6,"name":"METAL"},{"color":{"r":0,"g":124,"b":0},"number":7,"name":"PLANT"},{"color":{"r":255,"g":255,"b":255},"number":8,"name":"SNOW"},{"color":{"r":164,"g":168,"b":184},"number":9,"name":"CLAY"},{"color":{"r":151,"g":109,"b":77},"number":10,"name":"DIRT"},{"color":{"r":112,"g":112,"b":112},"number":11,"name":"STONE"},{"color":{"r":64,"g":64,"b":255},"number":12,"name":"WATER"},{"color":{"r":143,"g":119,"b":72},"number":13,"name":"WOOD"},{"color":{"r":255,"g":252,"b":245},"number":14,"name":"QUARTZ"},{"color":{"r":216,"g":127,"b":51},"number":15,"name":"COLOR_ORANGE"},{"color":{"r":178,"g":76,"b":216},"number":16,"name":"COLOR_MAGENTA"},{"color":{"r":102,"g":153,"b":216},"number":17,"name":"COLOR_LIGHT_BLUE"},{"color":{"r":229,"g":229,"b":51},"number":18,"name":"COLOR_YELLOW"},{"color":{"r":127,"g":204,"b":25},"number":19,"name":"COLOR_LIGHT_GREEN"},{"color":{"r":242,"g":127,"b":165},"number":20,"name":"COLOR_PINK"},{"color":{"r":76,"g":76,"b":76},"number":21,"name":"COLOR_GRAY"},{"color":{"r":153,"g":153,"b":153},"number":22,"name":"COLOR_LIGHT_GRAY"},{"color":{"r":76,"g":127,"b":153},"number":23,"name":"COLOR_CYAN"},{"color":{"r":127,"g":63,"b":178},"number":24,"name":"COLOR_PURPLE"},{"color":{"r":51,"g":76,"b":178},"number":25,"name":"COLOR_BLUE"},{"color":{"r":102,"g":76,"b":51},"number":26,"name":"COLOR_BROWN"},{"color":{"r":102,"g":127,"b":51},"number":27,"name":"COLOR_GREEN"},{"color":{"r":153,"g":51,"b":51},"number":28,"name":"COLOR_RED"},{"color":{"r":25,"g":25,"b":25},"number":29,"name":"COLOR_BLACK"},{"color":{"r":250,"g":238,"b":77},"number":30,"name":"GOLD"},{"color":{"r":92,"g":219,"b":213},"number":31,"name":"DIAMOND"},{"color":{"r":74,"g":128,"b":255},"number":32,"name":"LAPIS"},{"color":{"r":0,"g":217,"b":58},"number":33,"name":"EMERALD"},{"color":{"r":129,"g":86,"b":49},"number":34,"name":"PODZOL"},{"color":{"r":112,"g":2,"b":0},"number":35,"name":"NETHER"},{"color":{"r":209,"g":177,"b":161},"number":36,"name":"TERRACOTTA_WHITE"},{"color":{"r":159,"g":82,"b":36},"number":37,"name":"TERRACOTTA_ORANGE"},{"color":{"r":149,"g":87,"b":108},"number":38,"name":"TERRACOTTA_MAGENTA"},{"color":{"r":112,"g":108,"b":138},"number":39,"name":"TERRACOTTA_LIGHT_BLUE"},{"color":{"r":186,"g":133,"b":36},"number":40,"name":"TERRACOTTA_YELLOW"},{"color":{"r":103,"g":117,"b":53},"number":41,"name":"TERRACOTTA_LIGHT_GREEN"},{"color":{"r":160,"g":77,"b":78},"number":42,"name":"TERRACOTTA_PINK"},{"color":{"r":57,"g":41,"b":35},"number":43,"name":"TERRACOTTA_GRAY"},{"color":{"r":135,"g":107,"b":98},"number":44,"name":"TERRACOTTA_LIGHT_GRAY"},{"color":{"r":87,"g":92,"b":92},"number":45,"name":"TERRACOTTA_CYAN"},{"color":{"r":122,"g":73,"b":88},"number":46,"name":"TERRACOTTA_PURPLE"},{"color":{"r":76,"g":62,"b":92},"number":47,"name":"TERRACOTTA_BLUE"},{"color":{"r":76,"g":50,"b":35},"number":48,"name":"TERRACOTTA_BROWN"},{"color":{"r":76,"g":82,"b":42},"number":49,"name":"TERRACOTTA_GREEN"},{"color":{"r":142,"g":60,"b":46},"number":50,"name":"TERRACOTTA_RED"},{"color":{"r":37,"g":22,"b":16},"number":51,"name":"TERRACOTTA_BLACK"},{"color":{"r":189,"g":48,"b":49},"number":52,"name":"CRIMSON_NYLIUM"},{"color":{"r":148,"g":63,"b":97},"number":53,"name":"CRIMSON_STEM"},{"color":{"r":92,"g":25,"b":29},"number":54,"name":"CRIMSON_HYPHAE"},{"color":{"r":22,"g":126,"b":134},"number":55,"name":"WARPED_NYLIUM"},{"color":{"r":58,"g":142,"b":140},"number":56,"name":"WARPED_STEM"},{"color":{"r":86,"g":44,"b":62},"number":57,"name":"WARPED_HYPHAE"},{"color":{"r":20,"g":180,"b":133},"number":58,"name":"WARPED_WART_BLOCK"},{"color":{"r":100,"g":100,"b":100},"number":59,"name":"DEEPSLATE"},{"color":{"r":216,"g":175,"b":147},"number":60,"name":"RAW_IRON"},{"color":{"r":127,"g":167,"b":150},"number":61,"name":"GLOW_LICHEN"}]`36:T3a74,Colour2 = { /** The Colour object allows conversion of colours between strings and several other colour spaces. The colour has two public members. It's type is the type of colour space. Its values are an array of numbers specifying the colour coordinates. These coordinates depend on the type of colour space used. @constructor @param {number} type @param {Array.} values */ function Colour(type, values) { this.type = type; this.values = values; if (this.values.length < 4) { throw "Bad value"; } } // Here is an enumeration of colour spaces. // RGBA. All components are in the range 0..1 Colour.RGBA = 0; // CIE XYZ, with added alpha value. Colour.XYZA = 1; // Hue/Saturation/Value. Hue is in the range 0...360 and the others are 0...1 Colour.HSVA = 2; // CIE LAB 1976 colour space, with added alpha component. Colour.LABA = 3; Colour.LAST_COLOURSPACE = 3; /** Creates an RGBA colour object from the given string. If the string is not valid, a default colour of magenta is used. Valid strings are one of the following: 1. A standard CSS colour name (eg. "Blue"). The case does not matter. 2. A CSS hex string with 6 digits. Eg. #80ff00 3. An rgba value. Eg. rgba( 128, 255, 0, 1.0 ). Note the last component must be in the range 0..1 and the others are in the range 0..255. @param {string} colourString @return {Colour} */ Colour.fromString = function(colourString) { if (colourString.toLowerCase() in Colour.CssColours) { colourString = Colour.CssColours[colourString.toLowerCase()]; } var hex6 = /\#([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])/i; var rgbStr = /rgba$ *([0-9]+) *, *([0-9]+) *, *([0-9]+) *, *([0-9\.]+) *$/; var r, g, b, a; var m = hex6.exec(colourString); if (m !== null) { r = parseInt(m[1], 16) / 255; g = parseInt(m[2], 16) / 255; b = parseInt(m[3], 16) / 255; a = 1.0; } else { m = rgbStr.exec(colourString); if (m !== null) { r = parseFloat(m[1]) / 255; g = parseFloat(m[2]) / 255; b = parseFloat(m[3]) / 255; a = parseFloat(m[4]); } else { // default colour r = 1.0; g = 0.0; b = 1.0; a = 1.0; } } return new Colour(Colour.RGBA, [r, g, b, a]); }; Colour.prototype = { /** Converts the colour to a string. The string is formatted such that it can be used to set the fillStyle or strokeStyle of an HTML5 Canvas 2d context. @return {string} */ toString: function() { function toHex(val) { val = Math.round(val * 255); if (val < 16) { return "0" + val.toString(16); } else { return val.toString(16); } } var clr = this.convertTo(Colour.RGBA); if (clr.values[3] === 1.0) { return ( "#" + toHex(clr.values[0]) + toHex(clr.values[1]) + toHex(clr.values[2]) ); } else { return ( "rgba(" + Math.round(clr.values[0] * 255) + "," + Math.round(clr.values[1] * 255) + "," + Math.round(clr.values[2] * 255) + "," + clr.values[3] + ")" ); } }, /** Returns a new colour object, converting to the given colour space. @param {number} type @return {Colour} */ convertTo: function(type) { return Colour.converters[this.type][type](this); }, /** Returns the distance between this colour and another, using the colour space of this colour. If the other colour is another colour space, it is converted before the calculation is done. */ distanceTo: function(colour) { if (colour.type !== this.type) { colour = colour.convertTo(this.type); } if (this.type === Colour.HSVA) { // Hue goes from 0 to 360, unlike other colour schemes, so it needs // to be scaled relative to the other values. It must also wrap // around. var a = this.values[0], b = colour.values[0]; var hueDiff; if (a > b) { hueDiff = Math.min(a - b, b - a + 360); } else { hueDiff = Math.min(b - a, a - b + 360); } hueDiff /= 360; return Math.pow( hueDiff * hueDiff + (this.values[1] - colour.values[1]) * (this.values[1] - colour.values[1]) + (this.values[2] - colour.values[2]) * (this.values[2] - colour.values[2]), 0.5 ); } else { return Math.pow( (this.values[0] - colour.values[0]) * (this.values[0] - colour.values[0]) + (this.values[1] - colour.values[1]) * (this.values[1] - colour.values[1]) + (this.values[2] - colour.values[2]) * (this.values[2] - colour.values[2]), 0.5 ); } } }; (function() { var WHITE = { X: 0.9505, Y: 1.0000, Z: 1.0890 }; // D65 /** @param {Colour} clr @return {Colour} */ function convert_HSVA_RGBA(clr) { var h = clr.values[0]; var s = clr.values[1]; var v = clr.values[2]; if (h < 0) { h += 360; } var hi = Math.floor(h / 60) % 6; var f = h / 60 - Math.floor(h / 60); var p = v * (1 - s); var q = v * (1 - f * s); var t = v * (1 - (1 - f) * s); var r, g, b; switch (hi) { case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; } return new Colour(Colour.RGBA, [r, g, b, clr.values[3]]); } /** @param {Colour} clr @return {Colour} */ function convert_RGBA_HSVA(clr) { var h, s, v; var r = clr.values[0]; var g = clr.values[1]; var b = clr.values[2]; var max = Math.max(r, g, b); var min = Math.min(r, g, b); if (max === min) { h = 0; } else if (max === r) { h = ((60 * (g - b)) / (max - min) + 360) % 360; } else if (max === g) { h = (60 * (b - r)) / (max - min) + 120; } else if (max === b) { h = (60 * (r - g)) / (max - min) + 240; } if (max === 0) { s = 0; } else { s = 1 - min / max; } v = max; return new Colour(Colour.HSVA, [h, s, v, clr.values[3]]); } /** @param {Colour} clr @return {Colour} */ function convert_XYZA_LABA(clr) { function f(t) { if (t > (6.0 / 29.0) * (6.0 / 29.0) * (6.0 / 29.0)) { return Math.pow(t, 1.0 / 3.0); } else { return (1.0 / 3.0) * (29.0 / 6.0) * (29.0 / 6.0) * t + 4.0 / 29.0; } } var X = f(clr.values[0] / WHITE.X); var Y = f(clr.values[1] / WHITE.Y); var Z = f(clr.values[2] / WHITE.Z); return new Colour(Colour.LABA, [ 116 * Y - 16, 500 * (X - Y), 200 * (Y - Z), clr.values[3] ]); } /** @param {Colour} clr @return {Colour} */ function convert_LABA_XYZA(clr) { var fy = (clr.values[0] + 16) / 116; var fx = fy + clr.values[1] / 500; var fz = fy - clr.values[2] / 200; var squiggle = 6.0 / 29; var X, Y, Z; if (fy > squiggle) { Y = WHITE.Y * fy * fy * fy; } else { Y = (fy - 16.0 / 116) * 3 * squiggle * squiggle * WHITE.Y; } if (fx > squiggle) { X = WHITE.X * fx * fx * fx; } else { X = (fx - 16.0 / 116) * 3 * squiggle * squiggle * WHITE.X; } if (fz > squiggle) { Z = WHITE.Z * fz * fz * fz; } else { Z = (fz - 16.0 / 116) * 3 * squiggle * squiggle * WHITE.Z; } return new Colour(Colour.XYZA, [X, Y, Z, clr.values[3]]); } /** @param {Colour} rgb @return {Colour} */ function convert_RGBA_XYZA(rgb) { var temp = []; for (var i = 0; i < 3; i++) { if (rgb.values[i] <= 0.04045) { temp[i] = rgb.values[i] / 12.92; } else { temp[i] = Math.pow((rgb.values[i] + 0.055) / 1.055, 2.4); } } return new Colour(Colour.XYZA, [ 0.4124 * temp[0] + 0.3576 * temp[1] + 0.1805 * temp[2], 0.2126 * temp[0] + 0.7152 * temp[1] + 0.0722 * temp[2], 0.0193 * temp[0] + 0.1192 * temp[1] + 0.9505 * temp[2], rgb.values[3] ]); } /** @param {Colour} xyz @return {Colour} */ function convert_XYZA_RGBA(xyz) { var temp = []; var values = []; temp[0] = 3.2410 * xyz.values[0] - 1.5374 * xyz.values[1] - 0.4986 * xyz.values[2]; temp[1] = -0.9692 * xyz.values[0] + 1.8760 * xyz.values[1] + 0.0416 * xyz.values[2]; temp[2] = 0.0556 * xyz.values[0] - 0.2040 * xyz.values[1] + 1.0570 * xyz.values[2]; for (var i = 0; i < 3; i++) { if (temp[i] <= 0.0031308) { values[i] = 12.92 * temp[i]; } else { values[i] = 1.055 * Math.pow(temp[i], 1.0 / 2.4) - 0.055; } } values[3] = xyz.values[3]; return new Colour(Colour.RGBA, values); } /** @param {Colour} clr @return {Colour} */ function convert_SAME(clr) { return new Colour(clr.type, clr.values.concat()); } /** @param {Colour} clr @return {Colour} */ function convert_RGBA_LABA(clr) { return convert_XYZA_LABA(convert_RGBA_XYZA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_LABA_RGBA(clr) { return convert_XYZA_RGBA(convert_LABA_XYZA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_XYZA_HSVA(clr) { return convert_RGBA_HSVA(convert_XYZA_RGBA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_HSVA_XYZA(clr) { return convert_RGBA_XYZA(convert_HSVA_RGBA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_HSVA_LABA(clr) { return convert_RGBA_LABA(convert_HSVA_RGBA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_LABA_HSVA(clr) { return convert_XYZA_HSVA(convert_LABA_XYZA(clr)); } Colour.converters = [ [convert_SAME, convert_RGBA_XYZA, convert_RGBA_HSVA, convert_RGBA_LABA], [convert_XYZA_RGBA, convert_SAME, convert_XYZA_HSVA, convert_XYZA_LABA], [convert_HSVA_RGBA, convert_HSVA_XYZA, convert_SAME, convert_HSVA_LABA], [convert_LABA_RGBA, convert_LABA_XYZA, convert_LABA_HSVA, convert_SAME] ]; })(); Colour.CssColours = { aliceblue: "#f0f8ff", antiquewhite: "#faebd7", aqua: "#00ffff", aquamarine: "#7fffd4", azure: "#f0ffff", beige: "#f5f5dc", bisque: "#ffe4c4", black: "#000000", blanchedalmond: "#ffebcd", blue: "#0000ff", blueviolet: "#8a2be2", brown: "#a52a2a", burlywood: "#deb887", cadetblue: "#5f9ea0", chartreuse: "#7fff00", chocolate: "#d2691e", coral: "#ff7f50", cornflowerblue: "#6495ed", cornsilk: "#fff8dc", crimson: "#dc143c", cyan: "#00ffff", darkblue: "#00008b", darkcyan: "#008b8b", darkgoldenrod: "#b8860b", darkgray: "#a9a9a9", darkgreen: "#006400", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkseagreen: "#8fbc8f", darkslateblue: "#483d8b", darkslategray: "#2f4f4f", darkturquoise: "#00ced1", darkviolet: "#9400d3", deeppink: "#ff1493", deepskyblue: "#00bfff", dimgray: "#696969", dodgerblue: "#1e90ff", firebrick: "#b22222", floralwhite: "#fffaf0", forestgreen: "#228b22", fuchsia: "#ff00ff", gainsboro: "#dcdcdc", ghostwhite: "#f8f8ff", gold: "#ffd700", goldenrod: "#daa520", gray: "#808080", green: "#008000", greenyellow: "#adff2f", honeydew: "#f0fff0", hotpink: "#ff69b4", indianred: "#cd5c5c", indigo: "#4b0082", ivory: "#fffff0", khaki: "#f0e68c", lavender: "#e6e6fa", lavenderblush: "#fff0f5", lawngreen: "#7cfc00", lemonchiffon: "#fffacd", lightblue: "#add8e6", lightcoral: "#f08080", lightcyan: "#e0ffff", lightgoldenrodyellow: "#fafad2", lightgreen: "#90ee90", lightgrey: "#d3d3d3", lightpink: "#ffb6c1", lightsalmon: "#ffa07a", lightseagreen: "#20b2aa", lightskyblue: "#87cefa", lightslategray: "#778899", lightsteelblue: "#b0c4de", lightyellow: "#ffffe0", lime: "#00ff00", limegreen: "#32cd32", linen: "#faf0e6", magenta: "#ff00ff", maroon: "#800000", mediumaquamarine: "#66cdaa", mediumblue: "#0000cd", mediumorchid: "#ba55d3", mediumpurple: "#9370d8", mediumseagreen: "#3cb371", mediumslateblue: "#7b68ee", mediumspringgreen: "#00fa9a", mediumturquoise: "#48d1cc", mediumvioletred: "#c71585", midnightblue: "#191970", mintcream: "#f5fffa", mistyrose: "#ffe4e1", moccasin: "#ffe4b5", navajowhite: "#ffdead", navy: "#000080", oldlace: "#fdf5e6", olive: "#808000", olivedrab: "#6b8e23", orange: "#ffa500", orangered: "#ff4500", orchid: "#da70d6", palegoldenrod: "#eee8aa", palegreen: "#98fb98", paleturquoise: "#afeeee", palevioletred: "#d87093", papayawhip: "#ffefd5", peachpuff: "#ffdab9", peru: "#cd853f", pink: "#ffc0cb", plum: "#dda0dd", powderblue: "#b0e0e6", purple: "#800080", red: "#ff0000", rosybrown: "#bc8f8f", royalblue: "#4169e1", saddlebrown: "#8b4513", salmon: "#fa8072", sandybrown: "#f4a460", seagreen: "#2e8b57", seashell: "#fff5ee", sienna: "#a0522d", silver: "#c0c0c0", skyblue: "#87ceeb", slateblue: "#6a5acd", slategray: "#708090", snow: "#fffafa", springgreen: "#00ff7f", steelblue: "#4682b4", tan: "#d2b48c", teal: "#008080", thistle: "#d8bfd8", tomato: "#ff6347", turquoise: "#40e0d0", violet: "#ee82ee", wheat: "#f5deb3", white: "#ffffff", whitesmoke: "#f5f5f5", yellow: "#ffff00", yellowgreen: "#9acd32" }; return Colour; }37:T22e2,Colour = { /** The Colour object allows conversion of colours between strings and several other colour spaces. The colour has two public members. It's type is the type of colour space. Its values are an array of numbers specifying the colour coordinates. These coordinates depend on the type of colour space used. @constructor @param {number} type @param {Array.} values */ function Colour(type, values) { this.type = type; this.values = values; if (this.values.length < 4) { throw "Bad value"; } } // Here is an enumeration of colour spaces. // RGBA. All components are in the range 0..1 Colour.RGBA = 0; // CIE XYZ, with added alpha value. Colour.XYZA = 1; // Hue/Saturation/Value. Hue is in the range 0...360 and the others are 0...1 Colour.HSVA = 2; // CIE LAB 1976 colour space, with added alpha component. Colour.LABA = 3; Colour.LAST_COLOURSPACE = 3; Colour.prototype = { /** Returns a new colour object, converting to the given colour space. @param {number} type @return {Colour} */ convertTo: function(type) { return Colour.converters[this.type][type](this); }, /** Returns the distance between this colour and another, using the colour space of this colour. If the other colour is another colour space, it is converted before the calculation is done. */ distanceTo: function(colour) { if (colour.type !== this.type) { colour = colour.convertTo(this.type); } if (this.type === Colour.HSVA) { // Hue goes from 0 to 360, unlike other colour schemes, so it needs // to be scaled relative to the other values. It must also wrap // around. var a = this.values[0], b = colour.values[0]; var hueDiff; if (a > b) { hueDiff = Math.min(a - b, b - a + 360); } else { hueDiff = Math.min(b - a, a - b + 360); } hueDiff /= 360; return Math.pow( hueDiff * hueDiff + (this.values[1] - colour.values[1]) * (this.values[1] - colour.values[1]) + (this.values[2] - colour.values[2]) * (this.values[2] - colour.values[2]), 0.5 ); } else { return Math.pow( (this.values[0] - colour.values[0]) * (this.values[0] - colour.values[0]) + (this.values[1] - colour.values[1]) * (this.values[1] - colour.values[1]) + (this.values[2] - colour.values[2]) * (this.values[2] - colour.values[2]), 0.5 ); } } }; (function() { var WHITE = { X: 0.9505, Y: 1.0000, Z: 1.0890 }; // D65 /** @param {Colour} clr @return {Colour} */ function convert_HSVA_RGBA(clr) { var h = clr.values[0]; var s = clr.values[1]; var v = clr.values[2]; if (h < 0) { h += 360; } var hi = Math.floor(h / 60) % 6; var f = h / 60 - Math.floor(h / 60); var p = v * (1 - s); var q = v * (1 - f * s); var t = v * (1 - (1 - f) * s); var r, g, b; switch (hi) { case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; } return new Colour(Colour.RGBA, [r, g, b, clr.values[3]]); } /** @param {Colour} clr @return {Colour} */ function convert_RGBA_HSVA(clr) { var h, s, v; var r = clr.values[0]; var g = clr.values[1]; var b = clr.values[2]; var max = Math.max(r, g, b); var min = Math.min(r, g, b); if (max === min) { h = 0; } else if (max === r) { h = ((60 * (g - b)) / (max - min) + 360) % 360; } else if (max === g) { h = (60 * (b - r)) / (max - min) + 120; } else if (max === b) { h = (60 * (r - g)) / (max - min) + 240; } if (max === 0) { s = 0; } else { s = 1 - min / max; } v = max; return new Colour(Colour.HSVA, [h, s, v, clr.values[3]]); } /** @param {Colour} clr @return {Colour} */ function convert_XYZA_LABA(clr) { function f(t) { if (t > (6.0 / 29.0) * (6.0 / 29.0) * (6.0 / 29.0)) { return Math.pow(t, 1.0 / 3.0); } else { return (1.0 / 3.0) * (29.0 / 6.0) * (29.0 / 6.0) * t + 4.0 / 29.0; } } var X = f(clr.values[0] / WHITE.X); var Y = f(clr.values[1] / WHITE.Y); var Z = f(clr.values[2] / WHITE.Z); return new Colour(Colour.LABA, [ 116 * Y - 16, 500 * (X - Y), 200 * (Y - Z), clr.values[3] ]); } /** @param {Colour} clr @return {Colour} */ function convert_LABA_XYZA(clr) { var fy = (clr.values[0] + 16) / 116; var fx = fy + clr.values[1] / 500; var fz = fy - clr.values[2] / 200; var squiggle = 6.0 / 29; var X, Y, Z; if (fy > squiggle) { Y = WHITE.Y * fy * fy * fy; } else { Y = (fy - 16.0 / 116) * 3 * squiggle * squiggle * WHITE.Y; } if (fx > squiggle) { X = WHITE.X * fx * fx * fx; } else { X = (fx - 16.0 / 116) * 3 * squiggle * squiggle * WHITE.X; } if (fz > squiggle) { Z = WHITE.Z * fz * fz * fz; } else { Z = (fz - 16.0 / 116) * 3 * squiggle * squiggle * WHITE.Z; } return new Colour(Colour.XYZA, [X, Y, Z, clr.values[3]]); } /** @param {Colour} rgb @return {Colour} */ function convert_RGBA_XYZA(rgb) { var temp = []; for (var i = 0; i < 3; i++) { if (rgb.values[i] <= 0.04045) { temp[i] = rgb.values[i] / 12.92; } else { temp[i] = Math.pow((rgb.values[i] + 0.055) / 1.055, 2.4); } } return new Colour(Colour.XYZA, [ 0.4124 * temp[0] + 0.3576 * temp[1] + 0.1805 * temp[2], 0.2126 * temp[0] + 0.7152 * temp[1] + 0.0722 * temp[2], 0.0193 * temp[0] + 0.1192 * temp[1] + 0.9505 * temp[2], rgb.values[3] ]); } /** @param {Colour} xyz @return {Colour} */ function convert_XYZA_RGBA(xyz) { var temp = []; var values = []; temp[0] = 3.2410 * xyz.values[0] - 1.5374 * xyz.values[1] - 0.4986 * xyz.values[2]; temp[1] = -0.9692 * xyz.values[0] + 1.8760 * xyz.values[1] + 0.0416 * xyz.values[2]; temp[2] = 0.0556 * xyz.values[0] - 0.2040 * xyz.values[1] + 1.0570 * xyz.values[2]; for (var i = 0; i < 3; i++) { if (temp[i] <= 0.0031308) { values[i] = 12.92 * temp[i]; } else { values[i] = 1.055 * Math.pow(temp[i], 1.0 / 2.4) - 0.055; } } values[3] = xyz.values[3]; return new Colour(Colour.RGBA, values); } /** @param {Colour} clr @return {Colour} */ function convert_SAME(clr) { return new Colour(clr.type, clr.values.concat()); } /** @param {Colour} clr @return {Colour} */ function convert_RGBA_LABA(clr) { return convert_XYZA_LABA(convert_RGBA_XYZA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_LABA_RGBA(clr) { return convert_XYZA_RGBA(convert_LABA_XYZA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_XYZA_HSVA(clr) { return convert_RGBA_HSVA(convert_XYZA_RGBA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_HSVA_XYZA(clr) { return convert_RGBA_XYZA(convert_HSVA_RGBA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_HSVA_LABA(clr) { return convert_RGBA_LABA(convert_HSVA_RGBA(clr)); } /** @param {Colour} clr @return {Colour} */ function convert_LABA_HSVA(clr) { return convert_XYZA_HSVA(convert_LABA_XYZA(clr)); } Colour.converters = [ [convert_SAME, convert_RGBA_XYZA, convert_RGBA_HSVA, convert_RGBA_LABA], [convert_XYZA_RGBA, convert_SAME, convert_XYZA_HSVA, convert_XYZA_LABA], [convert_HSVA_RGBA, convert_HSVA_XYZA, convert_SAME, convert_HSVA_LABA], [convert_LABA_RGBA, convert_LABA_XYZA, convert_LABA_HSVA, convert_SAME] ]; })(); return Colour; }38:[{"id":"f5368fee3fd1062d013188c671ec9cb1a13a2afcd478c8b41f290c34f5bee1052b8831a23e60c4443232cfa609863baa9bc029531b989aae0c5c859d96f2e8bc","href":"https://static.observableusercontent.com/files/f5368fee3fd1062d013188c671ec9cb1a13a2afcd478c8b41f290c34f5bee1052b8831a23e60c4443232cfa609863baa9bc029531b989aae0c5c859d96f2e8bc","name":"Sqoi.png","type":"image/png","lastModified":1593870367836.135,"size":617616},{"id":"437eae46ccfb465e5ab06135c3d0f8577a88d463789377386036d0ed212a91582c509101d626a7f9ba415d8f8af3d37c7bd55aa3d61183327693251d5718ff4e","href":"https://static.observableusercontent.com/files/437eae46ccfb465e5ab06135c3d0f8577a88d463789377386036d0ed212a91582c509101d626a7f9ba415d8f8af3d37c7bd55aa3d61183327693251d5718ff4e","name":"image.png","type":"image/png","lastModified":1594337532104.963,"size":215449}] 2f:{"title":"Minecraft Map Maker","cells":[{"id":0,"value":"md`# Minecraft Map Maker`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"md`Trying to adapt code from https://mc-map.djfun.de/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1590,"value":"md`### Select file`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"file_selector = file({\n title: \"Set image\",\n description: \"Just drag and drop from your desktop onto the button\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2344,"value":"{\n return html` {\n var item = event.clipboardData.items[0];\n console.log('item:', item);\n if (item.type.startsWith('image')) {\n var blob = item.getAsFile();\n file_selector.files = [blob];\n file_selector.file = blob;\n file_selector.value = blob;\n file_selector.dispatchEvent(new CustomEvent('input'));\n }\n }}\n />`;\n // document.onpaste = function(pasteEvent) {\n // // consider the first item (can be easily extended for multiple items)\n // var item = pasteEvent.clipboardData.items[0];\n\n // if (item.type.indexOf(\"image\") === 0) {\n // var blob = item.getAsFile();\n\n // var reader = new FileReader();\n // reader.onload = function(event) {\n // document.getElementById(\"container\").src = event.target.result;\n // };\n\n // reader.readAsDataURL(blob);\n // }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2222,"value":"{\n if (image_to_upload == null) {\n yield md`\nPress upload to generate link to use in \\`/tomap\\`, please wait after you clicked\n `;\n return;\n }\n\n yield \"Uploading...\";\n let formData = new FormData();\n formData.append('file', image_to_upload, name);\n\n let response = await fetch('https://file.io/?expires=1d', {\n method: 'post',\n body: formData\n });\n\n let json = await response.json();\n copy(json.link);\n yield md`\n~~~\n/tomap ${json.link}\n~~~\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"{\n let blob = await new Promise(resolve => result_image.toBlob(resolve));\n let upload = async () => {\n if (mutable image_to_upload !== blob) {\n mutable image_to_upload = blob;\n }\n // let formData = new FormData();\n // formData.append('file', blob, name);\n\n // let response = await fetch('https://file.io/?expires=1d', {\n // method: 'post',\n // body: formData\n // });\n // let json = response.json();\n // copy(json.link);\n // mutable upload_result = json;\n };\n return html`

\n \n

\n ${DOM.download(\n blob,\n `mcmap${MAPS_WIDTH}x${MAPS_HEIGHT}-${\n (overwrite_file || DEFAULT_FILE).name\n }`,\n \"Download result\"\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"viewof MAPS_HEIGHT = slider({\n title: 'Height in maps',\n value: 0,\n min: 1,\n max: Math.max(5, Math.min(12, Math.ceil((await get_image()).height / MAP_SIZE))),\n step: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"viewof MAPS_WIDTH = slider({\n title: 'Width in maps',\n value: 0,\n min: 1,\n max: Math.max(5, Math.min(12, Math.ceil((await get_image()).width / MAP_SIZE))),\n step: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1813,"value":"render(\n this,\n jsx`<${ResizableApp}\n resized_image=${resized}\n result_image=${result_image}\n OFFSET_X=${OFFSET_X}\n OFFSET_Y=${OFFSET_Y}\n />`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"render(\n this,\n jsx`\n

\n ${hex.slice(0, 7)}\n

\n`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"// viewof OFFSET_X = slider({\n// title: 'Horizontal offset',\n// value: 0,\n// min: 0,\n// max: resized.width - MAPS_WIDTH * MAP_SIZE,\n// step: 1\n// })\nmutable OFFSET_X = {\n MAPS_WIDTH;\n MAPS_WIDTH;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"// viewof OFFSET_Y = slider({\n// title: \"Vertical offset\",\n// value: 0,\n// min: 0,\n// max: resized.height - MAPS_HEIGHT * MAP_SIZE,\n// step: 1\n// })\nmutable OFFSET_Y = {\n MAPS_HEIGHT;\n MAPS_WIDTH;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2250,"value":"result_image_size = {\n let size_in_bytes = result_image_blob.size;\n let size_in_kb = size_in_bytes / 1024;\n let size_in_mb = size_in_kb / 1024;\n if (size_in_mb > 1) {\n return `${_.round(size_in_mb, 2)}mb`;\n } else {\n return `${_.round(size_in_kb, 2)}kb`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2254,"value":"input_image_size = {\n let size_in_bytes = (DEFAULT_FILE || SELECTED_FILE).size;\n let size_in_kb = size_in_bytes / 1024;\n let size_in_mb = size_in_kb / 1024;\n if (size_in_mb > 1) {\n return `${_.round(size_in_mb, 2)}mb`;\n } else {\n return `${_.round(size_in_kb, 2)}kb`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2267,"value":"result_image_blob = await new Promise(resolve => result_image.toBlob(resolve))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"Html = ({ element }) => {\n let container_ref = React.useRef();\n React.useLayoutEffect(() => {\n let old_element = container_ref.current.childNodes[0];\n if (old_element) {\n container_ref.current.removeChild(old_element);\n }\n container_ref.current.appendChild(element);\n }, [element]);\n return jsx`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2044,"value":"Drag = ({ children, onDrag, x, y, style, ...props }) => {\n let [drag, set_drag] = React.useState(null);\n return jsx` {\n e.preventDefault();\n set_drag({\n startX: x,\n startY: y,\n pageX: e.pageX,\n pageY: e.pageY\n });\n }}\n onMouseMove=${e => {\n if (drag) {\n onDrag({\n left: drag.startX - (e.pageX - drag.pageX),\n top: drag.startY - (e.pageY - drag.pageY)\n });\n }\n }}\n onMouseUp=${() => {\n set_drag(null);\n }}>${children}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"MAP_SIZE = 128","pinned":false,"hidden":false,"mode":"ojs"},{"id":2014,"value":"name = `mcmap${MAPS_WIDTH}x${MAPS_HEIGHT}-${\n (overwrite_file || DEFAULT_FILE).name\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"SELECTED_FILE = {\n let blob = overwrite_file || DEFAULT_FILE;\n let object_url = URL.createObjectURL(blob);\n invalidation.then(() => URL.revokeObjectURL(object_url));\n return object_url;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"overwrite_file = {\n yield null;\n yield* Generators.input(file_selector);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"DEFAULT_FILE = await FileAttachment(\"Sqoi.png\").blob()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2217,"value":"mutable image_to_upload = {\n result_image;\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"md`### _Resized_ to right pixel amount, not cropped or minecraft-ified yet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"get_image = () =>\n new Promise(resolve => {\n let image = new Image();\n image.src = SELECTED_FILE;\n image.onload = () => resolve(image);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"RESCALE = {\n let image = await get_image();\n let COVER = true;\n let SIZE = COVER\n ? Math.min(\n image.height / MAPS_HEIGHT / MAP_SIZE,\n image.width / MAPS_WIDTH / MAP_SIZE\n )\n : null;\n return 1 / SIZE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1535,"value":"resized = {\n let image = await get_image();\n\n let canvas = html``;\n let context = canvas.getContext('2d');\n context.imageSmoothingEnabled = false;\n\n context.drawImage(\n image,\n 0,\n 0,\n image.width,\n image.height,\n 0,\n 0,\n image.width * RESCALE,\n image.height * RESCALE\n );\n context.imageSmoothingEnabled = false;\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"new_canvas = ({ width, height }) => {\n let new_canvas = html``;\n let context = new_canvas.getContext('2d');\n\n context.imageSmoothingEnabled = false;\n\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"md`### Resized and *minecraftified*, not yet cropped`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"minecraftified_not_cropped = {\n let canvas = resized;\n let imageData = canvas\n .getContext('2d')\n .getImageData(0, 0, canvas.width, canvas.height);\n let data = imageData.data;\n\n if (FAST_MODE) {\n for (var i = 0; i < data.length; i = i + 4) {\n transform_color_fast(data, i);\n }\n } else {\n for (var i = 0; i < data.length; i = i + 4) {\n let input_color = data.slice(i, i + 4);\n let [r, g, b, a] = transform_color(input_color);\n data[i] = r;\n data[i + 1] = g;\n data[i + 2] = b;\n data[i + 3] = a;\n }\n }\n let context = new_canvas(canvas);\n context.putImageData(imageData, 0, 0);\n // context.imageSmoothingEnabled = false;\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"md`### Result`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1686,"value":"result_image = {\n let cropped_destination = new_canvas({\n width: MAPS_WIDTH * MAP_SIZE,\n height: MAPS_HEIGHT * MAP_SIZE\n });\n // cropped_destination.drawImage(minecraftified_not_cropped, 0, 0);\n draw_image({\n destination: cropped_destination,\n source: minecraftified_not_cropped,\n source_offset: { x: OFFSET_X, y: OFFSET_Y },\n source_size: cropped_destination.canvas\n });\n cropped_destination.imageSmoothingEnabled = false;\n return cropped_destination.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1690,"value":"draw_image = ({\n source,\n source_offset = { x: 0, y: 0 },\n source_size = { width: source.width, height: source.height },\n destination,\n destination_offset = { x: 0, y: 0 },\n destination_size = {\n width: destination.canvas.width,\n height: destination.canvas.height\n }\n}) => {\n destination.drawImage(\n source,\n source_offset.x,\n source_offset.y,\n source_size.width,\n source_size.height,\n destination_offset.x,\n destination_offset.y,\n destination_size.width,\n destination_size.height\n );\n return destination;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"FAST_MODE = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"copy_canvas = canvas => {\n let destination = new_canvas(canvas);\n destination.drawImage(canvas, 0, 0);\n return destination.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2147,"value":"mutable last_color = ({\n latest: null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"md`### Old`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"md`## Hex component`","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"mutable hex = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"hex_hover = canvas => {\n return html` {\n var pos2 = canvas.getBoundingClientRect();\n\n let scale_x = canvas.width / pos2.width;\n let scale_y = canvas.height / pos2.height;\n var x = e.pageX - pos2.left;\n var y = e.pageY - pos2.top;\n var c = canvas.getContext('2d');\n let RATIO = 1;\n var p = c.getImageData(x * scale_x, y * scale_y, 1, 1).data;\n var hex = \"#\" + rgbToHex(p[0], p[1], p[2], p[3]);\n mutable hex = hex;\n }}\n >${canvas}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"toHex = x => x.toString(16).padStart(2, '0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"function rgbToHex(r, g, b, a) {\n if (r > 255 || g > 255 || b > 255) throw \"Invalid color component\";\n return `${toHex(r)}${toHex(g)}${toHex(b)}${toHex(a)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"md`# Fetch colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2123,"value":"minecraft_colors_as_laba = minecraft_colors_as_laba_simple.map(\n ({ laba, ...color }) => {\n let closest =\n _.min(\n minecraft_colors_as_laba_simple\n .map(({ laba: laba_compare }) => laba_compare.distanceTo(laba))\n .filter(x => x !== 0)\n ) / 2;\n return { laba, closest, ...color };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"minecraft_colors_as_laba_simple = expanded_colors.map(({ color }) => {\n let rgba = new Colour(Colour.RGBA, [color.r, color.g, color.b, 255]);\n let laba = rgba.convertTo(Colour.LABA);\n return { rgba, laba };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"$$minecraftwiki_colors_page = cheerio(\n await (await fetch_cors(\n 'https://minecraft.gamepedia.com/Map_item_format#Base_colors',\n {\n headers: {\n \"User-Agent\":\n \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36\"\n }\n }\n )).text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"$$title_element = $minecraftwiki_colors_page\n .querySelector('#Base_colors')\n .closest('.mw-parser-output > *')","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"$$table = [...nextElementSiblings($title_element)].filter(\n element => element.tagName === 'TABLE'\n)[1] || $title_element.querySelectorAll('table')[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1003,"value":"table_as_cells = [...$table.querySelectorAll('tbody > tr')]\n .map(row =>\n [...row.querySelectorAll('td')].map(cell => cell.textContent.trim())\n )\n .filter(x => x.length === 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"parsed_colors = table_as_cells\n .filter((x) => x[2] !== \"Transparent\")\n .map(([title, _1, rgb_raw, included_blocks]) => {\n let [r, g, b] = rgb_raw\n .match(/(\\d+) *, *(\\d+) *, *(\\d+)/)\n .slice(1)\n .map(Number);\n let [number_string, name] = title.match(/(\\d+) (.+)/).slice(1);\n return { color: { r, g, b }, number: Number(number_string), name };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2396,"value":"MORE_COLORS = [0.71, 0.86, 1, 0.53]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2391,"value":"expanded_colors = parsed_colors.flatMap(({ color, number, name }, i) => {\n return MORE_COLORS.map((multiplier, i) => ({\n name: name,\n color: {\n r: Math.floor(color.r * multiplier),\n g: Math.floor(color.g * multiplier),\n b: Math.floor(color.b * multiplier)\n },\n number: number * 4 + i\n }));\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2386,"value":"Want to sometimes save this in case cors-anywhere or minecraftwiki break..","pinned":false,"hidden":false,"mode":"md"},{"id":2382,"value":"JSON.stringify(parsed_colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2384,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"md`### Fetch colors utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"fetch_cors = (url, options) => {\n return fetch(`https://cors-anywhere.herokuapp.com/${url}`, options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"cheerio = source => {\n let subdocument = document.implementation.createHTMLDocument('virtual');\n let element = subdocument.createElement('div');\n element.innerHTML = source;\n subdocument.body.appendChild(element);\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"nextElementSiblings = function*(start) {\n let current = start.nextElementSibling;\n while (current != null) {\n yield current;\n current = current.nextElementSibling;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"import {\n React,\n render,\n jsx,\n ObservableView\n} from \"@dralletje/react-x-observable\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"function cloneCanvas(oldCanvas) {\n //create a new canvas\n var newCanvas = document.createElement('canvas');\n var context = newCanvas.getContext('2d');\n\n context.msImageSmoothingEnabled = false;\n context.mozImageSmoothingEnabled = false;\n context.webkitImageSmoothingEnabled = false;\n context.imageSmoothingEnabled = false;\n\n //set dimensions\n newCanvas.width = oldCanvas.width;\n newCanvas.height = oldCanvas.height;\n\n //apply the old canvas to the new one\n context.drawImage(oldCanvas, 0, 0);\n\n //return the new canvas\n return newCanvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"import { compose, with_title } from \"@dralletje/compose-viewof\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"import { dedent } from \"@dralletje/dedent-for-template-strings\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2024,"value":"import { copy } from \"@mbostock/copy-to-clipboard\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"import {file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}