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

Alphabet Array Golfed

  1. l=[]
  2. for(i=26;i--;)l[i]=(10+i).toString(36)
  3. console.log(l)

A nasty golfed way to fill an array with letters a-z.

I usually do (as seen in another post):

  1. let letters = 'abcdefghijklmopqrstuvwxyz'.split``
// codegolf // javascript // speedcoding // strings

Drag Svg Circles

  1. document.addEventListener('touchmove', (e) => e.preventDefault(), {
  2.   passive: false,
  3. });
  4.  
  5. // this is just lazy - obviously goes in your stylesheet.... :P
  6. document.body.innerHTML += `
  7. <style>
  8.   body, html {
  9.     padding: 0;
  10.     height: 100%;
  11.     margin: 0;
  12.   }
  13. </style>
  14. `;
  15.  
  16. const temp = document.createElement('div');
  17. temp.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 500 500"></svg>`;
  18.  
  19. const svg = document.body.appendChild(temp.querySelector('svg'));
  20.  
  21. const CIRCLE_NUM = 4;
  22.  
  23. // make some randomly positioned circles
  24. for (let i = 0; i < CIRCLE_NUM; i++) {
  25.   const x = Math.random() * 150 + 150;
  26.   const y = Math.random() * 150 + 150;
  27.   svg.innerHTML += `<circle 
  28.     cx="${x}" cy="${y}" r="60" 
  29.     stroke="#000" fill="rgba(81, 121, 200, 0.3)" 
  30.     style="cursor:pointer" />`;
  31. }
  32.  
  33. function touch(e) {
  34.   const pt = svg.createSVGPoint();
  35.   pt.x = e.clientX;
  36.   pt.y = e.clientY;
  37.   return pt.matrixTransform(svg.getScreenCTM().inverse());
  38. }
  39.  
  40. let down, ox, oy, curr;
  41. document.addEventListener('pointerdown', (e) => {
  42.   down = true;
  43.   if (e.target.tagName === 'circle') {
  44.     curr = e.target;
  45.     const { x, y } = touch(e);
  46.     ox = curr.cx.baseVal.value - x;
  47.     oy = curr.cy.baseVal.value - y;
  48.   }
  49. });
  50.  
  51. document.addEventListener('pointermove', (e) => {
  52.   if (down && curr) {
  53.     const { x, y } = touch(e);
  54.     curr.cx.baseVal.value = x + ox;
  55.     curr.cy.baseVal.value = y + oy;
  56.   }
  57. });
  58.  
  59. document.addEventListener('pointerup', (e) => {
  60.   down = false;
  61.   curr = null;
  62. });

Drag some svg circles on mobile and desktop…

// javascript // svg // ui

Speed-coded Eye

  1. d = document
  2. b = d.body
  3. b.style.margin = 0
  4. with(Math) {
  5.   S = min(innerHeight * 2, innerWidth * 2)
  6.   hs = S / 2
  7.  
  8.   with(
  9.     b.appendChild(Object.assign(
  10.       d.createElement`canvas`, {
  11.         width: S,
  12.         height: S
  13.       })).getContext`2d`) {
  14.  
  15.     // array of xy coords, closed boolean
  16.     function bezierSkin(bez, closed = true) {
  17.       const avg = calcAvgs(bez);
  18.       const leng = bez.length;
  19.       let i, n;
  20.  
  21.       if (closed) {
  22.         moveTo(avg[0], avg[1]);
  23.         for (i = 2; i < leng; i += 2) {
  24.           n = i + 1;
  25.           quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  26.         }
  27.         quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);
  28.       } else {
  29.         moveTo(bez[0], bez[1]);
  30.         lineTo(avg[0], avg[1]);
  31.         for (i = 2; i < leng - 2; i += 2) {
  32.           n = i + 1;
  33.           quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  34.         }
  35.         lineTo(bez[leng - 2], bez[leng - 1]);
  36.       }
  37.     }
  38.  
  39.     // create anchor points by averaging the control points
  40.     function calcAvgs(p) {
  41.       const avg = [];
  42.       const leng = p.length;
  43.       let prev;
  44.       for (var i = 2; i < leng; i++) {
  45.         prev = i - 2;
  46.         avg.push((p[prev] + p[i]) / 2);
  47.       }
  48.       // close
  49.       avg.push((p[0] + p[leng - 2]) / 2);
  50.       avg.push((p[1] + p[leng - 1]) / 2);
  51.       return avg;
  52.     }
  53.  
  54.  
  55.     canvas.style.transformOrigin = '0 0'
  56.     canvas.style.transform = 'scale(.4)'
  57.  
  58.     rinit = _ => {
  59.       t = 0
  60.       tinc = .1
  61.       rad = hs * .8
  62.       pupil = random() * .25
  63.       radA = pupil + random() * .25
  64.  
  65.     }
  66.     dx = dy = hs
  67.     cx = cy = hs
  68.  
  69.     rinit()
  70.  
  71.     fillStyle = 'black'
  72.     fillRect(0, 0, S, S);
  73.     fillStyle = 'white'
  74.     beginPath()
  75.     moveTo(hs, hs)
  76.     arc(hs, hs, rad, 0, 7)
  77.     fill()
  78.  
  79.     outer = _ => {
  80.       dx = cx + rad * cos(t)
  81.       dy = cy + rad * sin(t)
  82.  
  83.       if (t > 7 && random() < .3) {
  84.         fnIdx++
  85.       }
  86.     }
  87.  
  88.     shutter = () => hs * radA + random() * hs * (.6 - pupil)
  89.  
  90.     innerA = _ => {
  91.       tinc = .05
  92.       rad = shutter()
  93.       dx = cx + rad * cos(t)
  94.       dy = cy + rad * sin(t)
  95.  
  96.       if (t > 21 && random() < .3) {
  97.         fnIdx++
  98.       }
  99.     }
  100.  
  101.     oa = 7 * 3
  102.  
  103.     innerB = _ => {
  104.       tinc = .05
  105.       T = t * random();
  106.       dx = cx + hs * radA * cos(T)
  107.       dy = cy + hs * radA * sin(T)
  108.       if (t > 28 + oa && random() < .3) {
  109.         rad = hs * .8
  110.         fnIdx++
  111.       }
  112.     }
  113.  
  114.     outerA = _ => {
  115.       R = (rad - hs * .1) + random() * hs * .1;
  116.       dx = cx + R * cos(t)
  117.       dy = cy + R * sin(t)
  118.       if (t > 35 + oa && random() < .3) {
  119.         fnIdx++
  120.       }
  121.     }
  122.  
  123.     outerB = _ => {
  124.       tinc = .01;
  125.       R = rad
  126.       if (random() < .5) R = shutter()
  127.       dx = cx + R * cos(t)
  128.       dy = cy + R * sin(t)
  129.  
  130.       if (t > 42 + oa && random() < .3) {
  131.         fnIdx++
  132.         ct = t
  133.       }
  134.     }
  135.  
  136.  
  137.     t2 = 0
  138.     outerC = _ => {
  139.       tinc = .1;
  140.       t2 += .01;
  141.       R = hs * .3
  142.       RR = (R + t2 + random() * 10);
  143.       dx = cx + R * .84 + RR * cos(t)
  144.       dy = cy - R * .84 + RR * sin(t)
  145.  
  146.       if (t > 70 + oa && random() < .3) {
  147.         fnIdx++
  148.       }
  149.     }
  150.  
  151.     outerD = _ => {
  152.       tinc = .1;
  153.       t2 += .01;
  154.       R = hs * .1
  155.       RR = (R + t2 + random() * 10);
  156.       dx = cx + hs * .3 + RR * cos(t)
  157.       dy = cy + R * .84 + RR * sin(t)
  158.  
  159.       if (t > 91 + oa && random() < .3) {
  160.         fnIdx++
  161.       }
  162.     }
  163.  
  164.     outerE = _ => {
  165.       tinc = .1;
  166.  
  167.       rad -= random() * .1;
  168.       dx = cx + rad * cos(t)
  169.       dy = cy + rad * sin(t)
  170.  
  171.       if (t > 112 + oa && random() < .3) {
  172.         fnIdx++
  173.       }
  174.     }
  175.     count = 0
  176.     last = _ => {
  177.       done = true;
  178.  
  179.       fillStyle = 'black'
  180.       fillRect(0, 0, S, S);
  181.       fillStyle = 'white'
  182.       beginPath()
  183.       moveTo(hs, hs)
  184.       arc(hs, hs, hs * .8, 0, 7)
  185.       fill()
  186.  
  187.       beginPath();
  188.       moveTo(0, 0);
  189.       bezierSkin(pnts, false)
  190.       stroke()
  191.  
  192.  
  193.       return
  194.       count++
  195.       if (count < 1) {
  196.         rinit()
  197.         setOff()
  198.         t = 0
  199.         fnIdx = 0
  200.       }
  201.     }
  202.  
  203.     fns = [outer, innerA, innerB, outerA, outerB, outerC, outerD, outerE, last]
  204.     fnIdx = 0
  205.  
  206.     outer()
  207.     drawX = dx
  208.     drawY = dy
  209.     pDrawX = 0
  210.     pDrawY = 0
  211.  
  212.     strokeStyle = 'rgba(0, 0, 0, 0.8)'
  213.     lineWidth = 1;
  214.     tt = 0
  215.  
  216.     ox = 0;
  217.     oy = 0;
  218.     setOff = _ => {
  219.       return
  220.       ox = S * 1.2 * random() - S / 2
  221.       oy = S * 1.2 * random() - S / 2
  222.       sl = .1 + random() * .9;
  223.     }
  224.  
  225.     sl = 1
  226.     pnts = []
  227.     done = false
  228.     loop = _ => {
  229.  
  230.       if (done) {
  231.         return;
  232.       }
  233.       shadowColor = 'rgba(155, 255, 255, .5)';
  234.       shadowBlur = 15;
  235.  
  236.       save()
  237.       scale(1, 1)
  238.       lineWidth = 2;
  239.       for (i = 0; i < 20; i++) {
  240.         t += tinc / 2
  241.         fns[fnIdx]()
  242.  
  243.         drawX += ((dx + ox) * sl - drawX) / 2;
  244.         drawY += ((dy + oy) * sl - drawY) / 2;
  245.  
  246.         if (drawX != 0 && pDrawX) {
  247.           beginPath()
  248.           moveTo(pDrawX, pDrawY);
  249.           lineTo(drawX, drawY);
  250.           pnts.push(drawX, drawY);
  251.           stroke()
  252.         }
  253.  
  254.         pDrawX = drawX
  255.         pDrawY = drawY
  256.       }
  257.  
  258.       restore()
  259.       requestAnimationFrame(loop)
  260.     }
  261.     loop()
  262.   }
  263. }

Another thing for #genuary2022… a single curve…

// animation // canvas // javascript

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

Raphaël Easing Equations

  1. var ef = R.easing_formulas = {
  2.     linear: function (n) {
  3.         return n;
  4.     },
  5.     "<": function (n) {
  6.         return pow(n, 1.7);
  7.     },
  8.     ">": function (n) {
  9.         return pow(n, .48);
  10.     },
  11.     "<>": function (n) {
  12.         var q = .48 - n / 1.04,
  13.             Q = math.sqrt(.1734 + q * q),
  14.             x = Q - q,
  15.             X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
  16.             y = -Q - q,
  17.             Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
  18.             t = X + Y + .5;
  19.         return (1 - t) * 3 * t * t + t * t * t;
  20.     },
  21.     backIn: function (n) {
  22.         var s = 1.70158;
  23.         return n * n * ((s + 1) * n - s);
  24.     },
  25.     backOut: function (n) {
  26.         n = n - 1;
  27.         var s = 1.70158;
  28.         return n * n * ((s + 1) * n + s) + 1;
  29.     },
  30.     elastic: function (n) {
  31.         if (n == !!n) {
  32.             return n;
  33.         }
  34.         return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;
  35.     },
  36.     bounce: function (n) {
  37.         var s = 7.5625,
  38.             p = 2.75,
  39.             l;
  40.         if (n < (1 / p)) {
  41.             l = s * n * n;
  42.         } else {
  43.             if (n < (2 / p)) {
  44.                 n -= (1.5 / p);
  45.                 l = s * n * n + .75;
  46.             } else {
  47.                 if (n < (2.5 / p)) {
  48.                     n -= (2.25 / p);
  49.                     l = s * n * n + .9375;
  50.                 } else {
  51.                     n -= (2.625 / p);
  52.                     l = s * n * n + .984375;
  53.                 }
  54.             }
  55.         }
  56.         return l;
  57.     }
  58. };
  59. ef.easeIn = ef["ease-in"] = ef["<"];
  60. ef.easeOut = ef["ease-out"] = ef[">"];
  61. ef.easeInOut = ef["ease-in-out"] = ef["<>"];
  62. ef["back-in"] = ef.backIn;
  63. ef["back-out"] = ef.backOut;

Another fun chunk of code directly from the Raphaël source. Makes me think of the Penner easing equations.

// animation // javascript // math
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone /// {s/z}