diff --git a/assignments.html b/assignments.html
index a91258a..221cd56 100644
--- a/assignments.html
+++ b/assignments.html
@@ -64,9 +64,7 @@ <h2 id="literature-review">Literature Review</h2>
 <!-- Consider this year's DCA curatorial themes of [**Invisibility :: Complexity :: Resistance :: Intentionality**](pdf/DCA_theme_2020-2021.pdf), responding to this time in pandemia. -->
 
 <ol>
-<li>You will investigate a <strong>topic</strong> that ideally intersects this year&#39;s topic/theme with something of value to your own research goals. Good research always begins by seeking out key papers and other relevant research resources. </li>
-</ol>
-<ul>
+<li>You will investigate a <strong>topic</strong> that ideally intersects this year&#39;s topic/theme with something of value to your own research goals. Good research always begins by seeking out key papers and other relevant research resources. <ul>
 <li>Some investigative tips:<ul>
 <li>Use Wikipedia to identify <strong>keywords or terms</strong>, questions and issues, foundational publications and controversies, etc. This can also help to make your search more narrow/specific. Look for the edges of a body of research. Wikipedia is an excellet network of conceptual nodes (but also a potential rabbithole). But remember that it is an encyclopedia, and should be used mainly as a guide map.</li>
 <li>Use these terms and publications in <a href="https://scholar.google.com/">Google Scholar</a> and other academic search engines to find for papers that address the questions and issues. Follow <code>cited by</code> and <code>related articles</code> trails to find new leads. Aim to find the most significant (qualitatively &amp; quantitatively) papers. You should be aiming for a collection of 25-50 potentially interesting papers on the topic at this point. </li>
@@ -84,10 +82,8 @@ <h2 id="literature-review">Literature Review</h2>
 </ul>
 </li>
 </ul>
-<ol start="2">
-<li>From this reading list, select 8-12 of them to study in more careful detail as you create an <strong>Annotated Bibliography</strong>. </li>
-</ol>
-<ul>
+</li>
+<li>From this reading list, select 8-12 of them to study in more careful detail as you create an <strong>Annotated Bibliography</strong>. <ul>
 <li>Use skimming/speed reading and organization to identify those that are most interesting or most worthy of more detailed review; and which would constitute an adquate treatment of the topic. </li>
 <li>Aim for diversity. Avoid using the same authors for the majority of the selection. Include distinct and opposing viewpoints if possible. </li>
 <li>Use primary sources where possible (in particular avoid blog posts, news articles, etc.), unless the secondary source adds a significant new idea (in which case you may want to cite both).</li>
@@ -103,6 +99,8 @@ <h2 id="literature-review">Literature Review</h2>
 </ul>
 </li>
 </ul>
+</li>
+</ol>
 <h2 id="video-tutorial">Video Tutorial</h2>
 <p>Research is about <em>sharing</em>. Sometimes, that requires sharing <em>how</em>. </p>
 <ol>
@@ -121,25 +119,21 @@ <h2 id="video-tutorial">Video Tutorial</h2>
 </ol>
 <h2 id="final-paper">Final Paper</h2>
 <ol>
-<li>The final paper can continue from the Literature Review. You may incorporate documenting &amp; contextualize your practice studies or one of your artworks. You could write a &#39;white paper&#39; on a technique. You might re-implement a known research paper, and analyze the results. Or you might discuss more deeply ideas encountered in the bibliography. Perhaps pen a manifesto. </li>
-</ol>
-<ul>
+<li>The final paper can continue from the Literature Review. You may incorporate documenting &amp; contextualize your practice studies or one of your artworks. You could write a &#39;white paper&#39; on a technique. You might re-implement a known research paper, and analyze the results. Or you might discuss more deeply ideas encountered in the bibliography. Perhaps pen a manifesto. <ul>
 <li>Find a few other papers online that have similar focus, and analyze their structure as a guide.</li>
 <li>Find related conferences/symposia/journals/etc. to contrast other papers as well as submission and review criteria. </li>
 <li>You should identify at least one conference/festival/other appropriate venue to submit your research or research-creation. Investigate papers submitted to this in past years, and the submission requirements and review criteria. </li>
 <li>Document these findings in your journal.</li>
 </ul>
-<ol start="2">
-<li>The format will be a very modern, online-first academic article. That is, one designed to be read online, with at least some active components, rather than primarily on paper. The notion of publishing in academia has been rapidly changing, and these changes are accelerating under pandemic conditions.</li>
-</ol>
-<ul>
+</li>
+<li>The format will be a very modern, online-first academic article. That is, one designed to be read online, with at least some active components, rather than primarily on paper. The notion of publishing in academia has been rapidly changing, and these changes are accelerating under pandemic conditions.<ul>
 <li>See <a href="https://www.pubpub.org">https://www.pubpub.org</a> for an example of a modern online-first collaborative publishing venue. Many conferences in recent years have moved over to this format (e.g. NIME, ICLC). </li>
 <li>See <a href="https://distill.pub">https://distill.pub</a> for an example of a modern, web-based peer-reviewed journal with embedded visualizations and interactive components. </li>
 <li>See <a href="https://jar-online.net">https://jar-online.net</a> for a different example more focused on art theory &amp; practice.</li>
 <li>Alternatively, create your own using github, github-pages, html5/css/js, markdown/pandoc, D3.js, webgl or similar. </li>
 <li>Whichever platform is used, the paper should meet academic standards of relevance, clarity of writing, structure, balanced and evidence-based argument, critical thinking, and appropriate level and kinds of academic references. </li>
 </ul>
-<ol start="3">
+</li>
 <li>Post your final paper online -- either inside or linked from your journal.</li>
 </ol>
 <!-- For example: - [Art Machines 2](https://www.cityu.edu.hk/artmachines2/message-symposium-director), Deadline Dec 15. -->
diff --git a/gitnotes.html b/gitnotes.html
index ef7800c..985d1d0 100644
--- a/gitnotes.html
+++ b/gitnotes.html
@@ -125,8 +125,7 @@ <h1 id="git-notes">git notes</h1>
 <p>Git colours in terminal:</p>
 <pre><code class="language-sh">git config --global color.ui auto
 git config --global color.branch auto
-git config --global color.status auto
-</code></pre>
+git config --global color.status auto</code></pre>
 
 <footer>DIGM5010 2021-22</footer>
 </body>
diff --git a/index.html b/index.html
index fd4cee4..eef2652 100644
--- a/index.html
+++ b/index.html
@@ -80,14 +80,11 @@ <h2 id="what-is-digm-5010-foundations">What is DIGM 5010 &quot;Foundations&quot;
 </ul>
 <p>This means:</p>
 <ul>
-<li><p>being aware of the broad range of the field along with its nearer and farther histories, narrow and broader presents, and implicated or possible futures,</p>
-</li>
-<li><p>being able to find, read, and understand the languages through which research is articulated, in both theoretical and practical terms, </p>
-</li>
-<li><p>being able to create work across of a broad range of digital media that is effective and/or innovative.</p>
-<p>Establishing these foundations is ultimately evaluated through the potential to understand, transfer, and extend published research in these fields into new creative applications, recreating or mutating established research results, projects, or works to the specific interests of your research area(s) and creative domain(s). </p>
-</li>
+<li>being aware of the broad range of the field along with its nearer and farther histories, narrow and broader presents, and implicated or possible futures,</li>
+<li>being able to find, read, and understand the languages through which research is articulated, in both theoretical and practical terms, </li>
+<li>being able to create work across of a broad range of digital media that is effective and/or innovative.</li>
 </ul>
+<p>Establishing these foundations is ultimately evaluated through the potential to understand, transfer, and extend published research in these fields into new creative applications, recreating or mutating established research results, projects, or works to the specific interests of your research area(s) and creative domain(s). </p>
 <p><em>(Reading, writing, making!)</em></p>
 <p><strong>Format and evaluation</strong> </p>
 <p>Each weekly meeting will vary in format, but always at the heart is the discussion between all of us. This isn&#39;t a course with a static syllabus of material -- it is an adaptive living system. </p>
@@ -132,11 +129,13 @@ <h3 id="a-question">A question.</h3>
 <h3 id="an-introduction">An introduction.</h3>
 <p>Please add 2-4 slides to introduce yourself in The Google Slide deck here: <a href="https://docs.google.com/presentation/d/1gukRi55omVeeQcjFBdKagZdfs3_pPLlhgsHfG1go4DU/edit">https://docs.google.com/presentation/d/1gukRi55omVeeQcjFBdKagZdfs3_pPLlhgsHfG1go4DU/edit</a></p>
 <ul>
-<li>I suggest a brief (~100 words) of your background and the key words/ideas/questions for your work, with representative images/video etc. </li>
+<li>I suggest a brief (~100 words) of your background and the key words/ideas/questions for your work, with representative images/video etc. <ul>
 <li>You can include a more formal bio, or artist statement, or something more informal about the inspirations that brought you to the program.</li>
 <li>Remember to include your name, and reference details (name, link etc.) for any images or media you add.</li>
 <li>Please be careful not to delete your colleague&#39;s slides!</li>
 </ul>
+</li>
+</ul>
 <h3 id="a-reading">A reading.</h3>
 <p>I said in class we should look at others’ Masters &amp; PhD theses/dissertations for inspiration. Here’s the Masters thesis of Golan Levin, from when he was a student at MIT. He is now a professor at Carnegie Mellon University, and a key figure in the Art &amp; Code community. There’s a lot to draw from this thesis, both theoretically and practically. Have a good read and bring some thoughts and questions for next week:
 <a href="http://www.flong.com/archive/texts/publications/thesis/index.html">http://www.flong.com/archive/texts/publications/thesis/index.html</a></p>
@@ -227,15 +226,15 @@ <h2 id="week-2">Week 2</h2>
 <li>Use these terms and publications in <a href="https://scholar.google.com/">Google Scholar</a>, <a href="https://www.zotero.org">Zotero</a> and other academic search engines to find for papers that address the questions and issues. Follow <code>cited by</code> and <code>related articles</code> trails to find new leads. Aim to find the most significant (qualitatively &amp; quantitatively) papers. You should be aiming for a collection of 25-50 potentially interesting papers on the topic at this point. </li>
 <li>At the same time, look for conferences or journals that are more specific to your topic, and see if they have collections of proceedings online to browse through. </li>
 <li>Not all papers are available as PDFs online. You might be able to find them via <a href="https://www.library.yorku.ca/web/bbl/e-resources/">York Libraries</a> or also communities like <a href="https://www.researchgate.net/">ResearchGate</a>, but do not let this roadblock your progress -- find alternatives to work from instead.</li>
-<li>At this point you may be able to formulate a first draft of a title of the topic or area, perhaps even a key question or problem statement; but don&#39;t worry at this stage if you haven&#39;t yet.</li>
-<li>Collect this list as a <strong>Reading List</strong> along with:<ul>
+<li>At this point you may be able to formulate a first draft of a title of the topic or area, perhaps even a key question or problem statement; but don&#39;t worry at this stage if you haven&#39;t yet.<ul>
+<li>Collect this list as a <strong>Reading List</strong> along with:</li>
+</ul>
+</li>
 <li>The specific topic title or</li>
 <li>The keywords or search terms</li>
 <li>The work-in-progress research question/problem statement/abstract</li>
 </ul>
 </li>
-</ul>
-</li>
 <li><p><a href="https://www.library.yorku.ca/web/ask-services/printing-and-computing/computing/off-campus-access/">York off-campus library access</a></p>
 </li>
 <li><p><a href="http://www.yorku.ca/computing/vpn-choice.html">York VPN links</a></p>
@@ -265,27 +264,19 @@ <h2 id="week-3">Week 3</h2>
 <hr>
 <p>Completing the Yellowtail</p>
 <ul>
-<li><a href="https://drive.google.com/file/d/1YolHbf3uddSZOZ-taQPXe1pF25l5icMg/view?usp=drive_link">Zoom recording</a></li>
-</ul>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="jOXYdMd?editors=0010
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/jOXYdMd?editors=0010
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<li><a href="https://drive.google.com/file/d/1YolHbf3uddSZOZ-taQPXe1pF25l5icMg/view?usp=drive_link">Zoom recording</a><p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="jOXYdMd?editors=0010" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/jOXYdMd?editors=0010">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
+</li>
+</ul>
 <hr>
 <h2 id="week-4">Week 4</h2>
 <p>Oct 5, 2023</p>
 <p>Continuing code sketching, with turtles and mindstorms</p>
 <ul>
-<li><a href="https://drive.google.com/file/d/1_yZch7K50LojaVojQeUDublwyVCf5GAh/view?usp=sharing">Zoom recording</a></li>
-</ul>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="mdaoRKa
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/mdaoRKa
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script><p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="LYMayEE
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/LYMayEE
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script><p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="PoXLmVe
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/PoXLmVe
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<li><a href="https://drive.google.com/file/d/1_yZch7K50LojaVojQeUDublwyVCf5GAh/view?usp=sharing">Zoom recording</a><p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="mdaoRKa" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/mdaoRKa">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script><p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="LYMayEE" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/LYMayEE">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script><p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="PoXLmVe" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/PoXLmVe">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
+</li>
+</ul>
 <hr>
 <h2 id="week-5">Week 5</h2>
 <p>Reading week</p>
@@ -415,6 +406,7 @@ <h2 id="the-call-for-papers">The Call for Papers</h2>
 <h2 id="week-8">Week 8</h2>
 <p>Nov 2, 2023</p>
 <p><a href="steering.html">Steering: vehicles and flocks</a></p>
+<p><a href="https://yorku.zoom.us/rec/share/eQ8bNlcNDwH98beo9TC0vz-52s0oY0xyzXhQN2agr4TMS0YdkDLE-8Nt5MhKCn6k.zmcgRL-i9JIjq8NB">Zoom recording</a></p>
 <ul>
 <li>Work on your paper draft. It <strong>must be submitted before next week&#39;s class</strong></li>
 </ul>
@@ -512,20 +504,16 @@ <h2 id="week-12">Week 12</h2>
 <hr>
 <h2 id="final-paper">Final Paper</h2>
 <ol>
-<li>The final paper continues from the <a href="#annotated-bibliography%5B">Literature Review</a>, and responds to the ]Call for Papers](#the-call-for-papers). </li>
-</ol>
-<ul>
+<li>The final paper continues from the <a href="#annotated-bibliography%5B">Literature Review</a>, and responds to the ]Call for Papers](#the-call-for-papers). <ul>
 <li>Find a few other papers online that have similar focus, and analyze their structure as a guide.</li>
 <li>Find related conferences/symposia/journals/etc. to contrast other papers as well as submission and review criteria. </li>
 <li>You should identify at least one conference/festival/other appropriate venue to submit your research or research-creation. Investigate papers submitted to this in past years, and the submission requirements and review criteria. </li>
 <li>Document these findings in your journal.</li>
 </ul>
-<ol start="2">
+</li>
 <li>Papers can range from 2000-5000 words. You have two choices for publication format. <ol>
 <li>A traditional conference-style paper. Papers must follow the standard template (adapted from ISEA2024) available <a href="https://docs.google.com/document/d/1WZkAN9oaT8pvVVKBRwRRgbwnuKmAU0JJ/edit?usp=share_link&amp;ouid=112275914788197824145&amp;rtpof=true&amp;sd=true">here</a> or <a href="https://www.acm.org/binaries/content/assets/publications/taps/acm_submission_template.docx">here</a></li>
-<li>A very modern, online-first academic article. That is, one designed to be read online, with at least some active components, rather than primarily on paper. The notion of publishing in academia has been rapidly changing, and these changes accelerated during the pandemic.</li>
-</ol>
-<ul>
+<li>A very modern, online-first academic article. That is, one designed to be read online, with at least some active components, rather than primarily on paper. The notion of publishing in academia has been rapidly changing, and these changes accelerated during the pandemic.<ul>
 <li>See <a href="https://www.pubpub.org">https://www.pubpub.org</a> for an example of a modern online-first collaborative publishing venue. Many conferences in recent years have moved over to this format (e.g. NIME, ICLC). </li>
 <li>See <a href="https://distill.pub">https://distill.pub</a> for an example of a modern, web-based peer-reviewed journal with embedded visualizations and interactive components. </li>
 <li>See <a href="https://jar-online.net">https://jar-online.net</a> for a different example more focused on art theory &amp; practice.</li>
@@ -533,6 +521,8 @@ <h2 id="final-paper">Final Paper</h2>
 <li>Whichever platform is used, the paper should meet academic standards of relevance, clarity of writing, structure, balanced and evidence-based argument, critical thinking, and appropriate level and kinds of academic references. </li>
 </ul>
 </li>
+</ol>
+</li>
 <li>Post your final paper online to our final submission form.</li>
 </ol>
 <hr>
@@ -541,7 +531,7 @@ <h2 id="final-paper">Final Paper</h2>
 
 
 Research step 1: survey the field / [literature review](#literature-review-1)
- 
+
 ## Week 4
 Oct 5, 2023
 
@@ -756,12 +746,12 @@ <h2 id="final-paper">Final Paper</h2>
 **[Zoom Recording](hhttps://yorku.zoom.us/rec/share/aK1K9GIV1o7dndxYPUPEDlcjmyedVQM3JgBhB6t9dJV2iVEz2FK_Rpy7w2AZLdQ.qKbhoPp028yMmKHK)**
 
 - [An example JS library for advanced Markov-driven text analysis & resynthesis](https://github.com/dhowe/ritajs#a-simple-sketch)
-  
+
 -----
 ### Week 6
 
 - Project work
- 
+
 Due next week: [Paper-project abstract](#final-paper)
 
 -----
diff --git a/index.md b/index.md
index 1e65276..a275c61 100644
--- a/index.md
+++ b/index.md
@@ -412,6 +412,8 @@ Nov 2, 2023
 
 [Steering: vehicles and flocks](steering.html)
 
+[Zoom recording](https://yorku.zoom.us/rec/share/eQ8bNlcNDwH98beo9TC0vz-52s0oY0xyzXhQN2agr4TMS0YdkDLE-8Nt5MhKCn6k.zmcgRL-i9JIjq8NB)
+
 - Work on your paper draft. It **must be submitted before next week's class**
 
 ---
diff --git a/nodejs.html b/nodejs.html
index c2fa60f..cb8dc19 100644
--- a/nodejs.html
+++ b/nodejs.html
@@ -57,8 +57,7 @@ <h1 id="practice-notes-from-week-3-nodejs">Practice Notes from Week 3: Node.js</
 <p>You can run Node.js as an interactive interpreter (REPL = Read Eval Print Loop, a basic conversational model dating back to teletype days), simply with <code>node</code> on the console. Type in an expression, it will print the result. </p>
 <p>But most of the time Node is used to run a main script, invoked with the filename. Let&#39;s make a simple Node.js script. We can use VS Code (integrated file editor &amp; terminal, with good default syntax colouring). A minimal script:</p>
 <pre><code class="language-javascript"><span class="hljs-comment">// save as `index.js`</span>
-<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span>)
-</code></pre>
+<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span>)</code></pre>
 <p><code>node index.js</code> will run it.  (Hint, tab-complete)</p>
 <p>How about something dangerous?</p>
 <pre><code class="language-js"><span class="hljs-comment">// 1st arg is the file name/path</span>
@@ -76,8 +75,7 @@ <h1 id="practice-notes-from-week-3-nodejs">Practice Notes from Week 3: Node.js</
 <span class="hljs-subst">${content}</span>
 `</span>
 
-fs.writeFileSync(<span class="hljs-string">&quot;index.js&quot;</span>, content, <span class="hljs-string">&quot;utf8&quot;</span>);
-</code></pre>
+fs.writeFileSync(<span class="hljs-string">&quot;index.js&quot;</span>, content, <span class="hljs-string">&quot;utf8&quot;</span>);</code></pre>
 <p>Run a few times. (Hint, up arrow)</p>
 <p>If only we had a way to <strong>parse</strong> &amp; <strong>generate</strong> JS code in a more structured way...  (Hint: babel.parse/babel.generate, ast-types/recast, estraverse/escodegen, <a href="https://github.com/jquery/esprima">esprima</a>)</p>
 <h2 id="npm">NPM</h2>
@@ -100,8 +98,7 @@ <h2 id="express">Express</h2>
 
 <span class="hljs-keyword">const</span> server = app.listen(port, <span class="hljs-function">() =&gt;</span> {
   <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Example app listening at http://localhost:<span class="hljs-subst">${port}</span>`</span>)
-})
-</code></pre>
+})</code></pre>
 <p>To serve HTML pages, there&#39;s quite a bit of plumbing needed in terms of formatting messages, but fortunately <a href="https://expressjs.com/en/starter/static-files.html"><code>express</code> makes this very easy</a>:</p>
 <pre><code class="language-js"><span class="hljs-comment">// assumes &#x27;app&#x27; was created as above</span>
 <span class="hljs-comment">// assumes &#x27;public&#x27; is a subfolder relative to index.js</span>
@@ -109,8 +106,7 @@ <h2 id="express">Express</h2>
 
 <span class="hljs-comment">// alternatively, try with path.join(__dirname, &quot;public&quot;)</span>
 <span class="hljs-comment">// where const path = require(&quot;path&quot;); Node utilities for resolving filepaths</span>
-<span class="hljs-comment">// and __dirname is the path to the folder where index.js lives</span>
-</code></pre>
+<span class="hljs-comment">// and __dirname is the path to the folder where index.js lives</span></code></pre>
 <p>Create an <code>index.html</code> in the /public folder, and add the basic html5 template:</p>
 <pre><code class="language-html"><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span>  
 <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>  
@@ -127,8 +123,7 @@ <h2 id="express">Express</h2>
 <span class="hljs-comment">// (or link to an external &#x27;js&#x27; file using &#x27;&lt;script src=&quot;myscript.js&quot;&gt;</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>&#x27;)
 <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>  
-<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
-</code></pre>
+<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre>
 <p>Great -- now you can see your page at localhost:3000 -- and anyone on your local network can see it too, so long as they know your machine&#39;s IP address (or possibly machine name). E.g. try it on your phone. </p>
 <p>Google: <code>what is my ip?</code></p>
 <p>Or <code>ifconfig</code>/<code>ipconfig</code> in the terminal. </p>
@@ -145,8 +140,7 @@ <h2 id="ws">WS</h2>
 <span class="hljs-comment">// handle each new connections from a client:</span>
 wss.on(<span class="hljs-string">&#x27;connection&#x27;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">client</span>) </span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;I got a connection!&quot;</span>);
-});
-</code></pre>
+});</code></pre>
 <p>Meanwhile, in the browser (&quot;client&quot;) javascript code, add some code to try to connect to this server: </p>
 <pre><code class="language-js">
 <span class="hljs-comment">// connect to websocket at same location as the web-page host:</span>
@@ -166,8 +160,7 @@ <h2 id="ws">WS</h2>
 }
 socket.onclose = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ 
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;websocket disconnected from &quot;</span>+addr); 
-}
-</code></pre>
+}</code></pre>
 <p>Assuming this hand-shaking works, we can start adding some conversational back &amp; forth. In the client, let&#39;s tell the server if our mouse is moving:</p>
 <pre><code class="language-js"><span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">&quot;pointermove&quot;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {
     <span class="hljs-comment">// is the socket available?</span>
@@ -179,8 +172,7 @@ <h2 id="ws">WS</h2>
 
 socket.onmessage = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">msg</span>) </span>{
     <span class="hljs-built_in">console</span>.log(msg.data);
-}
-</code></pre>
+}</code></pre>
 <p>And, in the server, we can make a reply. Now here we have to be more careful: the server might have connections to MANY clients at once, so we need to handle it <em>inside</em> the wss.on(&#39;connection&#39;) handler:</p>
 <pre><code class="language-js">wss.on(<span class="hljs-string">&#x27;connection&#x27;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">client</span>) </span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;I got a connection!&quot;</span>);
@@ -188,7 +180,7 @@ <h2 id="ws">WS</h2>
 
     client.on(<span class="hljs-string">&#x27;message&#x27;</span>, <span class="hljs-function"><span class="hljs-params">msg</span> =&gt;</span> {
         <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;I got a message!&quot;</span>, msg);
-        
+
         <span class="hljs-comment">// reply:</span>
         client.send(<span class="hljs-string">&quot;who?&quot;</span>)
     });
@@ -199,8 +191,7 @@ <h2 id="ws">WS</h2>
   wss.clients.forEach(<span class="hljs-function"><span class="hljs-params">client</span> =&gt;</span> {
       client.send(message);
   });
-}
-</code></pre>
+}</code></pre>
 <h3 id="complex-data-on-websockets">Complex data on websockets</h3>
 <p>To send more structured, arbitrary data back &amp; forth, we can encode it using JSON:</p>
 <pre><code class="language-js"><span class="hljs-comment">// most js objects can be encoded as JSON</span>
@@ -215,8 +206,7 @@ <h3 id="complex-data-on-websockets">Complex data on websockets</h3>
 <span class="hljs-built_in">console</span>.log(str) <span class="hljs-comment">// -&gt; suitable for sending on a websocket</span>
 
 <span class="hljs-keyword">let</span> obj1 = <span class="hljs-built_in">JSON</span>.parse(str) 
-<span class="hljs-built_in">console</span>.log(obj1) <span class="hljs-comment">// it&#x27;s a js object again! </span>
-</code></pre>
+<span class="hljs-built_in">console</span>.log(obj1) <span class="hljs-comment">// it&#x27;s a js object again! </span></code></pre>
 <p>You could even look at the 1st character of a message string (<code>substring(0,1)</code>) and see if it <code>== &quot;{&quot;</code> to detect a potential JSON-encoded message.</p>
 <h3 id="binary-data-on-websockets">Binary data on websockets</h3>
 <p>Sometimes you want to send a LOT of numbers (e.g. an array of sensor measurments, an image, etc.); in this case, using an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> would make more sense. We can do this too. We just need to do a couple more things:</p>
@@ -229,16 +219,14 @@ <h3 id="binary-data-on-websockets">Binary data on websockets</h3>
     } <span class="hljs-keyword">else</span> {
         <span class="hljs-comment">// as before</span>
     }
-}
-</code></pre>
+}</code></pre>
 <p>Similarly in the server:</p>
 <pre><code class="language-js"><span class="hljs-comment">// before calling socket.open():</span>
 socket.binaryType = <span class="hljs-string">&#x27;arraybuffer&#x27;</span>;
 
 client.on(<span class="hljs-string">&#x27;message&#x27;</span>, <span class="hljs-function"><span class="hljs-params">msg</span> =&gt;</span> {
     msg.buffer
-})
-</code></pre>
+})</code></pre>
 <h2 id="project">Project</h2>
 <p>Now we have enough framework to turn a drawing app into a multi-user scenario! </p>
 <p>Your server probably wants to maintain a list of clients (sessions) data. It might collect drawing updates from each client, merge them into a combined &quot;scene&quot; representation, and broadcast that scene to all clients.</p>
@@ -258,15 +246,13 @@ <h2 id="modules">Modules</h2>
 <span class="hljs-built_in">module</span>.exports = {
     <span class="hljs-attr">question</span>: <span class="hljs-string">&quot;what is the meaning of life?&quot;</span>,
     <span class="hljs-attr">answer</span>: <span class="hljs-number">42</span>,
-}
-</code></pre>
+}</code></pre>
 <pre><code class="language-js"><span class="hljs-comment">// save as test.js</span>
 
 <span class="hljs-keyword">const</span> ultimate = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./ultimate&quot;</span>)
 
 <span class="hljs-built_in">console</span>.log(ultimate.question)
-<span class="hljs-built_in">console</span>.log(ultimate.answer)
-</code></pre>
+<span class="hljs-built_in">console</span>.log(ultimate.answer)</code></pre>
 <h3 id="native-modules">Native modules</h3>
 <p>Modules can also be written in C or C++ (&quot;native code&quot;), which is what most of Node&#39;s own libraries are written in.  Why?</p>
 <ul>
diff --git a/sketches.html b/sketches.html
index bbaa99b..394355b 100644
--- a/sketches.html
+++ b/sketches.html
@@ -48,27 +48,14 @@ <h1 id="practice-session-1-interfaces-as-instruments-from-reactive-graphics-to-a
 <p>One of Maeda&#39;s students -- <a href="http://www.flong.com">Golan Levin</a> -- now professor at Carnegie Mellon University, and a key figure in the Art &amp; Code community. His <a href="http://www.flong.com/texts/publications/thesis/">Masters&#39;s thesis</a> focused specifically on the creation of audiovisual instruments, responding directly to Maeda&#39;s project. </p>
 <p>For example, look at Curly and <a href="http://www.flong.com/texts/reports/report_yellowtail/">Yellowtail</a>.</p>
 <p>Here&#39;s our script from this week:</p>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="rNevzbL
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/rNevzbL
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="rNevzbL" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/rNevzbL">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <hr>
 <p>Scripts from last year:</p>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="qBWgeaZ
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/qBWgeaZ
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="VwZqazN
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/VwZqazN
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="wvwQOPm
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/wvwQOPm
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="gOYQyrd
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/gOYQyrd
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="qBWgeaZ" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/qBWgeaZ">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="VwZqazN" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/VwZqazN">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="wvwQOPm" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/wvwQOPm">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="gOYQyrd" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/gOYQyrd">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <ul>
 <li><p>Making prompts: Mutate the code we built in class. </p>
diff --git a/space.html b/space.html
index 8c975de..d617c23 100644
--- a/space.html
+++ b/space.html
@@ -94,8 +94,7 @@ <h3 id="spaces-and-transformations">Spaces and transformations</h3>
  <span class="hljs-comment">// the identity matrix (the transform that has no effect)</span>
  [<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>,
   <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>,
-  <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>]
-</code></pre>
+  <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>]</code></pre>
 <p>When working in 3D space we do the same trick, adding a 4th row to represent translation, and a a 4th column, whose unit vector componets are normally zero and whose translation component is normally 1:</p>
 <pre><code class="language-js"><span class="hljs-comment">// the components of a 4x4 matrix:</span>
 [xx, xy, xz, <span class="hljs-number">0</span>, <span class="hljs-comment">// X axis unit vector</span>
@@ -107,8 +106,7 @@ <h3 id="spaces-and-transformations">Spaces and transformations</h3>
  [<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>,
   <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>,
   <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>,
-  <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>]
-</code></pre>
+  <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>]</code></pre>
 <blockquote>
 <p>Note: This 4th column has certain advantages later when dealing with perspective rendering -- and also happens to be just as efficient on a GPU, where most instructions work on vectors of 4 or 16 elements anyway. </p>
 </blockquote>
@@ -146,14 +144,10 @@ <h2 id="webgl-pipeline">WebGL pipeline</h2>
 <p><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html"><img src="http://duriansoftware.com/joe/media/gl1-pipeline-01.png" alt="Duran Software image of pipeline"></a></p>
 <p>Your task is to organize the CPU code at the start to prepare the vertex/index/texture etc. data and parameters and manage scheduling these; and to write the GPU code for the <strong>vertex shader</strong> and the <strong>fragment shader</strong>. OpenGL/WebGL takes care of the other stages. </p>
 <p>Here, for example, is a minimal script to generate a coloured rectangle that fills the canvas:</p>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="bmmGjL
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/bmmGjL
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="bmmGjL" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/bmmGjL">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <p>Here&#39;s the same example but using the webgl2fundamentals utils to simplify the setup code:</p>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="XWKqypJ
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/XWKqypJ
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="XWKqypJ" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/XWKqypJ">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <h2 id="image-order-and-object-order-rendering">Image-order and object-order rendering</h2>
 <p>There are essentially two main principles of how to render a 2D image of a 3D scene. </p>
@@ -195,8 +189,7 @@ <h3 id="glsl">GLSL</h3>
 <span class="hljs-keyword">uniform</span> <span class="hljs-type">mat4</span> u_viewmatrix_inverse;
 
 <span class="hljs-comment">// eye position is the first three elements of the 4th row of matrix</span>
-<span class="hljs-type">vec3</span> eye = u_viewmatrix_inverse[<span class="hljs-number">3</span>].xyz;
-</code></pre>
+<span class="hljs-type">vec3</span> eye = u_viewmatrix_inverse[<span class="hljs-number">3</span>].xyz;</code></pre>
 <pre><code class="language-js"><span class="hljs-comment">// in Javascript</span>
 <span class="hljs-comment">// get references to the uniforms:</span>
 <span class="hljs-keyword">const</span> u_mouse = gl.getUniformLocation(program, <span class="hljs-string">&quot;u_mouse&quot;</span>);
@@ -213,8 +206,7 @@ <h3 id="glsl">GLSL</h3>
 mat4.lookAt(viewmat, eye, center, up);
 <span class="hljs-keyword">let</span> viewmat_inverse = mat4.invert(mat4.create(), viewmat)
 gl.uniformMatrix4fv(u_viewmatrix, <span class="hljs-literal">false</span>, viewmat);
-gl.uniformMatrix4fv(u_viewmatrix_inverse, <span class="hljs-literal">false</span>, viewmat_inverse);
-</code></pre>
+gl.uniformMatrix4fv(u_viewmatrix_inverse, <span class="hljs-literal">false</span>, viewmat_inverse);</code></pre>
 <h3 id="ray-based-rendering">Ray-based rendering</h3>
 <p>Can be traced back to techniques of 16th century artist
 Albrecht Dürer -- using notions of perspective, optics, and more generally the <strong>simulation</strong> of the physics of light. A full simulation is practically impossible, but conducive effects can be achieved with a modicum of linear algebra and tricks.</p>
@@ -225,8 +217,7 @@ <h3 id="ray-based-rendering">Ray-based rendering</h3>
 <pre><code class="language-js"><span class="hljs-comment">// basic line equation:</span>
 point = origin + direction*distance;
 <span class="hljs-comment">// or more concisely:</span>
-p = ro + rd*t;
-</code></pre>
+p = ro + rd*t;</code></pre>
 <p>In our fragment shader:</p>
 <pre><code class="language-glsl"><span class="hljs-comment">// an input variable that represents the clip space of the fragment</span>
 <span class="hljs-comment">// going from -1 to 1 between the frame edges in X and Y axes:</span>
@@ -250,29 +241,24 @@ <h3 id="ray-based-rendering">Ray-based rendering</h3>
 
 <span class="hljs-comment">// debug tests:</span>
 outColor = <span class="hljs-type">vec4</span>(ro, <span class="hljs-number">1.</span>);
-outColor = <span class="hljs-type">vec4</span>(rd, <span class="hljs-number">1.</span>);
-</code></pre>
+outColor = <span class="hljs-type">vec4</span>(rd, <span class="hljs-number">1.</span>);</code></pre>
 <p><img src="https://2.bp.blogspot.com/-GtcGfy5C5rY/VblG-Gn5saI/AAAAAAAAAKE/KVo3wT_dlhA/s640/ray_casting_tracing.png" alt="nearplane"></p>
 <p>For a more configurable frustum, we would need to pass in the aspect ratio (frame width divided by frame height) and the vertical field of view angle (in radians), and use these to scale our normalized coordinates accordingly. (And to change the view direction, we could multiply this vector by a rotation matrix.)</p>
 <pre><code class="language-glsl"><span class="hljs-keyword">uniform</span> u_aspect, u_fovy;
 
 <span class="hljs-comment">// ray direction</span>
 <span class="hljs-comment">// still pointing in Z axis, but now taking into account aspect ratio and field of view:</span>
-<span class="hljs-type">vec3</span> rd = <span class="hljs-built_in">normalize</span>(<span class="hljs-type">vec3</span>(snorm*<span class="hljs-type">vec2</span>(u_aspect, <span class="hljs-number">1.0</span>)*<span class="hljs-built_in">tan</span>(u_fovy/<span class="hljs-number">2.0</span>), <span class="hljs-number">1.</span>));
-</code></pre>
+<span class="hljs-type">vec3</span> rd = <span class="hljs-built_in">normalize</span>(<span class="hljs-type">vec3</span>(snorm*<span class="hljs-type">vec2</span>(u_aspect, <span class="hljs-number">1.0</span>)*<span class="hljs-built_in">tan</span>(u_fovy/<span class="hljs-number">2.0</span>), <span class="hljs-number">1.</span>));</code></pre>
 <p>Now we have a ray, we just need a way to send that ray through space and see if it hits something -- and we need a something to hit. The simplest something is probably a sphere, which we can define as a point (the sphere centre) and a radius.  Now we just need a way to find out <a href="https://en.wikipedia.org/wiki/Line%E2%80%93sphere_intersection">if (and where) a line and sphere intersect</a>. </p>
 <hr>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="ZEORywY
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/ZEORywY
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="ZEORywY" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/ZEORywY">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <p>Working with direct intersection functions like this is not always possible -- we might be dealing with &#39;participating media&#39; (like looking through a haze or mist), or dealing with complex scenes made of objects that don&#39;t have analytic intersection functions. In these cases we may opt for a <strong>ray marching</strong> method instead: starting from the ray origin (or, from a surface facet for reflections), we move along the ray in small increments until we &#39;hit&#39; some object that changes our lighting. A basic ray marcher will do this in small sized steps, which can be incredibly expensive.</p>
 <h3 id="sphere-tracing">Sphere tracing</h3>
 <p>AKA signed distance-function based rendering. This is a very popular method for generating scenes in fragment shaders. The core idea is to represent all elements of a scene as an implicit distance function, that is, a function which, given a 3D point in space, returns the distance from that point to the object&#39;s nearest surface. For a number of shapes these functions are fairly simple. For example, to compute the distance to a sphere at the origin:</p>
 <pre><code class="language-glsl"><span class="hljs-type">float</span> fSphere(<span class="hljs-type">vec3</span> p, <span class="hljs-type">float</span> r) {
     <span class="hljs-keyword">return</span> <span class="hljs-built_in">length</span>(p) - r;
-}
-</code></pre>
+}</code></pre>
 <blockquote>
 <p>This code is taken from the fantastic collection of functions, examples, and resources at <a href="https://mercury.sexy/hg_sdf/">hg_sdf</a> -- let&#39;s borrow some of these!</p>
 </blockquote>
@@ -301,16 +287,12 @@ <h3 id="sphere-tracing">Sphere tracing</h3>
 tunion = <span class="hljs-built_in">min</span>(t1, t2); 
 tintersection = <span class="hljs-built_in">max</span>(t1, t2);
 tdifference1 = <span class="hljs-built_in">max</span>(t1, -t2);
-tdifference2 = <span class="hljs-built_in">max</span>(t2, -t1);
-</code></pre>
+tdifference2 = <span class="hljs-built_in">max</span>(t2, -t1);</code></pre>
 <p>To move things from the origin we usse domain manipulations, which means, changes of coordinate frame. For example, to render a sphere at +1.0 unit in the X axis, we shift the coordinate space -1.0 unit in X. </p>
-<pre><code class="language-glsl">fSphere(p - <span class="hljs-type">vec3</span>(<span class="hljs-number">1.0</span>, <span class="hljs-number">0.0</span>, <span class="hljs-number">0.0</span>), radius);
-</code></pre>
+<pre><code class="language-glsl">fSphere(p - <span class="hljs-type">vec3</span>(<span class="hljs-number">1.0</span>, <span class="hljs-number">0.0</span>, <span class="hljs-number">0.0</span>), radius);</code></pre>
 <p>Rotations work in the same way. But not scaling, since this breaks the metric of distance; the only safe way to scale is to scale uniformly in all dimensions, and apply the inverse scale to the distance that is computed. Other transformations including symmetries of mirroring: for example, by taking the absolute value of <code>p.x</code> we get a mirror in the YZ plane.  In the same vein, a rather interesting possibility is to apply a modulus operation to space -- that is, folding space by infinite mirrorrs -- which results in repeated shapes! </p>
 <p>So, with a combination of shape functions, shape combinations, and space foldings, a quite extensive range of possibilities emerge! </p>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="zYBaaQX
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/zYBaaQX
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="zYBaaQX" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/zYBaaQX">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <hr>
 <blockquote>
diff --git a/steering.html b/steering.html
index d92f50b..b02a05d 100644
--- a/steering.html
+++ b/steering.html
@@ -97,8 +97,7 @@ <h2 id="vectors">Vectors</h2>
 <span class="hljs-comment">// linear interpolation, a mix or blend along line between a (when t=0) and b (when t=1)</span>
 vec2.lerp(out, a, b, t); 
 <span class="hljs-comment">// place &quot;out&quot; at a random point on a circle of radius &quot;r&quot;</span>
-vec2.random(out, r)
-</code></pre>
+vec2.random(out, r)</code></pre>
 <p><a href="https://github.com/worldmaking/worldmaking.github.io/wiki/JS-Canvas,-Vector,-Matrix-etc.-notes">More cheat-sheets for gl-matrix</a></p>
 <h2 id="locomotion">Locomotion</h2>
 <ul>
@@ -125,8 +124,7 @@ <h2 id="locomotion">Locomotion</h2>
     <span class="hljs-keyword">const</span> limited_len = <span class="hljs-built_in">Math</span>.min(len, limit)
     vec2.scale(out, v, limited_len/len)
     <span class="hljs-keyword">return</span> out
-}
-</code></pre>
+}</code></pre>
 <h2 id="steering">Steering</h2>
 <p>Now all we need to do is work out the force, which can be a sum of multiple forces, external and internal</p>
 <ul>
@@ -144,8 +142,7 @@ <h2 id="steering">Steering</h2>
     out[<span class="hljs-number">0</span>] = <span class="hljs-built_in">Math</span>.mod(v[<span class="hljs-number">0</span>] + w/<span class="hljs-number">2</span>, w) - w/<span class="hljs-number">2</span>;
     out[<span class="hljs-number">1</span>] = <span class="hljs-built_in">Math</span>.mod(v[<span class="hljs-number">1</span>] + h/<span class="hljs-number">2</span>, h) - h/<span class="hljs-number">2</span>;
     <span class="hljs-keyword">return</span> out;
-}
-</code></pre>
+}</code></pre>
 <h2 id="ui">UI</h2>
 <p>We&#39;re starting to get more parameters, and it would be nice to be able to tweak them to see how it changes behviours. For a quick solution, search for the &quot;dat-gui&quot; library in the JS extensions. <a href="https://github.com/dataarts/dat.gui/blob/master/API.md">Here&#39;s the API docs</a>. Cheatsheet:</p>
 <pre><code class="language-js"><span class="hljs-comment">// an container of parameters to control:</span>
@@ -156,8 +153,7 @@ <h2 id="ui">UI</h2>
 <span class="hljs-comment">// create the interface:</span>
 <span class="hljs-keyword">let</span> gui = <span class="hljs-keyword">new</span> dat.GUI({<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;My GUI&#x27;</span>});
 <span class="hljs-comment">// add a slider for params.speed, in the range of 0 to 10, stepping in 1&#x27;s</span>
-gui.add(params, <span class="hljs-string">&#x27;speed&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>);
-</code></pre>
+gui.add(params, <span class="hljs-string">&#x27;speed&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>);</code></pre>
 <p>(If it doesn&#39;t show up, it might be because of the CSS setting: if you have <code>* { overflow: hidden; }</code> change it to <code>body { overflow: hidden; }</code>)</p>
 <h2 id="boids-flocking-swarms">Boids, flocking, swarms</h2>
 <p>Reynolds&#39; most significant contribution combined several steering forces to a proposed model of animal motion emulating flocks, herds and schools. Each agent, or <strong>&quot;boid&quot;</strong>, follows a set of rules based on simple principles:</p>
diff --git a/time.html b/time.html
index 154b7cf..66f5c98 100644
--- a/time.html
+++ b/time.html
@@ -214,13 +214,11 @@ <h2 id="sampling">Sampling</h2>
 <p>An event that occurs repeatedly, like the sun rising and setting, can be described in terms of its repetition period, or cyclic frequency (the one is the inverse of the other).</p>
 <pre><code>period = 1 / frequency
 
-frequency = 1 / period
-</code></pre>
+frequency = 1 / period</code></pre>
 <p>In units:</p>
 <pre><code>seconds = 1 / Hertz
 
-Hertz = 1 / seconds
-</code></pre>
+Hertz = 1 / seconds</code></pre>
 <img src="img/timescales_of_music.png" />
 
 
@@ -320,26 +318,21 @@ <h4 id="unit-generators">Unit Generators</h4>
         SinOsc.ar(rrand(400, 800), 0, 0.2) * Line.kr(1, 0, 1, doneAction: 2)
     )
 }).play;
-)
-</code></pre>
+)</code></pre>
 <h4 id="sequencer">Sequencer</h4>
 <p>A separate program, called the <strong>sequencer</strong>, receives score data, and for each note, the sequencer &quot;plays&quot; the corresponding instrument program, with the note parameters to specify frequency, volume, duration etc. The outputs of each note program are mixed into an output stream, which is finally converted into sound.  Score events included:</p>
 <ul>
-<li><p>Specifying the generation of <em>wavetables</em>, or other static data.</p>
-</li>
-<li><p>Specifying the time scale / tempo.</p>
-</li>
-<li><p>Specify note events (with parameters including instrument, duration, and other instrument-specific controls). </p>
-</li>
-<li><p>Punctuation: </p>
-<ul>
+<li>Specifying the generation of <em>wavetables</em>, or other static data.</li>
+<li>Specifying the time scale / tempo.</li>
+<li>Specify note events (with parameters including instrument, duration, and other instrument-specific controls). </li>
+<li>Punctuation: <ul>
 <li>rests, </li>
 <li>synchronization points, </li>
 <li>end of the work.</li>
 </ul>
-<h4 id="acoustic-compiler">Acoustic compiler</h4>
 </li>
 </ul>
+<h4 id="acoustic-compiler">Acoustic compiler</h4>
 <p>In summary, Max Matthews&#39; <em>Music-III</em> system comprises/requires:</p>
 <ul>
 <li>A set of pre-defined &quot;unit generators&quot;<ul>
diff --git a/vehicles.html b/vehicles.html
index 1de788e..1e1120e 100644
--- a/vehicles.html
+++ b/vehicles.html
@@ -47,7 +47,6 @@ <h2 id="tortoises">Tortoises</h2>
 <p>Perhaps the earliest example of cohabiting human and machine intelligent agents are Grey Walter&#39;s Tortoises. </p>
 <p>In the late 1940&#39;s and early 1950&#39;s, Grey Walter pioneered the engineering of autonomous agents, as early examples of self-directed robots. </p>
 <iframe width="720" height="540" src="https://youtube.com/embed/lLULRlmXkKo" frameborder="0" allowfullscreen></iframe>
-
 <iframe width="720" height="540" src="https://youtube.com/embed/wQE82derooc" frameborder="0" allowfullscreen></iframe>
 
 <p>This wasn&#39;t just tinkering at home however, there was an explicit agenda of understanding human and machine together, as part of a wider field of Cybernetics. Remarkably, this direction of more biologically-inspired and practically-integrated research was largely forgotten as academic efforts for artificial intelligence shifted sharply toward symbolic thinking, until the &quot;rediscovery&quot; of neural networks with deep learning in the last decades. </p>
@@ -95,18 +94,13 @@ <h2 id="vehicles">Vehicles</h2>
 <p>Vehicles have also been constructed in hardware of course // see examples <a href="http://www.ini.uzh.ch/~conradt/research/BraitenbergVehicle/">here</a>, <a href="http://blog.electricbricks.com/en/2010/05/vehiculos-braitenberg-nxt-g/">here</a>, <a href="http://tinkerlog.com/2009/06/07/mini-braitenberg-vehicle/">here</a>.</p>
 <hr>
 <h3 id="past-class-scripts">Past class scripts:</h3>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="VwaOVdZ
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/VwaOVdZ
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="VwaOVdZ" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/VwaOVdZ">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <ul>
-<li><p>Prompt! See if you can extend our vehicles code into later models from the book. </p>
-<p>For example:</p>
-</li>
+<li>Prompt! See if you can extend our vehicles code into later models from the book. </li>
 </ul>
-<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="XWKrJoG
-" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/XWKrJoG
-">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<p>For example:</p>
+<p class="codepen" data-height="520" data-default-tab="js,result" data-user="grrrwaaa" data-slug-hash="XWKrJoG" data-preview="true"><span><a href="https://codepen.io/grrrwaaa/pen/XWKrJoG">Open pen.</a></span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <ul>
 <li>Tweak factors for each force component (use Console to live tweak!)</li>