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

WebGL Tangled Supershape Points

  1. (() => {
  2.   const TWO_PI = Math.PI * 2;
  3.   const m = new Float32Array([
  4.     0, 0, 0, 0,
  5.     0, 0, 0, 0,
  6.     0, 0, 0, 0,
  7.     0, 0, 0, 0
  8.   ])
  9.  
  10.  
  11.   const vert = `
  12.     attribute vec3 vec;
  13.     uniform mat4 mat;
  14.     void main(void) {
  15.       gl_Position = mat * vec4(vec, 1.0);
  16.       gl_PointSize = 2.0;
  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.       preserveDrawingBuffer: true,
  31.       powerPreference: 'high-performance'
  32.     })
  33.  
  34.   Object.assign(gl.canvas.style, {
  35.     position: 'absolute',
  36.     left: '50%',
  37.     top: '50%',
  38.     transform: 'translate(-50%, -50%)',
  39.     outline: '1px solid gray'
  40.   })
  41.  
  42.  
  43.   with(gl) {
  44.     const NUM = 120
  45.     const radius = 0.7
  46.     let verts = []
  47.  
  48.     // Superformula (equations from):
  49.     // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333
  50.     // http://en.wikipedia.org/wiki/Superformula
  51.     function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0) {
  52.       const { random, pow, abs, cos, sin } = Math
  53.       // with(Math) { // destrucuring vs the dreaded `with`
  54.         let r = 0
  55.         let p = 0
  56.         let xp = 0
  57.         let yp = 0
  58.         let zp = 0
  59.  
  60.         let rotX = random() * TWO_PI
  61.         let rotY = random() * TWO_PI
  62.         let rotZ = random() * TWO_PI
  63.  
  64.         let cosX = cos(rotX)
  65.         let cosY = cos(rotY)
  66.         let sinX = sin(rotX)
  67.         let sinY = sin(rotY)
  68.  
  69.         while (p <= TWO_PI) {
  70.           let ang = (m * p) / 4
  71.  
  72.           r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1)
  73.           xp = r * cos(p)
  74.           yp = r * sin(p)
  75.  
  76.           p += 0.05
  77.  
  78.           zp = zp * cosX - xp * sinX
  79.           xp = zp * sinX + xp * cosX
  80.           yp = yp * cosY - zp * sinY
  81.           zp = yp * sinY + zp * cosY
  82.  
  83.           verts[inc] = xp * scale + x
  84.           verts[inc + 1] = yp * scale + y
  85.           verts[inc + 2] = zp * scale + z
  86.           inc += 3;
  87.         }
  88.       // }
  89.     }
  90.  
  91.     let inc = 0; 
  92.     for (let i = 0; i < NUM; i++) {
  93.       superShape(1, 1, 1 + ~~(Math.random() * 20),
  94.         ~~(Math.random() * 30),
  95.         ~~(Math.random() * 30),
  96.         ~~(Math.random() * 30), Math.random() * .2,
  97.         Math.random() - .5,
  98.         Math.random() - .5,
  99.         Math.random() - .5 )
  100.     }
  101.  
  102.  
  103.     console.log(verts.length)
  104.     const overts = verts.concat()
  105.     const leng = verts.length / 3
  106.  
  107.     bindBuffer(ARRAY_BUFFER, createBuffer())
  108.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  109.  
  110.     const vs = createShader(VERTEX_SHADER)
  111.     shaderSource(vs, vert)
  112.     compileShader(vs)
  113.  
  114.     const fs = createShader(FRAGMENT_SHADER)
  115.     const sp = createProgram()
  116.  
  117.     shaderSource(fs, frag)
  118.     compileShader(fs)
  119.     attachShader(sp, vs)
  120.     attachShader(sp, fs)
  121.     linkProgram(sp)
  122.     useProgram(sp)
  123.  
  124.     const vec = getAttribLocation(sp, 'vec')
  125.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  126.     enableVertexAttribArray(vec)
  127.  
  128.     const matLoc = getUniformLocation(sp, 'mat')
  129.  
  130.     function rot(x, y, z) {
  131.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  132.  
  133.       const sinA = Math.sin(x)
  134.       const cosA = Math.cos(x)
  135.       const sinB = Math.sin(y)
  136.       const cosB = Math.cos(y)
  137.       const sinY = Math.sin(z)
  138.       const cosY = Math.cos(z)
  139.  
  140.       m[0] = cosA * cosB
  141.       m[1] = cosA * sinB * sinY - sinA * cosY
  142.       m[2] = cosA * sinB * cosY + sinA * sinY
  143.       m[3] = 0
  144.  
  145.       m[4] = sinA * cosB
  146.       m[5] = sinA * sinB * sinY + cosA * cosY
  147.       m[6] = sinA * sinB * cosY - cosA * sinY
  148.       m[7] = 0
  149.  
  150.       m[8] = -sinB
  151.       m[9] = cosB * sinY
  152.       m[10] = cosB * cosY
  153.       m[11] = m[12] = m[13] = 0
  154.       m[15] = 1
  155.  
  156.       uniformMatrix4fv(matLoc, false, m)
  157.     }
  158.  
  159.     onresize = () => {
  160.       const {
  161.         canvas
  162.       } = gl
  163.       const size = Math.min(innerWidth, innerHeight) - 20
  164.       canvas.width = canvas.height = size
  165.       viewport(0, 0, size, size)
  166.     }
  167.  
  168.     onresize()
  169.  
  170.     let rx = 0, ry = 0, rz = 0
  171.  
  172.     function loop() {
  173.       rx += 0.01
  174.       ry += 0.01
  175.       rz += 0.01
  176.       rot(rx, ry, rz)
  177.  
  178.       disable(DEPTH_TEST)
  179.       enable(BLEND)
  180.       blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  181.       clearColor(0, 0, 0, 1)
  182.       clear(COLOR_BUFFER_BIT)
  183.       drawArrays(POINTS, 0, leng)
  184.       window.requestAnimationFrame(loop)
  185.     }
  186.     loop()
  187.   }
  188. })()

An interesting accident while playing around with Supershapes and WebgGL points…

// animation // graphics // hacks // javascript // math // matrix // webgl

WebGL Particles in Sphere

  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 = Math.max(Math.min(30, ~~(innerWidth / 70)), 3)
  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., .25);
  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 = 4000
  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 = Math.random() * 2 - 1
  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.     }
  57.     const overts = verts.concat()
  58.     const leng = verts.length / 3
  59.  
  60.     bindBuffer(ARRAY_BUFFER, createBuffer())
  61.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  62.  
  63.     const vs = createShader(VERTEX_SHADER)
  64.     shaderSource(vs, vert)
  65.     compileShader(vs)
  66.  
  67.     const fs = createShader(FRAGMENT_SHADER)
  68.     const sp = createProgram()
  69.  
  70.     shaderSource(fs, frag)
  71.     compileShader(fs)
  72.     attachShader(sp, vs)
  73.     attachShader(sp, fs)
  74.     linkProgram(sp)
  75.     useProgram(sp)
  76.  
  77.     const vec = getAttribLocation(sp, 'vec')
  78.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  79.     enableVertexAttribArray(vec)
  80.  
  81.     const matLoc = getUniformLocation(sp, 'mat')
  82.  
  83.     function rot(x, y, z) {
  84.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  85.  
  86.       const sinA = Math.sin(x)
  87.       const cosA = Math.cos(x)
  88.       const sinB = Math.sin(y)
  89.       const cosB = Math.cos(y)
  90.       const sinY = Math.sin(z)
  91.       const cosY = Math.cos(z)
  92.  
  93.       m[0] = cosA * cosB
  94.       m[1] = cosA * sinB * sinY - sinA * cosY
  95.       m[2] = cosA * sinB * cosY + sinA * sinY
  96.       m[3] = 0
  97.  
  98.       m[4] = sinA * cosB
  99.       m[5] = sinA * sinB * sinY + cosA * cosY
  100.       m[6] = sinA * sinB * cosY - cosA * sinY
  101.       m[7] = 0
  102.  
  103.       m[8] = -sinB
  104.       m[9] = cosB * sinY
  105.       m[10] = cosB * cosY
  106.       m[11] = m[12] = m[13] = 0
  107.       m[15] = 1
  108.  
  109.       uniformMatrix4fv(matLoc, false, m)
  110.     }
  111.  
  112.     onresize = () => {
  113.       const { canvas } = gl
  114.       const size = Math.min(innerWidth, innerHeight) - 20
  115.       canvas.width = canvas.height = size
  116.       viewport(0, 0, size, size)
  117.     }
  118.  
  119.     onresize()
  120.  
  121.     let rx = 0,
  122.       ry = 0,
  123.       rz = 0
  124.     let t = 0
  125.  
  126.     function loop() {
  127.       rx += 0.01
  128.       ry += 0.01
  129.       rot(rx, ry, rz)
  130.  
  131.       disable(DEPTH_TEST)
  132.       enable(BLEND)
  133.       blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  134.  
  135.       clearColor(0, 0, 0, 1)
  136.  
  137.       clear(COLOR_BUFFER_BIT)
  138.  
  139.       for (let i = 0; i < verts.length; i += 3) {
  140.         let tof = i * 0.001 + t;
  141.         verts[i] = Math.sin(tof) * overts[i]
  142.         verts[i + 1] = Math.sin(tof) * overts[i + 1]
  143.         verts[i + 2] = Math.sin(tof) * overts[i + 2]
  144.       }
  145.  
  146.       t += 0.01
  147.  
  148.       bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))
  149.  
  150.       drawArrays(POINTS, 0, leng)
  151.       window.requestAnimationFrame(loop)
  152.     }
  153.     loop()
  154.   }
  155. })()

Playing around with animating points…

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

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…

// graphics // javascript // math // matrix // webgl

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
Newer Posts

Recent

Archive

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