| 26 Jul 2024 |
 bkil | In reply to@sicelo:matrix.org
the github repo says 40% JavaScript Yes, it's progressive enhancement. Its JS is quite bloated, so a VanillaJS rewrite would be nice, though. 🙂 | 11:34:12 |
 mikwee | I wanna use IRC | 15:27:53 |
| mikwee | I just don't know which rooms to join 🤷♂️ | 15:28:08 |
 sicelo | we don't know your interests ... so yeah | 15:29:40 |
| sicelo | anyway, https://netsplit.de/channels/ | 15:29:43 |
| bkil | In reply to@mikwee:matrix.org
I just don't know which rooms to join 🤷♂️ @mikwee
OFTC: #friendi.ca #gemiweb0 ##matrix-therapy #fltk Libera: #friendica #gemiweb0 ##matrix-therapy #fltk-oftc #tomesh #tomesh-random #twtxt #gemini Freenode: ##friendica #gemiweb0 ##matrix-therapy #fltk
| 17:52:32 |
 Curid | What if instead of using huge jpegs as background images we used rendered demo scenes? | 18:19:01 |
| bkil | How about simulating certain more complicated fractal designs with CSS without image files or <svg> nodes? | 18:31:52 |
 Ryuno-Ki (André Jaenisch) | In reply to @curid:matrix.org
What if instead of using huge jpegs as background images we used rendered demo scenes? E.g. https://alvarotrigo.com/blog/animated-backgrounds-css/ ? | 18:32:41 |
| Curid | It'd be interesting to do that with the 10 most used stock images | 18:36:10 |
| bkil | https://en.wikipedia.org/wiki/Shadertoy https://en.wikipedia.org/wiki/Js13kGames https://js1k.com/ https://js10k.com/ https://www.dwitter.net/top/all http://www.p01.org/256b_htm/ http://wildmag.de/compo/ https://gist.github.com/140bytes/962807/forks http://www.message.sk/web4096/ https://www.pouet.net/prodlist.php?order=avg&type%5B%5D=256b&type%5B%5D=512b&type%5B%5D=1k&type%5B%5D=4k&type%5B%5D=8k&type%5B%5D=16k&type%5B%5D=32k&type%5B%5D=40k&type%5B%5D=64k&type%5B%5D=80k&type%5B%5D=96k&type%5B%5D=100k&type%5B%5D=128k&type%5B%5D=256k&type%5B%5D=intro&type%5B%5D=invitation&type%5B%5D=procedural+graphics&platform%5B%5D=JavaScript&page=1
| 18:45:14 |
| Curid | damn https://www.dwitter.net/top/all | 18:47:51 |
| bkil | Here's a minified VanillaJS executor for it if you are interested
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width, initial-scale=1.0'><style>*{height:100%;width:100%;margin:0;background:white}</style><body><canvas id=c width=1920 height=1080></canvas><script>c=document.querySelector('#c');S=Math.sin;C=Math.cos;T=Math.tan;R=(r,g,b,a)=>{return'rgba('+(r|0)+','+(g|0)+','+(b|0)+','+(a===undefined?1:a)+')'};x=c.getContext('2d');_t=+new Date();u=(t)=>{
for(c.width=i=714;i--;F(t+i/714+(i>>7)/9,-9))(F=(a,o)=>x.strokeRect(357+S(a)*290-o/(Z=C(a)+1+(t%6<3)),99+C(a*(t/6%4|0))*99/Z,o/=Z/2,o))(i,4)
};(_l=()=>{requestAnimationFrame(_l);u((new Date()-_t)/1000)})()</script>
https://www.dwitter.net/d/7702 https://arkt.is/t/Zm9yKGMud2lkdGg9aT03MTQ7aS0tO0YodCtpLzcxNCsoaT4+NykvOSwtOSkpKEY9KGEsbyk9Pnguc3Ryb2tlUmVjdCgzNTcrUyhhKSoyOTAtby8oWj1DKGEpKzErKHQlNjwzKSksOTkrQyhhKih0LzYlNHwwKSkqOTkvWixvLz1aLzIsbykpKGksNCk=
| 18:55:47 |
| Curid | I'm thinking things like this, high-res static images https://www.dwitter.net/d/18461 | 18:59:43 |
| Curid | perfect https://www.dwitter.net/d/23964 | 19:00:23 |
| Curid | https://www.dwitter.net/d/16396 | 19:06:36 |
| bkil | It seems I did not minify it after all, but I wrote that a long ago 🤷
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width, initial-scale=1.0'><style>*{height:100%;width:100%;margin:0}</style><body><canvas id=c width=1920 height=1080></canvas><script>S=Math.sin;C=Math.cos;T=Math.tan;R=(r,g,b,a)=>'rgba('+(r|0)+','+(g|0)+','+(b|0)+','+(a??1)+')';x=c.getContext('2d');_t=new Date;u=(t)=>{
//for(c.width=i=714;i--;F(t+i/714+(i>>7)/9,-9))(F=(a,o)=>x.strokeRect(357+S(a)*290-o/(Z=C(a)+1+(t%6<3)),99+C(a*(t/6%4|0))*99/Z,o/=Z/2,o))(i,4)
X=t?X+r*69:0;h=t?99+300*r+99*C(t*7):7e3;for(i=0;i<h;x.fillRect(q,700+h-++i,w,r))r=Math.random(w=i/4),x.fillStyle=R(v=t?0:80+i,v,v/.8),x.fillRect(q=!t&i?r*2e3:X-w+w*r,t?700-h+i:w,t?w:z=i?2:2e3,z)
};(_l=()=>{requestAnimationFrame(_l);u((new Date-_t)/1000)})()</script>
<!-- https://www.dwitter.net/d/23964 -->
| 19:06:59 |
| bkil | It seems I did not minify it after all, but I wrote that a long ago 🤷
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width, initial-scale=1.0'><style>*{height:100%;width:100%;margin:0}</style><body><canvas id=c width=1920 height=1080></canvas><script>S=Math.sin;C=Math.cos;T=Math.tan;R=(r,g,b,a)=>'rgba('+(r|0)+','+(g|0)+','+(b|0)+','+(a??1)+')';x=c.getContext('2d');_t=new Date;u=(t)=>{
X=t?X+r*69:0;h=t?99+300*r+99*C(t*7):7e3;for(i=0;i<h;x.fillRect(q,700+h-++i,w,r))r=Math.random(w=i/4),x.fillStyle=R(v=t?0:80+i,v,v/.8),x.fillRect(q=!t&i?r*2e3:X-w+w*r,t?700-h+i:w,t?w:z=i?2:2e3,z)
};(_l=()=>{requestAnimationFrame(_l);u((new Date-_t)/1000)})()</script>
<!-- https://www.dwitter.net/d/23964 -->
| 19:07:09 |
| bkil | In reply to@curid:matrix.org
I'm thinking things like this, high-res static images https://www.dwitter.net/d/18461 Now that reminds me more of the speed of common apps nowadays 🙄 At least it uses less data. | 19:08:38 |
| Curid | it's slowed down, right? | 19:09:24 |
| Curid | I didn't even notice some of them follow the mouse | 19:10:24 |
| bkil | Well, not exactly. If you multiply elapsed time by 10, it skips most of the lines, so it really uses elapsed time to fill the whole screen | 19:11:40 |
| bkil | In reply to@Ryuno-Ki:matrix.org
E.g. https://alvarotrigo.com/blog/animated-backgrounds-css/ ? Showcasing CSS-only animations by embedding a JS-only external sandbox provider for each effect like a boss. I see this all over the place (even on MDN). 🙊 | 19:16:38 |
| bkil | Oh, and each iframe is lazy loaded with yet more custom JS | 19:18:13 |
| Ryuno-Ki (André Jaenisch) | In reply to @bkil:matrix.org
Showcasing CSS-only animations by embedding a JS-only external sandbox provider for each effect like a boss. I see this all over the place (even on MDN). 🙊 Even worse: I looked at CSS-Tricks before and the referenced pens where gone | 19:30:00 |
| Ryuno-Ki (André Jaenisch) | Canvas != SVG | 19:30:27 |
| Ryuno-Ki (André Jaenisch) | I think you can run WebGL on canvas, though. 3D effects if you know your way around shaders and stuff | 19:31:12 |
| bkil | <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width, initial-scale=1.0'><style>*{height:100%;width:100%;margin:0}</style><body><canvas id=c width=1920 height=1080></canvas><script>x=c.getContext('2d');_t=new Date;u=(t,S,C,T,R)=>{
(F=Z=>{for(x.fillStyle=R(W=1/Z*4e3,W/2,W/4),i=Z*Z*2;n=i%Z,m=i/Z|0,i--;n%2^m%2&&x.fillRect((n-t%2-1)*W,(S(t)+m-1)*W,W,W));Z&&F(Z-6)})(36)//rm
};(_l=()=>{requestAnimationFrame(_l);u((new Date-_t)/1000,Math.sin,Math.cos,Math.tan,(r,g,b,a)=>'rgba('+(r|0)+','+(g|0)+','+(b|0)+','+(a??1)+')')})()</script>
https://www.dwitter.net/d/701 | 19:32:23 |
| bkil | I've no experience with webgl but it seems like you need twenty lines of code to draw a square...
| 19:40:44 |
| bkil | I found some, but they could only fit blinking within that quota https://www.dwitter.net/h/webgl | 19:40:59 |
