)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Martin Kleppe’s Golfed Blobs Quine

  1. <pre id=p style=background:#000><svg onload='setInterval(f=n=>
  2. {for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>
  3. (M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))
  4. (7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'>

Great golfed snippet from Martin Kleppe – can’t wait to fork it… 😀

This was updated a bit later to be even smaller:

  1. <body onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+f)[i],"o"][c=0|(h=v=>(M=Math).hypot(i/30-7+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'bgcolor=X><pre id=p>
// dom // golfed // graphics // hacks // html // humor // javascript // math // strings // tricks

WebGL Points and Rotation

  1. (() => {
  2.   const m = new Float32Array([
  3.     0, 0, 0, 0, 
  4.     0, 0, 0, 0, 
  5.     0, 0, 0, 0, 
  6.     0, 0, 0, 0
  7.   ])
  8.  
  9.   const pointSize = Math.max(Math.min(10, ~~(innerWidth / 70)), 3);
  10.  
  11.   const vert = `
  12.     attribute vec3 vec;
  13.     uniform mat4 mat;
  14.     void main(void) {
  15.       gl_Position = mat * vec4(vec, 1.);
  16.       gl_PointSize = ${pointSize}.;
  17.     }
  18.   `
  19.  
  20.   const frag = `
  21.     void main(void) {
  22.       gl_FragColor = vec4(1., 1., 1., .4);
  23.     }
  24.   `
  25.  
  26.   document.body.style.background = '#333'
  27.   const gl = document.body
  28.     .appendChild(document.createElement('canvas'))
  29.     .getContext('webgl')
  30.  
  31.   Object.assign(gl.canvas.style, {
  32.     position: 'absolute',
  33.     left: '50%',
  34.     top: '50%',
  35.     transform: 'translate(-50%, -50%)',
  36.     outline: '1px solid gray'
  37.   })
  38.  
  39.   with (gl) {
  40.     const NUM = 600
  41.     const verts = []
  42.  
  43.     for (let i = 0; i < NUM; i++) {
  44.       verts.push(
  45.         Math.random() * 1 - 0.5,
  46.         Math.random() * 1 - 0.5,
  47.         Math.random() * 1 - 0.5
  48.       )
  49.     }
  50.  
  51.     const leng = verts.length / 3
  52.     bindBuffer(ARRAY_BUFFER, createBuffer())
  53.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  54.  
  55.     const vs = createShader(VERTEX_SHADER)
  56.     shaderSource(vs, vert)
  57.     compileShader(vs)
  58.  
  59.     const fs = createShader(FRAGMENT_SHADER)
  60.     const sp = createProgram()
  61.  
  62.     shaderSource(fs, frag)
  63.     compileShader(fs)
  64.     attachShader(sp, vs)
  65.     attachShader(sp, fs)
  66.     linkProgram(sp)
  67.     useProgram(sp)
  68.  
  69.     const vec = getAttribLocation(sp, 'vec')
  70.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  71.     enableVertexAttribArray(vec)
  72.  
  73.     const matLoc = getUniformLocation(sp, 'mat')
  74.  
  75.     function rot(x, y, z) {
  76.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  77.  
  78.       const sinA = Math.sin(x)
  79.       const cosA = Math.cos(x)
  80.       const sinB = Math.sin(y)
  81.       const cosB = Math.cos(y)
  82.       const sinY = Math.sin(z)
  83.       const cosY = Math.cos(z)
  84.  
  85.       m[0] = cosA * cosB
  86.       m[1] = cosA * sinB * sinY - sinA * cosY
  87.       m[2] = cosA * sinB * cosY + sinA * sinY
  88.       m[3] = 0
  89.  
  90.       m[4] = sinA * cosB
  91.       m[5] = sinA * sinB * sinY + cosA * cosY
  92.       m[6] = sinA * sinB * cosY - cosA * sinY
  93.       m[7] = 0
  94.  
  95.       m[8] = -sinB
  96.       m[9] = cosB * sinY
  97.       m[10] = cosB * cosY
  98.       m[11] = m[12] = m[13] = 0
  99.       m[15] = 1
  100.  
  101.       uniformMatrix4fv(matLoc, false, m)
  102.     }
  103.  
  104.     onresize = () => {
  105.       const { canvas } = gl
  106.       const size = Math.min(innerWidth, innerHeight) - 20
  107.       canvas.width = canvas.height = size
  108.       viewport(0, 0, size, size)
  109.     }
  110.  
  111.     onresize()
  112.  
  113.     let ry = 0, rz = 0
  114.  
  115.     disable(DEPTH_TEST)
  116.     enable(BLEND)
  117.     blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  118.  
  119.     function loop() {
  120.       rot(0, ry -= 0.03, rz += 0.001)
  121.  
  122.       clearColor(0, 0, 0, 1)
  123.       clear(COLOR_BUFFER_BIT)
  124.       drawArrays(POINTS, 0, leng)
  125.       window.requestAnimationFrame(loop)
  126.     }
  127.     loop()
  128.   }
  129. })()

Some WebGL points with rotation… I couldn’t resist using with here…

// graphics // hacks // javascript // math // matrix // speed-coded // webgl

Bad PI Approximation

  1. let inside = 0;
  2. let precision = 1e6;
  3. for (let i = 0; i < precision; i++){
  4.   const xp = 0.5 - Math.random();
  5.   const yp = 0.5 - Math.random();
  6.   if (Math.sqrt(xp * xp + yp * yp) < 0.5) {
  7.     inside++;
  8.   }
  9. }
  10. console.log(inside / precision * 4);

This is a funny one, someone described this to me once and I coded it up over on actionsnippet.

// hacks // javascript // math // tricks

Gray Gradient Texture

  1. function rect(x1, y1, x2, y2, col, blur = 0.1) {
  2.   const dx = x1 - x2;
  3.   const dy = y1 - y2;
  4.   const dist = Math.sqrt(dx * dx + dy * dy);
  5.   return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +
  6.     blur}%)`;
  7. }
  8. const blends = 'multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue'.split(
  9.   ','
  10. );
  11. const cols = ['black', 'white'];
  12.  
  13. function gen() {
  14.   [...document.querySelectorAll('div')].forEach(d =>
  15.     d.parentNode.removeChild(d)
  16.   );
  17.   for (let j = 0; j < 4; j++) {
  18.     const rects = [];
  19.     for (let i = 0; i < 10; i++) {
  20.       const x = Math.random() * 100;
  21.       const y = Math.random() * 100;
  22.       const s = Math.random() * Math.random() * Math.random() * 30 + 3;
  23.       const col = cols[~~(Math.random() * cols.length)];
  24.       rects.push(rect(x, y, x + s, y + s, col, Math.random() * 10));
  25.     }
  26.     const el = document.body.appendChild(document.createElement('div'));
  27.     el.style.backgroundImage = rects.join(', ');
  28.     el.style.mixBlendMode = blends[~~(Math.random() * blends.length)];
  29.   }
  30. }
  31. gen();
  32.  
  33. document.body.innerHTML += `
  34.   <button id="regen">Regenerate</button>
  35.   <style>
  36.     body, html {
  37.       height: 100%;
  38.       background: #ccc;
  39.       margin: 0;
  40.       background-repeat: no-repeat;
  41.       width: 100%;
  42.     }
  43.     div {
  44.       position: absolute;
  45.       top: 0; left: 0;
  46.       width: 100%;
  47.       height: 100%;
  48.     }
  49.     #regen {
  50.       position: absolute;
  51.       width: 100px;
  52.       height: 30px;
  53.       background: #ccc;
  54.       border: 1px solid white;
  55.       margin: 1em;
  56.       cursor: pointer;
  57.       transition: all 250ms ease-out;
  58.       z-index: 999;
  59.     }
  60.     #regen:hover { background: #333; color: white; }
  61.   </style>
  62. `;
  63.  
  64. regen.onclick = gen;

Playing around some more with lots of linear gradients.

// color // css // gradients // graphics // hacks // javascript // speed-coded

Conic Accident

  1. conicBtn.onclick = () => {
  2.   document.body.innerHTML += `
  3.   <style>
  4.     div {
  5.       background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  6.     }
  7.   </style>
  8.   `
  9. }

get ready….



When I created the gradient conic snippet from a few days ago – I accidentally applied the rule to the entire page…. thought it was funny enough to be worth making a snippet out of 😀

// css // gradients // graphics // hacks // javascript
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}