)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Quick Touch Events

  1. // no scrolling on mobile
  2. document.addEventListener("touchmove", e => e.preventDefault(), {
  3.   passive: false
  4. });
  5.  
  6. // has more than one touch point
  7. const hasTouch =
  8.   navigator.maxTouchPoints != null && navigator.maxTouchPoints > 0;
  9.  
  10. function touchify(e) {
  11.   const touch = [];
  12.   touch.x = touch.y = 0;
  13.  
  14.   if (e.touches != null && e.touches.length > 0) {
  15.     touch.x = e.touches[0].clientX;
  16.     touch.y = e.touches[0].clientY;
  17.     for (let i = 0; i < e.touches.length; i++) {
  18.       touch[i] = e.touches[i];
  19.     }
  20.   } else {
  21.     touch.x = e.clientX;
  22.     touch.y = e.clientY;
  23.     touch[0] = { clientX: e.clientX, clientY: e.clientY };
  24.   }
  25.   return touch;
  26. }
  27.  
  28. let clickOrTouchEnd,
  29.   downOrTouchStart,
  30.   enterOrTouchStart,
  31.   moveOrTouchMove,
  32.   upOrTouchEnd,
  33.   leaveOrTouchEnd;
  34.  
  35. if (hasTouch) {
  36.   clickOrTouchEnd = "touchend";
  37.   downOrTouchStart = "touchstart";
  38.   enterOrTouchStart = "touchstart";
  39.   moveOrTouchMove = "touchmove";
  40.   upOrTouchEnd = "touchend";
  41.   leaveOrTouchEnd = "touchend";
  42. } else {
  43.   clickOrTouchEnd = "click";
  44.   downOrTouchStart = "mousedown";
  45.   enterOrTouchStart = "mouseenter";
  46.   moveOrTouchMove = "mousemove";
  47.   upOrTouchEnd = "mouseup";
  48.   leaveOrTouchEnd = "mouseleave";
  49. }
  50.  
  51. function dot(x, y, radius, color) {
  52.   const el = document.createElement("div");
  53.   const size = `${radius * 2}px`;
  54.   Object.assign(el.style, {
  55.     position: "absolute",
  56.     left: `${x}px`,
  57.     top: `${y}px`,
  58.     width: size,
  59.     height: size,
  60.     transform: `translate(${-radius}px, ${-radius}px)`,
  61.     borderRadius: "50%",
  62.     background: color
  63.   });
  64.   el.classList.add("dot");
  65.   document.body.appendChild(el);
  66.   return el;
  67. }
  68.  
  69. let down = false;
  70. let lastTouch;
  71. document.addEventListener(downOrTouchStart, e => {
  72.   const { x, y } = touchify(e);
  73.   dot(x, y, 30, `rgba(255, 0, 0, 0.2)`);
  74.   down = true;
  75. });
  76.  
  77. document.addEventListener(moveOrTouchMove, e => {
  78.   if (down) {
  79.     const touches = touchify(e);
  80.     // draw more than one touch
  81.     for (let i = 0; i < touches.length; i++) {
  82.       const touch = touches[i];
  83.       dot(touch.clientX, touch.clientY, 10, `rgba(0, 0, 155, 0.2)`);
  84.     }
  85.  
  86.     lastTouch = touches[0];
  87.   }
  88. });
  89.  
  90. document.addEventListener(upOrTouchEnd, e => {
  91.   if (down) {
  92.     dot(lastTouch.clientX, lastTouch.clientY, 20, `rgba(0, 155, 0, 0.2)`);
  93.     down = false;
  94.   }
  95. });

Draw with your mouse by clicking, holding down and dragging…

I often use some variation of this depending on the project… This snippet normalizes touch events in a simple way, prevents scrolling and gives an example of how to handle multi-touch.

You’ll probably want a to use a meta tag like this – for the full effect.

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Point DIV at Another DIV (Angle Between Two Points)

  1. const dot = document.createElement('div')
  2. Object.assign(dot.style, {
  3.   position: 'absolute',
  4.   left: '100px', 
  5.   top: '100px',
  6.   width: '10px', 
  7.   height: '10px',
  8.   transform: 'translate(-5px, -5px)',
  9.   background: 'black'
  10. });
  11. document.body.appendChild(dot);
  12.  
  13. const pointer = document.createElement('div');
  14. Object.assign(pointer.style, {
  15.   position: 'absolute',
  16.   left: '-10px', 
  17.   top: '-5px',
  18.   width: '20px', 
  19.   height: '10px',
  20.   background: 'red'
  21. });
  22. document.body.appendChild(pointer);
  23.  
  24. // desktop only (`touchmove` needed for mobile)
  25. document.addEventListener('mousemove', (e) => {
  26.   const dx = parseFloat(dot.style.left) - e.clientX;
  27.   const dy = parseFloat(dot.style.top) - e.clientY;
  28.   const angle = Math.atan2(dy, dx) / Math.PI * 180;
  29.  
  30.   pointer.style.transform = `
  31.     translate(${e.clientX}px, ${e.clientY}px)
  32.     rotate(${angle}deg)
  33.   `;
  34. });

Moving your mouse around the page, you’ll notice the red div always points at the black div. (more…)

No Scrolling on Mobile

  1. document.addEventListener('touchmove', 
  2.   e => e.preventDefault(), { passive: false });
  3.   document.body.innerHTML = 'Hi, no page scrolling here...';

It’s common to want to prevent page scrolling on mobile. Here is an easy way to do it.

Rectangle Path with SVG

  1. const rectPath = rect =>
  2.   `M ${rect.left} ${rect.top}
  3.   L ${rect.right} ${rect.top}
  4.     ${rect.right} ${rect.bottom}
  5.     ${rect.left} ${rect.bottom}
  6.     ${rect.left} ${rect.top} `;
  7.  
  8. const el = document.body.appendChild(
  9.   document.createElement('div'));
  10.  
  11. el.innerHTML = `
  12.   <svg width="100%" height="100%" viewBox="0 0 550 496">
  13.     <path d="
  14.     ${rectPath({left: 20, top: 10, right: 100, bottom: 100})}
  15.     ${rectPath({left: 50, top: 50, right: 200, bottom: 200})}
  16.     ${rectPath({left: 150, top: 20, right: 250, bottom: 100})}
  17.     ${rectPath({left: 150, top: 120, right: 250, bottom: 230})}
  18.     " stroke="black" fill="red" fill-rule="evenodd" vector-effect="non-scaling-stroke"/>
  19.  
  20.     <path d="
  21.     ${rectPath({left: 10, top: 220, right: 100, bottom: 300})}
  22.     ${rectPath({left: 20, top: 250, right: 150, bottom: 350})}
  23.     " stroke="white" fill="#64a7ff" fill-rule="nonzero" vector-effect="non-scaling-stroke"/>
  24.  
  25.     <path d="
  26.     ${rectPath({left: 350, top: 10, right: 450, bottom: 150})}
  27.     " fill="#2e9997" />
  28.   </svg>
  29.   <style>
  30.     svg, div, body, html {
  31.       overflow: visible; 
  32.       height: 100%; 
  33.       width: 100%;
  34.       margin: 0; padding: 0;
  35.     }
  36.   </style>
  37. `;

In this snippet rectPath creates a rectangle with “move to” and “line to” commands to be used in conjunction with SVG paths.

// javascript // paths // svg

Wobbling Ball With Canvas

  1. // same as yesterday but with canvas instead of svg
  2. const canvas = document.createElement('canvas'),
  3.       c = canvas.getContext('2d');
  4. document.body.appendChild(canvas);
  5. document.body.style.margin = 0;
  6.  
  7. let w = window.innerWidth,
  8.     h = window.innerHeight,
  9.     x = w / 2,
  10.     y = h / 2,
  11.     vx = vy = dx = dy = 0,
  12.     damp = 0.99, div = 8, ticks = 0, 
  13.     wobbleChance = 0.03,
  14.     startTick = 50;
  15.  
  16. function loop() {
  17.  
  18.   w = window.innerWidth;
  19.   h = window.innerHeight;
  20.   radius = w * 0.05;
  21.   diam = radius * 2;
  22.   diam2x = diam * 2;
  23.  
  24.   if (x > w){
  25.     vx *= -1;
  26.     dx *= -1;
  27.     x = w;
  28.   } else if (x < 0){
  29.     vx *= -1;
  30.     dx *= -1;
  31.     x = 0;
  32.   }
  33.  
  34.   if (y > h) {
  35.     vy *= -1;
  36.     dy *= -1;
  37.     y = h;
  38.   } else if (y < 0) {
  39.     vy *= -1;
  40.     dy *= -1;
  41.     y = 0
  42.   } 
  43.  
  44.   if (
  45.     Math.random() < wobbleChance || 
  46.     ticks === startTick) {
  47.       dx += Math.random() * 10 - 5;
  48.       dy += Math.random() * 10 - 5;
  49.   }
  50.  
  51.   dx *= damp;
  52.   dy *= damp;
  53.  
  54.   vx += (dx - vx) / div;
  55.   vy += (dy - vy) / div;
  56.  
  57.   x += vx;
  58.   y += vy;
  59.  
  60.   // in most cases these days you
  61.   // just clear the whole canvas, but for
  62.   // this example we clear a rectangle around 
  63.   // the circle 
  64.   c.clearRect(
  65.     x - diam, 
  66.     y - diam, 
  67.     diam2x, 
  68.     diam2x
  69.   );
  70.  
  71.   // draw the path
  72.   c.fillStyle = 'red'
  73.   c.beginPath();
  74.   c.arc(x, y, radius, 0, Math.PI * 2, false);
  75.   c.fill();
  76.  
  77.   ticks++;
  78.   window.requestAnimationFrame(loop);
  79. }
  80. loop();
  81.  
  82. function resize() {
  83.   canvas.width = window.innerWidth;
  84.   canvas.height = window.innerHeight;
  85. }
  86. resize();
  87. window.addEventListener('resize', resize);

A wobbling ball with canvas.

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