)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

3d Hypocycloid Shape

  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 / 100)), 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., .25);
  23.     }
  24.   `
  25.  
  26.   document.body.style.background = '#232323'
  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 TWO_PI = Math.PI * 2;
  42.     const verts = []
  43.  
  44.     let step =.05
  45.     let n = 8
  46.     let xp = 0
  47.     let yp = 0
  48.     let a = 12
  49.     let t = 0
  50.     let scl = .005;
  51.  
  52.     for (var i = 0; i < TWO_PI; i += step) {
  53.       for (var j = 0; j < TWO_PI; j += step) {
  54.         // unoptimized for readability
  55.         let cosi = a/n * ((n - 1) * Math.cos(i) + Math.cos(Math.abs((n - 1) * i)))
  56.         let sini = a/n * ((n - 1) * Math.sin(i) - Math.sin(Math.abs((n - 1) * i)))
  57.         let cosj = a/n * ((n - 1) * Math.cos(j) + Math.cos(Math.abs((n - 1) * j)))
  58.         let sinj = a/n * ((n - 1) * Math.sin(j) - Math.sin(Math.abs((n - 1) * j)))
  59.         verts.push(cosi * cosj * scl)
  60.         verts.push(sini * cosj * scl)
  61.         verts.push(a * sinj * scl)
  62.       }
  63.     }
  64.  
  65.     const leng = verts.length / 3
  66.     bindBuffer(ARRAY_BUFFER, createBuffer())
  67.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  68.  
  69.     const vs = createShader(VERTEX_SHADER)
  70.     shaderSource(vs, vert)
  71.     compileShader(vs)
  72.  
  73.     const fs = createShader(FRAGMENT_SHADER)
  74.     const sp = createProgram()
  75.  
  76.     shaderSource(fs, frag)
  77.     compileShader(fs)
  78.     attachShader(sp, vs)
  79.     attachShader(sp, fs)
  80.     linkProgram(sp)
  81.     useProgram(sp)
  82.  
  83.     const vec = getAttribLocation(sp, 'vec')
  84.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  85.     enableVertexAttribArray(vec)
  86.  
  87.     const matLoc = getUniformLocation(sp, 'mat')
  88.  
  89.     function rot(x, y, z) {
  90.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  91.  
  92.       const sinA = Math.sin(x)
  93.       const cosA = Math.cos(x)
  94.       const sinB = Math.sin(y)
  95.       const cosB = Math.cos(y)
  96.       const sinY = Math.sin(z)
  97.       const cosY = Math.cos(z)
  98.  
  99.       m[0] = cosA * cosB
  100.       m[1] = cosA * sinB * sinY - sinA * cosY
  101.       m[2] = cosA * sinB * cosY + sinA * sinY
  102.       m[3] = 0
  103.  
  104.       m[4] = sinA * cosB
  105.       m[5] = sinA * sinB * sinY + cosA * cosY
  106.       m[6] = sinA * sinB * cosY - cosA * sinY
  107.       m[7] = 0
  108.  
  109.       m[8] = -sinB
  110.       m[9] = cosB * sinY
  111.       m[10] = cosB * cosY
  112.       m[11] = m[12] = m[13] = 0
  113.       m[15] = 1
  114.  
  115.       uniformMatrix4fv(matLoc, false, m)
  116.     }
  117.  
  118.     onresize = () => {
  119.       const { canvas } = gl
  120.       const size = Math.min(innerWidth, innerHeight) - 20
  121.       canvas.width = canvas.height = size
  122.       viewport(0, 0, size, size)
  123.     }
  124.  
  125.     onresize()
  126.  
  127.     let rx = 0, ry = 0, rz = 0
  128.  
  129.     disable(DEPTH_TEST)
  130.     enable(BLEND)
  131.     blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  132.  
  133.     function loop() {
  134.       rot(rx += .01, ry -= 0.03, rz += 0.01)
  135.  
  136.       clearColor(0, 0, 0, 1)
  137.       clear(COLOR_BUFFER_BIT)
  138.       drawArrays(POINTS, 0, leng)
  139.       window.requestAnimationFrame(loop)
  140.     }
  141.     loop()
  142.   }
  143. })()

WebGL plot of a hypocycloid shape. I enjoy using with here…

snippet.zone ~ 2021-22 /// {s/z}