made it a bit less boring

This commit is contained in:
Crispy 2023-03-21 23:09:50 +01:00
parent a209989246
commit de0d17a5b1
14 changed files with 215 additions and 78 deletions

View file

@ -5,12 +5,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png"> <link rel="icon" type="image/x-icon" href="/icons/cretin.png">
<title>Blender creations</title> <title>Blender creations</title>
</head> </head>
<body> <body>
<header> <header>
<img src="/icons/cretin.png" alt="">
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a> <a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
</header> </header>
<main> <main>
<h1>Blender creations</h1> <h1>Blender creations</h1>
@ -39,7 +41,7 @@
<a href="shork_wallpaper.png"><img src="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>You can find me here:</p> <p>me on other interweb location(s):</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/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="/icons/itch.io.svg" alt="" width=32px></a> <a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>

View file

@ -1,11 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png"> <link rel="icon" type="image/x-icon" href="/icons/cretin.png">
<title>Fractals</title> <title>Fractals</title>
<style> <style>
.demo-render { .demo-render {
@ -26,23 +27,24 @@
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: space-evenly; -webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly; -ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
-ms-flex-line-pack: stretch; -ms-flex-line-pack: stretch;
align-content: stretch; align-content: stretch;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }
.controlbar button, .controlbar input { .controlbar button,
.controlbar input {
padding: 4px 6px; padding: 4px 6px;
height: 25px; height: 25px;
border: 1px solid #000; border: 1px solid #000;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;
flex-grow: 1; flex-grow: 1;
margin: 2px; margin: 2px;
} }
@ -53,20 +55,32 @@
font-family: 'Consolas', 'Courier New', Courier, monospace; font-family: 'Consolas', 'Courier New', Courier, monospace;
} }
.clickable, nav li, .controlbar button, .controlbar input { .clickable,
nav li,
.controlbar button,
.controlbar input {
border-radius: 2px; border-radius: 2px;
background-color: #4a4; background-color: #4a4;
} }
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover { .clickable:hover,
nav li:hover,
.controlbar button:hover,
.controlbar input:hover {
background-color: #4af; background-color: #4af;
} }
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active { .clickable:active,
nav li:active,
.controlbar button:active,
.controlbar input:active {
background-color: #46c; background-color: #46c;
} }
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled { .clickable:disabled,
nav li:disabled,
.controlbar button:disabled,
.controlbar input:disabled {
background-color: #8b8; background-color: #8b8;
text-decoration: line-through; text-decoration: line-through;
color: #000; color: #000;
@ -74,15 +88,20 @@
} }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<img src="/icons/cretin.png" alt="">
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a> <a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
</header> </header>
<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.</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">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
@ -97,17 +116,18 @@
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="mandelbrot.reset()">Reset</button> <button type="button" onclick="mandelbrot.reset()">Reset</button>
<input type="number" min=1 max=1000 value=256 onchange="mandelbrot.setIter(value)"> <input type="number" min=1 max=256 value=48 onchange="mandelbrot.setIter(value)">
</div> </div>
</div> </div>
<h2>Multibrot set</h2> <h2>Multibrot set</h2>
<a href="https://en.wikipedia.org/wiki/Multibrot_set">Wikipedia page</a> <a href="https://en.wikipedia.org/wiki/Multibrot_set">Wikipedia page</a>
<p>You can click to zoom and set the iteration count in the input field. The second input controls the exponent. This is quite slow to render.</p> <p>You can click to zoom and set the iteration count in the input field. The second input controls the exponent.
This is quite slow to render.</p>
<div class="demo-render" id="multibrot"> <div class="demo-render" id="multibrot">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="multibrot.reset()">Render</button> <button type="button" onclick="multibrot.reset()">Render</button>
<input type="number" min=1 max=1000 value=256 onchange="multibrot.setIter(value)"> <input type="number" min=1 max=256 value=48 onchange="multibrot.setIter(value)">
<input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)"> <input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)">
</div> </div>
</div> </div>
@ -124,7 +144,7 @@
<script src="fractals.js"></script> <script src="fractals.js"></script>
</main> </main>
<footer> <footer>
<p>You can find me here:</p> <p>me on other interweb location(s):</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/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="/icons/itch.io.svg" alt="" width=32px></a> <a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
@ -132,4 +152,5 @@
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

BIN
docs/fractals/tree.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

BIN
docs/icons/cretin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -1,29 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png"> <link rel="icon" type="image/x-icon" href="/icons/cretin.png">
<title>crispypin.cc</title> <title>Crispy's Cave</title>
</head> </head>
<body> <body>
<header> <header>
<img src="/icons/cretin.png" alt="">
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a> <a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
</header> </header>
<main> <main>
<section id="introduction"> <section id="introduction">
<h1>Hello!</h1> <h1>Hey nerd</h1>
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects.</p> <p>Welcome to my corner of the internet. I use this page to dump some of my less uninteresting projects.</p>
<p>You can find all my code projects on <a href="https://github.com/CrispyPin">GitHub</a> and all published games are available on <a href="https://crispypin.itch.io">itch.io</a></p> <p>Basically everything is also on <a href="https://github.com/CrispyPin">GitHub</a> and all my (published)
games are on <a href="https://crispypin.itch.io">itch.io</a></p>
<p>My list of future projects is essentially infinite, because it grows at a rate of 2 per week and i only
start like one thing every 2 weeks</p>
</section> </section>
<section id="voxels"> <section id="voxels">
<h2><a href="/voxels">Voxel engine in godot-rust</a></h2> <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> <a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
<p> <p>
I made a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems. It has (practically) infinite terrain generation, lets you place and remove voxels and supports transparent voxel types. The main point was to develop an optimised meshing algorithm. I made a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems. It has
(practically) infinite terrain generation, lets you place and remove voxels and supports transparent
voxel types. The main point was to develop an optimised meshing algorithm.
</p> </p>
<video src="/voxels/demo.mp4" controls height="320">video not supported :(</video> <video src="/voxels/demo.mp4" controls height="320">video not supported :(</video>
</section> </section>
@ -32,29 +41,39 @@
<h2 class="title-link"><a href="#ovr-utils">OVR Utils</a></h2> <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> <a href="https://github.com/CrispyPin/ovr-utils">https://github.com/CrispyPin/ovr-utils</a>
<p> <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. 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>
<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. 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> </p>
</section> </section>
<section id="blender"> <section id="blender">
<h2><a href="/blender">Blender creations</a></h2> <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> <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=""> <img src="/blender/shork_wallpaper_preview.png" alt="">
</section> </section>
<section id="voxel-raymarch"> <section id="voxel-raymarch">
<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2> <h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
<p>Source: <a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a></p> <p>Source: <a
href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
</p>
<p>A raymarched voxel renderer made with a Godot shader.</p> <p>A raymarched voxel renderer made with a Godot shader.</p>
<img src="/projects/raymarched-voxels.png" alt=""> <img src="/projects/raymarched-voxels.png" alt="">
</section> </section>
<section id="gol-wallpaper"> <section id="gol-wallpaper">
<h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a></h2> <h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a>
<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p> </h2>
<p>Source: <a
href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
<p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p> <p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p>
<img src="/projects/gol.png" alt=""> <img src="/projects/gol.png" alt="">
@ -62,12 +81,14 @@
<section id="fractals"> <section id="fractals">
<h2><a href="/fractals">Fractals</a></h2> <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. <p> While I was learning web development and JavaScript I made a page with fractals. I thought it was
interesting enough to keep here.</p>
<img src="/fractals/tree.png" alt="">
</section> </section>
</main> </main>
<footer> <footer>
<p>You can find me here:</p> <p>me on other interweb location(s):</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/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="/icons/itch.io.svg" alt="" width=32px></a> <a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>
@ -75,4 +96,5 @@
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

31
docs/keyboard/index.html Normal file
View file

@ -0,0 +1,31 @@
<!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="/icons/cretin.png">
<title>The Keyboard Rant™</title>
</head>
<body>
<header>
<img src="/icons/cretin.png" alt="">
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
</header>
<main>
<p>todo :)</p>
</main>
<footer>
<p>me on other interweb location(s):</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>

View file

@ -5,19 +5,21 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png"> <link rel="icon" type="image/x-icon" href="/icons/cretin.png">
<title>Redirecting</title> <title>Redirecting</title>
<meta http-equiv="Refresh" content="0; url='/'" /> <meta http-equiv="Refresh" content="0; url='/'" />
</head> </head>
<body> <body>
<header> <header>
<img src="/icons/cretin.png" alt="">
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a> <a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
</header> </header>
<main> <main>
<p>this link is no longer valid, please go <a href="/">here</a> instead</p> <p>this link is no longer valid, please go <a href="/">here</a> instead</p>
</main> </main>
<footer> <footer>
<p>You can find me here:</p> <p>me on other interweb location(s):</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/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="/icons/itch.io.svg" alt="" width=32px></a> <a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>

View file

@ -5,12 +5,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png"> <link rel="icon" type="image/x-icon" href="/icons/cretin.png">
<title>Voxel engine</title> <title>Voxel engine</title>
</head> </head>
<body> <body>
<header> <header>
<img src="/icons/cretin.png" alt="">
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a> <a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
</header> </header>
<main> <main>
<h1>Godot-Rust Voxel Engine</h1> <h1>Godot-Rust Voxel Engine</h1>
@ -45,7 +47,7 @@
<p>fig.3: Long strips of adjacent voxels can be merged into fewer, long quads.</p> <p>fig.3: Long strips of adjacent voxels can be merged into fewer, long quads.</p>
</main> </main>
<footer> <footer>
<p>You can find me here:</p> <p>me on other interweb location(s):</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/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="/icons/itch.io.svg" alt="" width=32px></a> <a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>

View file

@ -1,7 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<include meta.html/> <include meta.html />
<title>Fractals</title> <title>Fractals</title>
<style> <style>
.demo-render { .demo-render {
@ -22,23 +23,24 @@
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: space-evenly; -webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly; -ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
-ms-flex-line-pack: stretch; -ms-flex-line-pack: stretch;
align-content: stretch; align-content: stretch;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }
.controlbar button, .controlbar input { .controlbar button,
.controlbar input {
padding: 4px 6px; padding: 4px 6px;
height: 25px; height: 25px;
border: 1px solid #000; border: 1px solid #000;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;
flex-grow: 1; flex-grow: 1;
margin: 2px; margin: 2px;
} }
@ -49,20 +51,32 @@
font-family: 'Consolas', 'Courier New', Courier, monospace; font-family: 'Consolas', 'Courier New', Courier, monospace;
} }
.clickable, nav li, .controlbar button, .controlbar input { .clickable,
nav li,
.controlbar button,
.controlbar input {
border-radius: 2px; border-radius: 2px;
background-color: #4a4; background-color: #4a4;
} }
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover { .clickable:hover,
nav li:hover,
.controlbar button:hover,
.controlbar input:hover {
background-color: #4af; background-color: #4af;
} }
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active { .clickable:active,
nav li:active,
.controlbar button:active,
.controlbar input:active {
background-color: #46c; background-color: #46c;
} }
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled { .clickable:disabled,
nav li:disabled,
.controlbar button:disabled,
.controlbar input:disabled {
background-color: #8b8; background-color: #8b8;
text-decoration: line-through; text-decoration: line-through;
color: #000; color: #000;
@ -70,13 +84,16 @@
} }
</style> </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.</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">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
@ -91,17 +108,18 @@
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="mandelbrot.reset()">Reset</button> <button type="button" onclick="mandelbrot.reset()">Reset</button>
<input type="number" min=1 max=1000 value=256 onchange="mandelbrot.setIter(value)"> <input type="number" min=1 max=256 value=48 onchange="mandelbrot.setIter(value)">
</div> </div>
</div> </div>
<h2>Multibrot set</h2> <h2>Multibrot set</h2>
<a href="https://en.wikipedia.org/wiki/Multibrot_set">Wikipedia page</a> <a href="https://en.wikipedia.org/wiki/Multibrot_set">Wikipedia page</a>
<p>You can click to zoom and set the iteration count in the input field. The second input controls the exponent. This is quite slow to render.</p> <p>You can click to zoom and set the iteration count in the input field. The second input controls the exponent.
This is quite slow to render.</p>
<div class="demo-render" id="multibrot"> <div class="demo-render" id="multibrot">
<canvas></canvas> <canvas></canvas>
<div class="controlbar"> <div class="controlbar">
<button type="button" onclick="multibrot.reset()">Render</button> <button type="button" onclick="multibrot.reset()">Render</button>
<input type="number" min=1 max=1000 value=256 onchange="multibrot.setIter(value)"> <input type="number" min=1 max=256 value=48 onchange="multibrot.setIter(value)">
<input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)"> <input type="number" min=0 max=32 step=0.1 value=4 onchange="multibrot.setPower(value)">
</div> </div>
</div> </div>
@ -117,6 +135,7 @@
</div> </div>
<script src="fractals.js"></script> <script src="fractals.js"></script>
</main> </main>
<include footer.html/> <include footer.html />
</body> </body>
</html> </html>

View file

@ -1,23 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<include meta.html/> <include meta.html />
<title>crispypin.cc</title> <title>Crispy's Cave</title>
</head> </head>
<body> <body>
<include header.html/> <include header.html />
<main> <main>
<section id="introduction"> <section id="introduction">
<h1>Hello!</h1> <h1>Hey nerd</h1>
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects.</p> <p>Welcome to my corner of the internet. I use this page to dump some of my less uninteresting projects.</p>
<p>You can find all my code projects on <a href="https://github.com/CrispyPin">GitHub</a> and all published games are available on <a href="https://crispypin.itch.io">itch.io</a></p> <p>Basically everything is also on <a href="https://github.com/CrispyPin">GitHub</a> and all my (published)
games are on <a href="https://crispypin.itch.io">itch.io</a></p>
<p>My list of future projects is essentially infinite, because it grows at a rate of 2 per week and i only
start like one thing every 2 weeks</p>
</section> </section>
<section id="voxels"> <section id="voxels">
<h2><a href="/voxels">Voxel engine in godot-rust</a></h2> <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> <a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
<p> <p>
I made a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems. It has (practically) infinite terrain generation, lets you place and remove voxels and supports transparent voxel types. The main point was to develop an optimised meshing algorithm. I made a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems. It has
(practically) infinite terrain generation, lets you place and remove voxels and supports transparent
voxel types. The main point was to develop an optimised meshing algorithm.
</p> </p>
<video src="/voxels/demo.mp4" controls height="320">video not supported :(</video> <video src="/voxels/demo.mp4" controls height="320">video not supported :(</video>
</section> </section>
@ -26,29 +33,39 @@
<h2 class="title-link"><a href="#ovr-utils">OVR Utils</a></h2> <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> <a href="https://github.com/CrispyPin/ovr-utils">https://github.com/CrispyPin/ovr-utils</a>
<p> <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. 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>
<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. 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> </p>
</section> </section>
<section id="blender"> <section id="blender">
<h2><a href="/blender">Blender creations</a></h2> <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> <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=""> <img src="/blender/shork_wallpaper_preview.png" alt="">
</section> </section>
<section id="voxel-raymarch"> <section id="voxel-raymarch">
<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2> <h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
<p>Source: <a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a></p> <p>Source: <a
href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
</p>
<p>A raymarched voxel renderer made with a Godot shader.</p> <p>A raymarched voxel renderer made with a Godot shader.</p>
<img src="/projects/raymarched-voxels.png" alt=""> <img src="/projects/raymarched-voxels.png" alt="">
</section> </section>
<section id="gol-wallpaper"> <section id="gol-wallpaper">
<h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a></h2> <h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a>
<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p> </h2>
<p>Source: <a
href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
<p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p> <p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p>
<img src="/projects/gol.png" alt=""> <img src="/projects/gol.png" alt="">
@ -56,10 +73,13 @@
<section id="fractals"> <section id="fractals">
<h2><a href="/fractals">Fractals</a></h2> <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. <p> While I was learning web development and JavaScript I made a page with fractals. I thought it was
interesting enough to keep here.</p>
<img src="/fractals/tree.png" alt="">
</section> </section>
</main> </main>
<include footer.html/> <include footer.html />
</body> </body>
</html> </html>

16
pages/keyboard/index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<include meta.html/>
<title>The Keyboard Rant™</title>
</head>
<body>
<include header.html/>
<main>
<p>todo :)</p>
</main>
<include footer.html/>
</body>
</html>

View file

@ -1,5 +1,5 @@
<footer> <footer>
<p>You can find me here:</p> <p>me on other interweb location(s):</p>
<div class="links"> <div class="links">
<a href="https://github.com/CrispyPin"><img src="/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="/icons/itch.io.svg" alt="" width=32px></a> <a href="https://crispypin.itch.io/"><img src="/icons/itch.io.svg" alt="" width=32px></a>

View file

@ -1,3 +1,5 @@
<header> <header>
<img src="/icons/cretin.png" alt="">
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a> <a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
<img src="/icons/cretin.png" alt="" style="transform: scaleX(-1);">
</header> </header>

View file

@ -2,4 +2,4 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/icons/favicon.png"> <link rel="icon" type="image/x-icon" href="/icons/cretin.png">