How to inscribe GLSL in twigl app format as ordinal


Preamble

In the following I give for granted the knowledge necessary to inscribe ordinals on BTC blockchain: a wallet compatible with ordinals with some (fraction of) BTC and a platform that permit ordinals inscription. As an example here https://unisat.io/ a compatible wallet and the service to inscribe.

Description

Recently, I’ve begun to inscribe my generative art works as ordinals on the Bitcoin blockchain to ensure their immutability.

Storing a file as an ordinal incurs a cost proportional to the file’s size, prompting me to delve into GLSL shader programming, which allows for more compact code generation.

To enhance my proficiency in GLSL shader coding and have some fun in the process, I’ve started utilizing twigl.app, a platform developed by doxas (@h_doxas). In the words of the creator, twigl.app is an online editor for creating concise shader code that fits within a tweet, complete with a GIF (or webm, jpeg, png) generator, sound shader functionality, and the ability to broadcast live coding sessions.

I found it appealing to inscribe these small GLSL codes as ordinals, so I inscribed an HTML+JS+GLSL file that implements a subset of twigl.app, specifically the “geekest” (300 es) mode, without sound, noise, or other predefined functions. It’s possible that these features will be included in future versions.

This inscription can be retrieved through recursion and enables you to append a JS string with the same GLSL code used in the twigl app, resulting in a file that can, in turn, be inscribed to obtain an ordinal. This ordinal can then be viewed in a web browser to showcase the shader’s outcome.

In the shader code, replace gl_FragCoord with FC, use o for outColort for time, and r for resolution. Below, you’ll find a template for the file to use for the inscription; the only modification required is the GLSL code within the string assigned to the variable tgl.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>AB</title></head>
<body><script type="text/javascript">
let cw=1080,ch=1080;
let tgl=`vec2 v=(FC.xy/r.y)*8.;float g=abs(dot(sin(v-t),cos(v.yx+t)));o=vec4(.02/g,.04/g,.1/g,1.);`
</script><script>
(async function(){
rs=await fetch(`https://ordinals.com/content/2dbdf9ebbec6be793fd16ae9b797c7cf968ab2427166aaf390b90b71778266abi0`);
ht=await rs.text();htl=ht.split("\n");ffs=htl[28];
mr=await fetch(`https://ordinals.com/content/2ecbc0a5c781cf213651487ecfbc3b0c9f497c34ad140e766682e8acb277bd38i0`);
mt=`${await mr.text()}`;fs=document.createElement('script');fs.innerHTML=ffs;document.body.appendChild(fs);
md=fflate.strFromU8(fflate.gunzipSync(new Uint8Array(Array.from(atob(mt)).map((char)=>char.charCodeAt(0)))));
ms=document.createElement('script');ms.innerHTML=md;document.body.appendChild(ms);})();
</script></body></html>

To test with local server use https://ordinals.com/content/id in the fetch instructions, to inscribe use only /content/id

It is not necessary but a quote and/or tag @Waterflowing0 in the post with inscriptions would be appreciated.

Credits

https://github.com/doxas/twigl

https://twigl.app

License

MIT licensed.