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

Compare commits

base: Vectornaut:46cb373870ea41d900472eb376407f91bd606b10
Branches Tags
Vectornaut:main
..
compare: Vectornaut:b39efb59733e2a1b18143d5952925f37e00b185d
Branches Tags
Vectornaut:main

No commits in common. "46cb373870ea41d900472eb376407f91bd606b10" and "b39efb59733e2a1b18143d5952925f37e00b185d" have entirely different histories.
46cb373870 ... b39efb5973

9 changed files with 5 additions and 25 deletions
Show Stats Expand all files Collapse all files

3
challenges/octahedron.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>Octahedron challenge</h1> <h1>Octahedron challenge</h1>
<p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> and <a href="https://jsxgraph.org/docs/symbols/Polygon3D.html#constructor"><code>Polygon3D</code></a> elements? Don’t worry about including the colors; they’re just to emphasize how the polygons fit together.</p> <p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> and <a href="https://jsxgraph.org/docs/symbols/Polygon3D.html#constructor"><code>Polygon3D</code></a> elements? Don’t worry about including the colors; they’re just to emphasize how the polygons fit together.</p>
<p>The <code>create</code> call for <code>Polygon3D</code> isn’t documented, but you can look at the polygon sampler for examples.</p> <p>The <code>create</code> call for <code>Polygon3D</code> isn’t documented, but you can look at the polygon sampler for examples.</p>
@ -131,6 +129,5 @@
); );
} }
</script> </script>
</body> </body>
</html> </html>

11
challenges/sphere-contours.html
View File

@ -8,14 +8,16 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>Sphere contour challenge</h1> <h1>Sphere contour challenge</h1>
<p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Sphere3D.html#constructor"><code>Sphere3D</code></a>, <code>Plane3D</code>, and <a href="https://jsxgraph.org/docs/symbols/IntersectionCircle3D.html"><code>IntersectionCircle3D</code></a> elements? Don’t worry about including the colors; they’re just to clarify what happens when you move the center of the sphere.</p> <p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Sphere3D.html#constructor"><code>Sphere3D</code></a>, <code>Plane3D</code>, and <a href="https://jsxgraph.org/docs/symbols/IntersectionCircle3D.html"><code>IntersectionCircle3D</code></a> elements? Don’t worry about including the colors; they’re just to clarify what happens when you move the center of the sphere.</p>
<p>The <code>visible</code> attribute will come in handy.</p> <p>The <code>visible</code> attribute will come in handy.</p>
<p>Since the <code>create</code> call for <code>Plane3D</code> isn’t documented, I’ve included an <a href="#create-plane">example</a> below.</p> <p>Since the <code>create</code> call for <code>Plane3D</code> isn’t documented, I’ve included an <a href="#create-plane">example</a> below.</p>
<div id="sphere-contours" class="jxgbox" style="width:600px; height:600px"></div> <div id="sphere-contours" class="jxgbox" style="width:600px; height:600px"></div>
<h2 id="create-plane">How to create a 3D plane</h2>
<p>A <code>Plane3D</code> is created from a base point and two vectors. The base point can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>. The vectors are given in coordinates.</p>
<div id="plane-example" class="jxgbox" style="width:600px; height:600px"></div>
<!-- a solution to the sphere contour challenge --> <!-- a solution to the sphere contour challenge -->
<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`
@ -87,11 +89,6 @@
</script> </script>
<!-- how to create a 3D plane --> <!-- how to create a 3D plane -->
<h2 id="create-plane">How to create a 3D plane</h2>
<p>A <code>Plane3D</code> is created from a base point and two vectors. The base point can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>. The vectors are given in coordinates.</p>
<div id="plane-example" 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

2
index.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../../writing.html#jsxgraph-3d-workshop">↩ Back to writing</a>
<h1>A hands-on tour of some new 3D elements</h1> <h1>A hands-on tour of some new 3D elements</h1>
<p>These materials are from a <a href="https://jsxgraph.org/conf2024/program/fenyes/">short workshop</a> at the 2024 International JSXGraph Conference. You can watch a <a href="https://www.youtube.com/watch?v=gwc0BrLjuiI">video</a> of the workshop to learn more about how they were used. They’re available here, in a <a href="https://code.studioinfinity.org/Vectornaut/jsxgraph-3d-workshop">public Git repository</a>, and (for the templates) on JSFiddle.</p> <p>These materials are from a <a href="https://jsxgraph.org/conf2024/program/fenyes/">short workshop</a> at the 2024 International JSXGraph Conference. You can watch a <a href="https://www.youtube.com/watch?v=gwc0BrLjuiI">video</a> of the workshop to learn more about how they were used. They’re available here, in a <a href="https://code.studioinfinity.org/Vectornaut/jsxgraph-3d-workshop">public Git repository</a>, and (for the templates) on JSFiddle.</p>

2
templates/circle-sampler.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>3D circle sampler</h1> <h1>3D circle sampler</h1>
<p>A <a href="https://jsxgraph.org/docs/symbols/Circle3D.html"><code>Circle3D</code></a> element is created from a center, a normal vector, and a radius. The center can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>. The normal vector is given in coordinates.</p> <p>A <a href="https://jsxgraph.org/docs/symbols/Circle3D.html"><code>Circle3D</code></a> element is created from a center, a normal vector, and a radius. The center can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>. The normal vector is given in coordinates.</p>

4
templates/glider-sampler.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>3D glider sampler</h1> <h1>3D glider sampler</h1>
<!-- line glider --> <!-- line glider -->
@ -301,7 +299,7 @@
<!-- parametric surface glider --> <!-- parametric surface glider -->
<h2>Parametric surface glider</h2> <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. Gliders on parametric surfaces have been available for a long time; this summer’s work just made their motion more intuitive by keeping them inside the surface’s parameter range.</p> <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> <div id="surface-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript"> <script type="text/javascript">

2
templates/intersection-sampler.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>3D intersection sampler</h1> <h1>3D intersection sampler</h1>
<!-- plane-plane --> <!-- plane-plane -->

2
templates/polygon-sampler.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>3D polygon sampler</h1> <h1>3D polygon sampler</h1>
<!-- creating a polygon --> <!-- creating a polygon -->

2
templates/sphere-sampler.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>Sphere sampler</h1> <h1>Sphere sampler</h1>
<!-- creating spheres --> <!-- creating spheres -->

2
templates/view-demo.html
View File

@ -8,8 +8,6 @@
</head> </head>
<body> <body>
<a href="../">↩ Back to index</a>
<h1>View options demo</h1> <h1>View options demo</h1>
<!-- central projection; depth ordering for points --> <!-- central projection; depth ordering for points -->