Snippet Zone

toString Radix

```
for (let i = 2; i < 36; i++) {
```

  console.log((234).toString(i), ` = 234 in base ${i}`)

```
}
```

Use the radix argument of toString

February 1, 2022

// javascript // strings // tricks

Big Radio Button

```
document.body.innerHTML = `
```
```
  <p>Click/tap the radio button:</p>
```

  <input type="radio" style="transform:translate(20px, 30px) scale(4);background:red">

```
`;
```

I feel like at some point this didn’t work… nice to know it does now.

It will look different from browser to browser – as radio buttons do.

January 28, 2022

// tricks // ui

Many WebGL Constants

```
console.log(
```

  Object.getOwnPropertyNames(WebGLRenderingContext)

```
)
```

January 20, 2022

// tricks // webgl

1×1 Transparent Image DataUri Gif

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Have used this one in the past – super useful – guessing I got it from here but not totally sure…

If I ever get around to making the updated version of QuickShader available – it’s used in there…

EDIT:

```
// ¯\_(:P)_/¯
```

Object.assign(document.createElement`canvas`,{width:1,height:1}).toDataURL()

```
 
```
```
//// ... 
```

document.body.innerHTML=`<canvas id=x>`;x.width=x.height=1;x.toDataURL()

January 19, 2022

// graphics // humor // tricks

Raphaël Easing Equations How To

```
const { pow, PI } = Math;
```
```
 
```
```
// mostly unedited code from Raphaël
```
```
var ef = {
```
```
  linear: function(n) {
```
```
    return n;
```
```
  },
```
```
  '<': function(n) {
```
```
    return pow(n, 1.7);
```
```
  },
```
```
  '>': function(n) {
```
```
    return pow(n, 0.48);
```
```
  },
```
```
  '<>': function(n) {
```
```
    var q = 0.48 - n / 1.04,
```
```
      Q = Math.sqrt(0.1734 + q * q),
```
```
      x = Q - q,
```

      X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),

```
      y = -Q - q,
```

      Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),

```
      t = X + Y + 0.5;
```

    return (1 - t) * 3 * t * t + t * t * t;

```
  },
```
```
  backIn: function(n) {
```
```
    var s = 1.70158;
```
```
    return n * n * ((s + 1) * n - s);
```
```
  },
```
```
  backOut: function(n) {
```
```
    n = n - 1;
```
```
    var s = 1.70158;
```

    return n * n * ((s + 1) * n + s) + 1;

```
  },
```
```
  elastic: function(n) {
```
```
    if (n == !!n) {
```
```
      return n;
```
```
    }
```

    return pow(2, -10 * n) * Math.sin(((n - 0.075) * (2 * PI)) / 0.3) + 1;

```
  },
```
```
  bounce: function(n) {
```
```
    var s = 7.5625,
```
```
      p = 2.75,
```
```
      l;
```
```
    if (n < 1 / p) {
```
```
      l = s * n * n;
```
```
    } else {
```
```
      if (n < 2 / p) {
```
```
        n -= 1.5 / p;
```
```
        l = s * n * n + 0.75;
```
```
      } else {
```
```
        if (n < 2.5 / p) {
```
```
          n -= 2.25 / p;
```
```
          l = s * n * n + 0.9375;
```
```
        } else {
```
```
          n -= 2.625 / p;
```
```
          l = s * n * n + 0.984375;
```
```
        }
```
```
      }
```
```
    }
```
```
    return l;
```
```
  }
```
```
};
```
```
ef.easeIn = ef['ease-in'] = ef['<'];
```
```
ef.easeOut = ef['ease-out'] = ef['>'];
```

ef.easeInOut = ef['ease-in-out'] = ef['<>'];

```
ef['back-in'] = ef.backIn;
```
```
ef['back-out'] = ef.backOut;
```
```
 
```
```
// create a dot
```
```
function dot(x, y, radius, color) {
```

  const el = document.createElement('div');

```
  const size = `${radius * 2}px`;
```
```
  Object.assign(el.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}px`,
```
```
    top: `${y}px`,
```
```
    width: size,
```
```
    height: size,
```

    transform: `translate(${-radius}px, ${-radius}px)`,

```
    borderRadius: '50%',
```
```
    background: color
```
```
  });
```
```
  el.classList.add('dot');
```
```
  document.body.appendChild(el);
```
```
  return el;
```
```
}
```
```
 
```
```
const elA = dot(0, 40, 30, 'red');
```
```
const elB = dot(0, 110, 30, 'blue');
```
```
const elC = dot(0, 160, 20, 'green');
```
```
 
```
```
// how to use the easing equations:
```
```
let t = 0;
```
```
 
```
```
let start = Date.now();
```
```
let time = 0;
```
```
let duration = 2; // 2 seconds
```
```
function loop() {
```
```
  // frame based
```

  elA.style.left = `${ef.elastic(t) * 50}%`;

```
  t += 0.005;
```
```
 
```
```
  // time based
```
```
  if (time <= duration) {
```
```
    time = (Date.now() - start) / 1000;
```
```
    const param = time / duration;
```

    elB.style.left = `${ef.elastic(param) * 50}%`;

```
 
```
```
    // green bounce example
```

    elC.style.left = `${ef.bounce(param) * 50}%`;

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

I realized it might not be obvious how to use Raphaël’s easing equations. So I speed coded this example.

If you’d like to learn more about this kind of thing gsap is a great place to start… it is amazing… I highly recommend browsing the source.

January 18, 2022

// animation // javascript // oldschool // speed-coded // tricks

Older Posts

Newer Posts

toString Radix

Big Radio Button

Many WebGL Constants

1×1 Transparent Image DataUri Gif

Raphaël Easing Equations How To

Recent

Archive