From 5c068807fca6cbfbcc567b29ab65c958f7af4a04 Mon Sep 17 00:00:00 2001
From: Juan Carlos Ponce Campuzano <37394697+jcponce@users.noreply.github.com>
Date: Thu, 11 Jul 2024 19:17:51 +1000
Subject: [PATCH] Update index.html

---
 sketches/index.html | 131 ++++++++++++++++++++++++++++----------------
 1 file changed, 83 insertions(+), 48 deletions(-)

diff --git a/sketches/index.html b/sketches/index.html
index 04976893..6f0e21ea 100644
--- a/sketches/index.html
+++ b/sketches/index.html
@@ -95,19 +95,15 @@ <h2>Sketches</h2>
           <div class="inner">
 
             <h3>Introduction</h3>
-            <p>I learned the basics of <a href="https://processing.org/" target="_blank">Processing</a>
-              and <a href="https://p5js.org/" target="_blank">p5.js</a> thanks to
-              <a href="https://shiffman.net/" target="_blank">Daniel Shiffman</a> in his fantastic
-              YouTube channel 
-              <a href="https://www.youtube.com/user/shiffman" target="_blank">The Coding Train 🚂🌈</a>. Now
-              I use it mainly for designing mathematics and physics visualizations,
-              simulations or interactive applets for teaching mathematics at
-              different levels of education and also just for fun!
+            <p>I learned the basics of <a href="https://processing.org/" target="_blank">Processing</a> 
+              and <a href="https://p5js.org/" target="_blank">p5.js</a> from Daniel Shiffman's fantastic YouTube channel, 
+              <a href="https://www.youtube.com/user/shiffman" target="_blank">The Coding Train 🚂🌈</a>.
+              Now, I mainly use these tools to design visualizations, simulations, and interactive applets for teaching
+              mathematics and physics at various educational levels, as well as for fun!
             </p>
 
-            <p>Here you can find a selection of p5.js sketches that I have made since 2018. 
-              Just click on the image
-              to open it!
+            <p>
+              Here, you can explore a selection of my p5.js sketches created since 2018. Click on any image to view it!
             </p>
 
             <hr>
@@ -132,30 +128,28 @@ <h3>Introduction</h3>
                 <div class="col-3"><span class="image fit"><a href="https://preview.p5js.org/jcponce/present/bhknzK_j_"
                       target="_blank"><img src="imgs/cflower.jpg" alt></a></span></div>
 
-                <div class="col-3"><span class="image fit"><a href="collatz" target="_blank"><img
-                        src="imgs/collatz.jpg" alt></a></span></div>
+                <div class="col-3"><span class="image fit"><a href="collatz" target="_blank"><img src="imgs/collatz.jpg"
+                        alt></a></span></div>
                 <div class="col-3"><span class="image fit"><a href="https://preview.p5js.org/jcponce/present/e1lijazsL"
-                      target="_blank"><img src="imgs/benham-disk.jpg" alt=""  style="border: 1px solid black;"/></a></span></div>
+                      target="_blank"><img src="imgs/benham-disk.jpg" alt=""
+                        style="border: 1px solid black;" /></a></span></div>
                 <div class="col-3"><span class="image fit"><a href="https://preview.p5js.org/jcponce/present/wnJNYntbl"
                       target="_blank"><img src="imgs/throcoid.jpg" alt="" /></a></span></div>
                 <div class="col-3"><span class="image fit"><a href="https://preview.p5js.org/jcponce/present/zDklnrWxv"
-                      target="_blank"><img src="imgs/pine-tree.jpg" alt=""  style="border: 1px solid black;"/></a></span></div>
+                      target="_blank"><img src="imgs/pine-tree.jpg" alt=""
+                        style="border: 1px solid black;" /></a></span></div>
+
 
-                <div class="col-3"><span class="image fit"><a href="shaders/topology-2/" target="_blank"><img
-                        src="imgs/topology.jpg" alt="" /></a></span></div>
                 <div class="col-3"><span class="image fit"><a href="matrixrain/" target="_blank"><img
                         src="imgs/matrix.jpg" alt="" /></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="shaders/chladni-shader/" target="_blank"><img
-                        src="imgs/chladni.jpg" alt="" /></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="moebius" target="_blank"><img
-                        src="imgs/moebius.jpg" alt="" /></a></span></div>
+
+                <div class="col-3"><span class="image fit"><a href="moebius" target="_blank"><img src="imgs/moebius.jpg"
+                        alt="" /></a></span></div>
 
                 <div class="col-3"><span class="image fit"><a href="mystery-curves-sknow/" target="_blank"><img
-                        src="imgs/mystery-sknow.jpg" alt=""  style="border: 1px solid black;"/></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="shaders/noise-rings/" target="_blank"><img
-                        src="imgs/noise-rings.jpg" alt="" /></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="shaders/fractal/" target="_blank"><img
-                        src="imgs/fractal.jpg" alt="" /></a></span></div>
+                        src="imgs/mystery-sknow.jpg" alt="" style="border: 1px solid black;" /></a></span></div>
+
+
                 <div class="col-3"><span class="image fit"><a href="../math2400/sketches/fft/" target="_blank"><img
                         src="imgs/fft.jpg" alt="" /></a></span></div>
 
@@ -163,6 +157,52 @@ <h3>Introduction</h3>
                         src="imgs/noise-filed-col.jpg" alt="" /></a></span></div>
                 <div class="col-3"><span class="image fit"><a href="cubes-drop/" target="_blank"><img
                         src="imgs/cubes-drop.jpg" alt="" /></a></span></div>
+
+
+
+                <div class="col-3"><span class="image fit"><a href="tesseract/" target="_blank"><img
+                        src="imgs/tesseract.jpg" alt="" /></a></span></div>
+                <div class="col-3"><span class="image fit"><a href="infinite-monkey/" target="_blank"><img
+                        src="imgs/monkey.jpg" alt="" /></a></span></div>
+
+
+
+                <div class="col-3"><span class="image fit"><a href="zeros-ones-matrix/" target="_blank"><img
+                        src="imgs/binary-matrix.jpg" alt="" /></a></span></div>
+
+                <div class="col-3"><span class="image fit"><a href="monkey-pi-digits/" target="_blank"><img
+                        src="imgs/monkey-pi.jpg" alt="" /></a></span></div>
+
+
+                <div class="col-3"><span class="image fit"><a href="apollonian-interactive/" target="_blank"><img
+                        src="imgs/apollonian-pi.jpg" alt="" style="border: 1px solid black;" /></a></span></div>
+                <div class="col-3"><span class="image fit"><a href="timetravelling/" target="_blank"><img
+                        src="imgs/timetravelling.jpg" alt="" /></a></span></div>
+
+                <div class="col-3"><span class="image fit"><a href="torus-moire/" target="_blank"><img
+                        src="imgs/torus-moire.jpg" alt="" /></a></span></div>
+              </div>
+            </div>
+
+
+            <hr>
+
+            <h3>Shaders</h3>
+
+            <div class="box alt">
+              <div class="row gtr-50 gtr-uniform">
+
+                <div class="col-3"><span class="image fit"><a href="shaders/topology-2/" target="_blank"><img
+                        src="imgs/topology.jpg" alt="" /></a></span></div>
+
+                <div class="col-3"><span class="image fit"><a href="shaders/chladni-shader/" target="_blank"><img
+                        src="imgs/chladni.jpg" alt="" /></a></span></div>
+
+                <div class="col-3"><span class="image fit"><a href="shaders/noise-rings/" target="_blank"><img
+                        src="imgs/noise-rings.jpg" alt="" /></a></span></div>
+                <div class="col-3"><span class="image fit"><a href="shaders/fractal/" target="_blank"><img
+                        src="imgs/fractal.jpg" alt="" /></a></span></div>
+
                 <div class="col-3"><span class="image fit"><a href="shaders/ray-casting/" target="_blank"><img
                         src="imgs/ray-casting.jpg" alt="" /></a></span></div>
                 <div class="col-3"><span class="image fit"><a href="shaders/infinite-space/" target="_blank"><img
@@ -172,46 +212,41 @@ <h3>Introduction</h3>
                       target="_blank"><img src="imgs/rock-shaderpark.jpg" alt="" /></a></span></div>
                 <div class="col-3"><span class="image fit"><a href="shaders/rainbow-waves/" target="_blank"><img
                         src="imgs/rainbow-wave-shader.jpg" alt="" /></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="tesseract/" target="_blank"><img
-                        src="imgs/tesseract.jpg" alt="" /></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="infinite-monkey/"
-                      target="_blank"><img src="imgs/monkey.jpg" alt="" /></a></span></div>
 
-                <div class="col-3"><span class="image fit"><a href="zeros-ones-matrix/" target="_blank"><img
-                        src="imgs/binary-matrix.jpg" alt="" /></a></span></div>
+
                 <div class="col-3"><span class="image fit"><a href="shaders/infinite-magic-room/" target="_blank"><img
                         src="imgs/infinite-room.jpg" alt="" /></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="monkey-pi-digits/" target="_blank"><img
-                        src="imgs/monkey-pi.jpg" alt="" /></a></span></div>
+
                 <div class="col-3"><span class="image fit"><a href="shaders/3d-koch/" target="_blank"><img
                         src="imgs/3d-koch.jpg" alt="" /></a></span></div>
 
-                <div class="col-3"><span class="image fit"><a href="apollonian-interactive/" target="_blank"><img
-                        src="imgs/apollonian-pi.jpg" alt=""  style="border: 1px solid black;"/></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="timetravelling/" target="_blank"><img
-                        src="imgs/timetravelling.jpg" alt="" /></a></span></div>
+
                 <div class="col-3"><span class="image fit"><a href="shaders/box-space/" target="_blank"><img
                         src="imgs/infinite-square.jpg" alt="" /></a></span></div>
-                <div class="col-3"><span class="image fit"><a href="torus-moire/" target="_blank"><img
-                        src="imgs/torus-moire.jpg" alt="" /></a></span></div>
+
               </div>
             </div>
 
             <hr>
 
-            <p>If you find this content useful, please  
-              consider supporting the work using the links below.</p>
-              
+            <p>If you find this content useful, please
+              consider supporting my work using the links below.</p>
+
             <div style="text-align: center;">
               <div class="actions">
                 <p>
-                  <strong><a class="button icon solid" href="https://www.patreon.com/jcponce"><i class="fab fa-patreon"></i> Patreon</a></strong>&nbsp;&nbsp;
-                  <strong><a class="button icon solid" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=WTMTR7D8RYZ26&amp;item_name=Your+support+will+help+me+to+improve+and+keep+up+to+date+the+applets+of+this+site.+Sincerely+appreciate+it%21&amp;currency_code=AUD&amp;source=url">&#x2764;&#xFE0F; PayPal</a></strong>&nbsp;&nbsp;
-                  <strong><a class="button icon solid" href="https://jcponcemath.secure-decoration.com">&#x2764;&#xFE0F; Buy a T-shirt</a></strong>
+                  <strong><a class="button icon solid" href="https://www.patreon.com/jcponce"><i
+                        class="fab fa-patreon"></i> Patreon</a></strong>&nbsp;&nbsp;
+                  <strong><a class="button icon solid"
+                      href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=WTMTR7D8RYZ26&amp;item_name=Your+support+will+help+me+to+improve+and+keep+up+to+date+the+applets+of+this+site.+Sincerely+appreciate+it%21&amp;currency_code=AUD&amp;source=url">&#x2764;&#xFE0F;
+                      PayPal</a></strong>&nbsp;&nbsp;
+                  <strong><a class="button icon solid" href="https://jcponcemath.secure-decoration.com">&#x2764;&#xFE0F;
+                      Buy a T-shirt</a></strong>
                 </p>
               </div>
             </div>
-            <iframe src="../sketches/thanks-particles/" scrolling="no" width="100%" height="200px" style="border:0px;border:1px solid black"></iframe>
+            <iframe src="../sketches/thanks-particles/" scrolling="no" width="100%" height="200px"
+              style="border:0px;border:1px solid black"></iframe>
 
 
           </div>
@@ -259,4 +294,4 @@ <h3>Introduction</h3>
 </body>
 
 
-</html>
+</html>
\ No newline at end of file