archive complete
This commit is contained in:
John Gatward
@@ -101,38 +101,36 @@
|
||||
|
||||
<div class="projects">
|
||||
<h3 id="projectjump">Projects</h3>
|
||||
<a href="/gameoflife.php">
|
||||
<a href="/projects/game_of_life.html">
|
||||
<p> Game of Life</p>
|
||||
</a>
|
||||
<a href="mazeGen.php">
|
||||
<a href="/projects/maze_generation.html">
|
||||
<p>Maze Generator</p>
|
||||
</a>
|
||||
<a href="oscil.php">
|
||||
<a href="/projects/oscillations_in_3d.html">
|
||||
<p>Oscilations in 3D</p>
|
||||
</a>
|
||||
<a href="poissonDist.php">
|
||||
<a href="/projects/poisson_distribution.html">
|
||||
<p>Poisson Distribution</p>
|
||||
</a>
|
||||
<a href="piApprox.php">
|
||||
<a href="/projects/pi_approximation.html">
|
||||
<p>Approximating PI</p>
|
||||
</a>
|
||||
<a href="cardioid.php">
|
||||
<p>Cardioids</p>
|
||||
</a>
|
||||
<a href="/ellipseConst/index.php">
|
||||
<a href="/projects/ellipse_construction.html">
|
||||
<p>Constructing an ellipse</p>
|
||||
</a>
|
||||
<a href="/weatherApp/index.php">
|
||||
<p>Weather App</p>
|
||||
</a>
|
||||
|
||||
<h3>Tutorials</h3>
|
||||
<a href="/TSP_files/index.php">
|
||||
<a href="/tutorials/tsp/index.html">
|
||||
<p>Travelling salesman problem</p>
|
||||
</a>
|
||||
<a href="/terrainGen/index.php">
|
||||
<a href="/tutorials/midpoint_displacement/index.html">
|
||||
<p>Midpoint displacement terrain generator</p>
|
||||
</a>
|
||||
<a href="/jarvisMarsh/index.php">
|
||||
<a href="/tutorials/convex_hull/index.html">
|
||||
<p>Convex hull generator</p>
|
||||
</a>
|
||||
|
||||
|
||||
@@ -10,114 +10,128 @@
|
||||
</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>
|
||||
<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='imgTut/summed-area.html'" class="tut_box">
|
||||
<p class="tut_date">3 Jan 2021</p>
|
||||
<a href="imgTut/summed-area.html" class="tutName">Summed area tables</a>
|
||||
<p>This tutorial looks at intergral images and how they're useful.</p>
|
||||
</div>
|
||||
<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='terrainGen/index.html'" class="tut_box">
|
||||
<p class="tut_date">3 Feb 2019</p>
|
||||
<a href="terrainGen/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='jarvisMarsh/index.php'" class="tut_box">
|
||||
<p class="tut_date">14 Feb 2018</p>
|
||||
<a href="jarvisMarsh/index.php" class="tutName">Convex hull Generator</a>
|
||||
<p>This tutorial looks at wrapping algorithms.</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='TSP_files/index.php'" class="tut_box">
|
||||
<p class="tut_date">22 Sep 2018</p>
|
||||
<a href="TSP_files/index.php" 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>
|
||||
<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>
|
||||
<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/drawing_curves/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/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/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/sorting_vis.html'" class="tut_box">
|
||||
<p class="tut_date">11 Apr 2020</p>
|
||||
<a class="tutName">Bubble sort visualiser</a>
|
||||
<p>A classic bubble sort visualiser where bars are sorted by height. One frame being one loop.</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/warp_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/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/ellipse_const.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/gameoflife.php'" 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/piApprox.php'" 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/oscil.php'" 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/mazeGen.php'" 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>
|
||||
<div onclick="window.location='/projects/maze_generation.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>
|
||||
<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>
|
||||
|
||||
@@ -1,195 +1,177 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<title>Projects</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="assets/css/noscript.css" />
|
||||
<link rel="stylesheet" href="assets/css/noscript.css" />
|
||||
</noscript>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180"
|
||||
href="favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32"
|
||||
href="favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16"
|
||||
href="favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="favicon/site.webmanifest" />
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="is-preload">
|
||||
<body class="is-preload">
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<h1>Projects</h1>
|
||||
</header>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<h1>Projects</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<!-- Content -->
|
||||
<section id="content" class="main">
|
||||
<span class="image main"><img src="images/dddepth-088.jpg"
|
||||
alt="" /></span>
|
||||
<h2>Projects</h2>
|
||||
<p>
|
||||
Here are some Projects I've worked on over the years, I do this to
|
||||
further my understanding of a topic.
|
||||
</p>
|
||||
<div class="card-container">
|
||||
<a class="box-wrapper" href="https://samstoreymusic.com">
|
||||
<div class="card">
|
||||
<h2 class="title">Sam Storey Music</h2>
|
||||
<img src="images/samstoreymusic.png" />
|
||||
<p class="description">
|
||||
I designed this website for the client as a portfolio of his
|
||||
music and achievements. samstoreymusic.com is also hosted by
|
||||
myself.
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<!-- Content -->
|
||||
<section id="content" class="main">
|
||||
<span class="image main"><img src="images/dddepth-088.jpg" alt="" /></span>
|
||||
<h2>Projects</h2>
|
||||
<p>
|
||||
Here are some Projects I've worked on over the years, I do this to
|
||||
further my understanding of a topic.
|
||||
</p>
|
||||
<p class="date">20th Jun 2023</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="projects/drawing_curves/index.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Drawing Bezier Curves</h2>
|
||||
<img src="images/bezier_curves.jpg" />
|
||||
<p class="description">
|
||||
An interactive animated diagram on drawing quadratic and cubic
|
||||
Bezier curves. Click anywhere on the canvas to place your
|
||||
points.
|
||||
</p>
|
||||
<p class="date">1st Oct 2021</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="projects/marching_squares.html">
|
||||
<div class="card">
|
||||
<h2 class="title">2D Marching Squares</h2>
|
||||
<img src="images/marching_squares.png" />
|
||||
<p class="description">
|
||||
A demonstration of marching squares. Click a tile to edit the
|
||||
terrain.
|
||||
</p>
|
||||
<p class="date">23rd Sept 2021</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="projects/sorting_vis.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Bubble Sort Visualiser</h2>
|
||||
<img src="images/bubble_sort.png" />
|
||||
<p class="description">
|
||||
A classic bubble sort visualiser where bars are sorted by
|
||||
height. Where two elements are swapped each frame.
|
||||
</p>
|
||||
<p class="date">11th Apr 2020</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- <a class="box-wrapper" href="#"> -->
|
||||
<!-- <div class="card"> -->
|
||||
<!-- <h2 class="title">Warping Lines Illusion</h2> -->
|
||||
<!-- <img src="images/tsp.png" /> -->
|
||||
<!-- <p class="description"> -->
|
||||
<!-- A visualisation of the -->
|
||||
<!-- <a -->
|
||||
<!-- 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." -->
|
||||
<!-- >Muller-Lyer</a -->
|
||||
<!-- > -->
|
||||
<!-- illusion. -->
|
||||
<!-- </p> -->
|
||||
<!-- <p class="date">2nd Apr 2019</p> -->
|
||||
<!-- </div> -->
|
||||
<!-- </a> -->
|
||||
<a class="box-wrapper" href="projects/fourier_series.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Fourier Series</h2>
|
||||
<img src="images/fourier_series.png" />
|
||||
<p class="description">
|
||||
A project showing how a square wave can be constructed by
|
||||
additive sin waves.
|
||||
</p>
|
||||
<p class="date">27th Feb 2019</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="projects/ellipse_const.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Constructing an Ellipse</h2>
|
||||
<img src="images/construct_ellipse.png" />
|
||||
<p class="description">
|
||||
A visualisation of how an ellipse can be constructed with a
|
||||
circle and radial lines. Inspired by Feyman's Lost Lecture.
|
||||
<!-- <a -->
|
||||
<!-- href="https://www.amazon.co.uk/Feynmans-Lost-Lecture-Motions-Planets/dp/0099736217" -->
|
||||
<!-- >Feynam's Lost Lecture</a -->
|
||||
<!-- >. -->
|
||||
</p>
|
||||
<p class="date">23rd Feb 2019</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="projects/gameoflife.php">
|
||||
<div class="card">
|
||||
<h2 class="title">Game of Life</h2>
|
||||
<img src="images/game_of_life.png" />
|
||||
<p class="description">
|
||||
An implementation of the classic cellular automata: Game of
|
||||
Life in javascript.
|
||||
</p>
|
||||
<p class="date">2nd May 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="projects/piApprox.php">
|
||||
<div class="card">
|
||||
<h2 class="title">Calculating PI</h2>
|
||||
<img src="images/calc_pi.png" />
|
||||
<p class="description">
|
||||
A simulation that randomly places dots on the canvas, the
|
||||
ratio of dots that are placed in the cirlce vs not approximate
|
||||
PI.
|
||||
</p>
|
||||
<p class="date">14th March 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="projects/oscil.php">
|
||||
<div class="card">
|
||||
<h2 class="title">Oscillations in 3D</h2>
|
||||
<img src="images/bees_and_bombs.png" />
|
||||
<p class="description">
|
||||
An implementation of bees and bomb's
|
||||
<!-- <a -->
|
||||
<!-- href="https://twitter.com/beesandbombs/status/940639806522085376" -->
|
||||
<!-- >Bees and Bomb's gif</a -->
|
||||
<!-- > -->
|
||||
in p5js.
|
||||
</p>
|
||||
<p class="date">17th Dec 2017</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<a class="box-wrapper" href="https://samstoreymusic.com">
|
||||
<div class="card">
|
||||
<h2 class="title">Sam Storey Music</h2>
|
||||
<img src="images/samstoreymusic.png" />
|
||||
<p class="description">
|
||||
I designed this website for the client as a portfolio of his
|
||||
music and achievements. samstoreymusic.com is also hosted by
|
||||
myself.
|
||||
</p>
|
||||
<p class="date">20th Jun 2023</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/projects/cubic_bezier_curve/index.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Drawing Bezier Curves</h2>
|
||||
<img src="images/bezier_curves.jpg" />
|
||||
<p class="description">
|
||||
An interactive animated diagram on drawing quadratic and cubic
|
||||
Bezier curves. Click anywhere on the canvas to place your
|
||||
points.
|
||||
</p>
|
||||
<p class="date">1st Oct 2021</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/projects/marching_squares.html">
|
||||
<div class="card">
|
||||
<h2 class="title">2D Marching Squares</h2>
|
||||
<img src="images/marching_squares.png" />
|
||||
<p class="description">
|
||||
A demonstration of marching squares. Click a tile to edit the
|
||||
terrain.
|
||||
</p>
|
||||
<p class="date">23rd Sept 2021</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- <a class="box-wrapper" href="#"> -->
|
||||
<!-- <div class="card"> -->
|
||||
<!-- <h2 class="title">Warping Lines Illusion</h2> -->
|
||||
<!-- <img src="images/tsp.png" /> -->
|
||||
<!-- <p class="description"> -->
|
||||
<!-- A visualisation of the -->
|
||||
<!-- <a -->
|
||||
<!-- 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." -->
|
||||
<!-- >Muller-Lyer</a -->
|
||||
<!-- > -->
|
||||
<!-- illusion. -->
|
||||
<!-- </p> -->
|
||||
<!-- <p class="date">2nd Apr 2019</p> -->
|
||||
<!-- </div> -->
|
||||
<!-- </a> -->
|
||||
<a class="box-wrapper" href="/projects/fourier_series.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Fourier Series</h2>
|
||||
<img src="images/fourier_series.png" />
|
||||
<p class="description">
|
||||
A project showing how a square wave can be constructed by
|
||||
additive sin waves.
|
||||
</p>
|
||||
<p class="date">27th Feb 2019</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/projects/ellipse_construction.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Constructing an Ellipse</h2>
|
||||
<img src="images/construct_ellipse.png" />
|
||||
<p class="description">
|
||||
A visualisation of how an ellipse can be constructed with a
|
||||
circle and radial lines. Inspired by Feyman's Lost Lecture.
|
||||
<!-- <a -->
|
||||
<!-- href="https://www.amazon.co.uk/Feynmans-Lost-Lecture-Motions-Planets/dp/0099736217" -->
|
||||
<!-- >Feynam's Lost Lecture</a -->
|
||||
<!-- >. -->
|
||||
</p>
|
||||
<p class="date">23rd Feb 2019</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/projects/game_of_life.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Game of Life</h2>
|
||||
<img src="images/game_of_life.png" />
|
||||
<p class="description">
|
||||
An implementation of the classic cellular automata: Game of
|
||||
Life in javascript.
|
||||
</p>
|
||||
<p class="date">2nd May 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/projects/pi_approximation.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Calculating PI</h2>
|
||||
<img src="images/calc_pi.png" />
|
||||
<p class="description">
|
||||
A simulation that randomly places dots on the canvas, the
|
||||
ratio of dots that are placed in the cirlce vs not approximate
|
||||
PI.
|
||||
</p>
|
||||
<p class="date">14th March 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/projects/oscillations_in_3d.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Oscillations in 3D</h2>
|
||||
<img src="images/bees_and_bombs.png" />
|
||||
<p class="description">
|
||||
An implementation of bees and bomb's
|
||||
<!-- <a -->
|
||||
<!-- href="https://twitter.com/beesandbombs/status/940639806522085376" -->
|
||||
<!-- >Bees and Bomb's gif</a -->
|
||||
<!-- > -->
|
||||
in p5js.
|
||||
</p>
|
||||
<p class="date">17th Dec 2017</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<section>
|
||||
<h2>Contact me</h2>
|
||||
<p>Feel free to get in touch through:</p>
|
||||
<dl class="alt">
|
||||
<dt>Email</dt>
|
||||
<dd><a href="#">information@untitled.tld</a></dd>
|
||||
</dl>
|
||||
<ul class="icons">
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-github alt"><span
|
||||
class="label">GitHub</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-linkedin alt"><span
|
||||
class="label">Linkedin</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<section>
|
||||
<h2>Contact me</h2>
|
||||
<p>Feel free to get in touch through:</p>
|
||||
<dl class="alt">
|
||||
<dt>Email</dt>
|
||||
<dd><a href="#">information@untitled.tld</a></dd>
|
||||
</dl>
|
||||
<ul class="icons">
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-github alt"><span class="label">GitHub</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-linkedin alt"><span class="label">Linkedin</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
@@ -200,6 +182,6 @@
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,113 +1,106 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<title>Tutorials</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="assets/css/noscript.css" />
|
||||
<link rel="stylesheet" href="assets/css/noscript.css" />
|
||||
</noscript>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180"
|
||||
href="favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32"
|
||||
href="favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16"
|
||||
href="favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="favicon/site.webmanifest" />
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="is-preload">
|
||||
<body class="is-preload">
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<h1>Tutorials</h1>
|
||||
</header>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<h1>Tutorials</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<!-- Content -->
|
||||
<section id="content" class="main">
|
||||
<span class="image main"><img src="images/dddepth-301.jpg"
|
||||
alt="" /></span>
|
||||
<h2>Tutorials</h2>
|
||||
<p>
|
||||
Here are some tutorials I've worked on over the years, I do this to
|
||||
further my understanding of a topic.
|
||||
</p>
|
||||
<div class="card-container">
|
||||
<a class="box-wrapper" href="tutorials/summed_area/">
|
||||
<div class="card">
|
||||
<h2 class="title">Summed Area Tables</h2>
|
||||
<img src="images/summed_area.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at intergral images and how they're
|
||||
useful.
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<!-- Content -->
|
||||
<section id="content" class="main">
|
||||
<span class="image main"><img src="images/dddepth-301.jpg" alt="" /></span>
|
||||
<h2>Tutorials</h2>
|
||||
<p>
|
||||
Here are some tutorials I've worked on over the years, I do this to
|
||||
further my understanding of a topic.
|
||||
</p>
|
||||
<p class="date">3rd Jan 2021</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="tutorials/terrainGen/index.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Midpoint Displacement Terrain Generation</h2>
|
||||
<img src="images/midpoint_displacement.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at generating random and natural looking
|
||||
2D terrains.
|
||||
</p>
|
||||
<p class="date">3rd Feb 2019</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="tutorials/jarvisMarsh/index.php">
|
||||
<div class="card">
|
||||
<h2 class="title">Convex Hull Generator</h2>
|
||||
<img src="images/convex_hull.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at wrapping algorithms.
|
||||
</p>
|
||||
<p class="date">14th Feb 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="tutorials/TSP_files/index.php">
|
||||
<div class="card">
|
||||
<h2 class="title">Travelling Sales Person</h2>
|
||||
<img src="images/tsp.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at different implementations of the TSP
|
||||
problem and how different solutions can be implemented.
|
||||
</p>
|
||||
<p class="date">22nd Sept 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<a class="box-wrapper" href="/tutorials/summed_area/index.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Summed Area Tables</h2>
|
||||
<img src="images/summed_area.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at intergral images and how they're
|
||||
useful.
|
||||
</p>
|
||||
<p class="date">3rd Jan 2021</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/tutorials/midpoint_displacement/index.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Midpoint Displacement Terrain Generation</h2>
|
||||
<img src="images/midpoint_displacement.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at generating random and natural looking
|
||||
2D terrains.
|
||||
</p>
|
||||
<p class="date">3rd Feb 2019</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/tutorials/convex_hull/index.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Convex Hull Generator</h2>
|
||||
<img src="images/convex_hull.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at wrapping algorithms.
|
||||
</p>
|
||||
<p class="date">14th Feb 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="box-wrapper" href="/tutorials/tsp/index.html">
|
||||
<div class="card">
|
||||
<h2 class="title">Travelling Sales Person</h2>
|
||||
<img src="images/tsp.png" />
|
||||
<p class="description">
|
||||
This tutorial looks at different implementations of the TSP
|
||||
problem and how different solutions can be implemented.
|
||||
</p>
|
||||
<p class="date">22nd Sept 2018</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<section>
|
||||
<h2>Contact me</h2>
|
||||
<p>Feel free to get in touch through:</p>
|
||||
<dl class="alt">
|
||||
<dt>Email</dt>
|
||||
<dd><a href="#">information@untitled.tld</a></dd>
|
||||
</dl>
|
||||
<ul class="icons">
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-github alt"><span
|
||||
class="label">GitHub</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-linkedin alt"><span
|
||||
class="label">Linkedin</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<section>
|
||||
<h2>Contact me</h2>
|
||||
<p>Feel free to get in touch through:</p>
|
||||
<dl class="alt">
|
||||
<dt>Email</dt>
|
||||
<dd><a href="#">information@untitled.tld</a></dd>
|
||||
</dl>
|
||||
<ul class="icons">
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-github alt"><span class="label">GitHub</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="icon brands fa-linkedin alt"><span class="label">Linkedin</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
@@ -118,6 +111,6 @@
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user