cleaning up backlog.

This commit is contained in:
Jacob Guenther 2021-09-16 22:46:16 -08:00
parent 7c38707686
commit 4efd001ba6
20 changed files with 35 additions and 1139 deletions

View File

@ -1,40 +0,0 @@
# ~chmod777
## Introductions
Hello!
Around the web I mostly go by chmod777. Feel free to ask me anything.
I am a recent computer science graduate with no clue what they are doing in life.
I just set this up so ther is more to add.
## Contact info
* fediverse/mastodon: @chmod777@linuxrocks.online
* irc.tilde.chat: chmodrwx
* gitea: tildegit.org/chmod777
## What you will find here
Blog posts about
* Software dev
* Hardware dev
* Aluminium casting
* Gardening
* Baking
* Other hobby projects
* Ramblings
You can find the web version of my blog at
=> http://tilde.club/~chmod777 ~chmod777
I just started working on a .html to .gmi converter for the posts in this gemlog so that my content on my blog will also be available here. Some features of the converter are still missing so if it looks like something is missing from one of these posts it might be but it also might be that I gave up writing halfway through.
=> https://tildegit.org/chmod777/html2gemini_rs html2gemini_rs
## Posts

View File

@ -1,78 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>chmod777's tilde</title>
<meta name="description" content="chmod777's tilde where they share their projects and stuff">
<meta name="author" content="chmod777">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<h1 id="title">~chmod777</h1>
<p>You can also find this blog on gemini at</p>
<a href="gemini://tilde.club/~chmod777">gemini://tilde.club/~chmod777</a>
</header>
<nav>
<ul>
<li><a href="#introductions">Introductions</a></li>
<li><a href="#contact-info">Contact info</a></li>
<li><a href="#find-here">What you will find here</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#botany">My Botany Plant</a></li>
</ul>
</nav>
<main>
<section id="introductions">
<h2>Introductions</h2>
<p>Hello!</p>
<p>On the internet I go by chmod777. Feel free to ask me anything.</p>
<p>A recent computer science graduate with no clue what they are doing in life.</p>
<p>I just set this up so there is more to add.</p>
</section>
<section id="contact-info">
<h2>Contact info</h2>
<ul>
<li>fediverse/mastodon: @chmod777@tilde.zone</li>
<li>irc.tilde.chat: chmodrwx</li>
<li>gitea: tildegit.org/chmod777</li>
</ul>
</section>
<section id="find-here">
<h2>What you will find here</h2>
<p>Blog posts about</p>
<ul>
<li>Software dev</li>
<li>Hardware dev</li>
<li>Aluminium casting</li>
<li>Gardening</li>
<li>Baking</li>
<li>Other hobby projects</li>
<li>Ramblings</li>
</ul>
</section>
<section id="posts">
<h2>Posts</h2>
</section>
</main>
<footer>
<nav>
<span>~</span>
<a href="#">Top</a>
<span>~</span>
</nav>
<br>
<a id="page-source" href="https://tildegit.org/chmod777/my_blog">Page source</a>
</footer>
</body>
</html>

View File

@ -1,55 +0,0 @@
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8">
<title>chmod777's tilde - Casting Aluminium Settlers of Catan Board</title>
<meta name="description" content="">
<meta name="author" content="chmod777">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<h1>~chmod777</h1>
<nav>
<a href="/~chmod777/">Home</a>
</nav>
</header>
<main>
<h2 id="settlers-catan-casting">Casting Aluminium Settlers of Catan Board</h2>
<p>A couple years ago now I started casting Settlers of Catan game tiles in aluminium. I have only gotten as far as casting the mountain(ore) tiles but I plan on eventually casting the rest.</p>
<p>To start I model a tile using Blender. Modeling the base is faily straight forward. Create a hexagon, scale it to the size you want, extrude it upwards, and then use a difference modifier to create cutouts for towns and roads. The mountains are created using an image as a height map on a seperate plain and then combined with the base using a union modifier.</p>
<p>After modeling the tile in blender I export the file then print it on a 3D printer. The print will be the form for the mold that I will cast into. Using smaller layers in the print is better as the sand tends to cling to the ridges and you get smaller horizontal lines.</P>
<p>Befor I could cast the first piece I first had to make a molding box. To do this I used four pieces of 2x4 lumber for each side and screwed them together. Then I added some scrap lumber strips to the sides of each half to act as guides so the 2 sides don't shift. Now that I have the form, the casting box, and sand that I ordered I can place the mold, into the box, and pack sand around it and the sprew(form for the pouring hole).</p>
<p>My furnace setup is very low tech. It consists of a pile of rocks stacked to resemble a furnace, a bag of charcole, and a small fan. A small trench is dug under the rocks to allow for airflow while skinny rocks are placed accross the trench to prevent the charcole from falling into it.</p>
<p>The furnace is started with wood and the crucible is placed into it to heat it up gradually. Once the furnace is started charcole is added, then small ingots are placed in thecrucible. It usually takes 40 minutes from lighting the "furnace" to pouring with this "setup".</p>
<p>And here are the results. They still need to be cleaned up a bit.</p>
<ul>
<li><img src="assets/jpeg/catan-mountain-1.jpeg" title="Ore Tile 1" alt="Photo of an aluminium Settlers of Catan ore tile."></li>
<li><img src="assets/jpeg/catan-mountain-2.jpeg" title="Ore Tile 2" alt="Photo of an aluminium Settlers of Catan ore tile."></li>
<li><img src="assets/jpeg/catan-mountain-3.jpeg" title="Ore Tile 3" alt="Photo of an aluminium Settlers of Catan ore tile."></li>
</ul>
<p>These where my first casts so I made a lot of mistakes throughout this whole process. You can see on the third piece that instead of pouring directly into the mold I poured to the side and carved a gate in the sand to piece. The sides are so thin the sand broke away and I need to do a lot of filing to remove the excess material. This also meant that there is a large divit on the bottom because aluminium shrinks when it cools and there was no sprew to feed more aluminum into the back.</p>
<p>There are also several ways I could have improved my molds. The first being angling the cutouts in the mountains so that when the form is pulled out it doesn't catch the sand. You can see in the first piece I had to do a lot off grinding to remove the aluminium where the sand collapsed.</p>
<p>If anybody can tell my why the third tile has that texture on the flat parts that would be great. I think it's because I cast it too hot?</p>
<p>It was a great expierment and I hope to have an update this summer when I cast more of the tiles.</p>
</main>
<footer>
<nav>
<span>~</span>
<a href="#">Top</a>
<span>~</span>
<a href="/~chmod777">Home</a>
<span>~</span>
</nav>
<br>
<a id="page-source" href="https://tildegit.org/chmod777/my_blog">Page source</a>
</footer>
</body>
</html>

View File

@ -1,55 +0,0 @@
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8">
<title>chmod777's tilde - Gamepad PCB</title>
<meta name="description" content="">
<meta name="author" content="chmod777">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<h1>~chmod777</h1>
<nav>
<a href="/~chmod777/">Home</a>
</nav>
</header>
<main>
<h2>Designing a PCB for a Gamepad rev1</h2>
<p>I have a vague plan on making my own Raspberry Pi compute module powered handheld gaming device but I don't know anything about designing PCBs. To learn how to create a PCB I decided to start small. Really small. I decided to make a gamepad with just 11 buttons and some header pins for an Arduino Nano.</p>
<p>Mistakes where made but I learned a lot about the process and now I see many ways I can improve and expand on my design.</p>
<img src="assets/jpeg/gamepad-rev1.jpeg" alt="An image of the gamepad pcb with an Arduino Nano inserted in the header pins.">
<p>Fixing some of the problems with it</p>
<ul>
<li>Use a two sided PCB so headers can be inserted from the top and solded to the back instead instead of being awkwardly raised above the board and soldered to side they come out of.
<li>Add rounded corners to the board.</li>
<li>Better text for the silkscreen. Add a revision number.</li>
</ul>
<p>Expanding on the current design</p>
<ul>
<li>More buttons</li>
<li>Shoulder buttons</li>
<li>Joystick</li>
<li>Headers so the pins can be accessed to allow for easy experimentation.</li>
<li>Use a cheaper micro controller. Even the knockoff Arduino Nanos are expensive.</li>
<li>While out of the scope of this project the next controller might want a case.</li>
</ul>
</main>
<footer>
<nav>
<span>~</span>
<a href="#">Top</a>
<span>~</span>
<a href="/~chmod777">Home</a>
<span>~</span>
</nav>
<br>
<a id="page-source" href="https://tildegit.org/chmod777/my_blog">Page source</a>
</footer>
</body>
</html>

View File

@ -1,41 +0,0 @@
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8">
<title>chmod777's tilde</title>
<meta name="description" content="">
<meta name="author" content="chmod777">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<h1>~chmod777</h1>
<nav>
<a href="/~chmod777/">Home</a>
</nav>
</header>
<main>
<h2>Icons</h2>
<p>Below is a list of icons I have made for various reasons. These icons are in the public domain.</p>
<ul>
<li><img class="icon" src="assets/svg/gears-icon.svg" title="Gears" alt="An icon with two interlocking gears."></li>
<li><img class="icon" src="assets/svg/chat-bubbles-icon.svg" title="Chat Bubbles" alt="An icon with two overlapping chat bubbles."></li>
<li><img class="icon" src="assets/svg/paper-list-icon.svg" title="Character Sheet" alt="An icon with two stacked pieces of paper and a bullet list on the top piece."></li>
</ul>
</main>
<footer>
<nav>
<span>~</span>
<a href="/~chmod777">Home</a>
<span>~</span>
</nav>
<br>
<a id="page-source" href="https://tildegit.org/chmod777/my_blog">Page source</a>
</footer>
</body>
</html>

View File

@ -1,52 +0,0 @@
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8">
<title>chmod777's tilde - Roll Lang</title>
<meta name="description" content="An article about Roll Lang a domain specific language for interpreting dice rolls and math operations common in tabletop rpgs.">
<meta name="author" content="chmod777">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<h1>~chmod777</h1>
<nav>
<a href="/~chmod777/">Home</a>
</nav>
</header>
<main>
<h2>Roll Lang</h2>
<h3>Project links</h3>
<ul>
<li><a href="https://github.com/jacobguenther/roll_lang">Repository</a></li>
<li><a href="https://github.com/jacobguenther/roll_lang/wiki">Wiki</a></li>
<li><a href="https://github.com/jacobguenther/projects/1">Project Board</a></li>
</ul>
<p>Roll Lang is a domain specific language for interpreting dice rolls and math operations common in tabletop rpgs. It implements it's own variation of dice notation.</p>
<a href="https://en.wikipedia.org/wiki/Dice_notation">Wikipedia Article on Dice Notation</a>
<h3>Examples</h3>
<p>/r d20 + 5</p>
<p>(12)+5=17</p>
<br>
<p>[[d20 + 5]]</p>
<p>(17)</p>
</main>
<footer>
<nav>
<span>~</span>
<a href="#">Top</a>
<span>~</span>
<a href="/~chmod777/">Home</a>
<span>~</span>
</nav>
<br>
<a id="page-source" href="https://tildegit.org/chmod777/my_blog">Page source</a>
</footer>
</body>
</html>

View File

@ -1,62 +0,0 @@
const color_theme_id = "color-theme";
const font_id = "fonts";
function save_accessibility_settings(theme, font) {
document.cookie = "theme=" + theme + "; path=/";
document.cookie = "font=" + font +"; path=/";
}
function get_saved_accessibility_settings() {
let cookies = document.cookie.split("; ");
let theme = null;
let font = null;
for (let cookie of cookies) {
let [key, value] = cookie.split("=");
console.log("'" + key + "' '" + value + "'");
if (key == "theme") {
theme = value;
}
if (key == "font") {
font = value;
}
}
if (theme != null) {
let color_theme = document.getElementById(color_theme_id);
for (option of color_theme.options) {
if (option.value == theme) {
option.selected = true;
break;
}
}
}
if (font != null) {
let fonts = document.getElementById(font_id);
for (option of fonts.options) {
if (option.value == font) {
option.selected = true;
break;
}
}
}
return [theme, font];
}
function load_accessibility_settings(theme, font) {
const body = document.getElementsByTagName("body")[0];
if (theme.length != 0) {
body.setAttribute("class", theme);
}
if (font.length != 0) {
let class_attribute = body.getAttribute("class");
body.setAttribute("class", class_attribute+" "+font);
}
}
function apply_accessibility_options() {
const theme = document.getElementById(color_theme_id).value;
const font = document.getElementById(font_id).value;
save_accessibility_settings(theme, font);
load_accessibility_settings(theme, font);
}
function first_load() {
let [theme, font] = get_saved_accessibility_settings();
load_accessibility_settings(theme, font);
}

View File

@ -1,28 +0,0 @@
<svg viewBox="0 0 64 64" preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<title>Chat Bubble Icon</title>
<desc>Two overlapping chat bubbles.</desc>
<defs>
<mask id="chat-mask">
<rect x="12" y="0"
width="44" height="20"
fill="white" fill-opacity="1.0" />
<rect x="48" y="0"
width="20" height="36"
fill="white" fill-opacity="1.0" />
</mask>
</defs>
<rect x="20" y="4" rx="5"
width="40" height="28"
fill="none" stroke="black" stroke-width="2"
mask="url(#chat-mask)" />
<polygon transform="translate(8 52)" points="0,0 10,0, -2, 8" fill="black" />
<rect x="4" y="24" rx="5"
width="40" height="28"
fill="none" stroke="black" stroke-width="2" />
<polygon transform="translate(48 32)" points="0,0 10,0, 12, 8" fill="black" />
</svg>

Before

Width:  |  Height:  |  Size: 843 B

View File

@ -1,62 +0,0 @@
<svg viewBox="0 0 65 65"
width="32" height="32"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Gears Icon</title>
<desc>Two interlocking gears.</desc>
<defs>
<circle id="gear_hole" r="3" cx=" 12" cy="0" />
<mask id="gear_mask" transform="" >
<rect x="-64" y="-64" width="128" height="128" fill="white" />
<use xlink:href="#gear_hole" />
<use xlink:href="#gear_hole" transform="rotate(72 0,0)" />
<use xlink:href="#gear_hole" transform="rotate(144 0,0)" />
<use xlink:href="#gear_hole" transform="rotate(216 0,0)" />
<use xlink:href="#gear_hole" transform="rotate(288 0,0)" />
<circle r="4" />
</mask>
<polygon id="large_spoke" points="-1,-3 4,-2 4,2 -1,3" transform="translate(18 0)" />
<g id="large_gear_spokes">
<use xlink:href="#large_spoke" />
<use xlink:href="#large_spoke" transform="rotate(180 0 0)" />
</g>
<polygon id="small_spoke" points="-1,-3.5 6.5,-3 6.5,3 -1,3.5" transform="translate(18 0)" />
<g id="small_gear_spokes">
<use xlink:href="#small_spoke" />
<use xlink:href="#small_spoke" transform="rotate(180 0 0)" />
</g>
<g id="large_gear" mask="url(#gear_mask)">
<circle r="18" />
<use xlink:href="#large_gear_spokes" />
<use xlink:href="#large_gear_spokes" transform="rotate(72)" />
<use xlink:href="#large_gear_spokes" transform="rotate(144)" />
<use xlink:href="#large_gear_spokes" transform="rotate(216)" />
<use xlink:href="#large_gear_spokes" transform="rotate(288)" />
</g>
<g id="small_gear" mask="url(#gear_mask)">
<circle r="18" />
<use xlink:href="#small_gear_spokes" />
<use xlink:href="#small_gear_spokes" transform="rotate(72)" />
<use xlink:href="#small_gear_spokes" transform="rotate(144)" />
<use xlink:href="#small_gear_spokes" transform="rotate(216)" />
<use xlink:href="#small_gear_spokes" transform="rotate(288)" />
</g>
</defs>
<g transform="translate(24 40) rotate(-9)"><g>
<use xlink:href="#large_gear" class="gear forward_gear" />
</g></g>
<g transform="translate(49 15) rotate(9) scale(0.65 0.65)"><g>
<use xlink:href="#small_gear" class="gear reverse_gear" />
</g></g>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,42 +0,0 @@
<svg viewBox="0 0 64 64"
preserveAspectRatio="none"
width="64" height="64"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<title>Paper List Icon</title>
<desc>Two stacked pieces of paper with a list on the top piece.</desc>
<defs>
<g id="item">
<circle r="2" cx="14" cy="20" />
<line x1="20" y1="20" x2="40" y2="20"
stroke="black" stroke-width="1" />
</g>
<mask id="mask">
<rect width="64" height="64" fill="white" />
<rect width="52" height="57" fill="black" />
</mask>
</defs>
<rect x="7.5" y="2.5"
width="45" height="55"
fill="none"
rx="4"
stroke="black" stroke-width="2" />
<line x1="7.5" y1="14" x2="52.5" y2="14"
stroke="black" stroke-width="2" />
<use xlink:href="#item" />
<use xlink:href="#item" transform="translate(0, 6)" />
<use xlink:href="#item" transform="translate(0, 12)" />
<use xlink:href="#item" transform="translate(0, 18)" />
<use xlink:href="#item" transform="translate(0, 24)" />
<use xlink:href="#item" transform="translate(0, 30)" />
<rect x="11.5" y="6.5"
width="45" height="55"
fill="none"
rx="4"
stroke="black" stroke-width="2"
mask="url(#mask)" />
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,72 +0,0 @@
<svg viewBox="0 0 532 276" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Pong</title>
<desc>Two paddles, a ball, vertical dashed line in the center, and two numbers for player scores.</desc>
<defs>
<linearGradient id="pong-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop id="pong-gradiant-begin" offset="0%" />
<stop id="pong-gradiant-end" offset="100%" />
</linearGradient>
</defs>
<rect id="pong-boarder" width="100%" height="100%" />
<svg x="10" y="10" width="512" height="256" >
<rect id="pong-board" width="100%" height="100%" />
<path id="pong-ball-path" d="M256 128" />
<path id="pong-collision-path" d="M256 128" />
<line id="pong-center-line" x1="256" y1="0" x2="256" y2="256" />
<rect id="pong-player-paddle" width="2" height="28" transform="translate(0, 114)"/>
<rect id="pong-ai-paddle" width="2" height="28" transform="translate(510, 114)"/>
<text id="pong-player-score" class="pong-score" x="85.33" y="64">0</text>
<text id="pong-ai-score" class="pong-score" x="426.66" y="64">0</text>
<circle id="pong-ball" r="3">
<animateMotion id="pong-ball-animation" dur="1.0s" repeatCount="indefinite">
<mpath xlink:href="#pong-ball-path"/>
</animateMotion>
</circle>
</svg>
<style>
#pong-gradiant-begin {
stop-color:blue;
stop-opacity:1;
}
#pong-gradiant-end {
stop-color:red;
stop-opacity:1;
}
#pong-boarder {
fill:url(#pong-gradient);
}
#pong-board {
fill:black;
}
#pong-ball-path {
stroke:blue;
}
#pong-collision-path {
stroke:red;
stroke-dasharray:1;
}
#pong-center-line {
stroke:white;
stroke-dasharray:5;
stroke-width:2;
}
#pong-ai-paddle,#pong-player-paddle,.pong-score {
fill:white;
}
.pong-score {
font-family:'Courier New',Courier,monospace;font-size:2em;
}
#pong-ball {
fill:white;
}
</style>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -0,0 +1,26 @@
#project-list {
list-style-type: none;
}
.project-card {
display: grid;
grid-template-areas:
'project-img project-title'
'project-img project-description';
grid-template-columns: max-content 1fr;
grid-template-rows: min-content 1fr;
}
.project-img {
grid-area: project-img;
display: inline-block;
height: 128px;
}
.project-title {
grid-area: project-title;
margin: 10px 0px 0px 10px;
padding: 0px 0px 0px 0px;
}
.project-description {
grid-area: project-description;
margin: 5px 0px 0px 15px;
}

View File

@ -73,10 +73,10 @@ body {
width: 100%;
grid-gap: 5px;
grid-template-columns: auto 1fr;
grid-template-areas: 'main-aside main-content';
grid-template-areas: 'main-aside page-content';
}
#main-content {
grid-area: main-content;
main > div {
grid-area: page-content;
min-width: min-content;
width: 100%;
}
@ -85,6 +85,8 @@ body {
position: sticky;
top: 0;
height: min-content;
width: 300px;
min-width: 120px;
max-width: 380px;
}
}
@ -165,10 +167,13 @@ main > aside > nav > ul {
}
.post-card {
display: grid;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
background-color: var(--post-card-background);
border-radius: 5px;
}
.post-card-grid {
display: grid;
grid-template-columns: auto;
grid-template-areas:
'post-card-title'

View File

@ -1,30 +0,0 @@
<?xml version="1.0"?>
<rss version="2.0">
<channel>
<title>chmod777's blog</title>
<link>http://tilde.club/~chmod777/blog/blog.html</link>
<description>chmod777's blog where they post about their tech and non tech projects.</description>
<item>
<title>Casting an Aluminium Settlers of Catan Board</title>
<link>http://tilde.club/~chmod777/blog/posts/casting_an_aluminium_settlers_of_catan_board.html</link>
<description></description>
</item>
<item>
<title>Pi Pico First Impressions</title>
<link>http://tilde.club/~chmod777/blog/posts/pi_pico_first_impressions.html</link>
<description></description>
</item>
<item>
<title>Designing my First PCB</title>
<link>http://tilde.club/~chmod777/blog/posts/designing_my_first_pcb.html</link>
<description></description>
</item>
</channel>
</rss>

View File

@ -1,313 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>chmod777's SVG Pong</title>
<meta name="description" content="">
<meta name="author" content="chmod777">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:type" context="website">
<meta property="og:title" context="chmod777's SVG Pong">
<meta property="og:description" context="">
<meta property="og:url" context="http://tilde.club/~chmod777/tech_demos/demos/svg_pong.html">
<meta property="og:image" context="http://tilde.club/~chmod777/favicon.svg">
<meta property="og:local" context="en-US">
<meta property="og:site_name" context="tilde.club">
<meta property="twitter:card" context="summary">
<meta property="twitter:title" context="chmod777's SVG Pong">
<meta property="twitter:description" context="">
<meta property="twitter:url" context="http://tilde.club/~chmod777/tech_demos/demos/svg_pong.html">
<meta property="twitter:image" context="http://tilde.club/~chmod777/favicon.svg">
<link rel="canonical" href="http://tilde.club/~chmod777/tech_demos/demos/svg_pong.html">
<link rel="stylesheet" href="/css/styles.css">
<script src="/assets/js/main.js"></script>
</head>
<body class="dark-theme" onload="first_load()">
<header>
<h1 id="title">chmod777's SVG Pong</h1>
<a href="#page-content">skip to page content</a>
<p>There is a version of this site available as a <a href="gemini://tilde.club/~chmod777">gemini capsule</a>. It may or may not be up to date.</p>
<nav>
<ul class="link-list">
<li><a href="/">home</a></li>
<li><a href="/blog/blog.html">blog</a></li>
<li><a href="/projects/projects.html">projects</a></li>
<li><a href="/tech_demos/tech_demos.html">tech demos</a></li>
</ul>
</nav>
</header>
<form>
<fieldset>
<legend aria-describedby="about-accessibility-options">Accessibility Options</legend>
<p id="about-accessibility-options">accessibility options requires javascript</p>
<script>
const id = "about-accessibility-options";
const element = document.getElementById(id);
element.innerHTML = element.innerHTML.concat(" (javascript enabled)");
</script>
<label id="color-theme-label" for="color-theme">color theme</label>
<select id="color-theme" name="color-theme">
<option value="dark-theme">dark (default)</option>
<option value="classic-theme">classic</option>
<!--
<option value="high-contrast-theme">high contrast</option>
-->
</select>
<label id="fonts-label" for="fonts">fonts</label>
<select id="fonts" name="fonts">
<option value="default-font">browser default (default)</option>
<option value="monospace-font">monospace</option>
<!--
<option value="comic-sans-font">Comic Sans</option>
-->
</select>
<input type="button" value="apply settings" onclick="apply_accessibility_options()">
</fieldset>
</form>
<main id="page-content">
<asside id="about-pong">
<header>
<h2>The Game of Pong</h2>
</header>
<section>
</section>
<footer>
</footer>
</asside>
<div id="main-content">
<article>
<header>
<h2>About This Project</h2>
<p>About three years ago(2018) I created this little project. I have
recently brushed away most of the bugs so here is my Pong clone which uses
Scalable Vector Graphics(SVG).</p>
<p>Some resources related to SVGs.</p>
<ul>
<li><a href="https://www.wikipedia.org/svg">Wikipedia article</a></li>
<li><a href="https://mdn/">Mozilla documentation</a></li>
</ul>
</header>
<h3>Just Why</h3>
<p>The main reason for this project was to learn about SVG and SVG
animations. Before starting this I had never used an SVG in my own
websites. My only interactions with them is seeing them used on other
websites and the one time I opened up InkScape. Back in the days when I
cared about fancy websites I was envious of the cool animations some
folks had and wanted them for myself.</p>
<p>The other thing that motivated me to create a game was seeing the 13k game
jam. A jam that only accepts games whos entire contents fit in 13kb
including all their assets. I had only heard about it after it was already
over that year but that wasn't going to stop me from creating a tiny
game.</p>
<p>Why Pong?</p>
<p>Pong is second only to Tetris and I had never really played it. Plus I thought I
could actually finnish the project if it was a clone of a simple game.</p>
<h3>Was it a Success?</h3>
<p>Partially. I did create a game that used an SVG image instead of an
HTMLCanvas. I learned how to manipulate the elements with the transform
attribute from JavaScript, as well as us an animateMotion tag to move the
ball along a path.</p>
<p>As a bonus the game was 9kb when compressed when I had "finnished it".
That included the svg, html, and transpiled typescript.</p>
<p>However the game wasn't finnished when I stopped working on it three years
ago but I feel I achieved my goal. Or rather the pong game took me as far
as it could on my SVG adventure. Or at least that's what I thought back
then...</p>
<h3>The Revitalized SVG Pong</h3>
<p>What you see below is the new and improved SVG Pong, with far fewer bugs,
a cleaner(TM) codebase, and better preformace.</p>
<p>I revisted this project because I thought it would be fun. That really is
the main reason. And guess what. It was fun. I got to track down weird
bugs related to collisions and missing state. The project truely was just
slapped together over a weekend and it showed.</p>
<p>Try to have fun against the restless AI.</p>
<p>If you like SVGs checkout some of my <a href="/projects/project/creative_commons_icons.html">SVG icons</a> I made for a now defunct project.</p>
<footer>
</footer>
</article>
<p>fps: <span id="fps"></span></p>
<svg viewBox="0 0 532 276" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Pong</title>
<desc>Two paddles, a ball, vertical dashed line in the center, and two numbers for player scores.</desc>
<defs>
<linearGradient id="pong-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop id="pong-gradiant-begin" offset="0%" />
<stop id="pong-gradiant-end" offset="100%" />
</linearGradient>
</defs>
<rect id="pong-boarder" width="100%" height="100%" />
<svg x="10" y="10" width="512" height="256" >
<rect id="pong-board" width="100%" height="100%" />
<path id="pong-ball-path" d="M256 128" />
<path id="pong-collision-path" d="M256 128" />
<line id="pong-center-line" x1="256" y1="0" x2="256" y2="256" />
<rect id="pong-player-paddle" width="2" height="28" transform="translate(0, 114)"/>
<rect id="pong-ai-paddle" width="2" height="28" transform="translate(510, 114)"/>
<text id="pong-player-score" class="pong-score" x="85.33" y="64">0</text>
<text id="pong-ai-score" class="pong-score" x="426.66" y="64">0</text>
<circle id="pong-ball" r="3">
<animateMotion id="pong-ball-animation" dur="1.0s" repeatCount="indefinite">
<mpath xlink:href="#pong-ball-path"/>
</animateMotion>
</circle>
</svg>
<style>
#pong-gradiant-begin {
stop-color:blue;
stop-opacity:1;
}
#pong-gradiant-end {
stop-color:red;
stop-opacity:1;
}
#pong-boarder {
fill:url(#pong-gradient);
}
#pong-board {
fill:black;
}
#pong-ball-path {
stroke:blue;
}
#pong-collision-path {
stroke:red;
stroke-dasharray:1;
}
#pong-center-line {
stroke:white;
stroke-dasharray:5;
stroke-width:2;
}
#pong-ai-paddle,#pong-player-paddle,.pong-score {
fill:white;
}
.pong-score {
font-family:'Courier New',Courier,monospace;font-size:2em;
}
#pong-ball {
fill:white;
}
</style>
</svg>
<form>
<fieldset>
<legend>Controlls</legend>
<summary>Each button has a keyboard shortcut.</summary>
<br>
<div>
<label id="pong-reset-label" for="pong-reset">New Game shortcut 'N'</label>
<input id="pong-reset" name="pong-reset" type="button" value="New Game">
<label id="pong-serve-label" for="pong-serve">Serve shortcut 'S'</label>
<input id="pong-serve" name="pong-serve" type="button" value="Serve">
<label id="pong-paddle-up-label" for="pong-paddle-up">Paddle Up shortcut '&#x3c'</label>
<input id="pong-paddle-up" name="pong-paddle-up" type="button" value="Paddle Up">
<label id="pong-paddle-stop-label" for="pong-paddle-stop"></label>
<input id="pong-paddle-stop" name="pong-paddle-stop" type="button" value="Paddle Stop">
<label id="pong-paddle-down-label" for="pong-paddle-down">Paddle Down shortcut '>'</label>
<input id="pong-paddle-down" name="pong-paddle-down" type="button" value="Paddle Down">
</div>
</fieldset>
</form>
<form>
<fieldset>
<legend>Game Settings</legend>
<summary></summary>
<div>
<label for="ai-difficulty">AI Difficulty</label>
<select id="ai-difficulty" name="ai-difficulty">
<option value="easy">easy</option>
<option value="normal">normal</option>
<option value="hard">hard</option>
</select>
<label for="paddle-speed">Paddle Speed</label>
<input type="slider" id="paddle-speed" name="paddle-speed">
<label for="ball-speed">Ball Speed</label>
<input type="slider" id="ball-speed" name="ball-speed">
</div>
<input type="button" value="Apply Settings(starts a new game)">
</fieldset>
</form>
<table>
<summary>Game Summary</summary>
<tr>
<td>Difficulty</td>
<th>Won</th>
<th>Lost</th>
<th>Tied</th>
<th>Incomplete</th>
<th>Longest Volley</th>
</tr>
<tr>
<th>Easy</th>
</tr>
<tr>
<th>Normal</th>
</tr>
<tr>
<th>Hard</th>
</tr>
</table>
<table>
<summary>Latest Games</summary>
<tr>
<th>Difficulty</th>
<th>Won/Lost/Tied/Incomplete</th>
<th>Player Score</th>
<th>AI Score</th>
<th>Longest Volley</th>
</tr>
</table>
</div>
</main>
<footer>
<a class="link-padding" href="#">jump to top</a>
<br>
<br>
<a class="link-padding" id="page-source" target="_blank" href="https://tildegit.org/chmod777/my_blog">page source (tildegit in new tab)</a>
</footer>
</body>
</html>

View File

@ -1,90 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>chmod777's tech demos</title>
<meta name="description" content="">
<meta name="author" content="chmod777">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:type" context="website">
<meta property="og:title" context="chmod777's tech demos">
<meta property="og:description" context="">
<meta property="og:url" context="">
<meta property="og:image" context="http://tilde.club/~chmod777/favicon.svg">
<meta property="og:local" context="en-US">
<meta property="og:site_name" context="tilde.club">
<meta property="twitter:card" context="summary">
<meta property="twitter:title" context="chmod777's tech demos">
<meta property="twitter:description" context="">
<meta property="twitter:url" context="">
<meta property="twitter:image" context="http://tilde.club/~chmod777/favicon.svg">
<link rel="canonical" href="">
<link rel="stylesheet" href="/css/styles.css">
<script src="/assets/js/main.js"></script>
</head>
<body class="dark-theme" onload="first_load()">
<header>
<h1 id="title">chmod777's tech demos</h1>
<a href="#page-content">skip to page content</a>
<p>There is a version of this site available as a <a href="gemini://tilde.club/~chmod777">gemini capsule</a>. It may or may not be up to date.</p>
<nav>
<ul class="link-list">
<li><a href="/">home</a></li>
<li><a href="/blog/blog.html">blog</a></li>
<li><a href="/projects/projects.html">projects</a></li>
<li><a href="/tech_demos/tech_demos.html">tech demos</a></li>
</ul>
</nav>
</header>
<form>
<fieldset>
<legend aria-describedby="about-accessibility-options">Accessibility Options</legend>
<p id="about-accessibility-options">accessibility options requires javascript</p>
<script>
const id = "about-accessibility-options";
const element = document.getElementById(id);
element.innerHTML = element.innerHTML.concat(" (javascript enabled)");
</script>
<label id="color-theme-label" for="color-theme">color theme</label>
<select id="color-theme" name="color-theme">
<option value="dark-theme">dark (default)</option>
<option value="classic-theme">classic</option>
<!--
<option value="high-contrast-theme">high contrast</option>
-->
</select>
<label id="fonts-label" for="fonts">fonts</label>
<select id="fonts" name="fonts">
<option value="default-font">browser default (default)</option>
<option value="monospace-font">monospace</option>
<!--
<option value="comic-sans-font">Comic Sans</option>
-->
</select>
<input type="button" value="apply settings" onclick="apply_accessibility_options()">
</fieldset>
</form>
<footer>
<a class="link-padding" href="#">jump to top</a>
<br>
<br>
<a class="link-padding" id="page-source" target="_blank" href="https://tildegit.org/chmod777/my_blog">page source (tildegit in new tab)</a>
</footer>
</body>
</html>

View File

@ -1,31 +0,0 @@
<form>
<fieldset>
<legend aria-describedby="about-accessibility-options">Accessibility Options</legend>
<p id="about-accessibility-options">accessibility options requires javascript</p>
<script>
const id = "about-accessibility-options";
const element = document.getElementById(id);
element.innerHTML = element.innerHTML.concat(" (javascript enabled)");
</script>
<label id="color-theme-label" for="color-theme">color theme</label>
<select id="color-theme" name="color-theme">
<option value="dark-theme">dark (default)</option>
<option value="classic-theme">classic</option>
<!--
<option value="high-contrast-theme">high contrast</option>
-->
</select>
<label id="fonts-label" for="fonts">fonts</label>
<select id="fonts" name="fonts">
<option value="default-font">browser default (default)</option>
<option value="monospace-font">monospace</option>
<!--
<option value="comic-sans-font">Comic Sans</option>
-->
</select>
<input type="button" value="apply settings" onclick="apply_accessibility_options()">
</fieldset>
</form>

View File

@ -1,7 +0,0 @@
#!/bin/bash
SOURCE_DIR=~/blog_source
$SOURCE_DIR/update_html_posts.sh
$SOURCE_DIR/update_gemlog.sh

View File

@ -1,37 +0,0 @@
#!/bin/bash
SOURCE_DIR=~/blog_source
ASSETS_DIR=$SOURCE_DIR/assets
GEM_DIR=~/public_gemini
rm -r $GEM_DIR/*
mkdir -p $GEM_DIR/assets/jpeg
mkdir -p $GEM_DIR/assets/svg
cp $ASSETS_DIR/jpeg/* $GEM_DIR/assets/jpeg/
cp $ASSETS_DIR/svg/* $GEM_DIR/assets/svg/
cp $SOURCE_DIR/index.gmi $SOURCE_DIR/index.gmi.temp
LINE=`grep -Fn 'Posts' $SOURCE_DIR/index.gmi | cut -d : -f 1`
LINE=$(($LINE+1))
for FILE in `ls -tr $SOURCE_DIR/posts | grep -v /`
do
NAME=${FILE%.html}
OUT="$GEM_DIR/$NAME.gmi"
~/bin/html2gemini_rs "${SOURCE_DIR}/posts/${FILE}" > "${OUT}"
SPACES=`tr -s '_' ' ' <<< "$NAME"`
ENTRY="posts/${FILE}"
TIME_MODIFIED=`stat -c %y ${ENTRY} | grep -oE "\w{4}-\w{2}-\w{2} \w{2}:\w{2}:\w{2}"`
sed -i "$LINE i => ${NAME}.gmi ${SPACES} ${TIME_MODIFIED} UTC" $SOURCE_DIR/index.gmi.temp
done
cp $SOURCE_DIR/index.gmi.temp $GEM_DIR/index.gmi
rm $SOURCE_DIR/index.gmi.temp

View File

@ -1,40 +0,0 @@
#!/bin/bash
SOURCE_DIR=~/blog_source
ASSETS_DIR=$SOURCE_DIR/assets
WEB_DIR=~/public_html
rm -r $WEB_DIR/*
cp $SOURCE_DIR/posts/*.html $WEB_DIR/
mkdir -p $WEB_DIR/assets/jpeg
mkdir -p $WEB_DIR/assets/png
mkdir -p $WEB_DIR/assets/svg
mkdir -p $WEB_DIR/assets/css
cp $ASSETS_DIR/jpeg/* $WEB_DIR/assets/jpeg/
# cp $ASSETS_DIR/assets/png/* $WEB_DIR/assets/png/
cp $ASSETS_DIR/svg/* $WEB_DIR/assets/svg/
cp $ASSETS_DIR/css/* $WEB_DIR/assets/css/
cp $SOURCE_DIR/index.html $SOURCE_DIR/index.html.temp
LINE=`grep -Fn '<h2>Posts</h2>' $SOURCE_DIR/index.html | cut -d : -f 1`
LINE=$(($LINE+1))
for FILE in `ls -tr $SOURCE_DIR/posts | grep -v /`
do
NAME=${FILE%.html}
SPACES=`tr -s '_' ' ' <<< "$NAME"`
ENTRY="posts/${FILE}"
TIME_MODIFIED=`stat -c %y ${ENTRY} | grep -oE "\w{4}-\w{2}-\w{2} \w{2}:\w{2}:\w{2}"`
sed -i "$LINE i \\\t\t<a href=\"https://tilde.club/~chmod777/${FILE}\">${SPACES}</a><p>Last modified on: <time datetime=\"${TIME_MODIFIED}\">${TIME_MODIFIED} UTC</time></p>" $SOURCE_DIR/index.html.temp
done
$($SOURCE_DIR/botany_builder/target/release/botany_html)
cp $SOURCE_DIR/index.html.temp $WEB_DIR/index.html
rm index.html.temp