Skip to content

Commit

Permalink
Updated docs
Browse files Browse the repository at this point in the history
  • Loading branch information
astokke committed Jan 31, 2025
1 parent 1f77e09 commit 9737266
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ void main() {
float speed = sqrt((direction.x * direction.x) + (direction.y * direction.y));
float normalizedSpeed = speed / uMaxSpeed;
vec4 windColor = texture2D(uColorGradientTexture, vec2(0.0, normalizedSpeed));
vec4 windColor = texture2D(uColorGradientTexture, vec2(normalizedSpeed, 0.0));
gl_FragColor = windColor * mapTextureColor;
}`;const m=document.getElementById("map-image");if(!(m instanceof HTMLImageElement))throw new Error("Image not found");const x=document.getElementById("wind-data-image");if(!(x instanceof HTMLImageElement))throw new Error("Image not found");function v(a,e){if(a.dataset.loaded==="true"&&e.dataset.loaded==="true"){const r=document.getElementById("wind-canvas"),t=document.getElementById("wind-example-canvas");if(!(r instanceof HTMLCanvasElement)||!(t instanceof HTMLCanvasElement))throw new Error("Canvas not found");l({canvas:r,width:e.naturalWidth,height:e.naturalHeight}),l({canvas:t,width:e.naturalWidth,height:e.naturalHeight});const f=g({type:"wind",parentElement:t}),o=r.getContext("webgl"),n=t.getContext("webgl");if(!o||!n)throw new Error("WebGL not supported");const i=r.dataset,d=t.dataset;if(i.initialIndex===void 0||typeof i.initialIndex!="string"||d.initialIndex===void 0||typeof d.initialIndex!="string")throw new Error("Initial index not found");const p=new s({gl:o,mapImage:a,dataImage:e,fragmentShaderSource:C,vertexShaderSource:c,initialIndex:parseInt(i.initialIndex)}),u=new s({gl:n,mapImage:a,dataImage:e,colorGradientCanvas:f,fragmentShaderSource:w,vertexShaderSource:c,initialIndex:parseInt(d.initialIndex)});n.useProgram(u.program),n.uniform1f(u.getUniform("uMaxSpeed"),127/2),n.useProgram(null),p.draw(o),u.draw(n);return}window.requestAnimationFrame(v.bind(null,a,e))}v(m,x);
2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html><style>.temperature-example[data-astro-cid-s2p3odjf]{display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;img,canvas{border:2px solid grey;border-radius:8px}}.temperature-example-item[data-astro-cid-s2p3odjf]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.wind-example[data-astro-cid-wizpvydl]{display:grid;grid-template-columns:1fr 1fr 1fr;img,canvas{border:2px solid grey;border-radius:8px}}.wind-example-item[data-astro-cid-wizpvydl]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.map-image[data-astro-cid-j7pv25f6]{opacity:0;position:absolute;width:0;height:0}.main[data-astro-cid-j7pv25f6]{display:flex;flex-direction:column;gap:50px;font-size:18px;color:#00050e;font-family:sans-serif;font-weight:400}
</style><div class="main" data-astro-cid-j7pv25f6> <div class="wind-example" data-astro-cid-wizpvydl> <div class="wind-example-item" data-astro-cid-wizpvydl> <img src="/yr-map-docs/assets/wind.CUwOQSqI_ZG95dA.webp" id="wind-data-image" alt="Wind" data-astro-cid-wizpvydl="true" width="400" height="400" loading="lazy" decoding="async"> <span data-astro-cid-wizpvydl>Raw wind data from MET.</span> </div> <div class="wind-example-item" data-astro-cid-wizpvydl> <canvas id="wind-canvas" data-initial-index="1" data-astro-cid-wizpvydl></canvas> <span data-astro-cid-wizpvydl>Raw wind data with a background map</span> </div> <div class="wind-example-item" data-astro-cid-wizpvydl> <canvas id="wind-example-canvas" data-initial-index="2" data-astro-cid-wizpvydl></canvas> <span data-astro-cid-wizpvydl>Calculate wind speed from wind data, and apply a color from the gradient</span> </div> </div> <!-- RenderWindExample contains the js we need to set up WebGL, and the shaders needed for each example --> <script type="module" src="/yr-map-docs/assets/RenderWindExample.astro_astro_type_script_index_0_lang.BYkVbr_o.js"></script> <div class="temperature-example" data-astro-cid-s2p3odjf> <div class="temperature-example-item" data-astro-cid-s2p3odjf> <img src="/yr-map-docs/assets/temperature.Bn1Gf5bC_Zce0Hs.webp" id="temperature-data-image" alt="Temperature" data-astro-cid-s2p3odjf="true" width="400" height="400" loading="lazy" decoding="async"> <span data-astro-cid-s2p3odjf>Raw temperature data from MET.</span> </div> <div class="temperature-example-item" data-astro-cid-s2p3odjf> <canvas id="temperature-canvas" data-initial-index="6" data-astro-cid-s2p3odjf></canvas> <span data-astro-cid-s2p3odjf>Raw temperature data with a background map</span> </div> <div class="temperature-example-item" data-astro-cid-s2p3odjf> <canvas id="temperature-example-canvas" data-initial-index="9" data-astro-cid-s2p3odjf></canvas> <span data-astro-cid-s2p3odjf>Calculate temperature speed from temperature data, and apply a color from the gradient</span> </div> </div> <!-- RenderTemperatureExample contains the js we need to set up WebGL, and the shaders needed for each example --> <script type="module" src="/yr-map-docs/assets/RenderTemperatureExample.astro_astro_type_script_index_0_lang.B7WAMmHm.js"></script> <!-- <div class="wind-container">
</style><div class="main" data-astro-cid-j7pv25f6> <div class="wind-example" data-astro-cid-wizpvydl> <div class="wind-example-item" data-astro-cid-wizpvydl> <img src="/yr-map-docs/assets/wind.CUwOQSqI_ZG95dA.webp" id="wind-data-image" alt="Wind" data-astro-cid-wizpvydl="true" width="400" height="400" loading="lazy" decoding="async"> <span data-astro-cid-wizpvydl>Raw wind data from MET.</span> </div> <div class="wind-example-item" data-astro-cid-wizpvydl> <canvas id="wind-canvas" data-initial-index="1" data-astro-cid-wizpvydl></canvas> <span data-astro-cid-wizpvydl>Raw wind data with a background map</span> </div> <div class="wind-example-item" data-astro-cid-wizpvydl> <canvas id="wind-example-canvas" data-initial-index="2" data-astro-cid-wizpvydl></canvas> <span data-astro-cid-wizpvydl>Calculate wind speed from wind data, and apply a color from the gradient</span> </div> </div> <!-- RenderWindExample contains the js we need to set up WebGL, and the shaders needed for each example --> <script type="module" src="/yr-map-docs/assets/RenderWindExample.astro_astro_type_script_index_0_lang.OBsyQB1O.js"></script> <div class="temperature-example" data-astro-cid-s2p3odjf> <div class="temperature-example-item" data-astro-cid-s2p3odjf> <img src="/yr-map-docs/assets/temperature.Bn1Gf5bC_Zce0Hs.webp" id="temperature-data-image" alt="Temperature" data-astro-cid-s2p3odjf="true" width="400" height="400" loading="lazy" decoding="async"> <span data-astro-cid-s2p3odjf>Raw temperature data from MET.</span> </div> <div class="temperature-example-item" data-astro-cid-s2p3odjf> <canvas id="temperature-canvas" data-initial-index="6" data-astro-cid-s2p3odjf></canvas> <span data-astro-cid-s2p3odjf>Raw temperature data with a background map</span> </div> <div class="temperature-example-item" data-astro-cid-s2p3odjf> <canvas id="temperature-example-canvas" data-initial-index="9" data-astro-cid-s2p3odjf></canvas> <span data-astro-cid-s2p3odjf>Calculate temperature speed from temperature data, and apply a color from the gradient</span> </div> </div> <!-- RenderTemperatureExample contains the js we need to set up WebGL, and the shaders needed for each example --> <script type="module" src="/yr-map-docs/assets/RenderTemperatureExample.astro_astro_type_script_index_0_lang.B7WAMmHm.js"></script> <!-- <div class="wind-container">
<WindImage width={300} />
<Canvas id="wind-canvas" />
<DrawWindWithWebGL />
Expand Down

0 comments on commit 9737266

Please sign in to comment.