- Author:
- Gabor Bata
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- github.com/gaborbata/voxel-cat
- Compo:
- canvas
- Demo link:
- https://js1k.com/2019-x/demo/4065
- Shortlink:
- https://js1k.com/4065
- Blog post:
- please update here!
- Bytes:
- 1024
- Chars:
- 1024
- Submission
{let e=19,b,c,g,d,f=/.../g,h=window.a.getContext`2d`,l=[...' xz!"#"2u#12%yz&7B,66-cs/G>89a9cI:ff;<H<i2=fY>YT@ggAb4B7CC76DEFE`eFu`GcQHhZIiMJKLKwzLjqMNONVvOPaPxyQRjRyjS24TUhUWXVj_W~gXmvYlrZx2_xi`z2apvb44cdkdkkeppfllgmmhy~iyxjnnkoolrrmprnqqosspuuq33rvvsyttwwu11vyywxxxzzy~~z22~00'.match(f).reduce((k,m)=>k.split(m.charAt(0)).join(m.slice(1)),"vahev~ephee~eepzeeqxepn enqwpjJJJJJJJJ~wjh nqv~xnvhzq:flv~A55AvybbbbvyA~A:r;y!h!y!h!os%4Bx4Bz%&x&z%&x&z%,,x,,z~utu~t~utu~tsiVMXZH;;-IXZH;;-Imf-Imf-Q=vyDG=vyDG=vosywS i4z42bZiSSSS_2bbA_SS2A_4z42bZywS osQ>t/D/D/t/t8TD8TD8Tt8W@g:=@@:=@@:flv")],n="99bbbdeefffff9bfd3000".match(f).map(k=>{b=document.createElement`canvas`;b.width=20;b.height=21;d=b.getContext`2d`;for(c=420;c--;)~~l[c]&&["#"+k,`rgba(0,0,0,${.15*(l[c]-1)})`].map(b=>{d.fillStyle=b;d.fillRect(c%20,0|c/20,1,1)});return b});h.fillStyle="#7ce";h.fillRect(0,0,500,500);f=setInterval(_=>{for(b=400;b--;)c=~~l[400*e+b+420],g=19-b%20,d=19-(0|b/20),c&&h.drawImage(n[c-1],60+10*g+10*e,335+5*g-5*e-12*d);!e--&&clearInterval(f)},500)}
- Description
- X-ray CT scan of a voxel cat.
This entry is a demonstration of CT scan, also known as computed tomography scan, and formerly known as CAT scan, which makes use of computer-processed combinations of many X-ray measurements taken from different angles to produce cross-sectional images of a scanned object, allowing the user to see inside the object without cutting.
- Base64 encoded
e2xldCBlPTE5LGIsYyxnLGQsZj0vLi4uL2csaD13aW5kb3cuYS5nZXRDb250ZXh0YDJkYCxsPVsuLi4nIHh6ISIjIjJ1IzEyJXl6JjdCLDY2LWNzL0c+ODlhOWNJOmZmOzxIPGkyPWZZPllUQGdnQWI0QjdDQzc2REVGRWBlRnVgR2NRSGhaSWlNSktMS3d6TGpxTU5PTlZ2T1BhUHh5UVJqUnlqUzI0VFVoVVdYVmpfV35nWG12WWxyWngyX3hpYHoyYXB2YjQ0Y2RrZGtrZXBwZmxsZ21taHl+aXl4am5ua29vbHJybXBybnFxb3NzcHV1cTMzcnZ2c3l0dHd3dTExdnl5d3h4eHp6eX5+ejIyfjAwJy5tYXRjaChmKS5yZWR1Y2UoKGssbSk9Pmsuc3BsaXQobS5jaGFyQXQoMCkpLmpvaW4obS5zbGljZSgxKSksInZhaGV2fmVwaGVlfmVlcHplZXF4ZXBuIGVucXdwakpKSkpKSkpKfndqaCBucXZ+eG52aHpxOmZsdn5BNTVBdnliYmJidnlBfkE6cjt5IWgheSFoIW9zJTRCeDRCeiUmeCZ6JSZ4JnolLCx4LCx6fnV0dX50fnV0dX50c2lWTVhaSDs7LUlYWkg7Oy1JbWYtSW1mLVE9dnlERz12eURHPXZvc3l3UyBpNHo0MmJaaVNTU1NfMmJiQV9TUzJBXzR6NDJiWnl3UyBvc1E+dC9EL0QvdC90OFREOFREOFR0OFdAZzo9QEA6PUBAOmZsdiIpXSxuPSI5OWJiYmRlZWZmZmZmOWJmZDMwMDAiLm1hdGNoKGYpLm1hcChrPT57Yj1kb2N1bWVudC5jcmVhdGVFbGVtZW50YGNhbnZhc2A7Yi53aWR0aD0yMDtiLmhlaWdodD0yMTtkPWIuZ2V0Q29udGV4dGAyZGA7Zm9yKGM9NDIwO2MtLTspfn5sW2NdJiZbIiMiK2ssYHJnYmEoMCwwLDAsJHsuMTUqKGxbY10tMSl9KWBdLm1hcChiPT57ZC5maWxsU3R5bGU9YjtkLmZpbGxSZWN0KGMlMjAsMHxjLzIwLDEsMSl9KTtyZXR1cm4gYn0pO2guZmlsbFN0eWxlPSIjN2NlIjtoLmZpbGxSZWN0KDAsMCw1MDAsNTAwKTtmPXNldEludGVydmFsKF89Pntmb3IoYj00MDA7Yi0tOyljPX5+bFs0MDAqZStiKzQyMF0sZz0xOS1iJTIwLGQ9MTktKDB8Yi8yMCksYyYmaC5kcmF3SW1hZ2UobltjLTFdLDYwKzEwKmcrMTAqZSwzMzUrNSpnLTUqZS0xMipkKTshZS0tJiZjbGVhckludGVydmFsKGYpfSw1MDApfQ==
- Original source
/*
* voxel-cat
* js1k-2019 "X" entry
* @author Gabor Bata
* @license MIT
*/
{
let
// x, y, z dimension for 3D voxel cat data
C = 20,
// voxel bitmap width
W = 20,
// voxel bitmap height
H = 21,
// initial counter for drawing voxel cat slices
y = C - 1,
// helper variables
s, w, x, z,
// pattern to split color palette and compressed data
r = /.../g,
// canvas context
c = window['a'].getContext`2d`,
// decompressed data
// - the first W * H characters are the voxel bitmap
// - the remaining C * C * C characters are the voxel cat data
d = [...(
// substitution map for compressed data
' xz!"#"2u#12%yz&7B,66-cs/G>89a9cI:ff;<H<i2=fY>YT@ggAb4B7' +
'CC76DEFE`eFu`GcQHhZIiMJKLKwzLjqMNONVvOPaPxyQRjRyjS24TUhU' +
'WXVj_W~gXmvYlrZx2_xi`z2apvb44cdkdkkeppfllgmmhy~iyxjnnkoo' +
'lrrmprnqqosspuuq33rvvsyttwwu11vyywxxxzzy~~z22~00'
).match(r).reduce(
// decompress data
(u, b) => u.split(b.charAt(0)).join(b.slice(1)),
// initial compressed data
'vahev~ephee~eepzeeqxepn enqwpjJJJJJJJJ~wjh nqv~xnvhzq:fl' +
'v~A55AvybbbbvyA~A:r;y!h!y!h!os%4Bx4Bz%&x&z%&x&z%,,x,,z~u' +
'tu~t~utu~tsiVMXZH;;-IXZH;;-Imf-Imf-Q=vyDG=vyDG=vosywS i4' +
'z42bZiSSSS_2bbA_SS2A_4z42bZywS osQ>t/D/D/t/t8TD8TD8Tt8W@' +
'g:=@@:=@@:flv'
)],
// create voxel bitmaps, with the following colors
// - 0 dark gray
// - 1 gray
// - 2 light gray
// - 3 white
// - 4 pink
// - 5 yellow
// - 6 black
v = '99bbbdeefffff9bfd3000'.match(r).map(p => {
// create offscreen canvas for better performance
s = document.createElement`canvas`;
s.width = W;
s.height = H;
z = s.getContext`2d`;
for (w = W * H; w--;) {
~~d[w] && [
// base color
'#' + p,
// shadows
`rgba(0,0,0,${0.15 * (d[w] - 1)})`
].map(n => {
z.fillStyle = n;
z.fillRect(w % W, 0 | w / W, 1, 1);
});
}
return s;
});
// clear canvas with backround color
c.fillStyle = '#7ce';
c.fillRect(0, 0, 500, 500);
// draw voxel cat slice by slice
r = setInterval(() => {
for (s = C * C; s--;) {
w = ~~d[C * C * y + s + W * H];
x = C - 1 - s % C;
z = C - 1 - (0 | s / C);
w && c.drawImage(
v[w - 1],
60 + x * 10 + y * 10,
335 + x * 5 - y * 5 - z * 12
);
}
!y-- && clearInterval(r);
}, 500);
}
