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

Base36 Alphabet Animated

  1. const canvas = document.createElement('canvas')
  2. canvas.width = innerWidth * .5
  3. canvas.height = innerHeight * .5
  4. canvas.style.transformOrigin = '0 0'
  5. canvas.style.transform = 'scale(2, 2)'
  6. canvas.style.imageRendering = 'pixelated'
  7.  
  8. document.body.append(canvas)
  9. const c = canvas.getContext('2d')
  10.  
  11. // letters defined in base36
  12. const alphabet = ['', '67erkgi', 'e3j6dss', '75rue4u', 'c5ltok8', '75s2tji',
  13.   '75s2tjk', '75rugj2', '95yfnf6', '21blls4', '10nt5xo', '973it1u',
  14.   '85aef4u', '59lu6nl', 'cnz0hbn', '67ej51o', '67eq49c', '67ej53e',
  15.   '67eq7gy', '66978m4', '6ywdqpw', '95y780c', '53b00as', '8nmdpyi',
  16.   '5374thm', '53avnus', '6xsfdam'
  17. ]
  18.  
  19. function drawBase36(num, xp, yp) {
  20.   num = alphabet[num]
  21.  
  22.   let binaryString = parseInt(num, 36).toString(2).padStart(35, '0');
  23.  
  24.   for (let i = 0; i < 35; i++) {
  25.     if (binaryString.charAt(i) === '1') {
  26.       const x = (i % 5) + xp;
  27.       const y = Math.floor(i / 5) + yp;
  28.       c.fillRect(x, y, 1, 1); 
  29.     }
  30.   }
  31. }
  32.  
  33. function letter(char, col, x, y, scale = 1, rotation = 0) {
  34.   c.fillStyle = col
  35.   c.translate(x, y)
  36.   c.scale(scale, scale)
  37.   c.rotate(rotation)
  38.  
  39.   drawBase36(char, 0, 0);
  40.   c.setTransform(1, 0, 0, 1, 0, 0)
  41. }
  42.  
  43. let NUM = 100
  44. let ps = []
  45. for (let i = 0; i < NUM; i++) {
  46.   let hr = 180 + Math.random() * 50 - 25;
  47.   let ss = 100
  48.   let bb = 50
  49.   if (Math.random() < .5) {
  50.     hr = 30 + Math.random() * 50 - 25;
  51.     ss = 100
  52.     bb = 40
  53.   }
  54.   const col = `hsl(${hr}, ${ss}%, ${bb}%)`;
  55.   const p = [
  56.     1 + ~~(Math.random() * alphabet.length),
  57.     col,
  58.     Math.random() * canvas.height, 
  59.     Math.random() * (canvas.width + 200),
  60.     1 + Math.random() * Math.random() * 10, Math.random() * 7
  61.   ]
  62.   p.props = { 
  63.     vx: Math.random() * 1 - .5,
  64.     r: .01 * Math.random() - 0.005
  65.   }
  66.   letter(...p)
  67.   ps.push(p)
  68. }
  69.  
  70. function draw() {
  71.   c.fillStyle = 'rgba(91, 34, 0, .05)'
  72.   c.fillRect(0, 0, canvas.width, canvas.height)
  73.  
  74.   for (let i = 0; i < NUM; i++) {
  75.     const p = ps[i]
  76.     p[2] += p.props.vx;
  77.     p[5] += p.props.r
  78.     letter(...p)
  79.   } 
  80.  
  81.   c.fillStyle = 'rgba(0, 255, 255, 1)'
  82.   c.scale(1, 1)
  83.  
  84.   for (let i = 0; i < alphabet.length; i++) {
  85.     drawBase36(i, i * 10, 10);
  86.   }
  87.   c.setTransform(1, 0, 0, 1, 0, 0)
  88.  
  89.   requestAnimationFrame(draw)
  90. }
  91. draw()

This alphabet is something I drew manually in the 2000s – then at some point wrote this snippet on actionsnippet. Basically each letter is a 5×7 binary number and I store these in base36 for no particular reason 😀

// animation // canvas // drawing // graphics // hacks // javascript // math // random // tricks

iwrjgnb

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. canvas.width = innerWidth * 2
  5. canvas.height = innerHeight * 2
  6. canvas.style.scale = '.5 .5'
  7. canvas.style.transformOrigin = '0 0' 
  8.  
  9. c.fillStyle = 'rgba(255, 236, 168, 1)'
  10. c.fillRect(0, 0, canvas.width, canvas.height)
  11. document.body.append(canvas)
  12.  
  13. let width = 300
  14. let height = 300
  15.  
  16. function cell(ox = 0, oy = 0) {
  17.  
  18.   let ax = ox + width / 2
  19.   let ay = oy + height / 2
  20.   let x, y
  21.   let r = width * Math.random()
  22.   let rx = r
  23.   let ry = r
  24.   if (Math.random() < .5) rx *= Math.random()
  25.   if (Math.random() < .5) ry *= Math.random()
  26.   let t = Math.random() * 7
  27.  
  28.   let ti = Math.random() * .1 - .05
  29.   let te;
  30.   let dr = 0
  31.   if (ti > 0) {
  32.     te = t + Math.random() * 7
  33.     dr = 1
  34.   } else {
  35.     te = t - Math.random() * 7
  36.   }
  37.   let rm = 0
  38.   if (Math.random() < .5) rm = Math.random() * 3
  39.  
  40.   return () => {
  41.     x = ax + rx * Math.cos(t)
  42.     y = ay + ry * Math.sin(t)
  43.     if (rm !== 0) {
  44.       rx -= rm;
  45.       ry -= rm
  46.     }
  47.     t += ti
  48.     if ((t > te && dr === 1) || (t < te && dr === 0)) {
  49.       return
  50.     }
  51.     c.fillStyle = 'black'
  52.     c.fillRect(x, y, 2, 2)
  53.  
  54.     if (Math.random() < .5) {
  55.       cls.push(cl(x, y))
  56.     }
  57.   }
  58. }
  59.  
  60. function cl(x, y) {
  61.   let vy = .2 + Math.random() * 2 - 1
  62.   let col = 'rgba(0, 0, 0, 0.08)'
  63.   if (Math.random() < .1) col = 'rgba(0, 178, 227, .3)'
  64.   if (Math.random() < .01) col = 'rgba(255, 0, 0, .3)'
  65.   let vx = 0
  66.   if (Math.random() < .03) {
  67.     vx = 1
  68.     vy = 0;
  69.     col = 'rgba(255, 255, 255, .2)'
  70.   }
  71.   let dead = false;
  72.   return () => {
  73.     if (dead) return
  74.     y += vy
  75.     x += vx
  76.     if (Math.random() < .01) {
  77.       dead = true
  78.     }
  79.     c.fillStyle = col
  80.     c.fillRect(x, y, 2, 2)
  81.   }
  82. }
  83.  
  84. let NUM = 5
  85. let cs = []
  86. let cls = []
  87. for (let j = 0; j < NUM; j++) {
  88.   let yy = Math.random() * innerHeight
  89.   let xx = Math.random() * innerWidth
  90.   let num = 5 + ~~(Math.random() * Math.random() * 10)
  91.   if (Math.random() < .3) num = Math.random() * 50
  92.   for (let i = 0; i < NUM; i++) {
  93.     for (let k = 0; k < num; k++) {
  94.       cs.push(cell(xx, yy))
  95.     }
  96.   }
  97. }
  98.  
  99. function loop() {
  100.   cs.forEach(f => f())
  101.   cls.forEach(f => f())
  102.   requestAnimationFrame(loop)
  103. }
  104. loop()

Just posting more code from recent shorts… more here

// canvas // codegolf // curves // golfed // graphics // hacks // javascript // math // random // speed-coded // speedcoding

sTwister

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. canvas.width = innerWidth * 2
  5. canvas.height = innerHeight * 2
  6. canvas.style.scale = '.5 .5'
  7. canvas.style.transformOrigin = '0 0'
  8. canvas.style.filter = 'contrast(1.1)'
  9. document.body.append(canvas)
  10.  
  11.  
  12. const canvas2 = document.createElement('canvas')
  13. const c2 = canvas2.getContext('2d')
  14.  
  15. canvas2.width = innerWidth * 2
  16. canvas2.height = innerHeight * 2
  17.  
  18.  
  19. const r = (n = 1) => Math.random() * n
  20.  
  21. let anc = ~~r(360)
  22.  
  23. function plaint(x, y) {
  24.   let vy = r(-20) - 1
  25.   let vx = 0
  26.   const cl = ~~r(50) + anc;
  27.   let t = r(7)
  28.   let rx = r(1) + .5
  29.   let jag = r(.5)
  30.   let bright = r(100)
  31.   return () => {
  32.     vx = rx * Math.cos(t)
  33.     if (r() < jag) {
  34.       t += r(3)
  35.     }
  36.     x += vx
  37.     y += vy
  38.     c.fillStyle = `hsla(${cl}, 20%, ${bright}%, .5)`
  39.  
  40.     c.fillRect(x, y, 4, 4)
  41.     if (y < 0) {
  42.       y = canvas.height
  43.       vy = r(-20) - 1
  44.     }
  45.   }
  46. }
  47.  
  48. function erase() {
  49.   c.fillStyle = 'black'
  50.   c.fillRect(0, 0, canvas.width, canvas.height)
  51.  
  52. }
  53. erase()
  54.  
  55. const plntNum = 350
  56. let xStep = canvas.width / plntNum
  57.  
  58. const plnt = []
  59. for (let i = 0; i < plntNum; i++) {
  60.   const x = i * xStep
  61.   plnt.push(plaint(x, canvas.height))
  62. }
  63.  
  64. let R = null 
  65.  
  66. function swister(C, x, y, fc, ss, n, slow) {
  67.   const shadesNum = n || 100
  68.   const shades = []
  69.   const rad = R || 200   
  70.  
  71.   for (let i = 0; i < shadesNum; i++) {
  72.     shades.push({
  73.       x,
  74.       y,
  75.       xx: 0,
  76.       yy: 0,
  77.       r: r(rad) + 200,
  78.       t: r(7),
  79.       rinc: r(1) - .1,
  80.       tinc: r(.1),
  81.       cl: fc(),
  82.       a: r(.02) + .01
  83.     }) 
  84.  
  85.   }
  86.  
  87.   return () => {
  88.     for (let i = 0; i < shadesNum; i++) {
  89.       let s = shades[i]
  90.       s.xx = s.x + s.r * Math.cos(s.t)
  91.       s.yy = s.y + s.r * Math.sin(s.t)
  92.       s.r -= s.rinc;
  93.       if (s.r < 200) {
  94.         s.r = r(rad) + 200
  95.         s.tinc = r(.1)
  96.         if (slow) s.tinc *= .1
  97.         if (r() < .5) s.inc *= -1;
  98.  
  99.         s.rinc = r(.1)
  100.       }
  101.       s.t += s.tinc
  102.       C.fillStyle = `rgba(${s.cl}, ${s.cl}, ${s.cl}, ${s.a})`
  103.       C.fillRect(s.xx, s.yy, ss, ss)
  104.     }
  105.   }
  106. }
  107.  
  108. R = r(canvas.width / 5) + 50
  109. let s1x = (canvas.width - R) * r() + R / 2
  110. let s1y = (canvas.height - R) * r() + R / 2
  111. let s = swister(c, s1x, s1y,
  112.   () => r(10), 24
  113. )
  114. let s2 = swister(c2,
  115.   s1x - 50, s1y - 50,
  116.   () => r(200) + 0, 4
  117. )
  118.  
  119. let s3 = swister(c2,
  120.   s1x - 50, s1y - 50,
  121.   () => r(50) + 200, 8, 4, true
  122. )
  123.  
  124.  
  125. R = r(150) + 50
  126. let s2x = (canvas.width - R) * r() + R / 2
  127. let s2y = (canvas.height - R) * r() + R / 2
  128. let sa = swister(c, s2x, s2y,   
  129.   () => r(10), 24
  130. )
  131. let sb = swister(c2,
  132.   s2x - 50, s2y - 50,
  133.   () => r(200) + 0, 4
  134. )
  135.  
  136. let sc = swister(c2,
  137.   s2x - 50, s2y - 50,
  138.   () => r(50) + 200, 8, 4, true
  139. ) 
  140.  
  141. function draw() {
  142.  
  143.   c.globalAlpha = 1;
  144.   c.globalCompositeOperation = 'source-over'  
  145.   plnt.forEach(p => p())
  146.  
  147.   s()
  148.   sa()
  149.   c.globalAlpha = .05;
  150.   c.drawImage(canvas, -10, -10, canvas.width + 10, canvas.height + 10)
  151.   // c.globalCompositeOperation = 'source-atop'
  152.   s2()
  153.   sb()
  154.   s3()
  155.   sc()
  156.   c.globalAlpha = 1
  157.   c.globalCompositeOperation = 'hard-light'
  158.   c.drawImage(canvas2, 0, 0);
  159.   c.globalAlpha = .02; 
  160.  
  161.   c.drawImage(canvas, 0, 0, canvas.width, canvas.height + 10)
  162.   requestAnimationFrame(draw)
  163. }
  164. draw()

Speed-coded this on the train the other day. Might port over to WebGL sometime soon…

// canvas // codegolf // golfed // graphics // hacks // javascript // random // speed-coded // speedcoding // tricks

T Plant

  1. const { PI } = Math
  2. const canvas = document.createElement('canvas')
  3. const c = canvas.getContext('2d')
  4.  
  5. canvas.width = innerWidth * 2
  6. canvas.height = innerHeight * 2
  7. canvas.style.scale = '.5 .5'
  8. canvas.style.transformOrigin = '0 0'
  9.  
  10. c.fillStyle = 'black'
  11. c.fillRect(0, 0, canvas.width, canvas.height)
  12.  
  13. document.body.append(canvas)
  14. let o = -PI / 2
  15.  
  16. const r = (n = 1) => Math.random() * n
  17.  
  18. function branch(x, y, ang = o, f) {
  19.   let vx, vy
  20.   let life = 0
  21.   let dead
  22.   let vv = 1 + r(2)
  23.   let ll = r(200)
  24.   let a = 1;
  25.   if (f) a = 0
  26.  
  27.   return () => {
  28.     if (dead) return
  29.     if (life > 200 + ll) {
  30.       dead = true;
  31.       let n = 10 + r(20)
  32.       for (let i = 0; i < n; i++) {
  33.  
  34.         let dest = {
  35.           x,
  36.           y: y + r(30) - 15
  37.         }
  38.         bs.push(leafPart(x, y, dest))
  39.       }
  40.     }
  41.  
  42.     life++
  43.     if (life > 10 && a >= 1 && Math.random() < .02 && bs.length < 20) {
  44.       if (r() < .3) {
  45.         dead = true
  46.         bs.push(
  47.           branch(x, y, ang + r(PI / 4)))
  48.         branch(x, y, ang + r(-PI / 4))
  49.         return
  50.       }
  51.       bs.push(
  52.         branch(x, y, o + r(2) - 1))
  53.     }
  54.     vx = Math.cos(ang)
  55.     vy = Math.sin(ang) * vv
  56.     ang += r(.1) - .05
  57.  
  58.     x += vx
  59.     y += vy
  60.     c.fillStyle = `rgba(255, 255, 255, ${a})`
  61.     if (f) {
  62.       a += .01
  63.     }
  64.  
  65.     c.fillRect(x, y, 4, 4)
  66.   }
  67. }
  68.  
  69. function leafPart(x, y, dest) {
  70.   let ang = r(7)
  71.   let rr = r(1) + .5
  72.   let vv = -r(3)
  73.   let life = 0
  74.   let maxLife = 40 + r(200)
  75.   let vx
  76.   let vy
  77.   let CC = 190 + r(30)
  78.  
  79.   return () => {
  80.     life++
  81.     if (life < maxLife) {
  82.       vx = Math.cos(ang) * rr
  83.       vy = Math.sin(ang) * rr + vv
  84.       x += vx
  85.       y += vy
  86.       ang += r(.4) - .2
  87.       c.fillStyle = 'rgba(255, 255, 255, .1)'
  88.     } else {
  89.       c.fillStyle = `rgba(255, ${CC}, ${CC}, .25)`
  90.       x += (dest.x - x) / 42
  91.       y += (dest.y - y) / 12
  92.     }
  93.  
  94.     c.fillRect(x, y, 4, 4)
  95.   }
  96. }
  97. let bs = []
  98. let lf = []
  99.  
  100. bs.push(
  101.   branch(innerWidth, innerHeight * 1.9, o, true)
  102. )
  103.  
  104. function loop() {
  105.   bs.forEach(b => b())
  106.   requestAnimationFrame(loop)
  107. }
  108. loop()

Been pretty consistently posting speed-coded youtube shorts. This is a recent one. Magic numbers, nonsense variable names, and strange noops 😀

See the short here…

// animation // canvas // codegolf // color // curves // graphics // hacks // javascript // random // speed-coded // speedcoding // tricks

GLSL SierpiƄski Glitch Texture #3

  1. const vert = `#version 300 es
  2. layout(location = 0) in vec3 position;
  3. out vec2 uv;
  4. void main(void) {
  5.   uv = position.xy * 0.5 + 0.5;
  6.   gl_Position = vec4(position, 1.0);
  7. }
  8. `;
  9.  
  10. const frag1 = `#version 300 es
  11. precision highp float;
  12. uniform float time;
  13. uniform float dx;
  14. uniform float dy;
  15.  
  16. float w2 = 1.0 / float(${innerWidth * 2});
  17. float w10 = 1.0 / (float(${innerWidth * 2}) * 100.); 
  18. float convert = 3.141592653589 / 180.;
  19.  
  20. float sn;
  21. float cs;
  22.  
  23. out vec4 fragColor;
  24.  
  25. void main(void) {
  26.   vec2 uv = gl_FragCoord.xy / vec2(float(${innerWidth * 2}), float(${innerHeight * 2}));
  27.  
  28.   float xp = uv.x * float(${innerWidth * 2});
  29.   float yp = (1. - uv.y) * float(${innerHeight * 2});
  30.   int x = 10 | 2;
  31.   int xp2 = int(xp) << 1; 
  32.   float t = mod(float(int(yp) | int(xp + yp * .1) ) * (xp + dx) * (w10), 6.283185307179586);
  33.  
  34.   if (t < 0.) {
  35.     sn = 1.27323954 * t + .405284735 * t * t; 
  36.   } else {
  37.     sn = 1.27323954 * t - 0.405284735 * t * t;
  38.   }
  39.  
  40.   t = mod(float( (xp2 | int(yp + xp * .1 + dy) )) * convert, 6.283185307179586);
  41.  
  42.   t += 1.57079632;
  43.   if (t > 3.14159265) {
  44.     t -= 6.28318531;
  45.   }
  46.   if (t < 0.) {
  47.     cs = 1.27323954 * t + 0.405284735 * t * t;
  48.   } else {
  49.     cs = 1.27323954 * t - 0.405284735 * t * t;
  50.   }
  51.  
  52.   float c1 = 30. * (sn - cs);
  53.  
  54.   if (c1 < 0.) c1 = 255. - c1;
  55.   c1 = float((int(c1) << 4 | int(c1)) & 255) / 255.;
  56.  
  57.   fragColor = vec4(c1, c1, c1, 1.0);
  58. } 
  59. `;
  60.  
  61. const frag2 = `#version 300 es
  62. precision highp float;
  63. in vec2 uv;
  64.  
  65.   // The max kernel size (impacts performance)
  66. #define maxKernel 1.0
  67.  
  68. // The max offset (doesn't impact performance)
  69. #define maxOffset 34.0
  70. uniform sampler2D uTexture; 
  71.  
  72.  
  73. // https://www.shadertoy.com/view/mdGcRh
  74. vec3 fastBlur(vec2 uv, vec2 texel, vec2 kd)
  75. {
  76. float r = kd.x * kd.y;
  77. float rr = 1.0/r;
  78. vec3 col = vec3(0.0);
  79. float a = 1.0;
  80.  
  81. for (float x = -r; x <= r; x += kd.y) {       
  82. for (float y = -r; y <= r; y += kd.y)  {
  83. a++;
  84. vec2 c = uv + vec2(x,y) * texel;
  85. col += texture(uTexture, c + fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453) * texel * kd.y * 2.0 - kd.yy * texel).rgb * (2.0 - distance(vec2(x,y) * rr, vec2(0.0))); 
  86. }
  87. }
  88.  
  89. return col / a;
  90. }
  91.  
  92.  
  93. out vec4 fragColor;
  94. void main(void) {
  95.   vec4 color = texture(uTexture, uv);
  96.   vec4 colorB = texture(uTexture, vec2(uv.x, 1. - uv.y));
  97.   vec3 result = (color.rgb - colorB.rgb) * 1.2;
  98.  
  99.     float amt = .4;
  100.     vec2 texel = vec2(1.0)/ vec2(float(${innerWidth * 2}), float(${innerHeight * 2}));
  101.  
  102.     vec2 kd = round(vec2(amt * maxKernel + 1.0, amt * maxOffset + 1.0));
  103.  
  104.     vec3 blur = fastBlur(uv, texel, kd);
  105.  
  106.   fragColor = vec4(result, color.a);
  107. }
  108. `;
  109.  
  110.   const frag3 = `#version 300 es
  111. precision highp float;
  112. in vec2 uv;
  113.  
  114.   // The max kernel size (impacts performance)
  115. #define maxKernel 4.0
  116.  
  117. // The max offset (doesn't impact performance)
  118. #define maxOffset 34.0
  119. uniform sampler2D uTexture; 
  120.  
  121.  
  122. // https://www.shadertoy.com/view/mdGcRh
  123. vec3 fastBlur(vec2 uv, vec2 texel, vec2 kd)
  124. {
  125. float r = kd.x * kd.y;
  126. float rr = 1.0/r;
  127. vec3 col = vec3(0.0);
  128. float a = 1.0;
  129.  
  130. for (float x = -r; x <= r; x += kd.y) {       
  131. for (float y = -r; y <= r; y += kd.y)  {
  132. a++;
  133.       vec2 c = uv + vec2(x,y) * texel;
  134.  
  135.       col += texture(
  136.  
  137.       uTexture, 
  138.  
  139.       c 
  140.       + fract(sin(dot(c, vec2(2.9898, 78.233))) * 13758.5453) * texel * kd.y * 2.4
  141.       - kd.yy * texel
  142.  
  143.       ).rgb * (2.0 - distance(vec2(x,y) * rr, vec2(0.0)));
  144. }
  145. }
  146.  
  147. return col / a;
  148. }
  149.  
  150.  
  151. out vec4 fragColor;
  152. void main(void) {
  153.   vec4 color = texture(uTexture, uv);
  154.  
  155.     float amt = .4;
  156.     vec2 texel = vec2(1.0)/ vec2(float(${innerWidth * 2}), float(${innerHeight * 2}));
  157.  
  158.     vec2 kd = round(vec2(amt * maxKernel + 1.0, amt * maxOffset + 1.0));
  159.  
  160.   vec4 blur = vec4(fastBlur(uv, texel, kd), 1.);
  161.     //1-(1-A)*(1-B)
  162.   vec3 f = 1. - (1. - color.rgb) * (1. - blur.rgb);  
  163.  
  164.  
  165.   fragColor = vec4(f.rgb, 1.);
  166. } 
  167. `;
  168.  
  169.  
  170.  
  171. document.body.style.background = '#000';
  172. const gl = document.body
  173.   .appendChild(document.createElement('canvas'))
  174.   .getContext('webgl2');
  175.  
  176. Object.assign(gl.canvas.style, {
  177.   position: 'absolute',
  178.   left: 0,
  179.   top: 0
  180. });
  181.  
  182. const s = 1;
  183. const verts = new Float32Array([
  184.   -s, -s, 0,
  185.   s, -s, 0,
  186.   -s, s, 0,
  187.   s, s, 0,
  188. ]);
  189.  
  190. const buffer = gl.createBuffer();
  191. gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  192. gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
  193.  
  194. function createShaderProgram(vertexSource, fragmentSource) {
  195.   const vs = gl.createShader(gl.VERTEX_SHADER);
  196.   gl.shaderSource(vs, vertexSource);
  197.   gl.compileShader(vs);
  198.  
  199.   const fs = gl.createShader(gl.FRAGMENT_SHADER);
  200.   gl.shaderSource(fs, fragmentSource);
  201.   gl.compileShader(fs);
  202.  
  203.   const program = gl.createProgram();
  204.   gl.attachShader(program, vs);
  205.   gl.attachShader(program, fs);
  206.   gl.linkProgram(program);
  207.  
  208.   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  209.     console.error('Could not link program:', gl.getProgramInfoLog(program));
  210.   }
  211.  
  212.   return program;
  213. }
  214.  
  215. const program1 = createShaderProgram(vert, frag1);
  216. const program2 = createShaderProgram(vert, frag2);
  217. const program3 = createShaderProgram(vert, frag3);
  218.  
  219. const framebuffer1 = gl.createFramebuffer();
  220. const framebuffer2 = gl.createFramebuffer();
  221. const texture1 = gl.createTexture();
  222. const texture2 = gl.createTexture();
  223.  
  224. gl.bindTexture(gl.TEXTURE_2D, texture1);
  225. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth, innerHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  226. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  227. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  228. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  229.  
  230. gl.bindTexture(gl.TEXTURE_2D, texture2);
  231. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth, innerHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  232. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  233. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  234. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  235.  
  236. gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer1);
  237. gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);
  238.  
  239. gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer2);
  240. gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture2, 0);
  241.  
  242. const onResize = () => {
  243.   gl.canvas.width = innerWidth * 2;
  244.   gl.canvas.height = innerHeight * 2;
  245.   gl.canvas.style.width = innerWidth + 'px'
  246.   gl.canvas.style.height = innerHeight + 'px'
  247.   gl.viewport(0, 0, innerWidth * 2, innerHeight * 2);
  248.   gl.bindTexture(gl.TEXTURE_2D, texture1);
  249.   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth * 2, innerHeight * 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  250.   gl.bindTexture(gl.TEXTURE_2D, texture2);
  251.   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth * 2, innerHeight * 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  252. };
  253.  
  254. window.onresize = onResize;
  255. onResize();
  256.  
  257. gl.disable(gl.DEPTH_TEST);
  258.  
  259. let mx = 0;
  260. let my = 0;
  261. let dx = 0;
  262. let dy = 0;
  263.  
  264. window.onpointermove = e => {
  265.   mx = e.clientX;
  266.   my = e.clientY;
  267. };
  268.  
  269. const loop = () => {
  270.  
  271.   dx += (mx * 2 - (innerWidth) - dx) / 8;
  272.   dy += (my * 2 - dy) / 8;
  273.  
  274.   // first pass
  275.   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer1);
  276.   gl.useProgram(program1);
  277.  
  278.   const mxUniform = gl.getUniformLocation(program1, 'dx');
  279.   gl.uniform1f(mxUniform, dx);
  280.  
  281.   const myUniform = gl.getUniformLocation(program1, 'dy');
  282.   gl.uniform1f(myUniform, dy);
  283.  
  284.   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  285.   const pos1 = gl.getAttribLocation(program1, 'position');
  286.   gl.enableVertexAttribArray(pos1);
  287.   gl.vertexAttribPointer(pos1, 3, gl.FLOAT, false, 0, 0);
  288.   gl.clearColor(0, 0, 0, 1);
  289.   gl.clear(gl.COLOR_BUFFER_BIT);
  290.   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  291.  
  292.   // second pass
  293.   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer2);
  294.   gl.useProgram(program2);
  295.   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  296.   const pos2 = gl.getAttribLocation(program2, 'position');
  297.   gl.enableVertexAttribArray(pos2);
  298.   gl.vertexAttribPointer(pos2, 3, gl.FLOAT, false, 0, 0);
  299.   const uTexture = gl.getUniformLocation(program2, 'uTexture');
  300.   gl.uniform1i(uTexture, 0);
  301.   gl.activeTexture(gl.TEXTURE0);
  302.   gl.bindTexture(gl.TEXTURE_2D, texture1);
  303.   gl.clearColor(0, 0, 0, 1);
  304.   gl.clear(gl.COLOR_BUFFER_BIT);
  305.   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  306.  
  307.   // third pass
  308.   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  309.   gl.useProgram(program3);
  310.   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  311.   const pos3 = gl.getAttribLocation(program3, 'position');
  312.   gl.enableVertexAttribArray(pos3);
  313.   gl.vertexAttribPointer(pos3, 3, gl.FLOAT, false, 0, 0);
  314.   const u2Texture = gl.getUniformLocation(program3, 'uTexture');
  315.   gl.uniform1i(u2Texture, 0);
  316.   gl.activeTexture(gl.TEXTURE0);
  317.   gl.bindTexture(gl.TEXTURE_2D, texture2);
  318.   gl.clearColor(0, 0, 0, 1);
  319.   gl.clear(gl.COLOR_BUFFER_BIT);
  320.   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
  321.  
  322.   requestAnimationFrame(loop);
  323. };
  324. loop();

this old thing was tricky to port to glsl, canvas port was easy (codepen here) – used gpt a bit for glsl version… got it eventually: take a look

// binary // color // filters // glsl // graphics // hacks // hex // javascript // math // webgl
Older Posts

Recent

Archive

RSS
snippet.zone /// {s/z}