first commit

diff --git a/example.html b/example.html
index 0883092c7d6a4fb76a6b728b008e1ebbe8f21428..28ab5d09c4f0200bf68cb87c460ca142e94e8a1b 100644 (file)
--- a/example.html
+++ b/example.html
@@ -63,9 +63,9 @@ body {
 
 </div>
 
-<script src="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=index.js;hb=HEAD"></script>
+<script src="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=index.js;hb=refs/heads/quaternions"></script>
 <script>
-fetch('https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=index.js;hb=HEAD')
+fetch('https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=index.js;hb=refs/heads/quaternions')
     .then(res => res.text())
     .then(code => {
         const codeEl = document.querySelector('#code-viewer code');

diff --git a/index.html b/index.html
index f2f8a471d230d650008dc9b477740c85da26af79..b81f0bb95ca94380cd9707846f34ec4b63ce26f8 100644 (file)
--- a/index.html
+++ b/index.html
@@ -1,9 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Canvas + Code</title>
 <style>
+/* Container grid: canvas + code side by side */
+#container {
+    display: grid;
+    grid-template-columns: 800px 1fr; /* canvas fixed, code fills remaining space */
+    gap: 10px;
+    height: 100vh; /* full viewport height */
+    align-items: start;
+}
+
+/* Canvas itself */
 #game {
+    margin: 0;
+    padding: 0;
     display: block;
-    margin: 0 auto;
+}
+
+/* Code viewer */
+#code-viewer {
+    margin: 0;
+    box-sizing: border-box; /* include padding in height */
+    overflow: auto; /* scroll if content too long */
+    font-family: monospace;
+    background-color: #f5f5f5;
+    white-space: pre-wrap;
+    max-height: 600px;
 }
 </style>
+</head>
+<body>
+
+<div id="container">
+    <canvas id="game"></canvas>
+    <pre id="code-viewer"> </pre>
+</div>
+
+<script src="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=index.js;hb=refs/heads/quaternions"></script>
+<script>
+// Load the contents of index.js and display it in the <pre>
+fetch('https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=index.js;hb=refs/heads/quaternions')
+    .then(res => res.text())
+    .then(code => {
+        document.getElementById('code-viewer').textContent = code;
+    })
+    .catch(err => console.error('Could not load index.js:', err));
+</script>
+
+</body>
+</html>
 
-<canvas id="game"></canvas>
-<script src="index.js"></script>

diff --git a/index.js b/index.js
index 17f28704b3424b7c205831d93befbaa10666f85c..933682849cca40fd1edfa0cb796e33f67fe36538 100644 (file)
--- a/index.js
+++ b/index.js
@@ -39,7 +39,7 @@ const AXIS_MODES = [
     ["x","y"], ["y","z"], ["x","z"],
     ["x","y","z"]
 ];
-let axisModeIndex = AXIS_MODES.length - 1;
+let axisModeIndex = AXIS_MODES.length-1;
 let activeAxes = AXIS_MODES[axisModeIndex];
 
 /* ===================== CAMERA ===================== */

diff --git a/rendered.html b/rendered.html
index 45d3678bdb4d366da066b4edb010f1387eb4d521..6dc2f8f9ed350ea6e97bce1d21a844233b0de6a2 100644 (file)
--- a/rendered.html
+++ b/rendered.html
@@ -887,6 +887,8 @@ function sendHeight() {
 window.addEventListener("load", sendHeight);
 window.addEventListener("resize", sendHeight);
 </script>
+
+
 </head>
 <body class="article">
 <div id="header">
@@ -899,7 +901,7 @@ window.addEventListener("resize", sendHeight);
 <p>click <a href="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=example.html;hb=HEAD"">here</a> for an interactive example</p>
 </div>
 <div class="paragraph">
-<p>A good explaination of how 3D works.</p>
+<p>A good explaination how 3D works.</p>
 </div>
 <div class="admonitionblock note">
 <table>
@@ -908,9 +910,9 @@ window.addEventListener("resize", sendHeight);
 <i class="fa icon-note" title="Note"></i>
 </td>
 <td class="content">
-This started off as code from Tsoding, I used chatgpt to change
-      specific things, and also made some of my own changes. This is a learning
-      tool! not something I wrote off the top of my head
+This started off as code from Tsoding, and then I used chatgpt to change
+      specific things. This is a learning tool! not something I wrote off the
+      top of my head
 </td>
 </tr>
 </table>
@@ -930,19 +932,6 @@ This started off as code from Tsoding, I used chatgpt to change
  -&gt; screen</pre>
 </div>
 </div>
-<div class="admonitionblock note">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-note" title="Note"></i>
-</td>
-<td class="content">
-Some parts of these pipeline may be left out if that part of the pipeline
-      is not needed
-</td>
-</tr>
-</table>
-</div>
 </div>
 </div>
 <div class="sect1">
@@ -967,9 +956,6 @@ y' &amp;= y/z
 <h2 id="_vertex_rotation_formulas">Vertex Rotation Formulas</h2>
 <div class="sectionbody">
 <div class="paragraph">
-<p>click <a href="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=example.html;hb=refs/heads/simple-rotation">here</a> for an interactive example</p>
-</div>
-<div class="paragraph">
 <p>Rotate vector formula for x-axis (y-z plane):</p>
 </div>
 <div class="stemblock">
@@ -1071,9 +1057,6 @@ angles.</p>
 <h2 id="_quaternions">Quaternions</h2>
 <div class="sectionbody">
 <div class="paragraph">
-<p>click <a href="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=example.html;hb=refs/heads/quaternions">here</a> for an interactive example</p>
-</div>
-<div class="paragraph">
 <p>Quaternions allow you to rotate smoothly around multiple axes without gimbal
 lock. Chat-gpt rewrote the code to use quaternions. Here are some of the
 replys about <a href="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=docs/chatgpt-dump/quaternions.html;hb=HEAD">quaternions</a>.</p>
@@ -1401,85 +1384,6 @@ v' = q \; v_q \; q^{-1}
 </div>
 </div>
 <div class="sect1">
-<h2 id="_simple_clickable_object">Simple clickable object</h2>
-<div class="sectionbody">
-<div class="paragraph">
-<p>click <a href="https://nyquistdev.net/git/?p=basic-3d-example.git;a=blob_plain;f=example.html;hb=refs/heads/clickable">here</a> for an interactive example</p>
-</div>
-<div class="paragraph">
-<p>This does not account for the rotation of the object but it does check to see if
-your mouse is within the rectangular bounds of the mesh.</p>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>finding the min and max values for x and y of the mesh:</p>
-</li>
-</ol>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="pygments highlight"><code data-lang="js"><span></span><span class="tok-kd">function</span><span class="tok-w"> </span><span class="tok-nx">computeBounds</span><span class="tok-p">(</span><span class="tok-nx">mesh</span><span class="tok-p">)</span><span class="tok-w"> </span><span class="tok-p">{</span>
-<span class="tok-w">    </span><span class="tok-kd">let</span><span class="tok-w"> </span><span class="tok-nx">min</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">x</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-kc">Infinity</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">y</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-kc">Infinity</span><span class="tok-p">}</span>
-<span class="tok-w">    </span><span class="tok-kd">let</span><span class="tok-w"> </span><span class="tok-nx">max</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">x</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-o">-</span><span class="tok-kc">Infinity</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">y</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-o">-</span><span class="tok-kc">Infinity</span><span class="tok-p">}</span>
-
-<span class="tok-w">    </span><span class="tok-k">for</span><span class="tok-w"> </span><span class="tok-p">(</span><span class="tok-kd">const</span><span class="tok-w"> </span><span class="tok-nx">v</span><span class="tok-w"> </span><span class="tok-k">of</span><span class="tok-w"> </span><span class="tok-nx">mesh</span><span class="tok-p">)</span><span class="tok-w"> </span><span class="tok-p">{</span>
-<span class="tok-w">        </span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-nb">Math</span><span class="tok-p">.</span><span class="tok-nx">min</span><span class="tok-p">(</span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">v</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">)</span>
-<span class="tok-w">        </span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-nb">Math</span><span class="tok-p">.</span><span class="tok-nx">min</span><span class="tok-p">(</span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">v</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">)</span>
-
-<span class="tok-w">        </span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-nb">Math</span><span class="tok-p">.</span><span class="tok-nx">max</span><span class="tok-p">(</span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">v</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">)</span>
-<span class="tok-w">        </span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-nb">Math</span><span class="tok-p">.</span><span class="tok-nx">max</span><span class="tok-p">(</span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">v</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">)</span>
-<span class="tok-w">    </span><span class="tok-p">}</span>
-<span class="tok-w">    </span><span class="tok-k">return</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">min</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">max</span><span class="tok-p">}</span>
-<span class="tok-p">}</span></code></pre>
-</div>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>Define the box corners of the rect for the mesh</p>
-</li>
-</ol>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="pygments highlight"><code data-lang="js"><span></span><span class="tok-kd">function</span><span class="tok-w"> </span><span class="tok-nx">boundingBoxCorners</span><span class="tok-p">({</span><span class="tok-nx">min</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">max</span><span class="tok-p">})</span><span class="tok-w"> </span><span class="tok-p">{</span>
-<span class="tok-w">    </span><span class="tok-k">return</span><span class="tok-w"> </span><span class="tok-p">{</span>
-<span class="tok-w">        </span><span class="tok-nx">bottom</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">left</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">x</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">y</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">},</span><span class="tok-w"> </span><span class="tok-nx">right</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">x</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">y</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">}},</span>
-<span class="tok-w">        </span><span class="tok-nx">top</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">left</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">x</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">y</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">},</span><span class="tok-w"> </span><span class="tok-nx">right</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-p">{</span><span class="tok-nx">x</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">max</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-p">,</span><span class="tok-w"> </span><span class="tok-nx">y</span><span class="tok-o">:</span><span class="tok-w"> </span><span class="tok-nx">min</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-p">}},</span>
-
-<span class="tok-w">    </span><span class="tok-p">}</span>
-<span class="tok-p">}</span></code></pre>
-</div>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>Check to see if the mouse is in the rect in the game loop. If it is, and the
-mouse button is down, then you can move the object</p>
-</li>
-</ol>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="pygments highlight"><code data-lang="js"><span></span><span class="tok-nx">inObject</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w">  </span><span class="tok-p">(</span>
-<span class="tok-w">    </span><span class="tok-nx">mousePos</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-w"> </span><span class="tok-o">&gt;</span><span class="tok-w"> </span><span class="tok-nx">rect</span><span class="tok-p">.</span><span class="tok-nx">top</span><span class="tok-p">.</span><span class="tok-nx">left</span><span class="tok-p">.</span><span class="tok-nx">x</span>
-<span class="tok-w">    </span><span class="tok-o">&amp;&amp;</span>
-<span class="tok-w">    </span><span class="tok-nx">mousePos</span><span class="tok-p">.</span><span class="tok-nx">x</span><span class="tok-w"> </span><span class="tok-o">&lt;</span><span class="tok-w"> </span><span class="tok-nx">rect</span><span class="tok-p">.</span><span class="tok-nx">top</span><span class="tok-p">.</span><span class="tok-nx">right</span><span class="tok-p">.</span><span class="tok-nx">x</span>
-<span class="tok-w">    </span><span class="tok-o">&amp;&amp;</span>
-<span class="tok-w">    </span><span class="tok-nx">mousePos</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-w"> </span><span class="tok-o">&gt;</span><span class="tok-w"> </span><span class="tok-nx">rect</span><span class="tok-p">.</span><span class="tok-nx">top</span><span class="tok-p">.</span><span class="tok-nx">left</span><span class="tok-p">.</span><span class="tok-nx">y</span>
-<span class="tok-w">    </span><span class="tok-o">&amp;&amp;</span>
-<span class="tok-w">    </span><span class="tok-nx">mousePos</span><span class="tok-p">.</span><span class="tok-nx">y</span><span class="tok-w"> </span><span class="tok-o">&lt;</span><span class="tok-w"> </span><span class="tok-nx">rect</span><span class="tok-p">.</span><span class="tok-nx">bottom</span><span class="tok-p">.</span><span class="tok-nx">right</span><span class="tok-p">.</span><span class="tok-nx">y</span>
-<span class="tok-p">)</span>
-
-<span class="tok-k">if</span><span class="tok-w"> </span><span class="tok-p">(</span><span class="tok-nx">mouseDown</span><span class="tok-w"> </span><span class="tok-o">&amp;&amp;</span><span class="tok-w"> </span><span class="tok-nx">inObject</span><span class="tok-p">)</span><span class="tok-w"> </span><span class="tok-nx">canMoveObject</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-kc">true</span>
-
-<span class="tok-k">if</span><span class="tok-w"> </span><span class="tok-p">(</span><span class="tok-o">!</span><span class="tok-nx">mouseDown</span><span class="tok-p">)</span><span class="tok-w"> </span><span class="tok-nx">canMoveObject</span><span class="tok-w"> </span><span class="tok-o">=</span><span class="tok-w"> </span><span class="tok-kc">false</span></code></pre>
-</div>
-</div>
-</div>
-</div>
-<div class="sect1">
 <h2 id="_links">Links</h2>
 <div class="sectionbody">
 <div class="ulist">