)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Raphaël Easing Equations How To

  1. const { pow, PI } = Math;
  2.  
  3. // mostly unedited code from Raphaël
  4. var ef = {
  5.   linear: function(n) {
  6.     return n;
  7.   },
  8.   '<': function(n) {
  9.     return pow(n, 1.7);
  10.   },
  11.   '>': function(n) {
  12.     return pow(n, 0.48);
  13.   },
  14.   '<>': function(n) {
  15.     var q = 0.48 - n / 1.04,
  16.       Q = Math.sqrt(0.1734 + q * q),
  17.       x = Q - q,
  18.       X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
  19.       y = -Q - q,
  20.       Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
  21.       t = X + Y + 0.5;
  22.     return (1 - t) * 3 * t * t + t * t * t;
  23.   },
  24.   backIn: function(n) {
  25.     var s = 1.70158;
  26.     return n * n * ((s + 1) * n - s);
  27.   },
  28.   backOut: function(n) {
  29.     n = n - 1;
  30.     var s = 1.70158;
  31.     return n * n * ((s + 1) * n + s) + 1;
  32.   },
  33.   elastic: function(n) {
  34.     if (n == !!n) {
  35.       return n;
  36.     }
  37.     return pow(2, -10 * n) * Math.sin(((n - 0.075) * (2 * PI)) / 0.3) + 1;
  38.   },
  39.   bounce: function(n) {
  40.     var s = 7.5625,
  41.       p = 2.75,
  42.       l;
  43.     if (n < 1 / p) {
  44.       l = s * n * n;
  45.     } else {
  46.       if (n < 2 / p) {
  47.         n -= 1.5 / p;
  48.         l = s * n * n + 0.75;
  49.       } else {
  50.         if (n < 2.5 / p) {
  51.           n -= 2.25 / p;
  52.           l = s * n * n + 0.9375;
  53.         } else {
  54.           n -= 2.625 / p;
  55.           l = s * n * n + 0.984375;
  56.         }
  57.       }
  58.     }
  59.     return l;
  60.   }
  61. };
  62. ef.easeIn = ef['ease-in'] = ef['<'];
  63. ef.easeOut = ef['ease-out'] = ef['>'];
  64. ef.easeInOut = ef['ease-in-out'] = ef['<>'];
  65. ef['back-in'] = ef.backIn;
  66. ef['back-out'] = ef.backOut;
  67.  
  68. // create a dot
  69. function dot(x, y, radius, color) {
  70.   const el = document.createElement('div');
  71.   const size = `${radius * 2}px`;
  72.   Object.assign(el.style, {
  73.     position: 'absolute',
  74.     left: `${x}px`,
  75.     top: `${y}px`,
  76.     width: size,
  77.     height: size,
  78.     transform: `translate(${-radius}px, ${-radius}px)`,
  79.     borderRadius: '50%',
  80.     background: color
  81.   });
  82.   el.classList.add('dot');
  83.   document.body.appendChild(el);
  84.   return el;
  85. }
  86.  
  87. const elA = dot(0, 40, 30, 'red');
  88. const elB = dot(0, 110, 30, 'blue');
  89. const elC = dot(0, 160, 20, 'green');
  90.  
  91. // how to use the easing equations:
  92. let t = 0;
  93.  
  94. let start = Date.now();
  95. let time = 0;
  96. let duration = 2; // 2 seconds
  97. function loop() {
  98.   // frame based
  99.   elA.style.left = `${ef.elastic(t) * 50}%`;
  100.   t += 0.005;
  101.  
  102.   // time based
  103.   if (time <= duration) {
  104.     time = (Date.now() - start) / 1000;
  105.     const param = time / duration;
  106.     elB.style.left = `${ef.elastic(param) * 50}%`;
  107.  
  108.     // green bounce example
  109.     elC.style.left = `${ef.bounce(param) * 50}%`;
  110.   }
  111.  
  112.   requestAnimationFrame(loop);
  113. }
  114. 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.

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

Rotate Point Around Point (Golfed)

  1.   rot = (
  2.     cx, cy, X, Y, ang,
  3.     cos = Math.cos(-ang),
  4.     sin = Math.sin(-ang),
  5.     x = cos * (X - cx) + sin * (Y - cy) + cx,
  6.     y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })

Rotate one point around another… I like to use something like this when speed-coding and golfing…

// math // matrix // oldschool // tricks

Speed Coded Cosine Dither

  1. d = document
  2. b = d.body
  3. wh = 300
  4. hs = wh / 2
  5. S = 1.5
  6. with(
  7.   b.appendChild(Object.assign(
  8.     d.createElement`canvas`, {
  9.       width: wh, height: wh
  10.     })).getContext`2d`) {
  11.  
  12.   canvas.style.transformOrigin = '0 0'
  13.   canvas.style.transform = `scale(${S})`
  14.   canvas.style.imageRendering = 'pixelated'
  15.  
  16.   fillStyle = 'gray'
  17.  
  18.   fillRect(0, 0, wh, wh)
  19.   shadowBlur = 80
  20.   shadowColor = 'black';
  21.   shadowOffsetY = 20
  22.   for (let i = 0; i < 70; i++) {
  23.     save()
  24.     translate(hs, hs)
  25.     rotate(i / 33)
  26.     scale(1 - i / 100, 1)
  27.     translate(-hs, -hs)
  28.     fillStyle = `hsl(${i << 2}, 50%, 50%)`
  29.     beginPath()
  30.     arc(hs, hs, hs * .8, 0, 7)
  31.     fill()
  32.     restore()
  33.     shadowColor = 'transparent'
  34.     shadowBlur = 0
  35.   }
  36.  
  37.   C = Object.assign(d.createElement`canvas`, {
  38.     width: wh, height: wh
  39.   }).getContext('2d')
  40.   C.drawImage(canvas, 0, 0);
  41.  
  42.   im = getImageData(0, 0, wh, wh);
  43.  
  44.   p = im.data
  45.   size = wh * wh * 4
  46.  
  47.   modd = Math.random() * 5550
  48.   for (let i = 0; i < size; i += 4) {
  49.     if (Math.random() < 0.0001) modd = Math.random() * 5550
  50.     M = Math.cos(i % modd) * 255
  51.     p[i] = M < p[i] ? 255 : 0;
  52.     p[i + 1] = M < p[i + 1] ? 255 : 0;
  53.     p[i + 2] = M < p[i + 2] ? 255 : 0;
  54.   }
  55.  
  56.   putImageData(im, 0, 0);
  57.   globalCompositeOperation = 'hard-light'
  58.   drawImage(C.canvas, 0, 0);
  59. }

Some speed-coded canvas stuff with a dither inspired by #genuary2022

// canvas // graphics // javascript // random // speedcoding // tricks

Plot Implicit Equation

  1. let canvas = document.body.appendChild(
  2.   Object.assign(document.createElement('canvas'), {
  3.     width: 200,
  4.     height: 200
  5.   })
  6. );
  7.  
  8. let c = canvas.getContext("2d"),
  9.   pixels = c.createImageData(canvas.width, canvas.height),
  10.   size = canvas.width * canvas.height,
  11.   width = canvas.width,
  12.   index = 0,
  13.   x, y,
  14.   a = 1,
  15.   col,
  16.   scale = 0.01;
  17.  
  18. for (var i = 0; i < size; i++) {
  19.   x = i % width;
  20.   y = parseInt(i / width);
  21.   x -= 110;
  22.   y -= 100;
  23.   x *= scale;
  24.   y *= scale;
  25.   // http://www-history.mcs.st-and.ac.uk/Curves/Trifolium.html
  26.   col = (x * x + y * y) * (y * y + x * (x + a));
  27.  
  28.   if (col >= 4 * a * x * y * y) {
  29.     col = 155;
  30.   }
  31.  
  32.   pixels.data[index++] = col;
  33.   pixels.data[index++] = col;
  34.   pixels.data[index++] = col;
  35.   pixels.data[index++] = 255;
  36. }
  37.  
  38. c.putImageData(pixels, 0, 0);

Plot an implicit equation on a canvas.

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

Select All Text contentEditable

  1. <div style="border:solid 1px #D31444"
  2.      contenteditable="true"
  3.      onclick="document.execCommand('selectAll', false, null)">some text...</div>

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

Quick test version…

  1. document.body.innerHTML += `
  2.   <div id="el" style="border:solid 1px #D31444"
  3.     contenteditable="true">some text...</div>`
  4.  
  5. el.addEventListener('click', () => {
  6.   document.execCommand('selectAll', false, null)
  7. })
// html // javascript // tricks // ui
Older Posts
Newer Posts

Recent

Archive

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