2b:null 2c:["$","title",null,{"children":"Billboard Particles | Corey Guastini | Observable"}] 31:T576,snowLayer = ( { id: 'snow', type: 'custom', renderingMode: '3d', // method called when the layer is added to the map // https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd onAdd: function (map, gl) { gl.enable(gl.DEPTH_TEST); // link the two shaders into a WebGL program this.programInfo = programInfo(gl,vsSource,fsSource); this.map = map; //texture for particle billboards const circleTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, circleTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, particleCanvas); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); //texture for snowflake circle SDF this.circleTexture = circleTexture; //buffer to hold particle location this.buffersTrans = gl.createBuffer(); //buffer to hold vertices of texture this.buffersSquare = gl.createBuffer(); },//end onAdd, // method fired on each animation frame // https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render render: renderFunction })32:T8d1,function renderFunction(gl, matrix) { const viewMatrix = twgl.m4.inverse(getView(this.map.transform)); //vectors for billboard shader const cameraRight = normalizeV([viewMatrix[0], viewMatrix[1], viewMatrix[2]]); const cameraUp = normalizeV([viewMatrix[4], viewMatrix[5], viewMatrix[6]]); //draw particle billboards gl.useProgram(this.programInfo.program); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE); //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); const size = 3; // 3 components per iteration let type = gl.FLOAT; // the data is 32bit floats const normalize = false; // don't normalize the data const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position let offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, this.buffersTrans); gl.bufferData(gl.ARRAY_BUFFER, points.tData, gl.STATIC_DRAW); gl.enableVertexAttribArray(this.programInfo.attribLocations.transAttributeLocation); gl.vertexAttribPointer(this.programInfo.attribLocations.transAttributeLocation, 3, type, normalize, stride, offset); gl.bindBuffer(gl.ARRAY_BUFFER, this.buffersSquare); gl.bufferData(gl.ARRAY_BUFFER, points.vData, gl.STATIC_DRAW); gl.enableVertexAttribArray(this.programInfo.attribLocations.squareAttributeLocation); gl.vertexAttribPointer(this.programInfo.attribLocations.squareAttributeLocation, 3, type, normalize, stride, offset); // Set the matrix. gl.uniformMatrix4fv(this.programInfo.uniformLocations.matUniformLocation, false, matrix); gl.uniform3f(this.programInfo.uniformLocations.rightUniformLocation, cameraRight[0], cameraRight[1], cameraRight[2]); gl.uniform3f(this.programInfo.uniformLocations.upUniformLocation, cameraUp[0], cameraUp[1], cameraUp[2]); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, this.circleTexture); gl.uniform1i(this.programInfo.uniformLocations.textureUniformLocation, 1); gl.uniform1f(this.programInfo.uniformLocations.sizeUniformLocation, particleSize); var primitiveType = gl.TRIANGLES; offset = 0; var count = 6; gl.drawArrays(primitiveType, offset, numElements*count); for (let i=0; i cancelAnimationFrame(frame)); }34:T623,points = { //store data about points and their locations let points = []; //location of particle center const tData = new Float32Array(numElements*18); //texture quad coordinates for billboards relative to particle center const vData = new Float32Array(numElements*18); for (let i=0; i= 0 ? 1.2 : 1)); } TinySDF.prototype.draw = function (char) { this.ctx.arc(this.circleWidth/2, this.circleWidth/2, this.circleWidth/8, 0, 2 * Math.PI); this.ctx.fill(); var imgData = this.ctx.getImageData(0, 0, this.size, this.size); var alphaChannel = new Uint8ClampedArray(this.size * this.size); for (var i = 0; i < this.size * this.size; i++) { var a = imgData.data[i * 4 + 3] / 255; // alpha value this.gridOuter[i] = a === 1 ? 0 : a === 0 ? INF : Math.pow(Math.max(0, 0.5 - a), 2); this.gridInner[i] = a === 1 ? INF : a === 0 ? 0 : Math.pow(Math.max(0, a - 0.5), 2); } this.edt(this.gridOuter, this.size, this.size, this.f, this.v, this.z); this.edt(this.gridInner, this.size, this.size, this.f, this.v, this.z); for (i = 0; i < this.size * this.size; i++) { var d = Math.sqrt(this.gridOuter[i]) - Math.sqrt(this.gridInner[i]); alphaChannel[i] = Math.round(255 - 255 * (d / this.radius + this.cutoff)); } this.alphaChannel = alphaChannel; return alphaChannel; } TinySDF.prototype.edt = function (data, width, height, f, v, z) { for (var x = 0; x < width; x++) this.edt1d(data, x, width, height, f, v, z); for (var y = 0; y < height; y++) this.edt1d(data, y * width, 1, width, f, v, z); } TinySDF.prototype.edt1d = function (grid, offset, stride, length, f, v, z) { var q, k, s, r; v[0] = 0; z[0] = -INF; z[1] = INF; for (q = 0; q < length; q++) f[q] = grid[offset + q * stride]; for (q = 1, k = 0, s = 0; q < length; q++) { do { r = v[k]; s = (f[q] - f[r] + q * q - r * r) / (q - r) / 2; } while (s <= z[k] && --k > -1); k++; v[k] = q; z[k] = s; z[k + 1] = INF; } for (q = 0, k = 0; q < length; q++) { while (z[k + 1] < q) k++; r = v[k]; grid[offset + q * stride] = f[r] + (q - r) * (q - r); } } return TinySDF; }36:[{"id":"591fa6a2a02e885a7e60dca8a5b3cc8e99d27a867a8481b668e257e036252eb03f9b47b50e97c6969aed62429326d566f6fb00e136db34800d3fe14e5df1ea34","href":"https://static.observableusercontent.com/files/591fa6a2a02e885a7e60dca8a5b3cc8e99d27a867a8481b668e257e036252eb03f9b47b50e97c6969aed62429326d566f6fb00e136db34800d3fe14e5df1ea34","name":"mapbox-gl.css","type":"text/css","lastModified":1625862102145.838,"size":35271},{"id":"d5e568ab90af7be7497b507d40067d9abd0c10a7d660b9bfa99fb56b47fc9137f7ef050443994a85fd01c7b47ae37827b1e51b421739dbe6c9c46ddffa3a4dbd","href":"https://static.observableusercontent.com/files/d5e568ab90af7be7497b507d40067d9abd0c10a7d660b9bfa99fb56b47fc9137f7ef050443994a85fd01c7b47ae37827b1e51b421739dbe6c9c46ddffa3a4dbd","name":"mapbox-gl.js","type":"application/javascript","lastModified":1625862102145.838,"size":847510}] 2f:{"id":"42abb1d319e691bf","slug":null,"title":"Billboard Particles","thumbnail":"d5b9a61e44373a87fa03505e38aed6bc120ea2a8a894882dc1f15103330c6abd","access_level":"unlisted","create_time":"$D2021-07-09T20:21:42.145Z","update_time":"$D2022-03-25T21:03:14.099Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"da36068e9c88f131","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":"starter_2024"},"version":483,"publish_version":483,"role":null,"authored":false,"authors":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null}],"members":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Billboard Particles","cells":[{"id":467,"value":"md`# Billboard Particles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`This notebook animates particles to look like snow in a 3D Custom Layer using a billboard technique with a SDF circle texture.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"mapboxgl = {\n const mbgl = await require(await FileAttachment(\"mapbox-gl.js\").url());\n if (!mbgl.accessToken) {\n mbgl.accessToken = access_token;\n const href = await require.resolve(\n await FileAttachment(\"mapbox-gl.css\").url()\n );\n document.head.appendChild(html``);\n }\n return mbgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mapDimensions = [Math.floor(width), Math.max(Math.floor(width * 0.5),300)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof access_token = Text({\n value:\n \"pk.eyJ1IjoicnJldXNzZXIiLCJhIjoiY2tsNzNnN2xwMXJ3bTJxcWplaHptZmtmNiJ9.4jyhYK5B3nCMw2NTD761hg\",\n label: 'Access token'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"viewof styleURL = Text({\n value: \"mapbox://styles/rreusser/ckokre45w796s17n7q9kxvqvn/draft\",\n label: 'Style URL'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof hash = Text({\n label: 'location hash input',\n value: '#11.5/46.81098/-121.77608/9.8/80.00'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof start = Range([-5, 15], { label: 'Fog start', value: -1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof end = Range([0, 15], { label: 'Fog end', value: 9 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"viewof color = Color({ value: '#ffffff', description: 'Fog color' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"updateFog = {\n // Trigger execution of this cell whenever these values change:\n styleURL;\n styleUpdateTrigger;\n start, end, color;\n \n // Update the fog:\n const fogOpacity = 1;\n map.setFog({\n range: [start, end],\n color: `rgba(${[\n ...hexRgbToFloat(color).map(c => Math.round(c * 255)),\n fogOpacity\n ]})`\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"updateParticles = {\n numElements;\n particleSize;\n \n const mapLayer = map.getLayer('snow');\n\n if (typeof mapLayer !== 'undefined') {\n // Remove map layer & source.\n map.removeLayer('snow');\n }\n \n map.addLayer(snowLayer, \"land\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof map = new Promise(function(resolve, reject) {\n const map = new mapboxgl.Map({\n container: mapContainer.element,\n style: styleURL,\n center: { lat: 46.81098, lng: -121.77608 },\n zoom: 11.5,\n pitch: 80,\n bearing: 9.8,\n\n antialias: true\n }).on('load', () => {\n \n \n \n mapContainer.element.value = map;\n \n resolve(mapContainer.element);\n map.resize();\n \n });\n invalidation.then(() => map.remove());\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"viewof numElements = Range([10, 100000], { label: 'Number of particles', step:10, value: 10000 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"viewof particleSize = Range([0.000001, 0.00001], { label: 'Particle size', value: 0.000005 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof hashOutput = {\n const hash = getHash(map);\n const hashOut = html``;\n const container = html`

${hashOut}

`;\n hashOut.value = '#' + hash;\n container.value = parseHash(hash);\n map.on('idle', () => {\n const hash = getHash(map);\n container.value = parseHash(hash);\n hashOut.value = '#' + hash;\n hashOut.dispatchEvent(new CustomEvent('input'));\n });\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"{\n const btn = Button('Download PNG');\n btn.addEventListener('input', () => {\n map.once(\"render\", function() {\n downloadURI(map._canvas.toDataURL(), 'map.png');\n });\n map.triggerRepaint();\n });\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"mapContainer = ({ element: DOM.element('div') })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`The cells below depend on the above values and are re-executed whenever the values change. This allows imperative updates to the map without instantiating a new map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"styleUpdateTrigger = {\n // Update the style and wait 500ms until it's fully loaded... can probably do better\n return new Promise(function(resolve, reject) {\n map.setStyle(styleURL);\n setTimeout(resolve, 500);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"resizeTrigger = {\n // Resize the map without instantiating a new map\n mapContainer.element.style.width = `${Math.floor(mapDimensions[0])}px`;\n mapContainer.element.style.height = `${Math.floor(mapDimensions[1])}px`;\n map.resize();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"hashUpdateTrigger = {\n // Depend on hash and update the map whenever the hash input changes\n if (!hash.length) return;\n const loc = parseHash(hash);\n\n map.setZoom(loc.zoom);\n map.setCenter(loc);\n map.setBearing(loc.bearing);\n map.setPitch(loc.pitch);\n return loc;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"vsSource=`\nattribute vec3 a_trans;\nattribute vec3 a_square;\n\nuniform mat4 u_matrix;\nuniform vec3 u_right;\nuniform vec3 u_up;\nuniform float u_size;\n\nvarying vec2 v_texcoord;\n\nvoid main() {\n \n vec3 vertexPosition_worldspace = a_trans + u_right * a_square.x * u_size + u_up * a_square.y * u_size;\n\n gl_Position = u_matrix * vec4(vertexPosition_worldspace, 1.0);\n\n v_texcoord = a_square.xy + vec2(0.5,0.5);\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"fsSource =`\nprecision mediump float;\nvarying vec2 v_texcoord;\nuniform sampler2D u_texture;\n\nvoid main() {\n \n vec4 u_color = vec4(0.99,0.99,0.99,1.0);\n vec4 baseColor = u_color;\n float dist = texture2D(u_texture, v_texcoord).a;\n\n float oFactor = smoothstep(0.65, 0.5, dist);\n baseColor = mix(u_color, vec4(1.0,1.0,1.0,1.0), oFactor);\n baseColor.a *= smoothstep(0.0, 0.8, dist);\n gl_FragColor = baseColor;\n\n if(gl_FragColor.a < 0.25)\n discard;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"function getView(transform) {\n // From geo/transform.js:\n const worldToCamera = transform._camera.getWorldToCamera(transform.worldSize, transform.pixelsPerMeter);\n const scaled = twgl.m4.scale(worldToCamera, [transform.worldSize, transform.worldSize, transform.worldSize/transform.pixelsPerMeter]);\n return scaled;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"function normalizeV(v) {\n var length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);\n \n // make sure we don't divide by 0.\n if (length > 0) {\n return [v[0] / length, v[1] / length, v[2] / length];\n } else {\n return [0, 0, 0];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"//compiles program\nfunction initShaderProgram(gl, vsSource, fsSource) {\n //compile shaders\n const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);\n const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);\n \n const shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n \n const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);\n if (!success) {\n \n throw new Error(`Couldn't link shader`);\n gl.deleteProgram(shaderProgram);\n }\n \n return shaderProgram;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"function programInfo(gl,vsSource,fsSource) {\n const shaderProgram = initShaderProgram(gl, vsSource, fsSource);\n \n const programInfo = {\n program: shaderProgram,\n attribLocations: {\n positionAttributeLocation: gl.getAttribLocation(shaderProgram, \"a_pos\"),\n transAttributeLocation: gl.getAttribLocation(shaderProgram, \"a_trans\"),\n squareAttributeLocation: gl.getAttribLocation(shaderProgram, \"a_square\")\n },\n uniformLocations: {\n textureUniformLocation: gl.getUniformLocation(shaderProgram,\"u_texture\"),\n matUniformLocation: gl.getUniformLocation(shaderProgram,\"u_matrix\"),\n rightUniformLocation:gl.getUniformLocation(shaderProgram,\"u_right\"),\n upUniformLocation:gl.getUniformLocation(shaderProgram,\"u_up\"),\n sizeUniformLocation:gl.getUniformLocation(shaderProgram,\"u_size\")\n }\n };\n return programInfo;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"//compiles shaders\nfunction loadShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n \n const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)\n if (!success) {\n console.log(gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n throw new Error(`Couldn't compile shader`);\n }\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"minLat = 46.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"maxLat = 47.25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"minLon = -122","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"maxLon = -121.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"lonRange = {return maxLon - minLon}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"latRange = {return maxLat - minLat}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Point = {\n function Point() {\n //x,y,z positions\n const point = mapboxgl.MercatorCoordinate.fromLngLat({\n lng: minLon + Math.random()*lonRange,\n lat: minLat + Math.random()*latRange\n },10000)\n this.y = point.y;\n this.x = point.x;\n this.z = point.z;\n\n //x,y,z velocities\n this.vz = Math.random()*-0.000001 - 0.0000001;\n this.vx = 0;\n this.vy = 0;\n }\n \n Point.prototype.propagate = function(delta) {\n this.y = this.y + delta*this.vy*100;\n this.x = this.x + delta*this.vx*100;\n this.z = this.z + delta*this.vz*100;\n }\n \n Point.prototype.resetY = function() {\n //point has intersected surface\n if (this.z <= 0) {\n const point = mapboxgl.MercatorCoordinate.fromLngLat({\n lng: minLon + Math.random()*lonRange,\n lat: minLat + Math.random()*latRange\n },10000\n )\n this.y = point.y;\n this.x = point.x;\n this.z = point.z;\n }\n }\n \n return Point;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"exampleSDF = new TinySDF(64,0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"INF = 1e16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"particleCanvas = {\n const alpha = exampleSDF.draw();\n const ctx = DOM.context2d(exampleSDF.size, exampleSDF.size);\n ctx.canvas.height = exampleSDF.size;\n ctx.canvas.width = exampleSDF.size;\n const u = new Uint8ClampedArray(exampleSDF.size*exampleSDF.size*4);\n for (let i=0; i (isNaN(parseFloat(x)) ? 0 : parseFloat(x)));\n while (parts.length < 5) parts.push(0);\n const [zoom, lat, lng, bearing, pitch] = parts;\n return { zoom, lat, lng, bearing, pitch };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function getHash(map) {\n const zoom = map.getZoom().toFixed(3);\n const lng = map.getCenter().lng.toFixed(5);\n const lat = map.getCenter().lat.toFixed(5);\n const bearing = map.getBearing().toFixed(2);\n const pitch = map.getPitch().toFixed(2);\n return `${zoom}/${lat}/${lng}/${bearing}/${pitch}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"twgl = require('twgl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"