https://hexn.live/toys/ Recent content in Toys on hex Hugo en hectorjbrown@protonmail.com (Hector Brown) hectorjbrown@protonmail.com (Hector Brown) Wed, 24 Jun 2026 15:50:37 +1000 https://hexn.live/toys/bratwurst/ Wed, 24 Jun 2026 15:50:37 +1000hectorjbrown@protonmail.com (Hector Brown) https://hexn.live/toys/bratwurst/ <style> input[type="date"] { background-color: var(--fg); color: var(--bg); font-size: 1rem; padding: 10px 14px; border: 0px; border-radius: 8px; outline: none; } input[type="date"]:focus { accent-color: var(--highlight); } button { appearance: none; background-color: var(--muted); border: 0px solid var(--bg); border-radius: 6px; color: var(--fg); cursor: pointer; display: inline-block; font-family: var(--font-monospace) font-size: 14px; font-weight: 600; line-height: 20px; padding: 6px 16px; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; white-space: nowrap; } button:focus:not(:focus-visible):not(.focus-visible) { box-shadow: none; outline: none; } button:hover { background-color: var(--hover); color: var(--muted); } button:focus { box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; outline: none; } button:disabled { background-color: #94d3a2; border-color: rgba(27, 31, 35, .1); color: rgba(255, 255, 255, .8); cursor: default; } button:active { background-color: var(--link); color: var(--muted); box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset; } </style> <p>This is a converter for the Bratwurst system, you can <a href="../../blog/bratwurst">read about it here</a>.</p> https://hexn.live/toys/pend/ Fri, 14 Apr 2023 15:10:56 +0100hectorjbrown@protonmail.com (Hector Brown) https://hexn.live/toys/pend/ <div id="pend-parent" style="width: 100%; height: auto;"></div> <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script> <!-- load p5.js from CDN--> <script src="https://hexn.live/scripts/phys/pend/pend.js"></script> <style> #control-panel { display: grid; grid-row-gap: 1rem; grid-template-columns: 3fr 1fr; grid-column-gap: 1rem; } @media (max-width: 800px) { #control-panel { grid-template-columns: 2fr 1fr; } } @media (max-width: 500px) { #control-panel { grid-template-columns: 1fr; } } </style> <div id="control-panel"> <div> <div style="margin: 1vw"> <input type="range" min="-1" max="2" value="0" step="0.01" class="slider" id="m1"></input> <p>\( m_1 \): <span id="m1_out"></span></p> </div> <div style="margin: 1vw"> <input type="range" min="-1" max="2" value="0" step="0.01" class="slider" id="m2"></input> <p>\( m_2 \): <span id="m2_out"></span></p> </div> <div style="margin: 1vw"> <input type="range" min="0.1" max="1" value="0.5" step="0.01" class="slider" id="l1"></input> <p>\( l_1 \): <span id="l1_out"></span></p> </div> <div style="margin: 1vw"> <input type="range" min="0.1" max="1" value="0.5" step="0.01" class="slider" id="l2"></input> <p>\( l_2 \): <span id="l2_out"></span></p> </div> <div style="margin: 1vw"> <input type="range" min="-3.14" max="3.14" value="2" step="0.01" class="slider" id="theta_0"></input> <p>\( \theta_0 \): <span id="theta_0_out"></span></p> </div> <div style="margin: 1vw"> <input type="range" min="-3.14" max="3.14" value="0" step="0.01" class="slider" id="phi_0"></input> <p>\( \phi_0 \): <span id="phi_0_out"></span></p> </div> <div style="margin: 1vw"> <input type="range" min="-1" max="2" value="1" step="0.01" class="slider" id="g"></input> <p>\( g \): <span id="g_out"></span></p> </div> </div> <div> <p>\( \theta \): <span id="theta"></span></p>