Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcponce
jcponce committed Jul 11, 2024
1 parent e766351 commit 5c06880
Showing 1 changed file with 83 additions and 48 deletions.
131 changes: 83 additions & 48 deletions sketches/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -132,37 +128,81 @@ <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>

<div class="col-3"><span class="image fit"><a href="flow-field-noise/" target="_blank"><img
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
Expand All @@ -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>
Expand Down Expand Up @@ -259,4 +294,4 @@ <h3>Introduction</h3>
</body>


</html>
</html>

0 comments on commit 5c06880

Please sign in to comment.