Snippet Zone

Isometric Vases

```
 
```

const canvas = document.createElement`canvas`

```
const c = canvas.getContext`2d`
```
```
 
```
```
document.body.appendChild(canvas)
```
```
document.body.style.margin = 0
```
```
 
```
```
canvas.style.width = '100%'
```
```
canvas.style.height = '100%'
```
```
 
```
```
const COLS = 10
```
```
const ROWS = 10
```
```
let space;
```
```
let size;
```
```
let time = 0
```
```
const num = COLS * ROWS
```
```
const mon = []
```
```
for (let y = 0; y < COLS; y++) {
```
```
  for (let x = 0; x < ROWS; x++) {
```
```
    mon.push(monument())
```
```
  }
```
```
}
```
```
 
```
```
function reset(){
```
```
  time = 0
```
```
  c.fillStyle = '#ccc'
```

  c.fillRect(0, 0, canvas.width, canvas.height)

```
}
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth * 2
```
```
  canvas.height = innerHeight * 2
```
```
 
```
```
  reset()
```
```
}
```
```
resize()
```

window.addEventListener('resize', resize)

```
 
```
```
function monument(x, y) {
```
```
 
```
```
  const s = Math.random()
```
```
  let cl = 0;
```
```
  let damp = Math.random() / 10;
```
```
 
```
```
  let rad = 10 + Math.random() * 
```
```
  Math.random() * (innerWidth / 30)
```
```
 
```
```
  let skip = Math.random() < .5;
```
```
  let o = Math.random() * 7
```
```
  let shade = .01;
```
```
  let radamp = 200 + Math.random() * 90
```

  let life = 100 + Math.random() *  Math.random() *  Math.random() * 1200;

```
  return (x, y) => { 
```
```
      if (time === 0) { 
```
```
      c.save()
```

      c.strokeStyle = 'rgba(0, 0, 0, 0.2)'

      c.translate(x - space / 2, y - space / 2)

```
      c.strokeRect(0, 0, space, space)
```
```
      c.restore()
```
```
      }
```
```
    if (skip) {
```
```
 
```
```
 
```
```
    } else { 
```
```
 
```
```
      //rad += (0 - rad) / radamp
```
```
      let teta = time * s * damp
```
```
      let C = Math.sin(teta)
```

      let C2 = Math.sin(time * s * damp + o);

```
 
```
```
      cl = C2 * 200 + 55;
```
```
 
```
```
      shade -= .0001;
```
```
 
```

      let col = `rgba(${cl}, ${cl}, ${cl}, 1)`

```
      if (time > life) {
```
```
        col = `rgba(155, 155, 155, .4)`
```
```
        skip = true
```
```
      }
```
```
 
```
```
    c.save()
```
```
 
```
```
      c.translate(x - time * s, y)
```

      c.fillStyle = `rgba(0, 0, 0, ${shade})`

```
      c.beginPath()
```
```
      c.arc(0, 0, rad + rad * C, 0, 7)
```
```
      c.fill()
```
```
      c.restore();
```
```
 
```
```
      c.save()
```
```
 
```

      c.translate(x - time * s, y - time * s)

```
      c.fillStyle = col
```
```
      c.beginPath()
```
```
      c.arc(0, 0, rad + rad * C, 0, 7)
```
```
      c.fill()
```
```
      c.restore();
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function draw() {
```
```
  space = (innerWidth * 2) / COLS * .6;
```
```
 
```
```
  size = COLS * space
```
```
 
```
```
  c.save()
```
```
  c.scale(1, .6)
```

  c.translate(innerWidth, innerHeight * 2)

```
  c.rotate(45 * Math.PI / 180)
```
```
  c.translate(-size / 2, -size / 2)
```
```
 
```
```
  let inc = 0;
```
```
  for (let y = 0; y < COLS; y++) {
```
```
    for (let x = 0; x < ROWS; x++) {
```
```
      mon[inc++](y * space, x * space)
```
```
    }
```
```
  }
```
```
  c.restore()
```
```
  time++
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
draw();
```

Something I speed coded for genuary

February 26, 2022

// 3d // canvas // graphics // isometric

Non-perspective WebGL Texture

```
(() => {
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0
```
```
  ])
```
```
 
```

  const pointSize = Math.max(Math.min(10, ~~(innerWidth / 70)), 3);

```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.);

```
      gl_PointSize = ${pointSize}.;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    #ifdef GL_ES
```
```
    precision highp float;
```
```
    #endif
```
```
    void main(void) {
```

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

      gl_FragColor = vec4(uv.x, 0., cos(uv.y * 60.), .4);

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

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

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

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

```
    .getContext('webgl')
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const NUM = 3
```
```
    const s = .5;
```
```
    const verts = [
```
```
      -s, -s, 0,
```
```
       s, -s, 0,
```
```
      -s,  s, 0,
```
```
       s,  s, 0,
```
```
    ]
```
```
 
```
```
    //  1.0,  1.0,
```
```
    // -1.0,  1.0,
```
```
    //  1.0, -1.0,
```
```
    // -1.0, -1.0,
```
```
 
```
```
    // for (let i = 0; i < NUM; i++) {
```
```
    //   verts.push(
```
```
    //     Math.random() * 1 - 0.5,
```
```
    //     Math.random() * 1 - 0.5,
```
```
    //     Math.random() * 1 - 0.5
```
```
    //   )
```
```
    // }
```
```
 
```
```
    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
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    function loop() {
```
```
      rot(rx += .01, ry += .01, 0)
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```

      drawArrays(TRIANGLE_STRIP, 0, leng)

      window.requestAnimationFrame(loop)

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

Forked from a previous example – toying with the idea of doing some kind of complex low level webgl… not sure, might end up using THREE… Please excuse some of the dead code here…

February 23, 2022

// canvas // webgl

CoffeeScript Ikeda Map

canvas = document.querySelector "canvas"

```
c = canvas.getContext "2d"
```
```
locX = 120
```
```
locY = 400
```
```
xn1 = xn = yn1 = yn = tn = 0
```
```
u = .7
```
```
steps = 10
```
```
iterations = 200
```
```
scale = 180
```
```
 
```
```
c.fillStyle = "black"
```

c.fillRect 0, 0, canvas.width, canvas.height

```
c.fillStyle = "rgba(255,255,255,0.2)"
```
```
 
```
```
run = setInterval ->
```
```
  clearInterval run if u > 1
```
```
  i = 0
```
```
 
```
```
  while i < steps
```
```
    u += 0.00015
```
```
    j = 0
```
```
 
```
```
    while j < iterations
```
```
      xn = xn1
```
```
      yn = yn1
```

      tn = 0.4 - (6 / (1 + xn * xn + yn * yn))

      xn1 = 1 + u * (xn * Math.cos(tn) - yn * Math.sin tn)

      yn1 = u * (xn * Math.sin(tn) + yn * Math.cos tn)

      c.fillRect locX + xn1 * scale, locY + yn1 * scale, 1, 1

```
      j++
```
```
    i++
```
```
, 30
```

I do quite miss CoffeeScript sometimes… here is an old codepen of the Ikeda Map:

See the Pen Ikeda Map by Zevan Rosser (@ZevanRosser) on CodePen.

February 17, 2022

// animation // canvas // graphics

Little Galaxy ES5

var canvas = document.createElement('canvas'),

```
    c = canvas.getContext('2d'), 
```
```
    SIZE = 350;
```
```
 
```
```
canvas.width = SIZE;
```
```
canvas.height = SIZE;
```
```
 
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black';
```
```
c.fillRect(0, 0, SIZE, SIZE);
```
```
 
```
```
c.fillStyle = 'white';
```
```
 
```
```
var spa = function(ts) {
```
```
  var r = 0, t =  0;
```

  var jitterX, jitterY, jitterT, jitterR;

```
  for (var i = 0; i < 100; i += 0.5) {
```
```
    t = ts + i / 15;
```
```
    r = i;
```
```
    jitterR = 5 + i / 5;
```

    jitterT = Math.random() * 2 * Math.PI;

    jitterX = Math.random() * jitterR * Math.sin(jitterT);

    jitterY = Math.random() * jitterR * Math.cos(jitterT);

    c.fillStyle = `hsl(${t / Math.PI * 180}deg, 50%, 50%)`;

```
    c.fillRect(
```

      SIZE / 2 + r * Math.cos(t) + jitterX,

      SIZE / 2 + r * Math.sin(t) + jitterY,

```
      3, 3
```
```
    );
```
```
  }
```
```
}
```
```
 
```
```
spa(0);
```
```
spa(Math.PI);
```

I made this in response to a question from a friend of mine a few years back…

February 14, 2022

// canvas // graphics

Old Codepen 2013

```
$(function () {
```

  var canvas = $("<canvas>").appendTo("body"),

```
    win = $(window),
```
```
    cnvs = canvas[0],
```
```
    c = cnvs.getContext("2d"),
```
```
    el = $("<div>"),
```
```
    letters = [],
```
```
    NUM = 10,
```
```
    TWO_PI = Math.PI * 2;
```
```
 
```
```
  c.font = "16px sans-serif";
```
```
 
```
```
  win
```
```
    .resize(function () {
```
```
      cnvs.width = win.width();
```
```
      cnvs.height = win.height();
```
```
      c.fillStyle = "white";
```

      c.fillRect(0, 0, cnvs.width, cnvs.height);

```
    })
```
```
    .trigger("resize");
```
```
 
```
```
  function symbol() {
```

    var r = parseInt(Math.random() * 9999),

```
      s = "&#" + r + ";";
```
```
    el.html(s);
```
```
    return el.html();
```
```
  }
```
```
 
```
```
  function Letter() {}
```
```
 
```
```
  Letter.prototype.init = function () {
```

    this.x = Math.random() * win.width();

    this.y = Math.random() * win.height();

```
 
```
```
    this.sym = symbol();
```

    this.rot = Math.random() * 2 * Math.PI;

    this.rotVel = Math.random() * 0.02 - 0.01;

```
 
```
```
    this.size = 1 + Math.random() * 10;
```
```
    this.sizeVel = Math.random() * 0.2;
```

    this.col = ["black", "white", "#999"][parseInt(Math.random() * 3)];

```
 
```
```
    this.rad = Math.random();
```

    this.vx = this.rad * Math.cos(Math.random() * TWO_PI);

    this.vy = this.rad * Math.sin(Math.random() * TWO_PI);

```
 
```
```
    this.life = 0;
```

    this.maxLife = parseInt(Math.random() * 200);

```
 
```
```
    if (Math.random() < 0.1) {
```
```
      this.doGrad = true;
```

      this.channel = parseInt(Math.random() * 200);

```
    }
```
```
 
```
```
    this.shadow = false;
```
```
    if (Math.random() < 0.1) {
```
```
      this.shadow = true;
```
```
    }
```
```
  };
```
```
 
```
```
  Letter.prototype.run = function () {
```
```
    if (this.doGrad) {
```
```
      this.channel += 1;
```
```
 
```
```
      this.col =
```

        "rgb(" + this.channel + "," + this.channel + "," + this.channel + ")";

```
    }
```
```
 
```
```
    if (this.shadow == true) {
```
```
      c.shadowBlur = 100;
```

      c.shadowColor = "rgba(76,105,135,0.2)";

```
    }
```
```
 
```
```
    this.size += this.sizeVel;
```
```
    this.rot += this.rotVel;
```
```
    this.x += this.vx;
```
```
    this.y += this.vy;
```
```
 
```
```
    c.save();
```
```
 
```
```
    c.translate(this.x, this.y);
```
```
    c.scale(this.size, this.size);
```
```
    c.rotate(this.rot);
```
```
 
```
```
    c.fillStyle = this.col;
```

    c.fillText(this.sym, -this.size / 2, -this.size / 2);

```
 
```
```
    c.restore();
```
```
 
```
```
    this.life++;
```
```
 
```
```
    if (this.life >= this.maxLife) {
```
```
      this.init();
```
```
      //console.log("respurn");
```
```
    }
```
```
  };
```
```
 
```
```
  for (var i = 0; i < NUM; i++) {
```

    var letter = (letters[i] = new Letter());

```
    letter.init();
```
```
  }
```
```
 
```
```
  setInterval(function () {
```
```
    for (var i = 0; i < NUM; i++) {
```
```
      letters[i].run();
```
```
    }
```
```
  }, 30);
```
```
});
```

It’s fun to look through old code….

See the Pen Symbolz by Zevan Rosser (@ZevanRosser) on CodePen.

February 2, 2022

// canvas // javascript

Older Posts

Newer Posts

Isometric Vases

Non-perspective WebGL Texture

CoffeeScript Ikeda Map

Little Galaxy ES5

Old Codepen 2013

Recent

Archive