Business Card Code - OpenProcessing

index.html
commented.js
xxxxxxxxxx
 
<!--
For @sableRaph's #WCCChallenge theme of "cards": a business card sized
sketch that renders some stuff. Inspired by other business card things
like this raytracer: https://fabiensanglard.net/rayTracing_back_of_business_card/
​
Go to the commented.js tab to see a more readable version of the code
with comments explaining what it's doing!
-->
<style>
  html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #ffeae8;
  }
  script {
    display: block;
    white-space: pre;
    font-size: 8px;
    font-family: monospace;
    padding: 10px;
    background: white;
  }
  script, canvas {
    width: 420px;
    height: 240px;
    box-sizing: border-box;
    box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.27);
    margin: 20px;
  }
</style>
<body>
  <script>W=175;H=100;F=255;n=[11492,0,-1150,3410,-1062,602,-318,83,134,-74,260,176,-111,
-115,-244,-84,94,111,-115,-7,-18,44,49,41,-78,-15,43,-10,-46,0,-57,22,30,-10,-67,
25,1,2,-4,16,-22,-1,-13,-6,-17,4,-27,2,-9,1,-30,6,-12,11,-6,-3,-23,0,-13,1,-11,
-2,-27,-3,7896,0,-1119,-10,-312,-969,-392,-691,-324,371,-87,287,38,-110,55,-67,
-88,101,76,-29,-45,-23,-33,11,8,16,6,9,9,16,-29,-37,65,70,-42,-68,39,34,-25,-5,
23,8,5,-3,5,8,11,1,10,6,7,-15,2,21,16,-14,0,9,10,-5,8,7,6,-4];m=[9013,0,-391,340,
-75,-53,-83,-169,98,-96,-81,62,22,-27,23,-10,-13,0,24,11,3,-20,2,7,15,-7,1,0,14,
0,10,-1,1094,0,-115,-636,172,-317,-66,-151,-28,60,19,57,57,-27,12,5,44,18,-10,
-37,27,4,8,5,16,-1,17,0,17,-3,21,-4];d=document;e=d.createElement('canvas');d
.body.appendChild(e);e.width=W;e.height=H;c=e.getContext('2d');with(Math){a=(a,c
)=>{l=a.length/2;x = a.slice(0,l);y = a.slice(l);f=(t,v)=>{b=v[0]/l;for(s=2;s<l;s
+=2){b+=2/l*hypot(v[s], v[s+1])*cos(PI/l*s*t-atan2(v[s+1],v[s]))};return b};g=[];
for(i=0;i<c;i++){t=(i/c*0.67+0.3)*l;g.push([f(t, x),f(t, y)])};return g};h=a(n,70
);j=a(m,35);k=([a,b],[c,d])=>[a-c,b-d];q=([a,b],k)=>[a*k,b*k];r=([a,b],[c,d])=>a*
c+b*d;u=(v,p)=>{d=r(k(p,v[0]),k(p,v[0]));for(s=1;s<v.length;s++){e=k(v[s-1],v[s])
;w=k(p,v[s]);b=k(w,q(e,min(max(r(w,e)/r(e,e),0),1)));d=min(d,r(b,b))};return sqrt
(d)};m=new ImageData(W,H);z=m.data;i=0;a=[[F,172,129],[F,146,139],[254,195,166],[
239,233,174],[205,234,192]];for(y=0;y<H;y++)for(x=0;x<W;x++){P=[x*2,y*2];d=min(u(h,
P),u(j,P));[R,G,B]=d<3?[F,F,F]:a[~~(d/10)%5];z[i++]=R;z[i++]=G;z[i++]=B;z[i++]=F};c
.putImageData(m,0,0)}
// davepagurek.com</script>
</body>