https://wizardlog.com/ Recent content in Homepage on Hugo en-us Sun, 27 Sep 2026 16:54:36 +1000 https://wizardlog.com/posts/dsheet-beyond-the-pdf/ Sun, 27 Sep 2026 16:54:36 +1000 https://wizardlog.com/posts/dsheet-beyond-the-pdf/ <h1 id="dsheet-beyond-the-pdf">DSheet: Beyond the PDF</h1> <details class="img-block"> <summary data-size="60kB"> <img class="preview" src="data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAABwAwCdASoZABAAP3GYvEyqJSMhMAgBRi4J6QAAettipwqQuQAA/uwJ8&#43;ohTTZpvwD5&#43;nxBeGGPjEPo8xNvCYjWiEija4gi1mmIAAAA" width="1200" height="773" alt="preview" decoding="async"> </summary> <img class="full" src="https://wizardlog.com/images/dsheetreduction_hu_af683919fe9cf777.webp" width="1200" height="773" alt="full image" loading="lazy" decoding="async"> </details> <p>Engineering datasheets are a fundamental source of component information, but PDF is designed primarily as a document interchange and presentation format. For an engineering platform that needs to index, query, and reference information inside thousands of datasheets, I wanted more control over how these documents are stored and accessed.</p> <p>I developed Dsheet, a purpose-built document format for engineering datasheets. The conversion pipeline extracts the document&rsquo;s text, SVGs, images, fonts, and page structure and reconstructs them into a compact binary representation. Deduplicated images and data can be reduced to one refrence source and images can be transcoded into more efficient formats such as WebP.</p> https://wizardlog.com/posts/the-halo-array-architecture/ Wed, 23 Sep 2026 16:54:36 +1000 https://wizardlog.com/posts/the-halo-array-architecture/ <h1 id="the-halo-array-a-concept-for-a-highly-isolated-computer-system">The Halo Array: A Concept for a Highly Isolated Computer System</h1> <details class="img-block"> <summary data-size="82kB"> <img class="preview" src="data:image/webp;base64,UklGRrwAAABXRUJQVlA4WAoAAAAQAAAAGAAAEQAAQUxQSCoAAAABL0CYbeTPuN&#43;B9DQiIp4BNY2kQMcngOCA4F/mtrQR/Z&#43;AaZom6i&#43;4pQVWUDggbAAAAPADAJ0BKhkAEgA/cazIWKomJCGoCAFGLgnAGVaBsYgCuuJmQ/v9qMAA/tOVi5&#43;kes4KqfdzRlR67awSsXConoX51QBOE4Ed1L7redASaP3zq6IslPYP2T6YfK6h6TuBvnoOsjfkEp2MclAAAA==" width="1200" height="867" alt="preview" decoding="async"> </summary> <img class="full" src="https://wizardlog.com/images/overview_hu_7c166f4eb135f01.webp" width="1200" height="867" alt="full image" loading="lazy" decoding="async"> </details> <p>This was an idea I had one afternoon while thinking about how I would design a computer system capable of handling increasingly complex cyberattacks. The basic idea is to build the computer environment in layers, with each layer providing another opportunity to isolate, observe, or stop an attack before it can move further through the system.</p> <p>I started thinking about attacks as a rough progression:</p> https://wizardlog.com/posts/3d-render/ Mon, 21 Sep 2026 16:54:36 +1000 https://wizardlog.com/posts/3d-render/ <p><span style=" color: var(--text); padding: 0.2em 0.4em; font-weight: bold; font-size: 2.2em; "> Building a 3kB render</p> <style> .pmesh-viewer-container { width: 95%; max-width: 1400px; height: 700px; margin: 2.5rem auto; background: #202020; border: 1px solid #444; border-radius: 4px; overflow: hidden; } .pmesh-viewer { display: block; width: 100%; height: 100%; } .pmesh-lazy { position: relative; } .pmesh-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle at center, #303030 0%, #202020 70% ); } .pmesh-load-button { padding: .9rem 1.4rem; border: 1px solid #666; border-radius: 5px; background: #303030; color: #eee; font: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .pmesh-load-button:hover { background: #3b3b3b; border-color: #888; transform: translateY(-1px); } .pmesh-error { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #d88; } </style> <script src="https://wizardlog.com/pmesh/pmesh-viewer.minmax.js"></script> <p><strong>Ceramic Capacitor</strong> <div class="pmesh-viewer-container" id="pmesh-0"> <canvas class="pmesh-viewer"></canvas> </div> <script> (() => { const c = document.getElementById("pmesh-0"); const init = canvas => { const r = new RendererV2(canvas); const resize = () => { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; r.resize(); }; addEventListener("resize", resize); resize(); fetch("\/models\/Ceramic Capacitor.pmesh") .then(x => { if (!x.ok) throw Error(`HTTP ${x.status}`); return x.blob(); }) .then(PMeshV2.load) .then(r.setMesh.bind(r)) .catch(console.error); }; init(c.querySelector("canvas")); })(); </script> </p> https://wizardlog.com/posts/modular-storage-grid-pcb/ Mon, 21 Sep 2026 16:54:36 +1000 https://wizardlog.com/posts/modular-storage-grid-pcb/ <p><span style=" color: var(--text); padding: 0.2em 0.4em; font-weight: bold; font-size: 2.2em; "> The Storage Tile</p> <p>Top view of brainboard <details class="img-block"> <summary data-size="58kB"> <img class="preview" src="data:image/webp;base64,UklGRmgAAABXRUJQVlA4IFwAAABwAwCdASoZAA4AP3GYvU0qJSMhMAgBRi4JwBhmgrq8wh/HboAA/lPsMpekrK66XINAeCNFmZc1AEluKdWZPfluSaH&#43;8Z60FJKTLvCQPQpc5Vwi4NR1gO0SNcAAAA==" width="1200" height="650" alt="preview" decoding="async"> </summary> <img class="full" src="https://wizardlog.com/images/Spring%20PCB_hu_77021dbc719668e4.webp" width="1200" height="650" alt="full image" loading="lazy" decoding="async"> </details> </p> <p>I had a problem with storing and organising the tools and electronic parts in my workshop, so I decided to design my own modular automatic storage system. The idea is to create a grid of small, interconnected storage modules that can keep track of where items are stored and help locate them when needed.</p> https://wizardlog.com/posts/submersible-smart-power-distribution-unit-spdu/ Sun, 20 Sep 2026 16:54:36 +1000 https://wizardlog.com/posts/submersible-smart-power-distribution-unit-spdu/ <p><span style=" color: var(--text); padding: 0.2em 0.2em; font-weight: bold; font-size: 2.2em; "> Submersible Smart Power Distribution Unit (SPDU)</p> <details class="img-block"> <summary data-size="62kB"> <img class="preview" src="data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAAAwBACdASoZAA4AP3GYu0yqJSMhMAgBRi4JwBjgv/wGBRctNdVrGtLnyoAA/nFQcMlkBCGaD6vPcDWSfrcugSz7n/nSRiOsCZ5vJswwrM7zvlYXCPOWzhQGL3H30Q/0J4DP891NncHZtIa/kzUrMeZl4F4m2kf2N2kIxn49H3K9u7pdrj3gnlkIjUMjEyS2M8jZCJkgnt0P6IzIAAA=" width="1200" height="675" alt="preview" decoding="async"> </summary> <img class="full" src="https://wizardlog.com/images/powerboard_hu_cb25b0ea532e8939.webp" width="1200" height="675" alt="full image" loading="lazy" decoding="async"> </details> <p>The Submersible Smart Power Distribution Unit is a compact, ruggedized power management system engineered for harsh and water-exposed environments. Housed in a modified aluminium junction enclosure, the unit is purpose-built for submersion while maintaining full operational reliability and safety.</p> <p>Designed with durability and versatility in mind, the enclosure features four stainless steel external handles that serve multiple functions: enabling safe lifting and handling, acting as stable support legs for flexible placement, and providing elevated protection for all external components against impact and accidental damage.</p> https://wizardlog.com/posts/small-websites/ Sun, 20 Sep 2026 16:54:36 +1000 https://wizardlog.com/posts/small-websites/ <h1></h1> <p><span style=" color: var(--text); padding: 0.2em 0.4em; font-weight: bold; font-size: 2.2em; ">Self-Imposed 14 kB Website Limit</p> <p>Designing a website to obey the 14kB rule &amp; be fast</p> <p>After reading the endtimes devs write up on the 14kB rule I thought it would be interesting to apply that knowledge and make a test blog/site.</p> <p>The 14kB rule is for the first transmission control protocol (TCP). The rule usually only apply to the HTML of a page put I thought why not push it for everything on the page. So the main components to consider on any page can be boiled down the simple building blocks, and we can build up from there.</p> https://wizardlog.com/posts/geiger-counter/ Fri, 10 Apr 2026 16:54:36 +1000 https://wizardlog.com/posts/geiger-counter/ <h1></h1> <p><span style=" color: var(--text); padding: 0.2em 0.4em; font-weight: bold; font-size: 2.2em; "> DIY Geiger counter</p> <details class="img-block"> <summary data-size="32kB"> <img class="preview" src="data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAAAwBACdASoZAA4AP3GYvUyqJSMhMAgBRi4J6QAAUvyvQRX7xrmX6d3ZHUAAzeBOgdVNx05/PWyg8gwXKvJfxo7zvXdh/hU1ao84zGLvtUmzokLZjPBz4in5aNJszdM9NeOTFn4BAAA=" width="1200" height="675" alt="preview" decoding="async"> </summary> <img class="full" src="https://wizardlog.com/images/geigercounter1_hu_3b15aa57e845149b.webp" width="1200" height="675" alt="full image" loading="lazy" decoding="async"> </details> <hr> <details class="img-block"> <summary data-size="36kB"> <img class="preview" src="data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAADQAwCdASoZAA4AP3GWvEyqJSMhMAgBRi4J6QAAPpZAw9Atd3falYAAzd/lt&#43;3XKIDy1kwGMcjAZQd2QkzYXV4QFC39byxAziJ3uDDQIIT6SN1RjfTcRkGpNB5JpWFRVSHkAfjmYAA=" width="1200" height="675" alt="preview" decoding="async"> </summary> <img class="full" src="https://wizardlog.com/images/geigercounter2_hu_97e22e6c30c42e30.webp" width="1200" height="675" alt="full image" loading="lazy" decoding="async"> </details> <details class="img-block"> <summary data-size="51kB"> <img class="preview" src="data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAABwBACdASoZAA4AP3GYvEyqJSMhMAgBRi4J7ACdEf/iTVhxXjyiQF9glmxWgAD&#43;Fd/Y3MJwZTrFbIAy3hNY/fGDBoRsN63qkLaPSUbr53FEutER2XF1m7Nhh4ZpTsuAcZ0&#43;jaK1apPc9JaBUxR/mjlAhjiHMUUKOU5OVrQsN8erC3pwJy8A2X34yvpmsjBGjhHMOXbeszV4AA==" width="1200" height="675" alt="preview" decoding="async"> </summary> <img class="full" src="https://wizardlog.com/images/geigercounter3_hu_bf504351bdaf23c5.webp" width="1200" height="675" alt="full image" loading="lazy" decoding="async"> </details> https://wizardlog.com/about/ Sat, 27 Sep 2025 16:50:42 +1000 https://wizardlog.com/about/ <h1 id="behind-the-mask">Behind the mask</h1> <style>.pmesh-viewer-container{width:100%;max-width:80ch;height:350px;margin:1rem auto;position:relative;overflow:hidden;background:var(--bg)}.pmesh-viewer-container::before{content:"";position:absolute;inset:15% 20%;background:radial-gradient(circle at center,color-mix(in srgb,var(--highlight) 35%,transparent),transparent 70%);pointer-events:none}.pmesh-viewer{display:block;width:100%;height:100%;position:relative;z-index:1}.pmesh-lazy{position:relative;width:100%;height:100%}.pmesh-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,color-mix(in srgb,var(--highlight) 25%,transparent) 0%,transparent 65%);position:relative;z-index:1}.pmesh-load-button{padding:.7rem 1.1rem;border:1px solid var(--border);border-radius:3px;background:var(--bg);color:var(--text);font:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.pmesh-load-button:hover{background:var(--highlight);border-color:var(--text);transform:translateY(-1px)}.pmesh-error{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text);background:var(--bg)}</style> <script>const V=`#version 300 es in vec3 p,n;uniform mat4 m,v,P;out vec3 N;out vec3 WP;void main(){vec4 w=m*vec4(p,1.);WP=w.xyz;N=mat3(m)*n;gl_Position=P*v*w;}`,F=`#version 300 es precision highp float;in vec3 N;in vec3 WP;uniform vec3 l,l2,l3,l4,c;uniform float s,mode;out vec4 o;void main(){vec3 n=normalize(N),vd=normalize(vec3(0.,0.,1.));float ndv=max(dot(n,vd),0.),edge=pow(1.-ndv,3.5),rim=pow(1.-ndv,9.),d=max(dot(n,l),0.),d2=max(dot(n,l2),0.)*s,d3=max(dot(n,l3),0.)*.28,d4=max(dot(n,l4),0.)*.18,hv=pow(max(dot(n,normalize(l+vd)),0.),100.);if(mode<.5){float b=.25+(d*.8+d2*.6)*1.3+pow(1.-d,3.)*.35;b=pow(smoothstep(0.,1.2,b),.9);float g=sin((n.x+n.z)*5.)*.16+.94;o=vec4(c*b*mix(.75,1.,b)*g*mix(vec3(1.),n*.5+.5,.2),1.);}else{float q=n.x*3.+n.y*2.+n.z*4.+edge*10.;vec3 rb=.5+.5*vec3(sin(q),sin(q+2.094),sin(q+4.188)),glass=vec3(.055,.075,.19);glass=mix(glass,rb,min(edge*1.45,1.));float front=pow(ndv,.65)*.32,light=.12+d*.25+d2*.15+d3+d4+front;glass*=light+.12;glass+=vec3(1.)*hv*1.8;glass+=rb*rim*1.5;glass+=vec3(.3,.5,1.)*edge*.55;float outline=smoothstep(.04,.22,edge);glass+=vec3(.55,.72,1.)*outline*.02;float alpha=clamp(.52+edge*.38+hv*.25+rim*.18,.42,.96);o=vec4(glass,alpha);}}`;class Shader{constructor(g){let q=(t,s)=>{let x=g.createShader(t);g.shaderSource(x,s);g.compileShader(x);return x},p=g.createProgram(),a=q(g.VERTEX_SHADER,V),b=q(g.FRAGMENT_SHADER,F);g.attachShader(p,a);g.attachShader(p,b);g.linkProgram(p);g.deleteShader(a);g.deleteShader(b);this.p=p;this.m=g.getUniformLocation(p,"m");this.v=g.getUniformLocation(p,"v");this.P=g.getUniformLocation(p,"P");this.l=g.getUniformLocation(p,"l");this.l2=g.getUniformLocation(p,"l2");this.l3=g.getUniformLocation(p,"l3");this.l4=g.getUniformLocation(p,"l4");this.s=g.getUniformLocation(p,"s");this.c=g.getUniformLocation(p,"c");this.mode=g.getUniformLocation(p,"mode");this.ap=g.getAttribLocation(p,"p");this.an=g.getAttribLocation(p,"n")}}const persp=(f,a,n,r)=>{let t=1/Math.tan(f/2),q=1/(n-r);return new Float32Array([t/a,0,0,0,0,t,0,0,0,0,(r+n)*q,-1,0,0,2*r*n*q,0])},mul=(a,b)=>{let o=new Float32Array(16);for(let r=0;r<4;r++)for(let c=0;c<4;c++)o[c+r*4]=a[r*4]*b[c]+a[r*4+1]*b[c+4]+a[r*4+2]*b[c+8]+a[r*4+3]*b[c+12];return o},rotX=a=>{let c=Math.cos(a),s=Math.sin(a);return new Float32Array([1,0,0,0,0,c,s,0,0,-s,c,0,0,0,0,1])},rotY=a=>{let c=Math.cos(a),s=Math.sin(a);return new Float32Array([c,0,-s,0,0,1,0,0,s,0,c,0,0,0,0,1])},scale=s=>new Float32Array([s,0,0,0,0,s,0,0,0,0,s,0,0,0,0,1]);class PMeshV2{static async load(f){let b=await f.arrayBuffer();b=await new Response(new Response(b).body.pipeThrough(new DecompressionStream("gzip"))).arrayBuffer();let v=new DataView(b),o=0,u8=()=>v.getUint8(o++),u32=()=>{let x=v.getUint32(o,1);o+=4;return x},i16=()=>{let x=v.getInt16(o,1);o+=2;return x};for(let i=0;i<5;i++)u8();if(u8()!=2)throw"Unsupported version";let nv=u32(),nt=u32(),p=new Int16Array(nv*3),n=new Int16Array(nv*3),i=new Uint32Array(nt*3);for(let x=0;x<p.length;x++)p[x]=i16();for(let x=0;x<n.length;x++)n[x]=i16();for(let x=0;x<i.length;x++)i[x]=u32();return{positions:p,normals:n,indices:i}}}class RendererV2{constructor(c){this.c=c;let g=this.gl=c.getContext("webgl2",{alpha:true});if(!g)throw Error("WebGL2 required");g.enable(g.DEPTH_TEST);g.enable(g.CULL_FACE);g.enable(g.BLEND);g.blendFunc(g.SRC_ALPHA,g.ONE_MINUS_SRC_ALPHA);this.x=5;this.y=-1;this.auto=1;this.sp=.003;this.drag=0;this.lx=this.ly=0;this.zoom=1.5;this.mesh=null;this.P=persp(Math.PI/4,c.width/c.height,.1,1e3);let z=1/Math.sqrt(26);this.v=new Float32Array([1,0,0,0,0,5*z,0,0,0,0,5*z,0,0,0,-5,1]);this.sh=new Shader(g);this.L=[1/Math.sqrt(1.09),0,-.3/Math.sqrt(1.09)];this.L2=[-1,0,-.25];this.L3=[0,0,1];this.L4=[-1,0,.5];this.dark=document.documentElement.dataset.theme==="dark";new MutationObserver(()=>{this.dark=document.documentElement.dataset.theme==="dark"}).observe(document.documentElement,{attributes:true,attributeFilter:["data-theme"]});this.mouse();this.start()}resize(){let c=this.c;this.P=persp(Math.PI/4/this.zoom,c.width/c.height,.1,1e3);this.gl.viewport(0,0,c.width,c.height)}setMesh(m){this.mesh=m;let g=this.gl,s=this.sh;this.vao=g.createVertexArray();g.bindVertexArray(this.vao);let b=(d,a)=>{let x=g.createBuffer();g.bindBuffer(g.ARRAY_BUFFER,x);g.bufferData(g.ARRAY_BUFFER,d,g.STATIC_DRAW);g.enableVertexAttribArray(a);g.vertexAttribPointer(a,3,g.SHORT,true,0,0)};b(m.positions,s.ap);b(m.normals,s.an);let x=g.createBuffer();g.bindBuffer(g.ELEMENT_ARRAY_BUFFER,x);g.bufferData(g.ELEMENT_ARRAY_BUFFER,m.indices,g.STATIC_DRAW);this.index=m.indices.length;g.bindVertexArray(null)}mouse(){let c=this.c;c.addEventListener("pointerdown",e=>{this.drag=1;this.auto=0;this.lx=e.clientX;this.ly=e.clientY;c.setPointerCapture(e.pointerId)});c.addEventListener("pointermove",e=>{if(this.drag){this.y+=(e.clientX-this.lx)*.01;this.x+=(e.clientY-this.ly)*.01;this.lx=e.clientX;this.ly=e.clientY}});c.addEventListener("pointerup",e=>{this.drag=0;this.auto=1;if(c.hasPointerCapture(e.pointerId))c.releasePointerCapture(e.pointerId)});c.addEventListener("pointercancel",()=>{this.drag=0;this.auto=1});c.addEventListener("wheel",e=>{e.preventDefault();this.zoom=Math.max(.2,Math.min(5,this.zoom+e.deltaY*.001));this.P=persp(Math.PI/4/this.zoom,c.width/c.height,.1,1e3)},{passive:false})}start(){let f=()=>{if(this.auto)this.y+=this.sp;this.draw();requestAnimationFrame(f)};f()}draw(){let g=this.gl,m=this.mesh;g.clearColor(0,0,0,0);g.clear(g.COLOR_BUFFER_BIT|g.DEPTH_BUFFER_BIT);if(!m)return;let s=this.sh,a=rotX(this.x);a=mul(a,rotY(this.y));a=mul(a,scale(m.scale||1));g.useProgram(s.p);g.uniformMatrix4fv(s.m,0,a);g.uniformMatrix4fv(s.v,0,this.v);g.uniformMatrix4fv(s.P,0,this.P);g.uniform3fv(s.l,this.L);g.uniform3fv(s.l2,this.L2);g.uniform3fv(s.l3,this.L3);g.uniform3fv(s.l4,this.L4);g.uniform1f(s.s,.5);g.uniform3f(s.c,1,1,1);g.uniform1f(s.mode,this.dark?1:0);g.bindVertexArray(this.vao);g.drawElements(g.TRIANGLES,this.index,g.UNSIGNED_INT,0)}} </script> <p> <div class="pmesh-viewer-container" id="pmesh-0"> <canvas class="pmesh-viewer"></canvas> </div> <script> (() => { const c = document.getElementById("pmesh-0"); const init = canvas => { const r = new RendererV2(canvas); const resize = () => { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; r.resize(); }; addEventListener("resize", resize); resize(); fetch("\/models\/smallermask.pmesh") .then(x => { if (!x.ok) throw Error(`HTTP ${x.status}`); return x.blob(); }) .then(PMeshV2.load) .then(r.setMesh.bind(r)) .catch(console.error); }; init(c.querySelector("canvas")); })(); </script> This website is a collection of projects that I have worked on, or am currently working on, with the express goal of serving as both reference material and a record of my progress. I hope you find some of the information here useful or interesting.</p>