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

WebGL Shader Example

  1. (() => {
  2.  
  3.   const vert = `
  4.     attribute vec3 vec;
  5.     void main(void) {
  6.       gl_Position = vec4(vec, 1.);
  7.     }
  8.   `
  9.  
  10.   const frag = `
  11.     #ifdef GL_ES
  12.     precision highp float;
  13.     #endif
  14.     uniform float time;
  15.     void main(void) {
  16.       vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);
  17.       float w = 1. + cos(uv.y * 60.) * cos(uv.x * 50. + time * 30.);
  18.       gl_FragColor = vec4(uv.x, w * .5, w, 1.);
  19.     }
  20.   `
  21.  
  22.   document.body.style.background = '#000'
  23.   const gl = document.body
  24.     .appendChild(document.createElement('canvas'))
  25.     .getContext('webgl')
  26.  
  27.   Object.assign(gl.canvas.style, {
  28.     position: 'absolute',
  29.     left: 0,
  30.     top: 0
  31.   })
  32.  
  33.   with (gl) {
  34.     const s = 1;
  35.     const verts = [
  36.       -s, -s, 0,
  37.        s, -s, 0,
  38.       -s,  s, 0,
  39.        s,  s, 0,
  40.     ]
  41.  
  42.     const leng = verts.length / 3
  43.     bindBuffer(ARRAY_BUFFER, createBuffer())
  44.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  45.  
  46.     const vs = createShader(VERTEX_SHADER)
  47.     shaderSource(vs, vert)
  48.     compileShader(vs)
  49.  
  50.     const fs = createShader(FRAGMENT_SHADER)
  51.     const sp = createProgram()
  52.  
  53.     shaderSource(fs, frag)
  54.     compileShader(fs)
  55.     attachShader(sp, vs)
  56.     attachShader(sp, fs)
  57.     linkProgram(sp)
  58.     useProgram(sp)
  59.  
  60.     const vec = getAttribLocation(sp, 'vec')
  61.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  62.     enableVertexAttribArray(vec)
  63.  
  64.     onresize = () => {
  65.       const { canvas } = gl 
  66.       canvas.width = innerWidth
  67.       canvas.height = innerHeight
  68.       viewport(0, 0, innerWidth, innerHeight)
  69.     }
  70.  
  71.     onresize()
  72.  
  73.     disable(DEPTH_TEST)
  74.     enable(BLEND)
  75.     blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  76.  
  77.     const startTime = Date.now();
  78.  
  79.     function loop() {
  80.       const time = (Date.now() - startTime) / 1000
  81.       const uniformTime = gl.getUniformLocation(sp, 'time');
  82.       gl.uniform1f(uniformTime, time);
  83.  
  84.       clearColor(0, 0, 0, 1)
  85.       clear(COLOR_BUFFER_BIT)
  86.       drawArrays(TRIANGLE_STRIP, 0, leng)
  87.       requestAnimationFrame(loop)
  88.     }
  89.     loop()
  90.   }
  91. })()

A basic shader setup. This is realistic minus the use of a with statement…

// 3d // glsl // javascript // shaders // webgl

Building Spikes Codegolf

  1. f = 
  2.  
  3. n=>`   ^ 
  4.   /|\\
  5.  /.|.\\
  6. /..|..\\
  7. ___`.replace(/.[_|^]./g,'$&'.repeat(n))+'____'
  8.  
  9. // test it out
  10. document.body.innerHTML += 
  11. `<pre>${f(1)}
  12. ${f(3)}
  13. ${f(4)}`

Great codegolf stackexchange answer from user tsh

Canvas Path2D

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. )
  4. const c = canvas.getContext('2d')
  5.  
  6. canvas.width = innerWidth
  7. canvas.height = innerHeight
  8.  
  9. c.translate(10, 10)
  10. const path = new Path2D('M 154.75 61.5 Q 169.75 63.8 184.8 69.35 173.15 68.3 161.7 69.4 173.1 73.85 184.8 75.95 173.1 77.15 161.65 75.95 173.05 80.45 184.8 82.55 173 83.75 160.05 82.35 173 87.05 184.8 89.15 172.95 90.35 161.65 89.1 172.9 93.65 184.8 95.75 172.8 96.9 161.65 95.7 172.8 100.2 184.8 102.35 172.75 103.5 163.7 102.7 172.7 106.8 184.8 110.3 172.7 110.1 161.65 108.85 172.6 113.35 184.8 118.85 171.05 116.05 158.35 114.65 167.3 126.9 174 141.45 166.5 132.45 157.65 125.1 162.55 136.3 169.35 146.1 160.2 138.65 152.95 129.7 157.85 141 164.7 150.75 155.5 143.25 147.3 133.15 153.15 145.6 160 155.45 150.75 147.9 143.65 139 148.45 150.2 155.35 160.1 146.05 152.4 139 143.65 143.7 154.75 150.7 164.75 141.3 157.05 135.5 150.05 139 159.35 145.05 170.4 136.65 161.7 129.7 152.95 134.25 163.9 139 176.45 131.3 164.75 123.3 154.8 121 169.8 115.45 184.8 116.5 173.15 115.4 161.7 110.95 173.1 108.85 184.8 107.65 173.1 108.85 161.65 104.35 173.05 102.25 184.8 101.05 173 102.45 160.05 97.75 173 95.65 184.8 94.45 172.95 95.7 161.65 91.15 172.9 89.05 184.8 87.9 172.8 89.1 161.65 84.6 172.8 82.45 184.8 81.3 172.75 82.1 163.7 78 172.7 74.5 184.8 74.7 172.7 75.95 161.65 71.45 172.6 65.95 184.8 68.75 171.05 70.15 158.4 57.9 167.35 43.35 174.05 52.35 166.55 59.7 157.7 48.5 162.6 38.7 169.4 46.15 160.25 55.1 153 43.8 157.9 34.05 164.75 41.55 155.55 51.65 147.35 39.2 153.2 29.35 160.05 36.9 150.8 45.8 143.7 34.6 148.5 24.7 155.4 32.4 146.1 41.15 139.05 30.05 143.75 20.05 150.75 27.75 141.35 34.75 135.55 25.45 139.05 14.4 145.1 23.1 136.7 31.85 129.75 20.9 134.3 8.35 139.05 20.05 131.3 30.05 123.3 15.05 121 0 115.45 11.65 116.5 23.1 115.4 11.7 110.95 0 108.85 11.7 107.65 23.15 108.85 11.75 104.35 0 102.25 11.8 101.05 24.75 102.45 11.8 97.75 0 95.65 11.85 94.45 23.15 95.7 11.9 91.15 0 89.05 12 87.9 23.15 89.1 12 84.6 0 82.45 12.05 81.3 21.1 82.1 12.1 78 0 74.5 12.1 74.7 23.15 75.95 12.2 71.45 0 65.95 13.75 68.75 26.45 70.15 17.45 57.9 10.75 43.35 18.25 52.35 27.1 59.7 22.2 48.5 15.4 38.7 24.55 46.15 31.8 55.1 26.9 43.8 20.05 34.05 29.25 41.55 37.45 51.65 31.6 39.2 24.75 29.35 34 36.9 41.1 45.8 36.3 34.6 29.4 24.7 38.7 32.4 45.75 41.15 41.05 30.05 34.05 20.05 43.45 27.75 49.25 34.75 45.75 25.45 39.7 14.4 48.1 23.1 55.05 31.85 50.5 20.9 45.75 8.35 53.5 20.05 61.5 30.05 63.8 15.05 69.35 0 68.3 11.65 69.4 23.1 73.85 11.7 75.95 0 77.15 11.7 75.95 23.15 80.45 11.75 82.55 0 83.75 11.8 82.35 24.75 87.05 11.8 89.15 0 90.35 11.85 89.1 23.15 93.65 11.9 95.75 0 96.9 12 95.7 23.15 100.2 12 102.35 0 103.5 12.05 102.7 21.1 106.8 12.1 110.3 0 110.1 12.1 108.85 23.15 113.35 12.2 118.85 0 116.05 13.75 114.65 26.45 126.9 17.45 141.45 10.75 132.45 18.25 125.1 27.1 136.3 22.2 146.1 15.4 138.65 24.55 129.7 31.8 141 26.9 150.75 20.05 143.25 29.25 133.15 37.45 145.6 31.6 155.45 24.75 147.9 34 139 41.1 150.2 36.3 160.1 29.4 152.4 38.7 143.65 45.75 154.75 41.05 164.75 34.05 157.05 43.45 150.05 49.25 159.35 45.75 170.4 39.7 161.7 48.1 152.95 55.05 163.9 50.5 176.45 45.75 164.75 53.5 154.75 61.5 140.2 73.15 129.35 85.4 146 97.85 158.35 114.65 M 61.5 30.05 Q 73.15 44.6 85.4 55.45 97.8 38.8 114.65 26.45 M 30.05 123.3 Q 44.6 111.65 55.45 99.45 38.8 87 26.45 70.15 M 123.3 154.8 Q 111.65 140.25 99.4 129.4 86.95 146.05 70.15 158.4');
  11.  
  12. c.stroke(path);

Use SVG style paths in canvas…

ES5 Canvas Thing

  1. var canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. ),
  4. c = canvas.getContext("2d"),
  5. size = canvas.width,
  6. quarterSize = size / 4,
  7. eightSize = size / 8,
  8. halfSize = size / 2,
  9. TWO_PI = Math.PI * 2,
  10. bombNum = 3,
  11. bombs = [],
  12. wanderers = {}, 
  13. wandererIndex = 0,
  14. particles = {},
  15. particleIndex = 0;
  16.  
  17. canvas.width = canvas.height = 300
  18.  
  19. c.fillStyle = "rgb(100,100,100)";
  20. c.fillRect(0,0,size,size);
  21.  
  22. function Particle(x, y){
  23.   this.x = x;
  24.   this.y = y;
  25.   var rad = 3 + Math.random() * 6;
  26.   var theta = Math.random() * TWO_PI;
  27.   this.vx = rad * Math.cos(theta);
  28.   this.vy = rad * Math.sin(theta);
  29.   this.alpha = 1;
  30.   particleIndex++;
  31.   this.index = particleIndex;
  32.   particles[this.index] = this;
  33. }
  34. Particle.prototype.draw = function(){
  35.   this.x += this.vx;
  36.   this.y += this.vy;
  37.   this.vx *= 0.9;
  38.   this.vy *= 0.9;
  39.   this.alpha -= 0.05;
  40.  
  41.   if (this.alpha <= 0){
  42.     this.alpha = 0;
  43.     delete particles[this.index];
  44.  
  45.   }
  46.  
  47.   c.fillStyle = "rgba(255,255,255,"+this.alpha+")";
  48.   c.beginPath();
  49.   c.arc(this.x, this.y, 1, 0, TWO_PI, false);
  50.   c.fill();
  51. };
  52.  
  53. function Bomb(){
  54.   this.x = quarterSize + Math.random() * halfSize;
  55.   this.y = quarterSize + Math.random() * halfSize;
  56.   this.radius = 15 + Math.random() * 20;
  57. }
  58. Bomb.prototype.draw = function(){
  59.   c.fillStyle = "#e64c25";
  60.   c.beginPath();
  61.   c.arc(this.x, this.y, this.radius, 0, TWO_PI, false);
  62.   c.fill();
  63. };
  64.  
  65. function Wanderer(x, y){
  66.   this.x = x;
  67.   this.y = y;
  68.   this.vx = Math.random() * 4 - 2;
  69.   this.vy = Math.random() * 4 - 2;
  70.   particleIndex++;
  71.   this.index = particleIndex;
  72.   particles[this.index] = this;
  73. }
  74. Wanderer.prototype.die = function(){
  75.   for (var j = 0; j < 4; j++){
  76.     new Particle(this.x, this.y);
  77.   }
  78.  
  79.   delete particles[this.index];
  80. };
  81. Wanderer.prototype.draw = function(){
  82.   this.x += this.vx;
  83.   this.y += this.vy;
  84.  
  85.   if (Math.random() < 0.1){
  86.     this.vx = Math.random() * 4 - 2;
  87.     this.vy = Math.random() * 4 - 2;
  88.   }
  89.  
  90.   if (this.x < 0) this.x = size;
  91.   if (this.x > size) this.x = 0;
  92.   if (this.y < 0) this.y = size;
  93.   if (this.y > size) this.y = 0;
  94.  
  95.   c.fillStyle = "white";
  96.   c.beginPath();
  97.   c.arc(this.x, this.y, 2, 0, TWO_PI, false);
  98.   c.closePath();
  99.   c.fill();
  100.  
  101.   for (var i = 0; i < bombNum; i++){
  102.     var bomb = bombs[i];
  103.     var dx = this.x - bomb.x;
  104.     var dy = this.y - bomb.y;
  105.     if (Math.sqrt(dx * dx + dy * dy) < bomb.radius){
  106.       this.die();
  107.     }
  108.   }
  109. };
  110.  
  111. for (var i = 0; i < bombNum; i++){
  112.   bombs[i] = new Bomb();
  113. }
  114.  
  115. new Wanderer(eightSize, eightSize); 
  116.  
  117. setInterval(function(){
  118.   c.fillStyle = "rgba(100,100,100, 0.2)";
  119.   c.fillRect(0,0,size,size);
  120.   c.strokeStyle = "white";
  121.   c.beginPath();
  122.   c.arc(eightSize, eightSize, 5, 0, TWO_PI, false);
  123.   c.stroke();
  124.  
  125.   if (Math.random() < 0.02){
  126.     new Wanderer(eightSize, eightSize); 
  127.   }
  128.  
  129.   for (var i = 0; i < bombNum; i++){
  130.     bombs[i].draw();
  131.   }
  132.  
  133.   for (var i in wanderers){
  134.     wanderers[i].draw(); 
  135.   }
  136.  
  137.   for (var i in particles){
  138.     particles[i].draw();
  139.   }
  140. }, 16);

An old es5 speedcoded thing…

Fibonacci Triangle Golfed

  1. // by Arnauld - https://codegolf.stackexchange.com/users/58563/arnauld
  2. f=(n,a=b=1,p)=>n?''.padEnd(p)+a+`+${b}=${b+=a}
  3. `+f(n-1,b-a,(a+"").length-~p):''
  4.  
  5. console.log(f(20))

Great golfed solution to this question at codegolf stackexchange by user Arnauld

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