Vectornaut/jsxgraph-3d-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put each script block next to the associated board div

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
templates/circle-sampler.html
View File

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

50
templates/glider-sampler.html
View File

@ -10,28 +10,12 @@
<h1>3D glider sampler</h1>
<!-- line glider -->
<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>
<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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -96,12 +80,17 @@
fillColor: 'white',
gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060'
}
}
);
}
</script>
<!-- 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -138,7 +127,7 @@
fillColor: 'white',
gradientSecondColor: '#5000a0',
highlightStrokeColor: '#300060'
}
}
);
let planeHoriz = view.create(
'plane3d',
@ -194,6 +183,12 @@
</script>
<!-- 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -237,12 +232,17 @@
fillColor: 'white',
gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060'
}
}
);
}
</script>
<!-- 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -291,12 +291,17 @@
fillColor: 'white',
gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060'
}
}
);
}
</script>
<!-- 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -354,5 +359,6 @@
);
}
</script>
</body>
</html>

26
templates/intersection-sampler.html
View File

@ -10,19 +10,12 @@
<h1>3D intersection sampler</h1>
<!-- plane-plane -->
<h2>Plane–plane</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_plane.html">plane–plane 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>
<h2>Plane–sphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html">plane–sphere 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>Sphere–sphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html">sphere–sphere 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -60,7 +53,7 @@
fillColor: 'white',
gradientSecondColor: '#5000a0',
highlightStrokeColor: '#300060'
}
}
);
let planeHoriz = view.create(
'plane3d',
@ -101,6 +94,11 @@
</script>
<!-- plane-sphere -->
<h2>Plane–sphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html">plane–sphere 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -165,7 +163,7 @@
fillColor: 'white',
gradientSecondColor: '#a00050',
highlightStrokeColor: '#600030'
}
}
);
let sphere = view.create(
'sphere3d',
@ -192,6 +190,11 @@
</script>
<!-- sphere-sphere -->
<h2>Sphere–sphere</h2>
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html">sphere–sphere 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -280,5 +283,6 @@
);
}
</script>
</body>
</html>

31
templates/polygon-sampler.html
View File

@ -10,24 +10,13 @@
<h1>3D polygon sampler</h1>
<!-- creating a polygon -->
<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>To make the layout of the vertices easier to see, I’ve set the view’s <code>depthOrderPoints</code> attribute to <code>true</code>.
<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 polygon’s 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 they’re 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -130,6 +119,11 @@
</script>
<!-- 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 polygon’s vertex list.</p>
<div id="polygon-mixed-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -223,6 +217,11 @@
</script>
<!-- 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 they’re triangles.</p>
<div id="planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -326,6 +325,11 @@
</script>
<!-- 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -400,5 +404,6 @@
}
</script>
</body>
</html>

15
templates/sphere-sampler.html
View File

@ -10,6 +10,8 @@
<h1>Sphere sampler</h1>
<!-- creating spheres -->
<h2>Creating spheres</h2>
<p>
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>
<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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -93,7 +90,12 @@
}
</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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -223,5 +225,6 @@
);
}
</script>
</body>
</html>

67
templates/view-demo.html
View File

@ -10,6 +10,8 @@
<h1>View options demo</h1>
<!-- central projection; depth ordering for points -->
<h2>Central projection; depth ordering for points</h2>
<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:
@ -32,38 +34,6 @@
</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">Tait–Bryan 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -181,6 +151,38 @@
</script>
<!-- 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">Tait–Bryan 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">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -248,5 +250,6 @@
inputOriCtl();
}
</script>
</body>
</html>