Snippet Zone

WebGL Shader Example

```
(() => {
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    void main(void) {
```
```
      gl_Position = vec4(vec, 1.);
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    #ifdef GL_ES
```
```
    precision highp float;
```
```
    #endif
```
```
    uniform float time;
```
```
    void main(void) {
```

      vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);

      float w = 1. + cos(uv.y * 60.) * cos(uv.x * 50. + time * 30.);

      gl_FragColor = vec4(uv.x, w * .5, w, 1.);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#000'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl')
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: 0,
```
```
    top: 0
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const s = 1;
```
```
    const verts = [
```
```
      -s, -s, 0,
```
```
       s, -s, 0,
```
```
      -s,  s, 0,
```
```
       s,  s, 0,
```
```
    ]
```
```
 
```
```
    const leng = verts.length / 3
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl 
```
```
      canvas.width = innerWidth
```
```
      canvas.height = innerHeight
```

      viewport(0, 0, innerWidth, innerHeight)

```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    const startTime = Date.now();
```
```
 
```
```
    function loop() {
```

      const time = (Date.now() - startTime) / 1000

      const uniformTime = gl.getUniformLocation(sp, 'time');

```
      gl.uniform1f(uniformTime, time);
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```

      drawArrays(TRIANGLE_STRIP, 0, leng)

```
      requestAnimationFrame(loop)
```
```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

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

March 13, 2022

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

Building Spikes Codegolf

```
f = 
```
```
 
```
```
n=>`   ^ 
```
```
  /|\\
```
```
 /.|.\\
```
```
/..|..\\
```

___`.replace(/.[_|^]./g,'$&'.repeat(n))+'____'

```
 
```
```
// test it out
```
```
document.body.innerHTML += 
```
```
`<pre>${f(1)}
```
```
${f(3)}
```
```
${f(4)}`
```

Great codegolf stackexchange answer from user tsh

March 11, 2022

// codegolf // golfed // javascript // regex // strings

Canvas Path2D

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth
```
```
canvas.height = innerHeight
```
```
 
```
```
c.translate(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');

```
 
```
```
c.stroke(path);
```

Use SVG style paths in canvas…

March 9, 2022

// canvas // javascript // svg

ES5 Canvas Thing

```
var canvas = document.body.appendChild(
```
```
  document.createElement('canvas')
```
```
),
```
```
c = canvas.getContext("2d"),
```
```
size = canvas.width,
```
```
quarterSize = size / 4,
```
```
eightSize = size / 8,
```
```
halfSize = size / 2,
```
```
TWO_PI = Math.PI * 2,
```
```
bombNum = 3,
```
```
bombs = [],
```
```
wanderers = {}, 
```
```
wandererIndex = 0,
```
```
particles = {},
```
```
particleIndex = 0;
```
```
 
```
```
canvas.width = canvas.height = 300
```
```
 
```
```
c.fillStyle = "rgb(100,100,100)";
```
```
c.fillRect(0,0,size,size);
```
```
 
```
```
function Particle(x, y){
```
```
  this.x = x;
```
```
  this.y = y;
```
```
  var rad = 3 + Math.random() * 6;
```
```
  var theta = Math.random() * TWO_PI;
```
```
  this.vx = rad * Math.cos(theta);
```
```
  this.vy = rad * Math.sin(theta);
```
```
  this.alpha = 1;
```
```
  particleIndex++;
```
```
  this.index = particleIndex;
```
```
  particles[this.index] = this;
```
```
}
```
```
Particle.prototype.draw = function(){
```
```
  this.x += this.vx;
```
```
  this.y += this.vy;
```
```
  this.vx *= 0.9;
```
```
  this.vy *= 0.9;
```
```
  this.alpha -= 0.05;
```
```
 
```
```
  if (this.alpha <= 0){
```
```
    this.alpha = 0;
```
```
    delete particles[this.index];
```
```
 
```
```
  }
```
```
 
```

  c.fillStyle = "rgba(255,255,255,"+this.alpha+")";

```
  c.beginPath();
```

  c.arc(this.x, this.y, 1, 0, TWO_PI, false);

```
  c.fill();
```
```
};
```
```
 
```
```
function Bomb(){
```

  this.x = quarterSize + Math.random() * halfSize;

  this.y = quarterSize + Math.random() * halfSize;

  this.radius = 15 + Math.random() * 20;

```
}
```
```
Bomb.prototype.draw = function(){
```
```
  c.fillStyle = "#e64c25";
```
```
  c.beginPath();
```

  c.arc(this.x, this.y, this.radius, 0, TWO_PI, false);

```
  c.fill();
```
```
};
```
```
 
```
```
function Wanderer(x, y){
```
```
  this.x = x;
```
```
  this.y = y;
```
```
  this.vx = Math.random() * 4 - 2;
```
```
  this.vy = Math.random() * 4 - 2;
```
```
  particleIndex++;
```
```
  this.index = particleIndex;
```
```
  particles[this.index] = this;
```
```
}
```
```
Wanderer.prototype.die = function(){
```
```
  for (var j = 0; j < 4; j++){
```
```
    new Particle(this.x, this.y);
```
```
  }
```
```
 
```
```
  delete particles[this.index];
```
```
};
```
```
Wanderer.prototype.draw = function(){
```
```
  this.x += this.vx;
```
```
  this.y += this.vy;
```
```
 
```
```
  if (Math.random() < 0.1){
```
```
    this.vx = Math.random() * 4 - 2;
```
```
    this.vy = Math.random() * 4 - 2;
```
```
  }
```
```
 
```
```
  if (this.x < 0) this.x = size;
```
```
  if (this.x > size) this.x = 0;
```
```
  if (this.y < 0) this.y = size;
```
```
  if (this.y > size) this.y = 0;
```
```
 
```
```
  c.fillStyle = "white";
```
```
  c.beginPath();
```

  c.arc(this.x, this.y, 2, 0, TWO_PI, false);

```
  c.closePath();
```
```
  c.fill();
```
```
 
```
```
  for (var i = 0; i < bombNum; i++){
```
```
    var bomb = bombs[i];
```
```
    var dx = this.x - bomb.x;
```
```
    var dy = this.y - bomb.y;
```

    if (Math.sqrt(dx * dx + dy * dy) < bomb.radius){

```
      this.die();
```
```
    }
```
```
  }
```
```
};
```
```
 
```
```
for (var i = 0; i < bombNum; i++){
```
```
  bombs[i] = new Bomb();
```
```
}
```
```
 
```
```
new Wanderer(eightSize, eightSize); 
```
```
 
```
```
setInterval(function(){
```

  c.fillStyle = "rgba(100,100,100, 0.2)";

```
  c.fillRect(0,0,size,size);
```
```
  c.strokeStyle = "white";
```
```
  c.beginPath();
```

  c.arc(eightSize, eightSize, 5, 0, TWO_PI, false);

```
  c.stroke();
```
```
 
```
```
  if (Math.random() < 0.02){
```

    new Wanderer(eightSize, eightSize);

```
  }
```
```
 
```
```
  for (var i = 0; i < bombNum; i++){
```
```
    bombs[i].draw();
```
```
  }
```
```
 
```
```
  for (var i in wanderers){
```
```
    wanderers[i].draw(); 
```
```
  }
```
```
 
```
```
  for (var i in particles){
```
```
    particles[i].draw();
```
```
  }
```
```
}, 16);
```

An old es5 speedcoded thing…

March 6, 2022

// canvas // graphics // javascript

Fibonacci Triangle Golfed

// by Arnauld - https://codegolf.stackexchange.com/users/58563/arnauld

f=(n,a=b=1,p)=>n?''.padEnd(p)+a+`+${b}=${b+=a}

```
`+f(n-1,b-a,(a+"").length-~p):''
```
```
 
```
```
console.log(f(20))
```

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

March 5, 2022

// codegolf // javascript // math

Older Posts

Newer Posts

WebGL Shader Example

Building Spikes Codegolf

Canvas Path2D

ES5 Canvas Thing

Fibonacci Triangle Golfed

Recent

Archive