Snippet Zone

Quick Touch Events

```
// no scrolling on mobile
```

document.addEventListener("touchmove", e => e.preventDefault(), {

```
  passive: false
```
```
});
```
```
 
```
```
// has more than one touch point
```
```
const hasTouch =
```

  navigator.maxTouchPoints != null && navigator.maxTouchPoints > 0;

```
 
```
```
function touchify(e) {
```
```
  const touch = [];
```
```
  touch.x = touch.y = 0;
```
```
 
```

  if (e.touches != null && e.touches.length > 0) {

```
    touch.x = e.touches[0].clientX;
```
```
    touch.y = e.touches[0].clientY;
```

    for (let i = 0; i < e.touches.length; i++) {

```
      touch[i] = e.touches[i];
```
```
    }
```
```
  } else {
```
```
    touch.x = e.clientX;
```
```
    touch.y = e.clientY;
```

    touch[0] = { clientX: e.clientX, clientY: e.clientY };

```
  }
```
```
  return touch;
```
```
}
```
```
 
```
```
let clickOrTouchEnd,
```
```
  downOrTouchStart,
```
```
  enterOrTouchStart,
```
```
  moveOrTouchMove,
```
```
  upOrTouchEnd,
```
```
  leaveOrTouchEnd;
```
```
 
```
```
if (hasTouch) {
```
```
  clickOrTouchEnd = "touchend";
```
```
  downOrTouchStart = "touchstart";
```
```
  enterOrTouchStart = "touchstart";
```
```
  moveOrTouchMove = "touchmove";
```
```
  upOrTouchEnd = "touchend";
```
```
  leaveOrTouchEnd = "touchend";
```
```
} else {
```
```
  clickOrTouchEnd = "click";
```
```
  downOrTouchStart = "mousedown";
```
```
  enterOrTouchStart = "mouseenter";
```
```
  moveOrTouchMove = "mousemove";
```
```
  upOrTouchEnd = "mouseup";
```
```
  leaveOrTouchEnd = "mouseleave";
```
```
}
```
```
 
```
```
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;
```
```
}
```
```
 
```
```
let down = false;
```
```
let lastTouch;
```

document.addEventListener(downOrTouchStart, e => {

```
  const { x, y } = touchify(e);
```

  dot(x, y, 30, `rgba(255, 0, 0, 0.2)`);

```
  down = true;
```
```
});
```
```
 
```

document.addEventListener(moveOrTouchMove, e => {

```
  if (down) {
```
```
    const touches = touchify(e);
```
```
    // draw more than one touch
```

    for (let i = 0; i < touches.length; i++) {

```
      const touch = touches[i];
```

      dot(touch.clientX, touch.clientY, 10, `rgba(0, 0, 155, 0.2)`);

```
    }
```
```
 
```
```
    lastTouch = touches[0];
```
```
  }
```
```
});
```
```
 
```

document.addEventListener(upOrTouchEnd, e => {

```
  if (down) {
```

    dot(lastTouch.clientX, lastTouch.clientY, 20, `rgba(0, 155, 0, 0.2)`);

```
    down = false;
```
```
  }
```
```
});
```

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.

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

August 12, 2021

// graphics // javascript // mobile // touchEvents // tricks

Point DIV at Another DIV (Angle Between Two Points)

const dot = document.createElement('div')

```
Object.assign(dot.style, {
```
```
  position: 'absolute',
```
```
  left: '100px', 
```
```
  top: '100px',
```
```
  width: '10px', 
```
```
  height: '10px',
```
```
  transform: 'translate(-5px, -5px)',
```
```
  background: 'black'
```
```
});
```
```
document.body.appendChild(dot);
```
```
 
```

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

```
Object.assign(pointer.style, {
```
```
  position: 'absolute',
```
```
  left: '-10px', 
```
```
  top: '-5px',
```
```
  width: '20px', 
```
```
  height: '10px',
```
```
  background: 'red'
```
```
});
```
```
document.body.appendChild(pointer);
```
```
 
```

// desktop only (`touchmove` needed for mobile)

document.addEventListener('mousemove', (e) => {

  const dx = parseFloat(dot.style.left) - e.clientX;

  const dy = parseFloat(dot.style.top) - e.clientY;

  const angle = Math.atan2(dy, dx) / Math.PI * 180;

```
 
```
```
  pointer.style.transform = `
```

    translate(${e.clientX}px, ${e.clientY}px)

```
    rotate(${angle}deg)
```
```
  `;
```
```
});
```

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

August 11, 2021

// archival // javascript // math

No Scrolling on Mobile

```
document.addEventListener('touchmove', 
```

  e => e.preventDefault(), { passive: false });

  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.

August 10, 2021

// events // mobile // scrolling // touchEvents // tricks

Rectangle Path with SVG

```
const rectPath = rect =>
```
```
  `M ${rect.left} ${rect.top}
```
```
  L ${rect.right} ${rect.top}
```
```
    ${rect.right} ${rect.bottom}
```
```
    ${rect.left} ${rect.bottom}
```
```
    ${rect.left} ${rect.top} `;
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div'));
```
```
 
```
```
el.innerHTML = `
```

  <svg width="100%" height="100%" viewBox="0 0 550 496">

```
    <path d="
```

    ${rectPath({left: 20, top: 10, right: 100, bottom: 100})}

    ${rectPath({left: 50, top: 50, right: 200, bottom: 200})}

    ${rectPath({left: 150, top: 20, right: 250, bottom: 100})}

    ${rectPath({left: 150, top: 120, right: 250, bottom: 230})}

    " stroke="black" fill="red" fill-rule="evenodd" vector-effect="non-scaling-stroke"/>

```
 
```
```
    <path d="
```

    ${rectPath({left: 10, top: 220, right: 100, bottom: 300})}

    ${rectPath({left: 20, top: 250, right: 150, bottom: 350})}

    " stroke="white" fill="#64a7ff" fill-rule="nonzero" vector-effect="non-scaling-stroke"/>

```
 
```
```
    <path d="
```

    ${rectPath({left: 350, top: 10, right: 450, bottom: 150})}

```
    " fill="#2e9997" />
```
```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
  </style>
```
```
`;
```

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

August 9, 2021

// javascript // paths // svg

Wobbling Ball With Canvas

// same as yesterday but with canvas instead of svg

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

```
      c = canvas.getContext('2d');
```
```
document.body.appendChild(canvas);
```
```
document.body.style.margin = 0;
```
```
 
```
```
let w = window.innerWidth,
```
```
    h = window.innerHeight,
```
```
    x = w / 2,
```
```
    y = h / 2,
```
```
    vx = vy = dx = dy = 0,
```
```
    damp = 0.99, div = 8, ticks = 0, 
```
```
    wobbleChance = 0.03,
```
```
    startTick = 50;
```
```
 
```
```
function loop() {
```
```
 
```
```
  w = window.innerWidth;
```
```
  h = window.innerHeight;
```
```
  radius = w * 0.05;
```
```
  diam = radius * 2;
```
```
  diam2x = diam * 2;
```
```
 
```
```
  if (x > w){
```
```
    vx *= -1;
```
```
    dx *= -1;
```
```
    x = w;
```
```
  } else if (x < 0){
```
```
    vx *= -1;
```
```
    dx *= -1;
```
```
    x = 0;
```
```
  }
```
```
 
```
```
  if (y > h) {
```
```
    vy *= -1;
```
```
    dy *= -1;
```
```
    y = h;
```
```
  } else if (y < 0) {
```
```
    vy *= -1;
```
```
    dy *= -1;
```
```
    y = 0
```
```
  } 
```
```
 
```
```
  if (
```
```
    Math.random() < wobbleChance || 
```
```
    ticks === startTick) {
```
```
      dx += Math.random() * 10 - 5;
```
```
      dy += Math.random() * 10 - 5;
```
```
  }
```
```
 
```
```
  dx *= damp;
```
```
  dy *= damp;
```
```
 
```
```
  vx += (dx - vx) / div;
```
```
  vy += (dy - vy) / div;
```
```
 
```
```
  x += vx;
```
```
  y += vy;
```
```
 
```
```
  // in most cases these days you
```

  // just clear the whole canvas, but for

  // this example we clear a rectangle around

```
  // the circle 
```
```
  c.clearRect(
```
```
    x - diam, 
```
```
    y - diam, 
```
```
    diam2x, 
```
```
    diam2x
```
```
  );
```
```
 
```
```
  // draw the path
```
```
  c.fillStyle = 'red'
```
```
  c.beginPath();
```

  c.arc(x, y, radius, 0, Math.PI * 2, false);

```
  c.fill();
```
```
 
```
```
  ticks++;
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
resize();
```

window.addEventListener('resize', resize);

A wobbling ball with canvas.

August 8, 2021

// animation // canvas // graphics // javascript // random

Older Posts

Newer Posts

Quick Touch Events

Point DIV at Another DIV (Angle Between Two Points)

No Scrolling on Mobile

Rectangle Path with SVG

Wobbling Ball With Canvas

Recent

Archive