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

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…)

// archival // javascript // math

Wobbling Ball with SVG

  1. const el = document.body.appendChild(
  2.   document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg width="100%" height="100%">
  6.     <circle 
  7.      id="circ" 
  8.      cx="0" cy="0" r="50"
  9.      fill="red" style="will-change: transform;"/>
  10.   </svg>
  11.   <style>
  12.     svg, div, body, html {
  13.       overflow: visible; 
  14.       height: 100%; 
  15.       width: 100%;
  16.       margin: 0; padding: 0;
  17.     }
  18.   </style>
  19.   `;
  20.  
  21. let w = window.innerWidth,
  22.     h = window.innerHeight,
  23.     x = w / 2,
  24.     y = h / 2,
  25.     vx = vy = dx = dy = 0,
  26.     damp = 0.99, div = 8, ticks = 0, 
  27.     wobbleChance = 0.03,
  28.     startTick = 50;
  29.  
  30. function loop() {
  31.   w = window.innerWidth;
  32.   h = window.innerHeight;
  33.  
  34.   if (x > w){
  35.     vx *= -1;
  36.     dx *= -1;
  37.     x = w;
  38.   } else if (x < 0){
  39.     vx *= -1;
  40.     dx *= -1;
  41.     x = 0;
  42.   }
  43.  
  44.   if (y > h) {
  45.     vy *= -1;
  46.     dy *= -1;
  47.     y = h;
  48.   } else if (y < 0) {
  49.     vy *= -1;
  50.     dy *= -1;
  51.     y = 0
  52.   } 
  53.  
  54.   if (
  55.     Math.random() < wobbleChance || 
  56.     ticks === startTick) {
  57.       dx += Math.random() * 10 - 5;
  58.       dy += Math.random() * 10 - 5;
  59.   }
  60.  
  61.   dx *= damp;
  62.   dy *= damp;
  63.  
  64.   vx += (dx - vx) / div;
  65.   vy += (dy - vy) / div;
  66.  
  67.   x += vx;
  68.   y += vy;
  69.  
  70.   circ.setAttribute('transform', `translate(${x} ${y})`);
  71.  
  72.   ticks++;
  73.   window.requestAnimationFrame(loop);
  74. }
  75. loop();
  76.  
  77. function resize() {
  78.   const radius = Math.min(w, h) * .05;
  79.  
  80.   // `window.circ` is the global id (⌐■_■)
  81.   circ.r.baseVal.value = radius;
  82. }
  83. resize();
  84. window.addEventListener('resize', resize);

A wobbling ball with svg.

// animation // graphics // javascript // math // random // svg

Draw a Spiral with Resize

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5.  
  6. function resize() {
  7.   canvas.width = window.innerWidth;
  8.   canvas.height = window.innerHeight;
  9.   draw();
  10. }
  11.  
  12. function draw() {
  13.   c.clearRect(0, 0, canvas.width, canvas.height);
  14.   c.fillStyle = 'blue';
  15.  
  16.   const iter = 300,
  17.         halfWidth = window.innerWidth / 2,
  18.         halfHeight = window.innerHeight / 2;
  19.   let rad = 0, theta = 0, x, y;
  20.   for (let i = 0; i < iter; i++) {
  21.     x = halfWidth + rad * Math.cos(theta);
  22.     y = halfHeight + rad * Math.sin(theta);
  23.     c.fillRect(x, y, 5, 5);
  24.     rad += Math.min(window.innerWidth, window.innerHeight) * 0.0015;
  25.     theta += .1;
  26.   }
  27. }
  28.  
  29. resize();
  30. window.addEventListener('resize', resize);

Expanding on yesterdays post, this draws a resizable sprial on a canvas.

// canvas // graphics // javascript // math

Semi-golfed Calculator

  1. // "Being clever is not clever"
  2. // -- Bjarne Stroustrup
  3. d = document
  4. b = d.body
  5. a = (e = 'div') => b.appendChild(d.createElement(e))
  6. t = a`input`
  7. s = ''
  8. a()
  9. O = v => t.value = v
  10. '0123456789+-*()/C='.split``.map(v => {
  11.   v == '+' && a()
  12.   _ = a`button`
  13.   _.innerHTML = v
  14.   o = { 
  15.     C(){s = O('')},
  16.     ['='](){O(eval(s))}
  17.   }
  18.   _.onclick = () => o[v] ? o[v]() : (s = s + v, O(s))
  19. })
// dom // golfed // javascript // math // tricks
Newer Posts

Recent

Archive

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