blug/site/portfolio.html

347 lines
No EOL
19 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>something silly - portfolio</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/creacher.png">
</head>
<body>
<main>
<p>
<u>this page is a work in progress</u>
</p>
<h1 id="portfolio">Portfolio</h1>
<p>
Hi, this is a non-exhaustive list of my personal projects. It appears I like making things with computers.<br>
For my 3D art see <a href="/blender">/blender</a> and photography at <a href="/photos">/photos</a><br>
</p>
<p>
The dates listed are generally the last time any significant change was made, for projects that spanned several months.<br>
</p>
<h2 id="categories">categories</h2>
<p>
- <a href="#hardware">hardware</a><br>
- <a href="#jam-games">game jam games</a><br>
- <a href="#shaders">shaders</a><br>
- <a href="#raymarching">raymarching shaders</a><br>
- <a href="#utilities">utilities</a><br>
- <a href="#misc">misc</a><br>
</p>
<h1 id="hardware">hardware</h1>
<h3 id="leko-pona">leko pona</h3>
<p>
<code>2022-08</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/leko-pona">https://git.crispypin.cc/CrispyPin/leko-pona</a><br>
<img loading="lazy" src="/media/leko_tonsi.png" alt="leko pona, a split keyboard with blank keycaps in the trans flag colours" title="leko pona, a split keyboard with blank keycaps in the trans flag colours"></img>
(The deskmat texture was created with my <a href="#julia-fractal-renderer">julia fractal renderer</a>)<br>
</p>
<h2 id="ch32v003-oled-board">ch32v003 oled board</h2>
<p>
project files: <a href="https://git.crispypin.cc/CrispyPin/ch32_oled">git.crispypin.cc/CrispyPin/ch32_oled</a><br>
</p>
<h3 id="bad-apple">bad apple</h3>
<p>
<code>2024-04</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/bad-apple/">git.crispypin.cc/CrispyPin/bad-apple</a><br>
<a href="https://youtu.be/G0eonL14tCQ">https://youtu.be/G0eonL14tCQ</a>
<iframe loading="lazy" src="https://www.youtube-nocookie.com/embed/G0eonL14tCQ" width="600px" height="340px" allowfullscreen></iframe></p>
<h3 id="conways-game-of-life">Conways Game of Life</h3>
<p>
<code>2024-04</code><br>
<video loading="lazy" src="/media/ch32_gol.mp4" alt="conways game of life on a tiny display" title="conways game of life on a tiny display" controls ></video>
</p>
<h3 id="runner-game">Runner game</h3>
<p>
<code>2024-04</code><br>
<video loading="lazy" src="/media/musi_pi_soweli_tawa.mp4" alt="simple runner game, similar to the chrome dino game" title="simple runner game, similar to the chrome dino game" controls ></video>
</p>
<h2 id="rotary-encoder-keyboard">rotary encoder keyboard</h2>
<p>
<code>2022-05</code><br>
<a href="https://github.com/CrispyPin/rotary-kb/">github.com/CrispyPin/rotary-kb</a><br>
A silly project making a terrible input device. You select a letter by rotating right and left moving down a tree, and press to type it.<br>
<img loading="lazy" src="/media/rotary_kb.png" alt="a breadboard circuit with a rotary encoder" title="a breadboard circuit with a rotary encoder"></img>
</p>
<h1 id="jam-games">jam games</h1>
<p>
LD is the <a href="https://ldjam.com/">Ludum Dare game jam</a>, where you have 3 days to create a game fitting to a theme that is revealed when the jam starts.<br>
</p>
<p>
All the below games except for <code>LD45: Mind the Gap</code> I made together with <a href="https://github.com/ErikBot42">Erikbot</a>. I have done both art and programming for all of them.<br>
</p>
<h3 id="ld50-pixel-entropy">LD50: Pixel Entropy</h3>
<p>
<code>2022-04</code><br>
<a href="https://crispypin.itch.io/ld-50">crispypin.itch.io/ld-50</a><br>
<a href="https://github.com/CrispyPin/ld-50">github.com/CrispyPin/ld-50</a><br>
<img loading="lazy" src="/media/jam-games/pixel_entropy.png" alt="a 2D pixel physics sandbox" title="a 2D pixel physics sandbox"></img>
</p>
<h3 id="ld49-shork-inc">LD49: Shork Inc</h3>
<p>
<code>2021-09</code><br>
<a href="https://crispypin.itch.io/ld-49">crispypin.itch.io/ld-49</a><br>
<a href="https://github.com/CrispyPin/ld-49">github.com/CrispyPin/ld-49</a><br>
<img loading="lazy" src="/media/jam-games/shork_inc.png" alt="a messy low-poly warehouse scene" title="a messy low-poly warehouse scene"></img>
</p>
<h3 id="ld48-shork">LD48: Shork</h3>
<p>
<code>2021-04</code><br>
<a href="https://crispypin.itch.io/ld-48">crispypin.itch.io/ld-48</a><br>
<a href="https://github.com/CrispyPin/ld-48">github.com/CrispyPin/ld-48</a><br>
</p>
<h3 id="ld47-dynamic-flux-entropy">LD47: Dynamic Flux Entropy</h3>
<p>
<code>2020-10</code><br>
<a href="https://crispypin.itch.io/ld-47">crispypin.itch.io/ld-47</a><br>
<a href="https://github.com/CrispyPin/ld-47">github.com/CrispyPin/ld-47</a><br>
</p>
<h3 id="ld46-tree-shroomulator">LD46: Tree Shroomulator</h3>
<p>
<code>2020-04</code><br>
<a href="https://crispypin.itch.io/ld-46">crispypin.itch.io/ld-46</a><br>
</p>
<h3 id="ld45-mind-the-gap">LD45: Mind the Gap</h3>
<p>
<code>2019-10</code><br>
<a href="https://crispypin.itch.io/ld-45">crispypin.itch.io/ld-45</a><br>
</p>
<h3 id="blackthornprod-gamejam-2-starship-conquer-space">Blackthornprod gamejam 2: Starship: Conquer Space</h3>
<p>
<code>2019-04</code><br>
<a href="https://crispypin.itch.io/starship-conquer-space">crispypin.itch.io/starship-conquer-space</a><br>
<img loading="lazy" src="/media/jam-games/starship.png" alt="some machines on the surface of a tiny planet, with a cosmonaut in the center" title="some machines on the surface of a tiny planet, with a cosmonaut in the center"></img>
</p>
<h3 id="ld43-the-robots-adventure">LD43: The robot's adventure</h3>
<p>
<code>2018-12</code><br>
<a href="https://crispypin.itch.io/ld-43">crispypin.itch.io/ld-43</a><br>
</p>
<h3 id="ld42-forklift-simulator">LD42: Forklift Simulator</h3>
<p>
<code>2018-08</code><br>
<a href="https://crispypin.itch.io/ld-42">crispypin.itch.io/ld-42</a><br>
<img loading="lazy" src="/media/jam-games/forklift_simulator.png" alt="top-down view of a forklift surrounded by boxes in different colours" title="top-down view of a forklift surrounded by boxes in different colours"></img>
</p>
<h1 id="shaders">shaders</h1>
<p>
Most of my shaders are made in Unity and uploaded as props for ChilloutVR. All my ChilloutVR props are in <a href="https://git.crispypin.cc/CrispyPin/cvr-props">this repository</a>.<br>
</p>
<h3 id="void-sphere">void sphere</h3>
<p>
<code>2024-09</code><br>
My first time making a vertex shader, it generally works on any simple mesh.<br>
<video loading="lazy" src="/media/shaders/void_sphere.mp4" alt="" title="" controls ></video>
</p>
<h3 id="hilbert-worms">hilbert worms</h3>
<p>
<code>2024-09</code><br>
Little worms following the hilbert curve<br>
<video loading="lazy" src="/media/shaders/hilbert_worms.mp4" alt="bright pink pixel worms" title="bright pink pixel worms" controls loop=true></video>
</p>
<h3 id="partial-qr-code">partial QR code</h3>
<p>
<code>2024-08</code><br>
A shader that can display qr codes of any size, though it requires computing the error correction codes beforehand. Partially because it would be slow to do for every pixel every frame, but mostly because I couldn't find a resource explaining how to do it.<br>
<video loading="lazy" src="/media/shaders/qr_shader_bit_order.mp4" alt="" title="" controls ></video>
(I used <a href="https://www.nayuki.io/page/creating-a-qr-code-step-by-step">https://www.nayuki.io/page/creating-a-qr-code-step-by-step</a> as a reference, though the algorithm is very different because I'm using a shader)<br>
</p>
<h3 id="shader-quine">shader quine</h3>
<p>
<code>2024-08</code><br>
A <a href="https://en.wikipedia.org/wiki/Self-reproducing_program">quine</a> is a program that outputs its own source code. Since shaders don't have text or file outputs, a shader quine must render its own source code instead. This shader contains the font data required to be readable.<br>
<a href="/media/shaders/shader_quine_198x99.png">
<img loading="lazy" src="/media/shaders/shader_quine_198x99.png" alt="(click for full resolution) A large square of shader code, being rendered by itself" title="(click for full resolution) A large square of shader code, being rendered by itself"></img>
</a>
</p>
<h3 id="shader-quine-golf">shader quine golf</h3>
<p>
<code>2024-08</code><br>
Code golf is the art of shortening a program as much as possible while still producing a required behavior. I made a tiny version of the quine, only 2877 bytes large. At the end it does render some random characters, but I still consider it valid. When code golfing, undefined behaviour is part of the fun.<br>
<img loading="lazy" src="/media/shaders/shader_quine_2877.png" alt="a smaller wall of text, with a low-resolution font that is just barely readable" title="a smaller wall of text, with a low-resolution font that is just barely readable"></img>
</p>
<h3 id="sunset">sunset</h3>
<p>
<code>2023-02</code><br>
This is a single fragment shader, which means you can put it on any mesh and it will look the same.<br>
<img loading="lazy" src="/media/shaders/sunset_shader.png" alt="sunset over a calm ocean, with stars visible in the purple sky" title="sunset over a calm ocean, with stars visible in the purple sky"></img>
</p>
<h3 id="julia-fractal">julia fractal</h3>
<p>
<code>2023-07</code><br>
They are both animated slowly, but the second one has distortion based on world position.<br>
<img loading="lazy" src="/media/shaders/julia.png" alt="bright purple julia fractal" title="bright purple julia fractal"></img>
<img loading="lazy" src="/media/shaders/julia_distorted.png" alt="bright purple julia fractal, with distortion" title="bright purple julia fractal, with distortion"></img>
</p>
<h2 id="andriod">andriod</h2>
<p>
<code>2024-05</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/android-shaders">git.crispypin.cc/CrispyPin/android-shaders</a><br>
Using the app <a href="https://f-droid.org/en/packages/de.markusfisch.android.shadereditor/">Shader Editor</a>, I made some shaders for my phones' wallpaper.<br>
</p>
<h3 id="binary-clock-variants">binary clock variants</h3>
<p>
<code>2024-05</code><br>
The 4x4 version divides the day into 2^16 sections, each one about 1.3s long, and displays the number of sections passed since midnight as a binary number.<br>
<img loading="lazy" src="/media/shaders/binary_clock_square.png" alt="a 4x4 grid of circles, some of which are filled" title="a 4x4 grid of circles, some of which are filled"></img>
</p>
<p>
This 3-row version uses the traditional division of hours, minutes and seconds, just displaying the three numbers in binary.<br>
<img loading="lazy" src="/media/shaders/binary_clock.png" alt="3 rows of 5, 6 and 6 circles" title="3 rows of 5, 6 and 6 circles"></img>
</p>
<h2 id="raymarching">raymarching</h2>
<h3 id="libgarbage">libgarbage</h3>
<p>
<code>2023-07</code><br>
libgarbage is my raymarching shader library, with which all the following shaders are made with. It doesn't have its own repository right now, but can be found in <a href="https://git.crispypin.cc/CrispyPin/cvr-props/src/branch/main/Assets/raymarched/lib">git.crispypin.cc/CrispyPin/cvr-props</a><br>
</p>
<h3 id="libgarbage-demo">libgarbage demo</h3>
<p>
<code>2023-09</code><br>
An example scene made for libgarbage, showing most of the primitive shapes available.<br>
<video loading="lazy" src="/media/shaders/rm_demo_scene.mp4" alt="a collection of sdf primitives with a reflective material" title="a collection of sdf primitives with a reflective material" controls ></video>
</p>
<h3 id="spinny-thing">spinny thing</h3>
<p>
<code>2023-07</code><br>
<video loading="lazy" src="/media/shaders/rm_spinny_thing.mp4" alt="" title="" controls ></video>
</p>
<h3 id="flesh-cube">flesh cube</h3>
<p>
<code>2023-07</code><br>
<video loading="lazy" src="/media/shaders/rm_flesh_cube.mp4" alt="disgusting pulsating fleshy cube" title="disgusting pulsating fleshy cube" controls ></video>
</p>
<h3 id="big-nut">big nut</h3>
<p>
<code>2023-09</code><br>
I am very mature.<br>
<video loading="lazy" src="/media/shaders/rm_big_nut.mp4" alt="a spinning metallic bolt and nut continually screwing and unscrewing itself" title="a spinning metallic bolt and nut continually screwing and unscrewing itself" controls ></video>
</p>
<h3 id="loops">loops</h3>
<p>
<code>2024-08</code><br>
<video loading="lazy" src="/media/shaders/rm_looping_loops.mp4" alt="11 rectangular frames moving through each other smoothly" title="11 rectangular frames moving through each other smoothly" controls loop=true></video>
</p>
<h3 id="boxes">boxes</h3>
<p>
<code>2024-08</code><br>
<video loading="lazy" src="/media/shaders/rm_boxes.mp4" alt="" title="" controls ></video>
</p>
<h2 id="cellular-automata">cellular automata</h2>
<h3 id="game-of-life">game of life</h3>
<p>
<code>2023-07</code><br>
I also made a web version of this in may 2021, see <a href="https://gol.crispypin.cc/?cellsize=10&time=2">gol.crispypin.cc</a> or <a href="https://github.com/CrispyPin/gol-wallpaper">github.com/CrispyPin/gol-wallpaper</a> for the source<br>
<img loading="lazy" src="/media/shaders/game_of_life.png" alt="Conway's game of life" title="Conway's game of life"></img>
</p>
<h3 id="rule-110">rule 110</h3>
<p>
<code>2023-09</code><br>
See <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">Elementary cellular automaton (Wikipedia)</a>.<br>
<img loading="lazy" src="/media/shaders/rule_110.png" alt="elementary cellular automata 110" title="elementary cellular automata 110"></img>
</p>
<h3 id="wireworld">WireWorld</h3>
<h3 id="leniasmoothlife">Lenia/smoothlife</h3>
<h2 id="godot">godot</h2>
<h3 id="voxel-raymarcher">voxel raymarcher</h3>
<h1 id="utilities">utilities</h1>
<p>
These programs are less flashy and were made out of necessity. I don't expect anyone else to want to use them, but they are available if that was the case.<br>
</p>
<h3 id="snoud">snoud</h3>
<p>
<code>2023-02</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/snoud">https://git.crispypin.cc/CrispyPin/snoud</a><br>
A simple terminal app that plays multiple audio files on loop, meant for background ambience. I use it for rain and wind sound and have it auto-start when I log in.<br>
<img loading="lazy" src="/media/snoud.png" alt="" title=""></img>
</p>
<h3 id="htmd">htmd</h3>
<p>
<code>2024-09</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/htmd">https://git.crispypin.cc/CrispyPin/htmd</a><br>
This is the markdown to html generator that this site is built with. It uses markdown as a base but is far from standard markdown, it has weird quirks and macros that I needed.<br>
</p>
<h3 id="webserver">webserver</h3>
<p>
<code>2024-07</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/webserver">https://git.crispypin.cc/CrispyPin/webserver</a><br>
Made at first to learn, then to run this website. It seves files and supports partial requests, allowing you to watch videos without needing the whole file to be cached first. (videos are still partially broken, only some formats work properly)<br>
</p>
<h3 id="julia-fractal-renderer">julia fractal renderer</h3>
<p>
<code>2023-07</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/julia-fractal-renderer">https://git.crispypin.cc/CrispyPin/julia-fractal-renderer</a><br>
I used this to generate the image printed on my deskmat, seen in <a href="#leko-pona">the picture of my keyboard</a><br>
(see source repo for more examples)<br>
<img loading="lazy" src="/media/julia_brain_coral.png" alt="" title=""></img>
<img loading="lazy" src="/media/julia_renderer_gui.png" alt="" title=""></img>
</p>
<h3 id="brainfuck-debugger">brainfuck debugger</h3>
<p>
<code>2023-12</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/bf-debugger">https://git.crispypin.cc/CrispyPin/bf-debugger</a><br>
When I was solving some <a href="https://adventofcode.com/2023">Advent of Code</a> problems in <a href="https://esolangs.org/wiki/Brainfuck">Brainfuck</a>, I found myself missing the ability to set breakpoints and step a number of iterations through the program, so I made an interactive brainfuck debugger.<br>
<img loading="lazy" src="/media/bf_debugger.png" alt="" title=""></img>
</p>
<p>
I used this to develop solutions for part one of day 1 and 4, in advent of code 2023. These can be found here: <a href="https://git.crispypin.cc/CrispyPin/aoc-2023/src/branch/main/bf">https://git.crispypin.cc/CrispyPin/aoc-2023/src/branch/main/bf</a><br>
</p>
<h3 id="text-editor-lili">text editor lili</h3>
<p>
<code>2023-03</code><br>
source: <a href="https://git.crispypin.cc/CrispyPin/lili">https://git.crispypin.cc/CrispyPin/lili</a><br>
<code>lili</code> is a terminal text editor that can keep multiple files open. It is far from perfect, it doesn't handle soft linebreaks well and lacks undo/redo. But wider characters at least work (tabs and emoji).<br>
<img loading="lazy" src="/media/lili_file_list.png" alt="" title=""></img>
</p>
<h3 id="compiler-timer">compiler-timer</h3>
<p>
<code>2024-01</code><br>
source: <a href="https://git.crispypin.cc/crispyPin/compiler-timer">https://git.crispypin.cc/crispyPin/compiler-timer</a><br>
At work, I was frustrated by 20-45 minute C++ compile times, so I made a compiler wrapper that keeps track of build times, and tells me the average time wasted per day.<br>
</p>
<p>
Example output<br>
</p>
<pre>
(regular compiler output)
Build took 18.025s
Total wasted today: 44m 5s
5 day average: 35m 38s
Overall average: 40m 22s
Since 2023-09-07: 55h 11m 22s
</pre>
<h3 id="gdvk-godot-virtual-system-input">GDVK godot virtual system input</h3>
<h2 id="steamvr">SteamVR</h2>
<h3 id="ovr-utils">OVR Utils</h3>
<h3 id="sinpin-vr">sinpin-vr</h3>
<h3 id="steamvr_status">steamvr_status</h3>
<h1 id="misc">misc</h1>
<h3 id="snad">snad</h3>
<h3 id="worm-lang">worm lang</h3>
<h3 id="asetniop-emulator-for-x11">asetniop emulator for x11</h3>
<h3 id="june">june</h3>
<h3 id="neuralblender-mc">neuralblender-mc</h3>
<p>
<code>2021-09</code><br>
<a href="https://github.com/crispypin/neuralblender-mc">https://github.com/crispypin/neuralblender-mc</a><br>
This was before the "AI" hype bubble became as obnoxious as it is now. I found the website neuralblender.com (no they don't deserve a hyperlink), which generated quite terrible images from a text prompt. There was no information about the website anywhere.<br>
I made a stupid input-emulating script that ran in a vm and generated textures for every texture in minecraft 1.17.<br>
</p>
<p>
The cursed flowers in the picture below are poppies, which for some reason resulted in a blue-haired cryptid in the corner.<br>
<img loading="lazy" src="/media/neuralblender_minecraft.png" alt="minecraft with very weird textures. Poppy flowers are cursed" title="minecraft with very weird textures. Poppy flowers are cursed"></img>
</p>
<h3 id="minesweeper-rs">minesweeper-rs</h3>
<h3 id="rust-mandelbrot">rust-mandelbrot</h3>
<h3 id="voxel-engine-in-godot-c">voxel engine in godot c++</h3>
<h3 id="counterbot">CounterBot</h3>
<h3 id="godot-multiplayer-voxel-game-demo-school-project">godot multiplayer voxel game demo (school project)</h3>
</main>
</body>
</html>