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

WebGL Hemisphere Lines

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

WebGL lines and points…

// animation // canvas // graphics // javascript // speedcoding // webgl

Speed Coded Mouse Toy

  1. d = document
  2. b = d.body
  3. b.style.margin = 0
  4. with (b.appendChild(
  5.   Object.assign(d.createElement`canvas`, {
  6.     width: innerWidth,
  7.     height: innerHeight,
  8.   })
  9. ).getContext`2d`) {
  10.   mx = 0
  11.   my = 0
  12.  
  13.   onresize = _ => {
  14.     canvas.width = innerWidth
  15.     canvas.height = innerHeight
  16.   }
  17.  
  18.   onpointermove = e => {
  19.     mx = e.clientX, 
  20.     my = e.clientY
  21.   }
  22.  
  23.   r = 0
  24.   loop = () => {
  25.     save()
  26.     globalCompositeOperation = 'hard-light'
  27.     translate(innerWidth / 2, innerHeight / 2)
  28.  
  29.     rotate(r += .02)
  30.     translate(-innerWidth / 2, -innerHeight / 2)
  31.  
  32.     fillStyle = 'rgba(55, 55, 55, .01)'
  33.     fillRect(0, 0, innerWidth, innerHeight)
  34.  
  35.     fillStyle = 'rgba(116, 196, 221, .02)'
  36.     fillRect(0, my, innerWidth, 20);
  37.  
  38.     fillStyle = 'rgba(255, 255, 255, .02)'
  39.     fillRect(mx, 0, 20, innerHeight);
  40.  
  41.     fillStyle = 'rgba(0, 0, 0, .03)'
  42.     fillRect(0, innerHeight - my, innerWidth, 20);
  43.  
  44.     fillStyle = 'rgba(116, 196, 221, .02)'
  45.     fillRect(innerWidth - mx, 0, 20, innerHeight);
  46.     restore()
  47.     requestAnimationFrame(loop)
  48.   }
  49.   loop()
  50. }

Speed coded mouse toy…

// canvas // codegolf // globals // graphics // hacks // speedcoding

Polar Plots

  1. const Pnt = (x, y, p = { x, y }) => (
  2.   p.add = o => (p.x += o.x, p.y += o.y, p), p
  3. );
  4. Pnt.polar = (rad, t) => Pnt(rad * Math.cos(t), rad * Math.sin(t));
  5.  
  6. const pnts = {};
  7. let index = -1;
  8. const polar = (inc, rad) => {
  9.   index++;
  10.   if (!pnts[index]) pnts[index] = 0;
  11.   return Pnt.polar(rad, (pnts[index] += inc));
  12. };
  13.  
  14. let d = document;
  15. let b = d.body;
  16. with (b.appendChild(
  17.   Object.assign(d.createElement`canvas`, {
  18.     width: 600,
  19.     height: 500,
  20.   })
  21. ).getContext`2d`) {
  22.   canvas.style.transformOrigin = "0 0";
  23.   canvas.style.transform = "scale(.6)";
  24.  
  25.   let p0 = Pnt(80, 100);
  26.   let p1 = Pnt(270, 100);
  27.   let p2 = Pnt(480, 40);
  28.   let p3 = Pnt(170, 180);
  29.   let p4 = Pnt(430, 300);
  30.  
  31.   fillStyle = "black";
  32.  
  33.   function loop() {
  34.     for (let i = 0; i < 20; i++) {
  35.       index = -1;
  36.  
  37.       p0.add(polar(0.2, 4).add(polar(-0.4, 2).add(polar(0.05, 1))));
  38.       fillRect(p0.x, p0.y, 1, 1);
  39.  
  40.       p1.add(
  41.         polar(0.1, 2).add(
  42.           polar(-0.2, 2).add(polar(0.03, 1).add(polar(-0.01, 0.5)))
  43.         )
  44.       );
  45.       fillRect(p1.x, p1.y, 1, 1);
  46.  
  47.       p2.add(polar(0.08, 3).add(polar(-0.2, -12).add(polar(2, 10))));
  48.       fillRect(p2.x, p2.y, 1, 1);
  49.  
  50.       p3.add(polar(0.08, 7).add(polar(-0.2, -12).add(polar(2, 11))));
  51.       fillRect(p3.x, p3.y, 1, 1);
  52.  
  53.       p4 = p4.add(polar(0.025, 2).add(polar(-0.05, 1)));
  54.       fillRect(p4.x, p4.y, 1, 1);
  55.     }
  56.     requestAnimationFrame(loop);
  57.   }
  58.  
  59.   loop();
  60. }

Some polar plots…

// canvas // javascript // math // speed-coded // speedcoding

Shorthand Primitives Golfing

  1. !0 // true
  2.  
  3. !1 // false
  4.  
  5. 1/0 // Infinity
  6.  
  7. 0[0] // undefined (any digit works)

This is from user Isiah Meadows on the codegolf stackexchange…

// codegolf // javascript // speedcoding
Newer Posts

Recent

Archive

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