138 lines
6.6 KiB
HTML
138 lines
6.6 KiB
HTML
<html>
|
|
<title>Havox</title>
|
|
<script src="https://kit.fontawesome.com/ad50eeab11.js" crossorigin="anonymous"></script>
|
|
<link href='index_style.css' rel='stylesheet' type='text/css'>
|
|
<nav class="nav">
|
|
<a href="#s1" class="active">Havox V2</a>
|
|
<a href="#s2">Tutorials</a>
|
|
<a href="#s3">Projects</a>
|
|
<a href="#s1">Intro</a>
|
|
</nav>
|
|
<h1>Havox.org V2</h1>
|
|
<article id="s1">
|
|
<h2>About havox <i class="far fa-address-card"></i></h2>
|
|
<p>This is havox - havox is a collection of my projects and tutorials that I've written over the years. The
|
|
tutorials written are more to consolidate my knowledge of whatever I've been working on however if they help
|
|
even one person, I'll consider that a win.</p>
|
|
<p>Feel free to check out any of my <span class="nav"><a href="#s2">tutorials</a></span> or one of my various js
|
|
<span class="nav"><a href="#s3">projects</a></span>
|
|
</p>
|
|
<p><b>Why V2?</b></p>
|
|
<p>
|
|
This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a
|
|
chronic case of spaghetti code. An update with: neater <strike>and better</strike> code, updated theming and
|
|
overall cleaner UI was long overdue.
|
|
</p>
|
|
<p><b>Why is Havox on umbra.cyou?</b></p>
|
|
<p>Havox has domain hopped a fair bit since 2017 (where it used to be hosted on jayomayo.host - lol) however since
|
|
losing the <code>havox.org</code> domain, I will be using <code>umbra.cyou</code> for the foreseeable future</p>
|
|
<h2>Daily Trump Quote</h2>
|
|
<p>
|
|
<?=$quote;?>
|
|
</p>
|
|
</article>
|
|
|
|
<article id="s2">
|
|
<h2>Tutorials <i class="fas fa-code"></i></h2>
|
|
<div onclick="window.location='/tutorials/summed_area/index.html'" class="tut_box">
|
|
<p class="tut_date">3 Jan 2021</p>
|
|
<a href="/tutorials/summed_area/index.html" class="tutName">Summed area tables</a>
|
|
<p>This tutorial looks at intergral images and how they're useful.</p>
|
|
</div>
|
|
|
|
|
|
<div onclick="window.location='/tutorials/midpoint_displacement/index.html'" class="tut_box">
|
|
<p class="tut_date">3 Feb 2019</p>
|
|
<a href="/tutorials/midpoint_displacement/index.html" class="tutName">Midpoint displacement terrain
|
|
generation</a>
|
|
<p>This tutorial looks at generating random and natural looking 2D terrains.</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/tutorials/convex_hull/index.html'" class="tut_box">
|
|
<p class="tut_date">14 Feb 2018</p>
|
|
<a href="/tutorials/convex_hull/index.html" class="tutName">Convex hull Generator</a>
|
|
<p>This tutorial looks at wrapping algorithms.</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/tutorials/tsp/index.html'" class="tut_box">
|
|
<p class="tut_date">22 Sep 2018</p>
|
|
<a href="/tutorials/tsp/index.html" class="tutName">Travelling sales person</a>
|
|
<p>This tutorial looks at different implementations of the TSP problem and how different solutions can be
|
|
implemented.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article id="s3">
|
|
<h2>Projects <i class="fas fa-code"></i></h2>
|
|
<p>Please note a lot of these projects use <code>mouseClicked()</code> functions which don't work with mobile :(</p>
|
|
|
|
<div onclick="window.location='/projects/cubic_bezier_curve/index.html'" class="tut_box">
|
|
<p class="tut_date">1 Oct 2021</p>
|
|
<a class="tutName">Drawing bezier curves</a>
|
|
<p>An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to
|
|
place points.</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/marching_squares.html'" class="tut_box">
|
|
<p class="tut_date">23 Sept 2021</p>
|
|
<a class="tutName">2D Marching Squares</a>
|
|
<p>A demonstration of marching squares, click a tile to edit the terrain.</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/warping_lines.html'" class="tut_box">
|
|
<p class="tut_date">2 Apr 2020</p>
|
|
<a class="tutName">Warping lines illusion</a>
|
|
<p>A visualisation of the <a class="out_link"
|
|
href="https://en.wikipedia.org/wiki/M%C3%BCller-Lyer_illusion#:~:text=The%20M%C3%BCller%2DLyer%20illusion%20is,consisting%20of%20three%20stylized%20arrows.&text=The%20fins%20can%20point%20inwards,the%20arrow%20with%20two%20heads.">Müller-Lyer</a>
|
|
illusion shown in js</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/fourier_series.html'" class="tut_box">
|
|
<p class="tut_date">27 Feb 2019</p>
|
|
<a class="tutName">Fourier Series</a>
|
|
<p>A project showing how a square wave can be made with just sin waves.</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/ellipse_construction.html'" class="tut_box">
|
|
<p class="tut_date">23 Feb 2019</p>
|
|
<a class="tutName">Constructing an ellispse</a>
|
|
<p>A visualisation of how an ellipse can be constructed with a circle and radial lines. <a class="out_link"
|
|
href="https://twitter.com/3blue1brown/status/1016936129117937664?lang=en">inspo</a></p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/game_of_life.html'" class="tut_box">
|
|
<p class="tut_date">2 May 2018</p>
|
|
<a class="tutName">Game of Life</a>
|
|
<p>A js implementation of the classic Game of Life - John Conway.</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/pi_approximation.html'" class="tut_box">
|
|
<p class="tut_date">18 Mar 2018</p>
|
|
<a class="tutName">Calculating PI</a>
|
|
<p>A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.</p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/oscillations_in_3d.html'" class="tut_box">
|
|
<p class="tut_date">17 Dec 2017</p>
|
|
<a class="tutName">Oscillations in 3D</a>
|
|
<p>A js implementation of <a class="out_link"
|
|
href="https://twitter.com/beesandbombs/status/940639806522085376">Bees and Bomb's gif.</a></p>
|
|
</div>
|
|
|
|
<div onclick="window.location='/projects/maze_generation/index.html'" class="tut_box">
|
|
<p class="tut_date">13 Nov 2017</p>
|
|
<a class="tutName">Maze Generator</a>
|
|
<p>A maze generator built in js.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="margin" id="s4">
|
|
<h2>Credits</h2>
|
|
<p>Thank you to @uixmat for inspiration <strike>and some code</strike> for this webpage, check out his <a
|
|
href="https://twitter.com/uixmat/" target="_blank">twitter</a>.</p>
|
|
<p>Also shoutout to <a href="https://www.youtube.com/user/shiffman">Daniel Shiffman</a> and the <a
|
|
href="https://p5js.org">P5 team</a>. P5 is used extensively in these tutorials & projects</p>
|
|
</article>
|
|
|
|
</html>
|