Public
Edited
Jul 23, 2023
sampleTileSlicer.getTileRects();
sampleTileRect
sampleTileRect
sampleTileParsedGpuResult = parseGpuTileResult(sampleTileGpuResult);
sampleTraceResult = {
const options = {
colorTable: sampleColorTable,
wrapX: sampleOptions.wrapX,
maxTileSize: sampleTileSize,
fnOnTileProcessed: li.onTileProcessed
}
const ts = performance.now();
const result = await gpuProcessImage(sampleImage, options);
console.log('gpuProcessImage', performance.now() - ts);
return result;
}
proj = getMapGeoProjection(d3.geoMiller, [sampleImage.naturalWidth, sampleImage.naturalHeight], mapGeoExtent)
sampleTopology = await buildTopology(sampleTraceResult, { projection: proj })
parseGpuTileResult(sampleTileGpuResult)
async function gpuProcessImage(image, options) {
const allCoordTypes = new Map();
const allPixelVectors = new Map();
allPixelVectors.getOrCreate = (key) => {
let maskSet = allPixelVectors.get(key);
if (!maskSet) allPixelVectors.set(key, maskSet = new Set());
return maskSet;
}
function ingestParsedResult(parsedTileResult) {
const { coordTypes, pixelVectors } = parsedTileResult;
for (let [coordNum, coordType] of parsedTileResult.coordTypes) {
allCoordTypes.set(coordNum, coordType)
}
for (let [colorNum, tilePixelVectors] of parsedTileResult.pixelVectors) {
const allVectors = allPixelVectors.getOrCreate(colorNum);
tilePixelVectors.forEach(v => allVectors.add(v));
}
}
const { colorTable, wrapX, maxTileSize, fnOnTileProcessed } = (options ?? {});
const tileSlicer = new TileSlicerPadded(image, { wrapX, maxTileSize });
const reglProgram = getReglProgram(tileSlicer.baseTileSize, colorTable);
for (let rect of tileSlicer.getTileRects()) {
debugger;
const bitmap = await tileSlicer.getTileBitmap(rect);
const gpuTileResult = await gpuProcessTile(bitmap, rect, reglProgram, { fnOnTileProcessed, wrapX });
bitmap.close();
const parsedTileResult = parseGpuTileResult(gpuTileResult);
ingestParsedResult(parsedTileResult);
}
return { allCoordTypes, allPixelVectors };
/*
reglProgram.destroy();
const polygonRings = await pixelVectorsToRings(pixelVectors, coordClasses, [tileSlicer.imageWidth, tileSlicer.imageHeight]);
const bbox = [0, 0, image.naturalWidth ?? image.width, image.naturalHeight ?? image.height];
return { bbox, polygonRings, coordClasses, wrapX: !!wrapX };
*/
}
getMapEdgeCoords({n: true, e: true, s: true, w: true}, { x: 5, y: 5, width: 10, height: 10 })
function getMapEdgeCoords(mapEdges, rect) {
const mapEdgePixels = {};
const x0 = rect.x;
const x1 = rect.x + rect.width;
const y0 = rect.y;
const y1 = rect.y + rect.height;
const xValues = d3.range(x0, x1);
const yValues = d3.range(y0, y1);
if (mapEdges.n) mapEdgePixels.n = d3.cross(xValues, [x0]);
if (mapEdges.e) mapEdgePixels.e = d3.cross([x1-1], yValues);
if (mapEdges.s) mapEdgePixels.s = d3.cross(xValues, [y1-1]);
if (mapEdges.w) mapEdgePixels.w = d3.cross([y0], yValues);
return mapEdgePixels;
}
li = new LoadIndicator(sampleImage);
li.canvas
{
const sourceColorNum = ColorMask.fromArray([10, 20, 30, 83]);
const obj = GpuColorMask.toObject(sourceColorNum);
const obj2 = _.cloneDeep(obj);
obj2.colorNum = ColorMask.fromArray([...ColorMask.toArray(obj2.colorNum).slice(0,3), 6]);
obj2.neighbors.e = true;
obj2.coordType = "junction";
const reverse = GpuColorMask.fromObject(obj2);
const rereverse = GpuColorMask.toObject(reverse);
return { sourceColorNum, obj, reverse, rereverse, finalColor: ColorMask.toObject(rereverse.colorNum) }
}
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.
