kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
100 lines (82 loc) • 2.51 kB
HTML
<html>
<head>
<title>SDF test</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="512" height="512"></canvas>
<script>module = {};</script>
<script src="index.js"></script>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = 512;
var height = 512;
// ctx.fillStyle = 'black';
// ctx.fillRect(0, 0, 512, 512);
ctx.beginPath();
ctx.lineWidth = 100;
ctx.arc(256, 256, 200, 0, 2 * Math.PI, false);
ctx.stroke();
// ctx.fillStyle = 'black';
// ctx.font = '512px sans-serif';
// ctx.textBaseline = 'middle';
// ctx.fillText('了', 0, 256);
// ctx.moveTo(width / 2, 200);
// ctx.lineTo(200, height - 200);
// ctx.lineTo(width - 200, height - 200);
// ctx.closePath();
// ctx.strokeStyle = 'black';
// ctx.stroke();
// ctx.arc(width / 2, height / 2, 50, 0, Math.PI * 2, false);
// ctx.fillStyle = 'black';
// ctx.fill();
// ctx.font = '64px serif';
// ctx.fillStyle = 'black';
// ctx.fillText('Hello world', 100, 100);
var imgData = ctx.getImageData(0, 0, width, height);
console.time('sdf total');
console.time('init grids');
var grid1 = new Float64Array(width * height);
var grid2 = new Float64Array(width * height);
for (var i = 0; i < width * height; i++) {
var a = imgData.data[i * 4 + 3] / 255;
grid1[i] = a === 1 ? 0 : a === 0 ? INF : Math.pow(Math.max(0, 0.5 - a), 2);
grid2[i] = a === 1 ? INF : a === 0 ? 0 : Math.pow(Math.max(0, a - 0.5), 2);
}
console.timeEnd('init grids');
var size = Math.max(width, height);
var f = new Float64Array(size);
var z = new Float64Array(size + 1);
var v = new Int16Array(size);
console.time('sdf outer pass');
edt(grid1, width, height, f, v, z);
console.timeEnd('sdf outer pass');
console.time('sdf inner pass');
edt(grid2, width, height, f, v, z);
console.timeEnd('sdf inner pass');
console.timeEnd('sdf total');
var result = new Float64Array(width * height);
for (i = 0; i < width * height; i++) {
var d = Math.sqrt(grid1[i]) - Math.sqrt(grid2[i]);
result[i] = Math.round(50 + d);
}
displayGrid(result);
function displayGrid(grid) {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, width, height);
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var k = y * width + x;
var d = grid[k];
var c = Math.max(Math.min(255, Math.round(d)), 0); //d % 10 < 5 ? 0 : 255
imgData.data[4 * k + 3] = c;
}
}
ctx.putImageData(imgData, 0, 0);
}
</script>
</body>
</html>