Public
Edited
Jul 21, 2023
proj = getMapGeoProjection(d3.geoMiller, [sampleImage.naturalWidth, sampleImage.naturalHeight], mapGeoExtent)
sampleTopology = await buildTopology(sampleTraceResult, { projection: proj })
coordTypeEncoding.values
(0x00000011 | 0x00000111).toString(2).padStart(8, "0")
decodeGpuPixel = {
const neighborMask = 0b00011110;
const coordMask = 0b00001110;
const colorOpacityMask = 0b00000001;
const neighborShift = 4;
const coordShift = 1;
const decodedAlphas = [];
for (let v of d3.range(0, 256)) {
const neighborValue = (v & neighborMask) >>> neighborShift;
const coordValue = (v & coordMask) >>> coordShift;
const colorOpacityValue = 255 * (v & colorOpacityMask);
decodedAlphas[v] = {
neighbors: neighborsEncoding.decode(neighborValue),
coordType: coordTypeEncoding.decode(coordValue),
colorOpacity: colorOpacityValue
}
}
Object.freeze(decodedAlphas);
decodedAlphas.forEach(v => Object.freeze(v));
const empty = {
colorNum: 0,
neighbors: neighborsEncoding.decode(0),
coordType: undefined
}
Object.freeze(empty);
function decodeGpuPixel(colorNum) {
const [r, g, b, a] = ColorMask.toArray(colorNum);
if (a == 0) return empty;
const { neighbors, coordType, colorOpacity } = decodedAlphas[a];
return {
color: ColorMask.fromArray([r, g, b, colorOpacity]),
neighbors,
coordType
}
}
return decodeGpuPixel;
}
gpuAlphaEncodingValues = {
function getUniqueAllowed(values, mask) {
const unique = new Set(values.map(v => v & mask));
return [...unique].filter(v => v);
}
const neighborsMask = 0b11110000;
const coordMask = 0b00001100;
const colorOpacityMask = 0b00000010;
return {
neighbors: { mask: neighborsMask, values: getUniqueAllowed(d3.range(0, 8).map(v => 2**v), neighborsMask) },
coordType: { mask: coordMask, values: getUniqueAllowed(d3.range(0, 255), coordMask) },
colorOpacity: { mask: colorOpacityMask, value: colorOpacityMask }
}
}
function getFlattenLayersCommand(regl) {
let command = {
frag: flattenLayersFragShader,
uniforms: {
color: regl.prop("color"),
neighbors: regl.prop("neighbors"),
coordType: regl.prop("coordType")
},
framebuffer: regl.prop("framebuffer")
};
return regl(Object.assign({}, reglCommandDefaults, command));
}
li = new LoadIndicator(sampleImage);
li.canvas
{
const sourceColorNum = ColorMask.fromArray([10, 20, 30, 83]);
const obj = GpuColorMask.toObject(sourceColorNum);
const obj2 = _.cloneDeep(obj);
obj2.neighbors.e = true;
debugger;
const reverse = GpuColorMask.fromObject(obj2);
const rereverse = GpuColorMask.toObject(reverse);
return { sourceColorNum, obj, reverse, rereverse }
}
GpuColorMask = {
function alphaToObject(number) {
return {
neighbors: neighborsEncoding.decode(number),
coordType: coordTypeEncoding.decode(number),
colorOpacity: colorOpacityEncoding.decode(number)
}
}
function objectToAlpha(obj) {
return neighborsEncoding.encode(obj.neighbors)
+ coordTypeEncoding.encode(obj.coordType)
+ colorOpacityEncoding.encode(obj.colorOpacity);
}
function fromObject(obj) {
const [r, g, b] = ColorMask.toArray(obj.colorNum);
const alphaNum = objectToAlpha(obj);
return ColorMask.fromArray([r, g, b, alphaNum]);
}
function toObject(number) {
const [r, g, b, alphaNum] = ColorMask.toArray(number);
const alpha = alphaToObject(alphaNum);
const colorNum = ColorMask.fromArray([r, g, b, alpha.colorOpacity]);
return {
colorNum,
...alpha
}
}
return {
toObject, fromObject
}
}
ColorMask = {
function fromArray([r, g, b, a]) {
return ( r << 24 | g << 16 | b << 8 | a ) >>> 0;
}
function toArray(number) {
const r = (number & 0xff000000) >>> 24;
const g = (number & 0x00ff0000) >>> 16;
const b = (number & 0x0000ff00) >>> 8;
const a = (number & 0x000000ff);
return [r, g, b, a];
}
function fromObject(rgba) {
if (!rgba) return 0;
return fromArray([rgba.r, rgba.g, rgba.b, rgba.a ?? 255]);
}
function toObject(number) {
const [r, g, b, a] = toArray(number);
return { r, g, b, a };
}
function fromHex(hexColor) {
hexColor = hexColor.replace(/^[#x]|0x/i, "");
if (hexColor.length == 3) {
hexColor += "f";
}
if (hexColor.length == 4) {
hexColor = [...hexColor].map(c => c + c).join("")
return Number(`0x${hexColor}`);
}
if (hexColor.length == 6) {
hexColor += "ff";
}
if (hexColor.length == 8) {
return Number(`0x${hexColor}`);
}
throw "wyd"
}
function toHex(number) {
const [r, g, b, a] = toArray(number);
const values = (a == 255) ? [r, g, b] : [r, g, b, a]
return "#" + values.map(c => c.toString(16).padStart(2, "0")).join("");
}
return {
fromArray, toArray,
fromObject, toObject,
fromHex, toHex
};
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
