mirror of
https://github.com/CrispyPin/crispypin.cc.git
synced 2024-11-10 04:00:27 +01:00
huge refactor
This commit is contained in:
parent
481fcf0227
commit
f116de48b9
43 changed files with 404 additions and 449 deletions
2
Makefile
Normal file
2
Makefile
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
default:
|
||||||
|
python3 html-combiner.py
|
||||||
|
Before Width: | Height: | Size: 3.4 MiB After Width: | Height: | Size: 3.4 MiB |
|
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 222 KiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 209 KiB After Width: | Height: | Size: 209 KiB |
|
|
@ -10,50 +10,41 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt=""></a>
|
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
|
||||||
</header>
|
</header>
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/projects/">Projects</a></li>
|
|
||||||
<li><a href="/blender/">Blender</a></li>
|
|
||||||
<li><a href="/fractals/">Fractals</a></li>
|
|
||||||
<li><a href="https://crispypin.itch.io/">Games</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Blender creations</h1>
|
<h1>Blender creations</h1>
|
||||||
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I just like to make art in it and of course use it for game jams.</p>
|
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I just like to make art in it and use it for game jams.</p>
|
||||||
|
|
||||||
<h2>Alien Creatures animation</h2>
|
<h2>Alien Creatures animation</h2>
|
||||||
<p>January 2022</p>
|
<p>January 2022</p>
|
||||||
<p><a href="https://youtu.be/AfRJvExamX4">youtu.be/AfRJvExamX4</a></p>
|
<p><a href="https://youtu.be/AfRJvExamX4">youtu.be/AfRJvExamX4</a></p>
|
||||||
<!-- <iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/AfRJvExamX4"></iframe> -->
|
<!-- <iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/AfRJvExamX4"></iframe> -->
|
||||||
<video src="/media/blender/critters.mp4" controls height="480"></video>
|
<video src="critters.mp4" controls height="480"></video>
|
||||||
|
|
||||||
<h2>Alien Tree</h2>
|
<h2>Alien Tree</h2>
|
||||||
<p>January 2022</p>
|
<p>January 2022</p>
|
||||||
<a href="/media/blender/alien_tree.png"><img src="/media/blender/alien_tree_preview.png" alt="Alien Tree" title="Click for full resolution"></a>
|
<a href="alien_tree.png"><img src="alien_tree_preview.png" alt="Alien Tree" title="Click for full resolution"></a>
|
||||||
|
|
||||||
<h2>Decapod Alien</h2>
|
<h2>Decapod Alien</h2>
|
||||||
<p>January 2022</p>
|
<p>January 2022</p>
|
||||||
<a href="/media/blender/decapod_shock.png"><img src="/media/blender/decapod_shock_preview.png" alt="Decapod Alien" title="Click for full resolution"></a>
|
<a href="decapod_shock.png"><img src="decapod_shock_preview.png" alt="Decapod Alien" title="Click for full resolution"></a>
|
||||||
|
|
||||||
<h2>Crab</h2>
|
<h2>Crab</h2>
|
||||||
<p>October 2021</p>
|
<p>October 2021</p>
|
||||||
<a href="/media/blender/crab.png"><img src="/media/blender/crab_preview.png" alt="Crab" title="Click for full resolution"></a>
|
<a href="crab.png"><img src="crab_preview.png" alt="Crab" title="Click for full resolution"></a>
|
||||||
|
|
||||||
<h2>Shork Wallpaper</h2>
|
<h2>Shork Wallpaper</h2>
|
||||||
<p>This is a wallpaper for the game <a href="https://crispypin.itch.io/ld-48">Shork</a>.</p>
|
<p>This is a wallpaper for the game <a href="https://crispypin.itch.io/ld-48">Shork</a>.</p>
|
||||||
<p>May 2021</p>
|
<p>May 2021</p>
|
||||||
<a href="/media/blender/shork_wallpaper.png"><img src="/media/blender/shork_wallpaper_preview.png" alt="Shork Wallpaper" title="Click for full resolution"></a>
|
<a href="shork_wallpaper.png"><img src="shork_wallpaper_preview.png" alt="Shork Wallpaper" title="Click for full resolution"></a>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<p>Copyright © 2022 - CrispyPin</p>
|
<p>Copyright © 2022 - CrispyPin</p>
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<a href="https://github.com/CrispyPin"><img src="/media/icons/github.png" alt="" width=32px></a>
|
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px></a>
|
||||||
<a href="https://crispypin.itch.io/"><img src="/media/icons/itch.io.svg" alt="" width=32px></a>
|
<a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
|
||||||
<a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/media/icons/youtube.png" alt="" width=32px></a>
|
<a href="https://www.youtube.com/CrispyPin42"><img src="/icons/youtube.png" alt="" width=32px></a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 324 KiB |
|
|
@ -7,23 +7,80 @@
|
||||||
<link rel="stylesheet" href="/style.css">
|
<link rel="stylesheet" href="/style.css">
|
||||||
<link rel="icon" type="image/x-icon" href="/media/icons/favicon.png">
|
<link rel="icon" type="image/x-icon" href="/media/icons/favicon.png">
|
||||||
<title>Fractals</title>
|
<title>Fractals</title>
|
||||||
|
<style>
|
||||||
|
.demo-render {
|
||||||
|
margin: 20px;
|
||||||
|
width: -webkit-min-content;
|
||||||
|
width: -moz-min-content;
|
||||||
|
width: min-content;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlbar {
|
||||||
|
background-color: #181818;
|
||||||
|
padding: 2px 5px;
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
|
height: max-content;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: space-evenly;
|
||||||
|
-ms-flex-pack: space-evenly;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
-ms-flex-line-pack: stretch;
|
||||||
|
align-content: stretch;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlbar button, .controlbar input {
|
||||||
|
padding: 4px 6px;
|
||||||
|
height: 25px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex-positive: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlbar label {
|
||||||
|
background-color: #181818;
|
||||||
|
color: #fb8;
|
||||||
|
margin: 2px;
|
||||||
|
font-family: 'Consolas', 'Courier New', Courier, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable, nav li, .controlbar button, .controlbar input {
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #4a4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover {
|
||||||
|
background-color: #4af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active {
|
||||||
|
background-color: #46c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled {
|
||||||
|
background-color: #8b8;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #000;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt=""></a>
|
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
|
||||||
</header>
|
</header>
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/projects/">Projects</a></li>
|
|
||||||
<li><a href="/blender/">Blender</a></li>
|
|
||||||
<li><a href="/fractals/">Fractals</a></li>
|
|
||||||
<li><a href="https://crispypin.itch.io/">Games</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Fractals</h1>
|
<h1>Fractals</h1>
|
||||||
<p>This page is a collection of fractal renderers I made in JS for a school assignment back in 2020. Please note that I don't use JS any more.</p>
|
<p>This page is a collection of fractal renderers I made in JS for a school assignment back in 2020.</p>
|
||||||
<h2>Fractal tree</h2>
|
<h2>Fractal tree</h2>
|
||||||
<p>The splitting angle is defined by the mouses x position. The number of iterations is set in the first input field (default is 12). Each branch is slightly smaller than its parent, the factor is the second input field. Click the canvas to pause/resume the image.</p>
|
<p>The splitting angle is defined by the mouses x position. The number of iterations is set in the first input field (default is 12). Each branch is slightly smaller than its parent, the factor is the second input field. Click the canvas to pause/resume the image.</p>
|
||||||
<div class="demo-render" id="fractal-tree">
|
<div class="demo-render" id="fractal-tree">
|
||||||
|
|
@ -69,9 +126,9 @@
|
||||||
<footer>
|
<footer>
|
||||||
<p>Copyright © 2022 - CrispyPin</p>
|
<p>Copyright © 2022 - CrispyPin</p>
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<a href="https://github.com/CrispyPin"><img src="/media/icons/github.png" alt="" width=32px></a>
|
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px></a>
|
||||||
<a href="https://crispypin.itch.io/"><img src="/media/icons/itch.io.svg" alt="" width=32px></a>
|
<a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
|
||||||
<a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/media/icons/youtube.png" alt="" width=32px></a>
|
<a href="https://www.youtube.com/CrispyPin42"><img src="/icons/youtube.png" alt="" width=32px></a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 928 B After Width: | Height: | Size: 928 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -10,27 +10,64 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt=""></a>
|
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
|
||||||
</header>
|
</header>
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/projects/">Projects</a></li>
|
|
||||||
<li><a href="/blender/">Blender</a></li>
|
|
||||||
<li><a href="/fractals/">Fractals</a></li>
|
|
||||||
<li><a href="https://crispypin.itch.io/">Games</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Hello!</h1>
|
<h1>Hello!</h1>
|
||||||
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github. (This is very much a WIP)</p>
|
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github.</p>
|
||||||
|
|
||||||
|
<section id="voxels">
|
||||||
|
<h2><a href="/voxels">Voxel engine in godot-rust</a></h2>
|
||||||
|
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
|
||||||
|
<p>
|
||||||
|
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
|
||||||
|
</p>
|
||||||
|
<video src="/voxels/demo.mp4" controls height="320">video not supported :(</video>
|
||||||
|
<p>Demo of fast terrain generation</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="ovr-utils">
|
||||||
|
<h2 class="title-link"><a href="#ovr-utils">OVR Utils</a></h2>
|
||||||
|
<a href="https://github.com/CrispyPin/ovr-utils">https://github.com/CrispyPin/ovr-utils</a>
|
||||||
|
<p>
|
||||||
|
OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="blender">
|
||||||
|
<h2><a href="/blender">Blender creations</a></h2>
|
||||||
|
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I just like to make art in it and of course use it for game jams.</p>
|
||||||
|
<img src="/blender/shork_wallpaper_preview.png" alt="">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="voxel-raymarch">
|
||||||
|
<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
|
||||||
|
<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
|
||||||
|
<img src="/projects/raymarched-voxels.png" alt="">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gol-wallpaper">
|
||||||
|
<h2><a href="https://gol.crispypin.cc/">Game of life wallpaper</a></h2>
|
||||||
|
<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
|
||||||
|
<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
|
||||||
|
<img src="/projects/gol.png" alt="">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="fractals">
|
||||||
|
<h2><a href="/fractals">Fractals</a></h2>
|
||||||
|
While I was learning web development and javascript I made a page with fractals. I thought it was interesting enough to keep here.
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<p>Copyright © 2022 - CrispyPin</p>
|
<p>Copyright © 2022 - CrispyPin</p>
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<a href="https://github.com/CrispyPin"><img src="/media/icons/github.png" alt="" width=32px></a>
|
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px></a>
|
||||||
<a href="https://crispypin.itch.io/"><img src="/media/icons/itch.io.svg" alt="" width=32px></a>
|
<a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
|
||||||
<a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/media/icons/youtube.png" alt="" width=32px></a>
|
<a href="https://www.youtube.com/CrispyPin42"><img src="/icons/youtube.png" alt="" width=32px></a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
BIN
docs/projects/gol.png
Normal file
BIN
docs/projects/gol.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -1,90 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="/style.css">
|
|
||||||
<link rel="icon" type="image/x-icon" href="/media/icons/favicon.png">
|
|
||||||
<title>Projects</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt=""></a>
|
|
||||||
</header>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/projects/">Projects</a></li>
|
|
||||||
<li><a href="/blender/">Blender</a></li>
|
|
||||||
<li><a href="/fractals/">Fractals</a></li>
|
|
||||||
<li><a href="https://crispypin.itch.io/">Games</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
<br>
|
|
||||||
<b>**This page is a draft**</b>
|
|
||||||
<h1>Projects:</h1>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#voxel-mesh">Voxel mesh optimiser</a></li>
|
|
||||||
<li><a href="#ovr-utils">OVR Utils</a></li>
|
|
||||||
<li><a href="#voxel-raymarch">Raymarched voxel rendering</a></li>
|
|
||||||
<li><a href="#gol-wallpaper">Game of life wallpaper</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2 class="title-link" id="voxel-mesh"><a href="#voxel-mesh">Voxel mesh optimiser and chunk system</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
|
|
||||||
<p>
|
|
||||||
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
|
|
||||||
</p>
|
|
||||||
<video src="/media/projects/voxel/demo.mp4" controls height="320">video not supported :(</video>
|
|
||||||
<p>Demo of fast terrain generation</p>
|
|
||||||
<video src="/media/projects/voxel/demo2.mp4" controls height="320">video not supported :(</video>
|
|
||||||
<p>Greedy mesh visualisation</p>
|
|
||||||
<h3>Greedy mesh algorithm</h3>
|
|
||||||
<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p>
|
|
||||||
|
|
||||||
<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>
|
|
||||||
|
|
||||||
<img src="/media/projects/voxel/fig1.png" alt="">
|
|
||||||
<p>fig. 1: example set of voxels, with the simplest form of mesh generation applied.</p>
|
|
||||||
|
|
||||||
<p>To start off, we can break down the problem to 2 dimensions by recognising that each direction along the axis as well as each layer along those directions is independent. We then only have to process a single 2D slice of the voxel domain at once.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<img src="/media/projects/voxel/fig2.png" alt="">
|
|
||||||
<p>fig. 2: The algorithm only needs to consider one layer and direction at a time, highlighted in green</p>
|
|
||||||
|
|
||||||
<p>The first step is to generate "strips", essentially create long quads that cover connected voxels. We can loop through the plane and keep track of at most one active strip. The active strip is the last one started and we grow it as more voxels under it are traversed. In the inner loop we check the voxel at that position as well as the one above. With this we can determine if we need to stop the current strip, start a new one or do nothing. If there is not currently an active strip, a new one should be created when the voxel below is filled and the one above is empty (an exposed surface). </p>
|
|
||||||
|
|
||||||
<img src="/media/projects/voxel/fig3.png" alt="">
|
|
||||||
<p>fig.3: Long strips of adjacent voxels can be merged into fewer, long quads.</p>
|
|
||||||
|
|
||||||
<h2 class="title-link" id="ovr-utils"><a href="#ovr-utils">OVR Utils</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/ovr-utils">https://github.com/CrispyPin/ovr-utils</a>
|
|
||||||
<p>
|
|
||||||
OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 class="title-link" id="voxel-raymarch"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
|
|
||||||
<img src="/media/projects/raymarched-voxels.png" alt="">
|
|
||||||
|
|
||||||
<h2 class="title-link" id="gol-wallpaper"><a href="#gol-wallpaper">Game of life wallpaper</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a>
|
|
||||||
<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
<footer>
|
|
||||||
<p>Copyright © 2022 - CrispyPin</p>
|
|
||||||
<div class="links">
|
|
||||||
<a href="https://github.com/CrispyPin"><img src="/media/icons/github.png" alt="" width=32px></a>
|
|
||||||
<a href="https://crispypin.itch.io/"><img src="/media/icons/itch.io.svg" alt="" width=32px></a>
|
|
||||||
<a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/media/icons/youtube.png" alt="" width=32px></a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
BIN
docs/projects/raymarched-voxels.png
Normal file
BIN
docs/projects/raymarched-voxels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
140
docs/style.css
140
docs/style.css
|
|
@ -1,15 +1,25 @@
|
||||||
body {
|
body {
|
||||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
font-family: sans-serif;
|
||||||
background-color: #181818;
|
background-color: #111;
|
||||||
color: white;
|
color: #fff;
|
||||||
display: -ms-grid;
|
display: -ms-grid;
|
||||||
display: grid;
|
display: grid;
|
||||||
-ms-grid-rows: 50px auto 1fr auto;
|
-ms-grid-rows: 50px 1fr auto;
|
||||||
grid-template-rows: 50px auto 1fr auto;
|
grid-template-rows: 50px 1fr auto;
|
||||||
-ms-grid-columns: 80px 1fr 80px;
|
|
||||||
grid-template-columns: 80px 1fr 80px;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 0 32px 64px;
|
||||||
|
width: 800px;
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: #8bf;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
|
|
@ -18,55 +28,19 @@ a:visited {
|
||||||
|
|
||||||
.title-link a {
|
.title-link a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: white;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-link a:visited {
|
.title-link a:visited {
|
||||||
color: white;
|
color: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
display: -ms-grid;
|
|
||||||
display: grid;
|
|
||||||
padding: 5px 25px;
|
|
||||||
grid-gap: 5px;
|
|
||||||
-ms-grid-columns: (minmax(175px, auto))[auto-fill];
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(175px, auto));
|
|
||||||
}
|
|
||||||
|
|
||||||
nav li {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #000;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:visited {
|
|
||||||
color: #000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
background-color: #181818;
|
background-color: #111;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h1 {
|
|
||||||
font-size: 40px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
|
@ -78,75 +52,7 @@ footer p {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
img {
|
||||||
padding: 0 150px 40px;
|
max-width: 800px;
|
||||||
margin: 5px 100px;
|
|
||||||
grid-column: 2 / -2;
|
|
||||||
background-color: #282828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-render {
|
|
||||||
margin: 20px;
|
|
||||||
width: -webkit-min-content;
|
|
||||||
width: -moz-min-content;
|
|
||||||
width: min-content;
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controlbar {
|
|
||||||
background-color: #181818;
|
|
||||||
padding: 2px 5px;
|
|
||||||
height: -webkit-max-content;
|
|
||||||
height: -moz-max-content;
|
|
||||||
height: max-content;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: space-evenly;
|
|
||||||
-ms-flex-pack: space-evenly;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
-ms-flex-line-pack: stretch;
|
|
||||||
align-content: stretch;
|
|
||||||
-ms-flex-wrap: wrap;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controlbar button, .controlbar input {
|
|
||||||
padding: 4px 6px;
|
|
||||||
height: 25px;
|
|
||||||
border: 1px solid #000;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
-ms-flex-positive: 1;
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controlbar label {
|
|
||||||
background-color: #181818;
|
|
||||||
color: #fb8;
|
|
||||||
margin: 2px;
|
|
||||||
font-family: 'Consolas', 'Courier New', Courier, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable, nav li, .controlbar button, .controlbar input {
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: #4a4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover {
|
|
||||||
background-color: #4af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active {
|
|
||||||
background-color: #46c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled {
|
|
||||||
background-color: #8b8;
|
|
||||||
text-decoration: line-through;
|
|
||||||
color: #000;
|
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"version": 3,
|
"version": 3,
|
||||||
"mappings": "AAWA,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,8CAA8C;EAC3D,gBAAgB,EARP,OAAO;EAShB,KAAK,EANO,KAAkB;EAQ9B,OAAO,EAAE,IAAI;EACb,kBAAkB,EAAE,kBAAkB;EAEtC,qBAAqB,EAAE,aAAa;EAEpC,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,KAAK;CACjB;;AAED,AAAA,CAAC,AAAA,QAAQ,CAAC;EACT,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,WAAW,CAAC,CAAC,CAAC;EACb,eAAe,EAAE,IAAI;EACrB,KAAK,EAvBO,KAAkB;CA2B9B;;AAND,AAGC,WAHU,CAAC,CAAC,AAGX,QAAQ,CAAC;EACT,KAAK,EAzBM,KAAkB;CA0B7B;;AAGF,AAAA,GAAG,CAAC;EACH,WAAW,EAAE,MAAM;CAuBnB;;AAxBD,AAEC,GAFE,CAEF,EAAE,CAAC;EACF,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,QAAQ;EACjB,QAAQ,EAAE,GAAG;EACb,qBAAqB,EAAE,sCAAsC;CAC7D;;AATF,AAUC,GAVE,CAUF,EAAE,CAAC;EAEF,OAAO,EAAE,GAAG;CACZ;;AAbF,AAcC,GAdE,CAcF,CAAC,CAAC;EACD,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,IAAI;EACX,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,KAAK;EACd,UAAU,EAAE,MAAM;CAIlB;;AAvBF,AAoBE,GApBC,CAcF,CAAC,AAMC,QAAQ,CAAC;EACT,KAAK,EAAE,IAAI;CACX;;AAIH,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,gBAAgB,EA5DP,OAAO;EA6DhB,OAAO,EAAE,CAAC;CAKV;;AARD,AAIC,MAJK,CAIL,EAAE,CAAC;EACF,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,CAAC;CACT;;AAGF,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;CAIlB;;AARD,AAKC,MALK,CAKL,CAAC,CAAC;EACD,MAAM,EAAE,GAAG;CACX;;AAGF,AAAA,IAAI,CAAC;EACJ,OAAO,EAAE,YAAa;EACtB,MAAM,EAAE,SAAS;EACjB,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAjFF,OAAO;CAkFrB;;AAED,AAAA,YAAY,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,WAAW;EAClB,gBAAgB,EAAE,IAAI;CACtB;;AAED,AAAA,WAAW,CAAC;EACX,gBAAgB,EA5FP,OAAO;EA6FhB,OAAO,EAAE,OAAO;EAChB,MAAM,EAAE,WAAW;EACnB,OAAO,EAAE,IAAI;EAEb,eAAe,EAAE,YAAY;EAC7B,aAAa,EAAE,OAAO;EACtB,SAAS,EAAE,IAAI;CAmBf;;AA3BD,AAUC,WAVU,CAUV,MAAM,EAVP,WAAW,CAUF,KAAK,CAAC;EAEb,OAAO,EAAE,OAAO;EAChB,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,cAAc;EACtB,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,OAAO;EAEf,SAAS,EAAE,CAAC;EACZ,MAAM,EAAE,GAAG;CACX;;AApBF,AAqBC,WArBU,CAqBV,KAAK,CAAC;EACL,gBAAgB,EAjHR,OAAO;EAkHf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG;EACX,WAAW,EAAE,6CAA6C;CAC1D;;AAGF,AAAA,UAAU,EAxFV,GAAG,CAUF,EAAE,EAiDH,WAAW,CAUV,MAAM,EAVP,WAAW,CAUF,KAAK,CAmBH;EACV,aAAa,EAAE,GAAG;EAClB,gBAAgB,EA/HL,IAAI;CA4If;;AAfD,AAGC,UAHS,AAGR,MAAM,EA3FR,GAAG,CAUF,EAAE,AAiFD,MAAM,EAhCR,WAAW,CAUV,MAAM,AAsBL,MAAM,EAhCR,WAAW,CAUF,KAAK,AAsBZ,MAAM,CAAC;EACP,gBAAgB,EA/HA,IAAI;CAgIpB;;AALF,AAMC,UANS,AAMR,OAAO,EA9FT,GAAG,CAUF,EAAE,AAoFD,OAAO,EAnCT,WAAW,CAUV,MAAM,AAyBL,OAAO,EAnCT,WAAW,CAUF,KAAK,AAyBZ,OAAO,CAAC;EACR,gBAAgB,EAjIC,IAAI;CAkIrB;;AARF,AASC,UATS,AASR,SAAS,EAjGX,GAAG,CAUF,EAAE,AAuFD,SAAS,EAtCX,WAAW,CAUV,MAAM,AA4BL,SAAS,EAtCX,WAAW,CAUF,KAAK,AA4BZ,SAAS,CAAC;EACV,gBAAgB,EAnIG,IAAI;EAoIvB,eAAe,EAAE,YAAY;EAC7B,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,OAAO;CACf",
|
"mappings": "AAOA,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,UAAU;EACvB,gBAAgB,EATP,IAAI;EAUb,KAAK,EARI,IAAI;EAUb,OAAO,EAAE,IAAI;EACb,kBAAkB,EAAE,aAAa;EAEjC,MAAM,EAAE,CAAC;EACT,eAAe,EAAE,MAAM;CACvB;;AAED,AAAA,IAAI,CAAC;EACJ,OAAO,EAAE,WAAY;EAErB,KAAK,EAlBO,KAAK;EAoBjB,gBAAgB,EAvBJ,IAAI;CAwBhB;;AAED,AAAA,CAAC,AAAA,KAAK,CAAC;EACN,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,CAAC,AAAA,QAAQ,CAAC;EACT,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,WAAW,CAAC,CAAC,CAAC;EACb,eAAe,EAAE,IAAI;EACrB,KAAK,EAnCI,IAAI;CAuCb;;AAND,AAGC,WAHU,CAAC,CAAC,AAGX,QAAQ,CAAC;EACT,KAAK,EArCG,IAAI;CAsCZ;;AAGF,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,gBAAgB,EA7CP,IAAI;EA8Cb,OAAO,EAAE,CAAC;CACV;;AAED,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;CAIlB;;AARD,AAKC,MALK,CAKL,CAAC,CAAC;EACD,MAAM,EAAE,GAAG;CACX;;AAGF,AAAA,GAAG,CAAC;EACH,SAAS,EAxDG,KAAK;CAyDjB",
|
||||||
"sources": [
|
"sources": [
|
||||||
"style.scss"
|
"style.scss"
|
||||||
],
|
],
|
||||||
|
|
|
||||||
127
docs/style.scss
127
docs/style.scss
|
|
@ -1,26 +1,32 @@
|
||||||
$main-item: #4a4;
|
$main-bg: #111;
|
||||||
|
$content-bg: #222;
|
||||||
|
$main-fg: #fff;
|
||||||
|
|
||||||
$main-item-hover: #4af;
|
$page-width: 800px;
|
||||||
$main-item-active: #46c;
|
|
||||||
$main-item-disabled: #8b8;
|
|
||||||
$main-bg: #181818;
|
|
||||||
$main-page-bg: #282828;
|
|
||||||
|
|
||||||
$main-color: rgb(255, 255, 255);
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
font-family: sans-serif;
|
||||||
background-color: $main-bg;
|
background-color: $main-bg;
|
||||||
color: $main-color;
|
color: $main-fg;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 50px auto 1fr auto;
|
grid-template-rows: 50px 1fr auto;
|
||||||
|
|
||||||
grid-template-columns: 80px 1fr 80px;
|
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 0 32px 64px ;
|
||||||
|
// grid-column: 2 / -2;
|
||||||
|
width: $page-width;
|
||||||
|
// justify-self: center;
|
||||||
|
background-color: $content-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: #8bf;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
|
|
@ -29,35 +35,9 @@ a:visited {
|
||||||
|
|
||||||
.title-link a {
|
.title-link a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $main-color;
|
color: $main-fg;
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $main-color;
|
color: $main-fg;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
display: grid;
|
|
||||||
padding: 5px 25px;
|
|
||||||
grid-gap: 5px;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(175px, auto));
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
@extend .clickable;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #000;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
&:visited {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -65,10 +45,6 @@ header {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
background-color: $main-bg;
|
background-color: $main-bg;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
h1 {
|
|
||||||
font-size: 40px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|
@ -81,62 +57,7 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
img {
|
||||||
padding: 0 150px 40px ;
|
max-width: $page-width;
|
||||||
margin: 5px 100px;
|
|
||||||
grid-column: 2 / -2;
|
|
||||||
background-color: $main-page-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-render {
|
|
||||||
margin: 20px;
|
|
||||||
width: min-content;
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controlbar {
|
|
||||||
background-color: $main-bg;
|
|
||||||
padding: 2px 5px;
|
|
||||||
height: max-content;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
justify-content: space-evenly;
|
|
||||||
align-content: stretch;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
button, input {
|
|
||||||
@extend .clickable;
|
|
||||||
padding: 4px 6px;
|
|
||||||
height: 25px;
|
|
||||||
border: 1px solid #000;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
background-color: $main-bg;
|
|
||||||
color: #fb8;
|
|
||||||
margin: 2px;
|
|
||||||
font-family: 'Consolas', 'Courier New', Courier, monospace;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable {
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: $main-item;
|
|
||||||
&:hover {
|
|
||||||
background-color: $main-item-hover;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background-color: $main-item-active;
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
background-color: $main-item-disabled;
|
|
||||||
text-decoration: line-through;
|
|
||||||
color: #000;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
BIN
docs/voxels/fig1.png
Normal file
BIN
docs/voxels/fig1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/voxels/fig2.png
Normal file
BIN
docs/voxels/fig2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/voxels/fig3.png
Normal file
BIN
docs/voxels/fig3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
55
docs/voxels/index.html
Normal file
55
docs/voxels/index.html
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="/style.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="/media/icons/favicon.png">
|
||||||
|
<title>Voxel engine</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<h1>Godot-Rust Voxel Engine</h1>
|
||||||
|
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
|
||||||
|
<p>
|
||||||
|
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
|
||||||
|
</p>
|
||||||
|
<video src="demo.mp4" controls height="320">video not supported :(</video>
|
||||||
|
<p>Demo of fast terrain generation</p>
|
||||||
|
<video src="demo2.mp4" controls height="320">video not supported :(</video>
|
||||||
|
<p>Greedy mesh visualisation</p>
|
||||||
|
<h3>Greedy mesh algorithm</h3>
|
||||||
|
<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p>
|
||||||
|
|
||||||
|
<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>
|
||||||
|
|
||||||
|
<img src="fig1.png" alt="">
|
||||||
|
<p>fig. 1: example set of voxels, with the simplest form of mesh generation applied.</p>
|
||||||
|
|
||||||
|
<p>To start off, we can break down the problem to 2 dimensions by recognising that each direction along the axis as well as each layer along those directions is independent. We then only have to process a single 2D slice of the voxel domain at once.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img src="fig2.png" alt="">
|
||||||
|
<p>fig. 2: The algorithm only needs to consider one layer and direction at a time, highlighted in green</p>
|
||||||
|
|
||||||
|
<p>The first step is to generate "strips", essentially create long quads that cover connected voxels. We can loop through the plane and keep track of at most one active strip. The active strip is the last one started and we grow it as more voxels under it are traversed. In the inner loop we check the voxel at that position as well as the one above. With this we can determine if we need to stop the current strip, start a new one or do nothing. If there is not currently an active strip, a new one should be created when the voxel below is filled and the one above is empty (an exposed surface). </p>
|
||||||
|
|
||||||
|
<img src="fig3.png" alt="">
|
||||||
|
<p>fig.3: Long strips of adjacent voxels can be merged into fewer, long quads.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>Copyright © 2022 - CrispyPin</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px></a>
|
||||||
|
<a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
|
||||||
|
<a href="https://www.youtube.com/CrispyPin42"><img src="/icons/youtube.png" alt="" width=32px></a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -8,30 +8,30 @@
|
||||||
<include header.html/>
|
<include header.html/>
|
||||||
<main>
|
<main>
|
||||||
<h1>Blender creations</h1>
|
<h1>Blender creations</h1>
|
||||||
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I just like to make art in it and of course use it for game jams.</p>
|
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
|
||||||
|
|
||||||
<h2>Alien Creatures animation</h2>
|
<h2>Alien Creatures animation</h2>
|
||||||
<p>January 2022</p>
|
<p>January 2022</p>
|
||||||
<p><a href="https://youtu.be/AfRJvExamX4">youtu.be/AfRJvExamX4</a></p>
|
<p><a href="https://youtu.be/AfRJvExamX4">youtu.be/AfRJvExamX4</a></p>
|
||||||
<!-- <iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/AfRJvExamX4"></iframe> -->
|
<!-- <iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/AfRJvExamX4"></iframe> -->
|
||||||
<video src="/media/blender/critters.mp4" controls height="480"></video>
|
<video src="critters.mp4" controls height="480"></video>
|
||||||
|
|
||||||
<h2>Alien Tree</h2>
|
<h2>Alien Tree</h2>
|
||||||
<p>January 2022</p>
|
<p>January 2022</p>
|
||||||
<a href="/media/blender/alien_tree.png"><img src="/media/blender/alien_tree_preview.png" alt="Alien Tree" title="Click for full resolution"></a>
|
<a href="alien_tree.png"><img src="alien_tree_preview.png" alt="Alien Tree" title="Click for full resolution"></a>
|
||||||
|
|
||||||
<h2>Decapod Alien</h2>
|
<h2>Decapod Alien</h2>
|
||||||
<p>January 2022</p>
|
<p>January 2022</p>
|
||||||
<a href="/media/blender/decapod_shock.png"><img src="/media/blender/decapod_shock_preview.png" alt="Decapod Alien" title="Click for full resolution"></a>
|
<a href="decapod_shock.png"><img src="decapod_shock_preview.png" alt="Decapod Alien" title="Click for full resolution"></a>
|
||||||
|
|
||||||
<h2>Crab</h2>
|
<h2>Crab</h2>
|
||||||
<p>October 2021</p>
|
<p>October 2021</p>
|
||||||
<a href="/media/blender/crab.png"><img src="/media/blender/crab_preview.png" alt="Crab" title="Click for full resolution"></a>
|
<a href="crab.png"><img src="crab_preview.png" alt="Crab" title="Click for full resolution"></a>
|
||||||
|
|
||||||
<h2>Shork Wallpaper</h2>
|
<h2>Shork Wallpaper</h2>
|
||||||
<p>This is a wallpaper for the game <a href="https://crispypin.itch.io/ld-48">Shork</a>.</p>
|
<p>This is a wallpaper for the game <a href="https://crispypin.itch.io/ld-48">Shork</a>.</p>
|
||||||
<p>May 2021</p>
|
<p>May 2021</p>
|
||||||
<a href="/media/blender/shork_wallpaper.png"><img src="/media/blender/shork_wallpaper_preview.png" alt="Shork Wallpaper" title="Click for full resolution"></a>
|
<a href="shork_wallpaper.png"><img src="shork_wallpaper_preview.png" alt="Shork Wallpaper" title="Click for full resolution"></a>
|
||||||
</main>
|
</main>
|
||||||
<include footer.html/>
|
<include footer.html/>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,78 @@
|
||||||
<head>
|
<head>
|
||||||
<include meta.html/>
|
<include meta.html/>
|
||||||
<title>Fractals</title>
|
<title>Fractals</title>
|
||||||
|
<style>
|
||||||
|
.demo-render {
|
||||||
|
margin: 20px;
|
||||||
|
width: -webkit-min-content;
|
||||||
|
width: -moz-min-content;
|
||||||
|
width: min-content;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlbar {
|
||||||
|
background-color: #181818;
|
||||||
|
padding: 2px 5px;
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
|
height: max-content;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: space-evenly;
|
||||||
|
-ms-flex-pack: space-evenly;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
-ms-flex-line-pack: stretch;
|
||||||
|
align-content: stretch;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlbar button, .controlbar input {
|
||||||
|
padding: 4px 6px;
|
||||||
|
height: 25px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex-positive: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlbar label {
|
||||||
|
background-color: #181818;
|
||||||
|
color: #fb8;
|
||||||
|
margin: 2px;
|
||||||
|
font-family: 'Consolas', 'Courier New', Courier, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable, nav li, .controlbar button, .controlbar input {
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #4a4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover {
|
||||||
|
background-color: #4af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active {
|
||||||
|
background-color: #46c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled {
|
||||||
|
background-color: #8b8;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #000;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<include header.html/>
|
<include header.html/>
|
||||||
<main>
|
<main>
|
||||||
<h1>Fractals</h1>
|
<h1>Fractals</h1>
|
||||||
<p>This page is a collection of fractal renderers I made in JS for a school assignment back in 2020. Please note that I don't use JS any more.</p>
|
<p>This page is a collection of fractal renderers I made in JS for a school assignment back in 2020.</p>
|
||||||
<h2>Fractal tree</h2>
|
<h2>Fractal tree</h2>
|
||||||
<p>The splitting angle is defined by the mouses x position. The number of iterations is set in the first input field (default is 12). Each branch is slightly smaller than its parent, the factor is the second input field. Click the canvas to pause/resume the image.</p>
|
<p>The splitting angle is defined by the mouses x position. The number of iterations is set in the first input field (default is 12). Each branch is slightly smaller than its parent, the factor is the second input field. Click the canvas to pause/resume the image.</p>
|
||||||
<div class="demo-render" id="fractal-tree">
|
<div class="demo-render" id="fractal-tree">
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,53 @@
|
||||||
<include header.html/>
|
<include header.html/>
|
||||||
<main>
|
<main>
|
||||||
<h1>Hello!</h1>
|
<h1>Hello!</h1>
|
||||||
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github. (This is very much a WIP)</p>
|
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github.</p>
|
||||||
|
|
||||||
|
<section id="voxels">
|
||||||
|
<h2><a href="/voxels">Voxel engine in godot-rust</a></h2>
|
||||||
|
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
|
||||||
|
<p>
|
||||||
|
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
|
||||||
|
</p>
|
||||||
|
<video src="/voxels/demo.mp4" controls height="320">video not supported :(</video>
|
||||||
|
<p>Demo of fast terrain generation</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="ovr-utils">
|
||||||
|
<h2 class="title-link"><a href="#ovr-utils">OVR Utils</a></h2>
|
||||||
|
<a href="https://github.com/CrispyPin/ovr-utils">https://github.com/CrispyPin/ovr-utils</a>
|
||||||
|
<p>
|
||||||
|
OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="blender">
|
||||||
|
<h2><a href="/blender">Blender creations</a></h2>
|
||||||
|
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
|
||||||
|
<img src="/blender/shork_wallpaper_preview.png" alt="">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="voxel-raymarch">
|
||||||
|
<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
|
||||||
|
<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
|
||||||
|
<img src="/projects/raymarched-voxels.png" alt="">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gol-wallpaper">
|
||||||
|
<h2><a href="https://gol.crispypin.cc/">Game of life wallpaper</a></h2>
|
||||||
|
<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
|
||||||
|
<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
|
||||||
|
<img src="/projects/gol.png" alt="">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="fractals">
|
||||||
|
<h2><a href="/fractals">Fractals</a></h2>
|
||||||
|
While I was learning web development and javascript I made a page with fractals. I thought it was interesting enough to keep here.
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<include footer.html/>
|
<include footer.html/>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<include meta.html/>
|
|
||||||
<title>Projects</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<include header.html/>
|
|
||||||
<main>
|
|
||||||
<br>
|
|
||||||
<b>**This page is a draft**</b>
|
|
||||||
<h1>Projects:</h1>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#voxel-mesh">Voxel mesh optimiser</a></li>
|
|
||||||
<li><a href="#ovr-utils">OVR Utils</a></li>
|
|
||||||
<li><a href="#voxel-raymarch">Raymarched voxel rendering</a></li>
|
|
||||||
<li><a href="#gol-wallpaper">Game of life wallpaper</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2 class="title-link" id="voxel-mesh"><a href="#voxel-mesh">Voxel mesh optimiser and chunk system</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
|
|
||||||
<p>
|
|
||||||
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
|
|
||||||
</p>
|
|
||||||
<video src="/media/projects/voxel/demo.mp4" controls height="320">video not supported :(</video>
|
|
||||||
<p>Demo of fast terrain generation</p>
|
|
||||||
<video src="/media/projects/voxel/demo2.mp4" controls height="320">video not supported :(</video>
|
|
||||||
<p>Greedy mesh visualisation</p>
|
|
||||||
<h3>Greedy mesh algorithm</h3>
|
|
||||||
<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p>
|
|
||||||
|
|
||||||
<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>
|
|
||||||
|
|
||||||
<img src="/media/projects/voxel/fig1.png" alt="">
|
|
||||||
<p>fig. 1: example set of voxels, with the simplest form of mesh generation applied.</p>
|
|
||||||
|
|
||||||
<p>To start off, we can break down the problem to 2 dimensions by recognising that each direction along the axis as well as each layer along those directions is independent. We then only have to process a single 2D slice of the voxel domain at once.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<img src="/media/projects/voxel/fig2.png" alt="">
|
|
||||||
<p>fig. 2: The algorithm only needs to consider one layer and direction at a time, highlighted in green</p>
|
|
||||||
|
|
||||||
<p>The first step is to generate "strips", essentially create long quads that cover connected voxels. We can loop through the plane and keep track of at most one active strip. The active strip is the last one started and we grow it as more voxels under it are traversed. In the inner loop we check the voxel at that position as well as the one above. With this we can determine if we need to stop the current strip, start a new one or do nothing. If there is not currently an active strip, a new one should be created when the voxel below is filled and the one above is empty (an exposed surface). </p>
|
|
||||||
|
|
||||||
<img src="/media/projects/voxel/fig3.png" alt="">
|
|
||||||
<p>fig.3: Long strips of adjacent voxels can be merged into fewer, long quads.</p>
|
|
||||||
|
|
||||||
<h2 class="title-link" id="ovr-utils"><a href="#ovr-utils">OVR Utils</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/ovr-utils">https://github.com/CrispyPin/ovr-utils</a>
|
|
||||||
<p>
|
|
||||||
OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 class="title-link" id="voxel-raymarch"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
|
|
||||||
<img src="/media/projects/raymarched-voxels.png" alt="">
|
|
||||||
|
|
||||||
<h2 class="title-link" id="gol-wallpaper"><a href="#gol-wallpaper">Game of life wallpaper</a></h2>
|
|
||||||
<a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a>
|
|
||||||
<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
<include footer.html/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
42
pages/voxels/index.html
Normal file
42
pages/voxels/index.html
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<include meta.html/>
|
||||||
|
<title>Voxel engine</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<include header.html/>
|
||||||
|
<main>
|
||||||
|
<h1>Godot-Rust Voxel Engine</h1>
|
||||||
|
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
|
||||||
|
<p>
|
||||||
|
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
|
||||||
|
</p>
|
||||||
|
<video src="demo.mp4" controls height="320">video not supported :(</video>
|
||||||
|
<p>Demo of fast terrain generation</p>
|
||||||
|
<video src="demo2.mp4" controls height="320">video not supported :(</video>
|
||||||
|
<p>Greedy mesh visualisation</p>
|
||||||
|
<h3>Greedy mesh algorithm</h3>
|
||||||
|
<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p>
|
||||||
|
|
||||||
|
<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>
|
||||||
|
|
||||||
|
<img src="fig1.png" alt="">
|
||||||
|
<p>fig. 1: example set of voxels, with the simplest form of mesh generation applied.</p>
|
||||||
|
|
||||||
|
<p>To start off, we can break down the problem to 2 dimensions by recognising that each direction along the axis as well as each layer along those directions is independent. We then only have to process a single 2D slice of the voxel domain at once.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img src="fig2.png" alt="">
|
||||||
|
<p>fig. 2: The algorithm only needs to consider one layer and direction at a time, highlighted in green</p>
|
||||||
|
|
||||||
|
<p>The first step is to generate "strips", essentially create long quads that cover connected voxels. We can loop through the plane and keep track of at most one active strip. The active strip is the last one started and we grow it as more voxels under it are traversed. In the inner loop we check the voxel at that position as well as the one above. With this we can determine if we need to stop the current strip, start a new one or do nothing. If there is not currently an active strip, a new one should be created when the voxel below is filled and the one above is empty (an exposed surface). </p>
|
||||||
|
|
||||||
|
<img src="fig3.png" alt="">
|
||||||
|
<p>fig.3: Long strips of adjacent voxels can be merged into fewer, long quads.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<include footer.html/>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<footer>
|
<footer>
|
||||||
<p>Copyright © 2022 - CrispyPin</p>
|
<p>Copyright © 2022 - CrispyPin</p>
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<a href="https://github.com/CrispyPin"><img src="/media/icons/github.png" alt="" width=32px></a>
|
<a href="https://github.com/CrispyPin"><img src="/icons/github.png" alt="" width=32px></a>
|
||||||
<a href="https://crispypin.itch.io/"><img src="/media/icons/itch.io.svg" alt="" width=32px></a>
|
<a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
|
||||||
<a href="https://www.youtube.com/channel/UCFW1QTsbFgux8VrduCz_ckQ"><img src="/media/icons/youtube.png" alt="" width=32px></a>
|
<a href="https://www.youtube.com/CrispyPin42"><img src="/icons/youtube.png" alt="" width=32px></a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt=""></a>
|
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
|
||||||
</header>
|
</header>
|
||||||
<include navbar.html/>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/projects/">Projects</a></li>
|
|
||||||
<li><a href="/blender/">Blender</a></li>
|
|
||||||
<li><a href="/fractals/">Fractals</a></li>
|
|
||||||
<li><a href="https://crispypin.itch.io/">Games</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
Loading…
Reference in a new issue