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

Add return links

Browse Source
This commit is contained in:
Aaron Fenyes 2024-10-22 01:15:53 -07:00
parent b39efb5973
commit 746f5eb83d
9 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
challenges/octahedron.html
View File

@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<a href="../">↩ Index page</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>
@ -129,5 +131,6 @@
); );
} }
</script> </script>
</body> </body>
</html> </html>

11
challenges/sphere-contours.html
View File

@ -8,16 +8,14 @@
</head> </head>
<body> <body>
<a href="../">↩ Index page</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`
@ -89,6 +87,11 @@
</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,6 +8,8 @@
</head> </head>
<body> <body>
<a href="../">↩ Writing list</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,6 +8,8 @@
</head> </head>
<body> <body>
<a href="../">↩ Index page</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>

2
templates/glider-sampler.html
View File

@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<a href="../">↩ Index page</a>
<h1>3D glider sampler</h1> <h1>3D glider sampler</h1>
<!-- line glider --> <!-- line glider -->

2
templates/intersection-sampler.html
View File

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

2
templates/polygon-sampler.html
View File

@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<a href="../">↩ Index page</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,6 +8,8 @@
</head> </head>
<body> <body>
<a href="../">↩ Index page</a>
<h1>Sphere sampler</h1> <h1>Sphere sampler</h1>
<!-- creating spheres --> <!-- creating spheres -->

2
templates/view-demo.html
View File

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