Put each script block next to the associated board div

This commit is contained in:
Aaron Fenyes 2024-10-21 16:31:15 -07:00
parent 7a79ed1de0
commit 883e660e7c
6 changed files with 106 additions and 84 deletions

View File

@ -72,5 +72,6 @@
); );
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -10,28 +10,12 @@
<h1>3D glider sampler</h1> <h1>3D glider sampler</h1>
<!-- line glider -->
<h2>Line glider</h2> <h2>Line glider</h2>
<p>The large point is a glider on the line segment defined by the two small points. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/line3d_glider.html"><code>Line3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p> <p>The large point is a glider on the line segment defined by the two small points. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/line3d_glider.html"><code>Line3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="line-glider-board" class="jxgbox" style="width:600px; height:600px"></div> <div id="line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Intersection line glider</h2>
<p>The large point is a glider on the line where the two planes intersect.</p>
<div id="intersection-line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Circle glider</h2>
<p>The point is a glider on the circle. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/circle3d_glider.html"><code>Circle3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<p>Right now, the glider gets caught on the point where the circle starts and ends. If you can overcome this limitation, try contributing some code!</p>
<div id="circle-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Curve glider</h2>
<p>The point is a glider on the curve. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/curve3d_glider.html"><code>Curve3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="curve-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Parametric surface glider</h2>
<p>The point is a glider on the parametric surface. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/parametricsurface3d_glider.html"><code>ParametricSurface3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="surface-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<!-- line glider -->
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -96,12 +80,17 @@
fillColor: 'white', fillColor: 'white',
gradientSecondColor: '#fe00a0', gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060' highlightStrokeColor: '#900060'
} }
); );
} }
</script> </script>
<!-- intersection line glider --> <!-- intersection line glider -->
<h2>Intersection line glider</h2>
<p>The large point is a glider on the line where the two planes intersect.</p>
<div id="intersection-line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -138,7 +127,7 @@
fillColor: 'white', fillColor: 'white',
gradientSecondColor: '#5000a0', gradientSecondColor: '#5000a0',
highlightStrokeColor: '#300060' highlightStrokeColor: '#300060'
} }
); );
let planeHoriz = view.create( let planeHoriz = view.create(
'plane3d', 'plane3d',
@ -194,6 +183,12 @@
</script> </script>
<!-- circle glider --> <!-- circle glider -->
<h2>Circle glider</h2>
<p>The point is a glider on the circle. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/circle3d_glider.html"><code>Circle3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<p>Right now, the glider gets caught on the point where the circle starts and ends. If you can overcome this limitation, try contributing some code!</p>
<div id="circle-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -237,12 +232,17 @@
fillColor: 'white', fillColor: 'white',
gradientSecondColor: '#fe00a0', gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060' highlightStrokeColor: '#900060'
} }
); );
} }
</script> </script>
<!-- curve glider --> <!-- curve glider -->
<h2>Curve glider</h2>
<p>The point is a glider on the curve. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/curve3d_glider.html"><code>Curve3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="curve-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -291,12 +291,17 @@
fillColor: 'white', fillColor: 'white',
gradientSecondColor: '#fe00a0', gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060' highlightStrokeColor: '#900060'
} }
); );
} }
</script> </script>
<!-- parametric surface glider --> <!-- parametric surface glider -->
<h2>Parametric surface glider</h2>
<p>The point is a glider on the parametric surface. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/parametricsurface3d_glider.html"><code>ParametricSurface3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="surface-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -354,5 +359,6 @@
); );
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -10,19 +10,12 @@
<h1>3D intersection sampler</h1> <h1>3D intersection sampler</h1>
<!-- plane-plane -->
<h2>Planeplane</h2> <h2>Planeplane</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_plane.html">planeplane intersection example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p> <p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_plane.html">planeplane intersection example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="plane-plane-board" class="jxgbox" style="width:600px; height:600px"></div> <div id="plane-plane-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Planesphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html">planesphere intersection example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="plane-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Spheresphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html">spheresphere intersection example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="sphere-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
<!-- plane-plane -->
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -60,7 +53,7 @@
fillColor: 'white', fillColor: 'white',
gradientSecondColor: '#5000a0', gradientSecondColor: '#5000a0',
highlightStrokeColor: '#300060' highlightStrokeColor: '#300060'
} }
); );
let planeHoriz = view.create( let planeHoriz = view.create(
'plane3d', 'plane3d',
@ -101,6 +94,11 @@
</script> </script>
<!-- plane-sphere --> <!-- plane-sphere -->
<h2>Planesphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html">planesphere intersection example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="plane-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -165,7 +163,7 @@
fillColor: 'white', fillColor: 'white',
gradientSecondColor: '#a00050', gradientSecondColor: '#a00050',
highlightStrokeColor: '#600030' highlightStrokeColor: '#600030'
} }
); );
let sphere = view.create( let sphere = view.create(
'sphere3d', 'sphere3d',
@ -192,6 +190,11 @@
</script> </script>
<!-- sphere-sphere --> <!-- sphere-sphere -->
<h2>Spheresphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html">spheresphere intersection example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="sphere-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -280,5 +283,6 @@
); );
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -10,24 +10,13 @@
<h1>3D polygon sampler</h1> <h1>3D polygon sampler</h1>
<!-- creating a polygon -->
<h2>Creating a polygon</h2> <h2>Creating a polygon</h2>
<p>A polygon is created from a list of vertices. Each vertex is given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> element. The vertices that are created from coordinates are styled according to the <code>vertices</code> attribute. The edges of the polygon are styled according to the <code>borders</code> attribute.</p> <p>A polygon is created from a list of vertices. Each vertex is given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> element. The vertices that are created from coordinates are styled according to the <code>vertices</code> attribute. The edges of the polygon are styled according to the <code>borders</code> attribute.</p>
<p>To make the layout of the vertices easier to see, Ive set the views <code>depthOrderPoints</code> attribute to <code>true</code>. <p>To make the layout of the vertices easier to see, Ive set the views <code>depthOrderPoints</code> attribute to <code>true</code>.
<div id="polygon-homog-board" class="jxgbox" style="width:600px; height:600px"></div> <div id="polygon-homog-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Mixing coordinates and <code>Point3D</code> elements</h2>
<p>This example shows how you can mix coordinates and <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> elements in a polygons vertex list.</p>
<div id="polygon-mixed-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Filling a polygon</h2>
<p>You can set the fill and opacity of a 3D polygon just like you would with a 2D polygon. I recommend only filling polygons that are guaranteed to stay planar. In this example, the polygons are always planar because theyre triangles.</p>
<div id="planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>The pitalls of filling a non-planar polygon</h2>
<p>Make the polygon below non-planar by dragging its vertices. This will probably make the fill look really weird from certain angles.</p>
<div id="non-planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
<!-- creating a polygon -->
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -130,6 +119,11 @@
</script> </script>
<!-- mixing coordinates and Point3D elements --> <!-- mixing coordinates and Point3D elements -->
<h2>Mixing coordinates and <code>Point3D</code> elements</h2>
<p>This example shows how you can mix coordinates and <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> elements in a polygons vertex list.</p>
<div id="polygon-mixed-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -223,6 +217,11 @@
</script> </script>
<!-- filling a polygon --> <!-- filling a polygon -->
<h2>Filling a polygon</h2>
<p>You can set the fill and opacity of a 3D polygon just like you would with a 2D polygon. I recommend only filling polygons that are guaranteed to stay planar. In this example, the polygons are always planar because theyre triangles.</p>
<div id="planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -326,6 +325,11 @@
</script> </script>
<!-- the pitfalls of filling a non-planar polygon --> <!-- the pitfalls of filling a non-planar polygon -->
<h2>The pitalls of filling a non-planar polygon</h2>
<p>Make the polygon below non-planar by dragging its vertices. This will probably make the fill look really weird from certain angles.</p>
<div id="non-planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -400,5 +404,6 @@
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -10,6 +10,8 @@
<h1>Sphere sampler</h1> <h1>Sphere sampler</h1>
<!-- creating spheres -->
<h2>Creating spheres</h2> <h2>Creating spheres</h2>
<p> <p>
Right now, there are two ways to create a <a href="https://jsxgraph.org/docs/symbols/Sphere3D.html#constructor"><code>Sphere3D</code></a>: Right now, there are two ways to create a <a href="https://jsxgraph.org/docs/symbols/Sphere3D.html#constructor"><code>Sphere3D</code></a>:
@ -21,11 +23,6 @@
</p> </p>
<div id="creating-spheres-board" class="jxgbox" style="width:600px; height:600px"></div> <div id="creating-spheres-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Styling spheres</h2>
<p>Here are some styling options for spheres and the points that define them.</p>
<div id="styling-spheres-board" class="jxgbox" style="width:600px; height:600px"></div>
<!-- creating spheres -->
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -93,7 +90,12 @@
} }
</script> </script>
<!-- styling demo --> <!-- styling spheres -->
<h2>Styling spheres</h2>
<p>Here are some styling options for spheres and the points that define them.</p>
<div id="styling-spheres-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -223,5 +225,6 @@
); );
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -10,6 +10,8 @@
<h1>View options demo</h1> <h1>View options demo</h1>
<!-- central projection; depth ordering for points -->
<h2>Central projection; depth ordering for points</h2> <h2>Central projection; depth ordering for points</h2>
<p> <p>
This demo shows how the new <code>projection</code> and <code>depthOrderPoints</code> options of a <code>View3D</code> affect the view. Use the controls to: This demo shows how the new <code>projection</code> and <code>depthOrderPoints</code> options of a <code>View3D</code> affect the view. Use the controls to:
@ -32,38 +34,6 @@
</div> </div>
<div id="proj-depth-board" class="jxgbox" style="width:600px; height:600px"></div> <div id="proj-depth-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Virtual trackball; bank angle slider</h2>
<p>
In the default orientation control mode, dragging the mouse changes the Tait-Bryan angles of the camera.
<ul>
<li>Dragging horizontally changes the azimuth.</li>
<li>Dragging vertically changes the elevation.</li>
<li>As of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>, doing a scroll gesture with the mouse button down changes the bank angle.</li>
</ul>
The Tait-Bryan angles can also be controlled with sliders, which are hidden by default. To show them, set the following attributes:
<ul>
<li><code>az: {slider: {visible: true}}</code></li>
<li><code>el: {slider: {visible: true}}</code></li>
<li><code>bank: {slider: {visible: true}}</code> (as of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>)</li>
</ul>
</p>
<p>
<a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">Version 1.9.2</a> introduces a new orientation control mode: the <em>virtual trackball</em>. In this mode, dragging from near the center of the board rolls the view along the drag direction, while dragging from near the edge of the board rotates the view in the plane of the board. These two motions transition smoothly into each other as the drag start position changes. To enable the virtual trackball, set the <code>trackball</code> attribute of the <code>View3D</code> to <code>{enabled: true}</code>.
</p>
<p>
This demo is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/trackball.html">virtual trackball example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.
</p>
</p>
<div>
<label for="ori-ctl">Orientation control:</label>
<select id="ori-ctl">
<option value="angles">TaitBryan angles</option>
<option value="trackball">Virtual trackball</option>
</select>
</div>
<div id="trackball-board" class="jxgbox" style="width:600px; height:600px"></div>
<!-- projection style; and depth ordering for points -->
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -181,6 +151,38 @@
</script> </script>
<!-- virtual trackball; bank angle slider --> <!-- virtual trackball; bank angle slider -->
<h2>Virtual trackball; bank angle slider</h2>
<p>
In the default orientation control mode, dragging the mouse changes the Tait-Bryan angles of the camera.
<ul>
<li>Dragging horizontally changes the azimuth.</li>
<li>Dragging vertically changes the elevation.</li>
<li>As of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>, doing a scroll gesture with the mouse button down changes the bank angle.</li>
</ul>
The Tait-Bryan angles can also be controlled with sliders, which are hidden by default. To show them, set the following attributes:
<ul>
<li><code>az: {slider: {visible: true}}</code></li>
<li><code>el: {slider: {visible: true}}</code></li>
<li><code>bank: {slider: {visible: true}}</code> (as of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>)</li>
</ul>
</p>
<p>
<a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">Version 1.9.2</a> introduces a new orientation control mode: the <em>virtual trackball</em>. In this mode, dragging from near the center of the board rolls the view along the drag direction, while dragging from near the edge of the board rotates the view in the plane of the board. These two motions transition smoothly into each other as the drag start position changes. To enable the virtual trackball, set the <code>trackball</code> attribute of the <code>View3D</code> to <code>{enabled: true}</code>.
</p>
<p>
This demo is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/trackball.html">virtual trackball example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.
</p>
</p>
<div>
<label for="ori-ctl">Orientation control:</label>
<select id="ori-ctl">
<option value="angles">TaitBryan angles</option>
<option value="trackball">Virtual trackball</option>
</select>
</div>
<div id="trackball-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let` // to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block // and put the code for each board in its own block
@ -248,5 +250,6 @@
inputOriCtl(); inputOriCtl();
} }
</script> </script>
</body> </body>
</html> </html>