3e:null 3f:["$","title",null,{"children":"Animated Trip Icons Issue | Michael Mathews's Workspace | Observable"}] 45:T58c,trips = [ { vendor: 0, path: [ [-74.20986, 40.81773], [-74.20987, 40.81765], [-74.20998, 40.81746], [-74.21062, 40.81682], [-74.21002, 40.81644], [-74.21084, 40.81536], [-74.21142, 40.8146], [-74.20965, 40.81354], [-74.21166, 40.81158], [-74.21247, 40.81073], [-74.21294, 40.81019], [-74.21302, 40.81009], [-74.21055, 40.80768], [-74.20995, 40.80714], [-74.20674, 40.80398], [-74.20659, 40.80382], [-74.20634, 40.80352], [-74.20466, 40.80157] ], timestamps: [ 1191, 1193.803, 1205.321, 1249.883, 1277.923, 1333.85, 1373.257, 1451.769, 1527.939, 1560.114, 1579.966, 1583.555, 1660.904, 1678.797, 1779.882, 1784.858, 1793.853, 1868.948 ] }, { vendor: 0, path: [ [-74.27508, 40.6065], [-74.27419, 40.60623], [-74.27382, 40.60689], [-74.27364, 40.60728], [-74.27364, 40.60738], [-74.27368, 40.6076], [-74.27377, 40.60786], [-74.27257, 40.60817], [-74.27156, 40.60842], [-74.27146, 40.6079], [-74.27136, 40.60737], [-74.26967, 40.60743], [-74.26959, 40.60665], [-74.26721, 40.6068] ], timestamps: [ 1997, 2026.166, 2039.748, 2047.573, 2049.467, 2053.672, 2058.763, 2077.431, 2093.076, 2103.274, 2113.6639999999998, 2146.261, 2159.986, 2195.563 ] } ]46:T1b04,tripIcons = { class TripIconsLayer extends deck.IconLayer { getShaders() { const shaders = super.getShaders(); return { ...shaders, fs: `\ #define SHADER_NAME icon-layer-fragment-shader precision highp float; uniform float opacity; uniform sampler2D iconsTexture; uniform float alphaCutoff; varying float vColorMode; varying vec4 vColor; varying vec2 vTextureCoords; varying vec2 uv; varying float dataFilter_value; void main(void) { if (dataFilter_value == 0.0) discard; geometry.uv = uv; vec4 texColor = texture2D(iconsTexture, vTextureCoords); // if colorMode == 0, use pixel color from the texture // if colorMode == 1 or rendering picking buffer, use texture as transparency mask vec3 color = mix(texColor.rgb, vColor.rgb, vColorMode); // Take the global opacity and the alpha from vColor into account for the alpha component float a = texColor.a * opacity * vColor.a; if (a < alphaCutoff) { discard; } gl_FragColor = vec4(color, a); DECKGL_FILTER_COLOR(gl_FragColor, geometry); } `, vs: `\ #define SHADER_NAME icon-layer-vertex-shader attribute vec2 positions; attribute vec3 instancePositionsNext; attribute vec3 instancePositionsNext64Low; attribute float instanceTimestamps; attribute float instanceNextTimestamps; uniform float currentTime; attribute vec3 instancePositions; attribute vec3 instancePositions64Low; attribute float instanceSizes; attribute float instanceAngles; attribute vec4 instanceColors; attribute vec3 instancePickingColors; attribute vec4 instanceIconFrames; attribute float instanceColorModes; attribute vec2 instanceOffsets; attribute vec2 instancePixelOffset; uniform float sizeScale; uniform vec2 iconsTextureDim; uniform float sizeMinPixels; uniform float sizeMaxPixels; uniform bool billboard; uniform int sizeUnits; varying float vColorMode; varying vec4 vColor; varying vec2 vTextureCoords; varying vec2 uv; varying float dataFilter_value; vec2 rotate_by_angle(vec2 vertex, float angle) { float angle_radian = angle * PI / 180.0; float cos_angle = cos(angle_radian); float sin_angle = sin(angle_radian); mat2 rotationMatrix = mat2(cos_angle, -sin_angle, sin_angle, cos_angle); return rotationMatrix * vertex; } void main(void) { geometry.worldPosition = instancePositions; geometry.uv = positions; geometry.pickingColor = instancePickingColors; uv = positions; vec2 iconSize = instanceIconFrames.zw; // convert size in meters to pixels, then scaled and clamp // project meters to pixels and clamp to limits float sizePixels = clamp( project_size_to_pixel(instanceSizes * sizeScale, sizeUnits), sizeMinPixels, sizeMaxPixels ); // scale icon height to match instanceSize float instanceScale = iconSize.y == 0.0 ? 0.0 : sizePixels / iconSize.y; // scale and rotate vertex in "pixel" value and convert back to fraction in clipspace vec2 pixelOffset = positions / 2.0 * iconSize + instanceOffsets; pixelOffset = rotate_by_angle(pixelOffset, instanceAngles) * instanceScale; pixelOffset += instancePixelOffset; pixelOffset.y *= -1.0; if (billboard) { float per = (currentTime - instanceTimestamps) / (instanceNextTimestamps - instanceTimestamps); vec3 common_start = project_position(instancePositions); vec3 common_end = project_position(instancePositionsNext); vec3 interpolatedPosition = mix(common_start, common_end, per); gl_Position = project_common_position_to_clipspace(vec4(interpolatedPosition, 1.0)); if((currentTime < instanceTimestamps) || (currentTime > instanceNextTimestamps)) { dataFilter_value = 0.0; } else { dataFilter_value = 1.0; } DECKGL_FILTER_GL_POSITION(gl_Position, geometry); vec3 offset = vec3(pixelOffset, 0.0); DECKGL_FILTER_SIZE(offset, geometry); gl_Position.xy += project_pixel_size_to_clipspace(offset.xy); } else { float per = (currentTime - instanceTimestamps) / (instanceNextTimestamps - instanceTimestamps); vec3 common_start = project_position(instancePositions); vec3 common_end = project_position(instancePositionsNext); vec3 interpolatedPosition = mix(common_start, common_end, per); gl_Position = project_common_position_to_clipspace(vec4(interpolatedPosition, 1.0)); if((currentTime < instanceTimestamps) || (currentTime > instanceNextTimestamps)) { dataFilter_value = 0.0; } else { dataFilter_value = 1.0; } vec3 offset_common = vec3(project_pixel_size(pixelOffset), 0.0); DECKGL_FILTER_SIZE(offset_common, geometry); gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset_common, geometry.position); DECKGL_FILTER_GL_POSITION(gl_Position, geometry); } vTextureCoords = mix( instanceIconFrames.xy, instanceIconFrames.xy + iconSize, (positions.xy + 1.0) / 2.0 ) / iconsTextureDim; vColor = instanceColors; DECKGL_FILTER_COLOR(vColor, geometry); vColorMode = instanceColorModes; if (dataFilter_value == 0.0) { gl_Position = vec4(0.); } } ` }; } initializeState(params) { super.initializeState(params); const attributeManager = this.getAttributeManager(); attributeManager.addInstanced({ instancePositions: { size: 3, type: GL.DOUBLE, fp64: this.use64bitPositions(), transition: true, accessor: "getPosition", // noAlloc: true, // update: this.calculatePositions, shaderAttributes: { instancePositions: { vertexOffset: 0 }, instancePositionsNext: { vertexOffset: 1 } } }, timestamps: { size: 1, accessor: "getTimestamps", shaderAttributes: { instanceTimestamps: { vertexOffset: 0 }, instanceNextTimestamps: { vertexOffset: 1 } } } }); } updateState(params) { super.updateState(params); const { props, changeFlags } = params; const attributeManager = this.getAttributeManager(); const geometryChanged = changeFlags.dataChanged || (changeFlags.updateTriggersChanged && (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getPath)); if (geometryChanged) { if (props.data.length) { this.setState({ numInstances: props.data.attributes.getTimestamps.value.length, startIndices: props.data.startIndices }); } } } draw(params) { const { currentTime } = this.props; params.uniforms = { ...params.uniforms, currentTime }; super.draw(params); this.setNeedsRedraw(); } } return TripIconsLayer; }47:T906,deckgl = { document.getElementById("canvas").innerHTML = ""; const min = 1191; const max = 2200; let currentTime = 1191; let paused = false; document.getElementById("toggle").addEventListener("click", function () { paused = !paused; }); document.getElementById("timeRange").addEventListener("input", function (ev) { const p = ev.currentTarget.value / 100; currentTime = min + (max - min) * p; }); const d = new deck.DeckGL({ container: document.getElementById("canvas"), map: mapboxgl, mapStyle: "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json", initialViewState: { longitude: -74.20708487578, latitude: 40.80348460695895, zoom: 13 }, controller: true, getTooltip: ({ index, layer }) => { return index > 0 ? `${index} ${layer.id}` : null; } }); function tick() { render(); if (!paused) { currentTime += 0.2; } requestAnimationFrame(tick); } tick(); function render() { d.setProps({ layers: [ new deck.TripsLayer({ id: "trips", data: tripsBuffer, billboard: false, getPath: (d) => d.path, getTimestamps: (d) => d.timestamps, getColor: (d) => [255, 0, 0], opacity: 0.3, widthMinPixels: 2, rounded: true, trailLength: 500, currentTime, shadowEnabled: false, fadeTrail: false, pickable: false }), new tripIcons({ id: "tripIcons", data: { ...tripsBuffer, attributes: { getPosition: tripsBuffer.attributes.getPath, getTimestamps: tripsBuffer.attributes.getTimestamps } }, billboard: false, pickable: true, iconAtlas: "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/icon/location-icon-atlas.png", iconMapping: { "marker-1": { x: 0, y: 0, width: 128, height: 128, anchorY: 128 } }, currentTime, getIcon: (d) => "marker-1", sizeUnits: "meters", sizeScale: 10, sizeMinPixels: 20, sizeMaxPixels: 30 }) ] }); } return d; }48:[] 43:{"id":"66d2a4773eb1ba91","slug":null,"title":"Animated Trip Icons Issue","thumbnail":"b0f70a94dc6a121c5f4725b601eb658bacde7dd27cbcc8502fdec460c68f4fa5","access_level":"public","create_time":"$D2023-12-14T15:39:30.838Z","update_time":"$D2024-07-22T11:42:18.810Z","view_time":null,"first_public_time":"$D2023-12-14T15:39:30.838Z","has_unpublished_edits":null,"fork":{"id":"a1d92ab23d47e8a1","slug":null,"title":"Animated Trip Icons","owner":{"id":"adc5285a0ef66305","login":"michael-mathews-ws","name":"Michael Mathews's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"adc5285a0ef66305","login":"michael-mathews-ws","name":"Michael Mathews's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ecdc58895bc977a26f136d7c6e5790513159e2ddbf142e4a0f2ddf0645ee992c","tier":"starter_2024","bio":"","following":false},"version":597,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"103da6ba22d036ec","login":"michael-mathews","name":"Michael Mathews","avatar_url":"https://avatars-next.observableusercontent.com/ac7ad201e02e8f8591417ffc647bdc10e9a7f62b4a384208a88f44cb2ee46a46","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"103da6ba22d036ec","login":"michael-mathews","name":"Michael Mathews","avatar_url":"https://avatars-next.observableusercontent.com/ac7ad201e02e8f8591417ffc647bdc10e9a7f62b4a384208a88f44cb2ee46a46","tier":null,"role":"editor"},{"type":"team","id":"adc5285a0ef66305","login":"michael-mathews-ws","name":"Michael Mathews's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ecdc58895bc977a26f136d7c6e5790513159e2ddbf142e4a0f2ddf0645ee992c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Animated Trip Icons Issue","cells":[{"id":391,"value":"# Animated Trip Icons Issue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"mapContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"mapboxgl = require('mapbox-gl@1.13.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"deck = require(\"deck.gl@8.9.33/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"lumaconst = import(\"@luma.gl/constants\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"GL = lumaconst.default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"tripsBuffer = {\n const positions = new Float32Array(trips.flatMap((x) => x.path.flat()));\n const timestamps = new Float32Array(trips.flatMap((x) => x.timestamps));\n const arr = trips.reduce(\n (acc, d, i) => {\n const lastIndex = acc[acc.length - 1];\n acc.push(lastIndex + d.path.length);\n return acc;\n },\n [0]\n );\n const startIndices = new Uint16Array(arr);\n return {\n length: trips.length,\n startIndices,\n attributes: {\n getPath: { value: positions, size: 2 },\n getTimestamps: { value: timestamps, size: 1 }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"