Snippet Zone

Plot Implicit Equation

```
let canvas = document.body.appendChild(
```

  Object.assign(document.createElement('canvas'), {

```
    width: 200,
```
```
    height: 200
```
```
  })
```
```
);
```
```
 
```
```
let c = canvas.getContext("2d"),
```

  pixels = c.createImageData(canvas.width, canvas.height),

```
  size = canvas.width * canvas.height,
```
```
  width = canvas.width,
```
```
  index = 0,
```
```
  x, y,
```
```
  a = 1,
```
```
  col,
```
```
  scale = 0.01;
```
```
 
```
```
for (var i = 0; i < size; i++) {
```
```
  x = i % width;
```
```
  y = parseInt(i / width);
```
```
  x -= 110;
```
```
  y -= 100;
```
```
  x *= scale;
```
```
  y *= scale;
```

  // http://www-history.mcs.st-and.ac.uk/Curves/Trifolium.html

  col = (x * x + y * y) * (y * y + x * (x + a));

```
 
```
```
  if (col >= 4 * a * x * y * y) {
```
```
    col = 155;
```
```
  }
```
```
 
```
```
  pixels.data[index++] = col;
```
```
  pixels.data[index++] = col;
```
```
  pixels.data[index++] = col;
```
```
  pixels.data[index++] = 255;
```
```
}
```
```
 
```
```
c.putImageData(pixels, 0, 0);
```

Plot an implicit equation on a canvas.

December 28, 2021

// canvas // javascript // math // tricks

Shorthand Primitives Golfing

```
!0 // true
```
```
 
```
```
!1 // false
```
```
 
```
```
1/0 // Infinity
```
```
 
```
```
0[0] // undefined (any digit works)
```

This is from user Isiah Meadows on the codegolf stackexchange…

December 27, 2021

// codegolf // javascript // speedcoding

WebGL Tangled Supershape Points

```
(() => {
```
```
  const TWO_PI = Math.PI * 2;
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0
```
```
  ])
```
```
 
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.0);

```
      gl_PointSize = 2.0;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    void main(void) {
```

      gl_FragColor = vec4(1., 1., 1., .25);

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

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

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

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

```
    .getContext('webgl', {
```
```
      preserveDrawingBuffer: true,
```

      powerPreference: 'high-performance'

```
    })
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
 
```
```
  with(gl) {
```
```
    const NUM = 120
```
```
    const radius = 0.7
```
```
    let verts = []
```
```
 
```
```
    // Superformula (equations from):
```

    // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333

    // http://en.wikipedia.org/wiki/Superformula

    function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0) {

      const { random, pow, abs, cos, sin } = Math

      // with(Math) { // destrucuring vs the dreaded `with`

```
        let r = 0
```
```
        let p = 0
```
```
        let xp = 0
```
```
        let yp = 0
```
```
        let zp = 0
```
```
 
```
```
        let rotX = random() * TWO_PI
```
```
        let rotY = random() * TWO_PI
```
```
        let rotZ = random() * TWO_PI
```
```
 
```
```
        let cosX = cos(rotX)
```
```
        let cosY = cos(rotY)
```
```
        let sinX = sin(rotX)
```
```
        let sinY = sin(rotY)
```
```
 
```
```
        while (p <= TWO_PI) {
```
```
          let ang = (m * p) / 4
```
```
 
```

          r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1)

```
          xp = r * cos(p)
```
```
          yp = r * sin(p)
```
```
 
```
```
          p += 0.05
```
```
 
```
```
          zp = zp * cosX - xp * sinX
```
```
          xp = zp * sinX + xp * cosX
```
```
          yp = yp * cosY - zp * sinY
```
```
          zp = yp * sinY + zp * cosY
```
```
 
```
```
          verts[inc] = xp * scale + x
```

          verts[inc + 1] = yp * scale + y

          verts[inc + 2] = zp * scale + z

```
          inc += 3;
```
```
        }
```
```
      // }
```
```
    }
```
```
 
```
```
    let inc = 0; 
```
```
    for (let i = 0; i < NUM; i++) {
```

      superShape(1, 1, 1 + ~~(Math.random() * 20),

```
        ~~(Math.random() * 30),
```
```
        ~~(Math.random() * 30),
```

        ~~(Math.random() * 30), Math.random() * .2,

```
        Math.random() - .5,
```
```
        Math.random() - .5,
```
```
        Math.random() - .5 )
```
```
    }
```
```
 
```
```
 
```
```
    console.log(verts.length)
```
```
    const overts = verts.concat()
```
```
    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)
```
```
 
```

    const matLoc = getUniformLocation(sp, 'mat')

```
 
```
```
    function rot(x, y, z) {
```

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

```
 
```
```
      const sinA = Math.sin(x)
```
```
      const cosA = Math.cos(x)
```
```
      const sinB = Math.sin(y)
```
```
      const cosB = Math.cos(y)
```
```
      const sinY = Math.sin(z)
```
```
      const cosY = Math.cos(z)
```
```
 
```
```
      m[0] = cosA * cosB
```

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

```
      m[3] = 0
```
```
 
```
```
      m[4] = sinA * cosB
```

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

```
      m[7] = 0
```
```
 
```
```
      m[8] = -sinB
```
```
      m[9] = cosB * sinY
```
```
      m[10] = cosB * cosY
```
```
      m[11] = m[12] = m[13] = 0
```
```
      m[15] = 1
```
```
 
```

      uniformMatrix4fv(matLoc, false, m)

```
    }
```
```
 
```
```
    onresize = () => {
```
```
      const {
```
```
        canvas
```
```
      } = gl
```

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

```
      viewport(0, 0, size, size)
```
```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    let rx = 0, ry = 0, rz = 0
```
```
 
```
```
    function loop() {
```
```
      rx += 0.01
```
```
      ry += 0.01
```
```
      rz += 0.01
```
```
      rot(rx, ry, rz)
```
```
 
```
```
      disable(DEPTH_TEST)
```
```
      enable(BLEND)
```

      blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```
```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

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

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

December 26, 2021

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

Superformula Texture

```
const TWO_PI = Math.PI * 2;
```
```
const SIDE = 8;
```
```
const N = 30;
```
```
const M = 20;
```
```
 
```
```
document.body.style.margin = 0;
```
```
 
```
```
const c = document.body
```

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

```
  .getContext('2d');
```
```
 
```
```
onresize = () => {
```
```
  c.canvas.width = innerWidth;
```
```
  c.canvas.height = innerHeight;
```
```
 
```
```
  draw();
```
```
};
```
```
onresize();
```
```
 
```
```
function draw() {
```
```
  c.fillStyle = '#000';
```

  c.fillRect(0, 0, innerWidth, innerHeight);

```
 
```
```
  const sx = innerWidth / SIDE;
```
```
  const sy = innerHeight / SIDE;
```
```
 
```
```
  for (let i = 0; i <= SIDE; i++) {
```
```
    for (let j = 0; j <= SIDE; j++) {
```
```
      const n1 = ~~(Math.random() * N);
```
```
      const n2 = ~~(Math.random() * N);
```
```
      const n3 = ~~(Math.random() * N);
```

      const m = ~~(Math.random() * Math.random() * M);

```
      let a = 1;
```
```
      let b = 1;
```
```
      if (Math.random() < 0.5) {
```
```
        a = ~~(Math.random() * 8) - 4;
```
```
      }
```
```
      if (Math.random() < 0.5) {
```
```
        b = ~~(Math.random() * 8) - 4;
```
```
      }
```

      superShape(a, b, m, n1, n2, n3, { x: i * sx, y: j * sy }, 40);

```
    }
```
```
  }
```
```
}
```
```
 
```
```
// Superformula (equations from):
```

// https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333

// http://en.wikipedia.org/wiki/Superformula

function superShape(a, b, m, n1, n2, n3, pnt, scale) {

```
  let r = 0;
```
```
  let p = 0;
```
```
  let xp = 0;
```
```
  let yp = 0;
```
```
  while (p <= TWO_PI) {
```
```
    var ang = (m * p) / 4;
```
```
    with (Math) {
```

      r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1);

```
      xp = r * cos(p);
```
```
      yp = r * sin(p);
```
```
    }
```
```
    p += 0.01;
```
```
    c.fillStyle = '#fff';
```

    c.fillRect(pnt.x + xp * scale, pnt.y + yp * scale, 1, 1);

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

The Superformula created by Johan Gielis read more about it here… This looks better when expanded to full size on the Snippet Zone editor…

December 25, 2021

// canvas // graphics // javascript // math

Select All Text contentEditable

```
<div style="border:solid 1px #D31444"
```
```
     contenteditable="true"
```

     onclick="document.execCommand('selectAll', false, null)">some text...</div>

When clicking on an editable node, select all existing text…

Quick test version…

```
document.body.innerHTML += `
```

  <div id="el" style="border:solid 1px #D31444"

    contenteditable="true">some text...</div>`

```
 
```
```
el.addEventListener('click', () => {
```

  document.execCommand('selectAll', false, null)

```
})
```

December 24, 2021

// html // javascript // tricks // ui

Older Posts

Newer Posts

Plot Implicit Equation

Shorthand Primitives Golfing

WebGL Tangled Supershape Points

Superformula Texture

Select All Text contentEditable

Recent

Archive