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

Animate to Target

  1. function box(x, y, col = 'red', cursor){
  2.   const box = document.body.appendChild(
  3.     document.createElement`div`
  4.   )
  5.   box.classList.add(col + '-box')
  6.   Object.assign(box.style, {
  7.     position: 'absolute', 
  8.     left: `${x}%`,
  9.     top: `${y}%`,
  10.     width: '30px',
  11.     height: '30px',
  12.     background: col,
  13.     cursor: cursor || 'pointer',
  14.     color: 'white'
  15.   })
  16.   return box
  17. }
  18.  
  19. const NUM = 10;
  20. for (let i = 0; i < NUM; i++) 
  21.   box(
  22.     Math.random() * 100, 
  23.     Math.random() * 100)
  24.  
  25.  
  26. let destX = destY = x = y = 0;
  27. const blue = box(destX, destY, 'blue', 'default')
  28. const info = box(0, 30, 'gray')
  29. info.innerHTML = 'click the red boxes'
  30. Object.assign(info.style, {
  31.   width: '100%', 
  32.   padding: '.5em',
  33.   fontFamily: 'sans-serif'
  34. })
  35.  
  36. document.addEventListener('click', e => {
  37.   const curr = e.target
  38.   if (curr.classList.contains('red-box')) {
  39.     destX = curr.offsetLeft
  40.     destY = curr.offsetTop
  41.     curr.style.background = 'black'
  42.     setTimeout(() => curr.style.background = 'red', 700)
  43.     if (info.parentNode != null) { 
  44.       info.parentNode.removeChild(info);
  45.     }
  46.   }
  47. })
  48.  
  49. function loop() {
  50.   x += (destX - x) / 12
  51.   y += (destY - y) / 12
  52.   blue.style.transform = `translate3d(${x}px, ${y}px, 0)`
  53.   requestAnimationFrame(loop)
  54. }
  55. loop()

Click a red box, watch the blue box animate…

// animation // dom // html // javascript

Oscillating Canvas Wave

  1. const c = document.body
  2.   .appendChild(document.createElement('canvas'))
  3.   .getContext('2d');
  4.  
  5. Object.assign(document.body.style, {
  6.   margin: 0,
  7.   height: '100%'
  8. });
  9.  
  10. Object.assign(c.canvas.style, {
  11.   position: 'absolute',
  12.   left: 0,
  13.   top: 0,
  14.   width: '100%',
  15.   height: '100%'
  16. });
  17.  
  18. let t = 0;
  19.  
  20. function resize() {
  21.   c.canvas.width = innerWidth * 2;
  22.   c.canvas.height = innerHeight * 2;
  23.   draw();
  24. }
  25. window.addEventListener('resize', resize);
  26. resize();
  27.  
  28. function draw() {
  29.   const {
  30.     canvas: { width, height }
  31.   } = c;
  32.  
  33.   c.fillStyle = 'rgba(155, 155, 155, .4)';
  34.   c.fillRect(0, 0, width, height);
  35.   c.fillStyle = '#000';
  36.  
  37.   let x = innerWidth;
  38.   let y = 0;
  39.  
  40.   t += 0.05;
  41.   for (let i = 0; i < innerHeight; i++) {
  42.     x += 2 * Math.cos(t + i * 0.1 * Math.cos(i / 200));
  43.     y += 2;
  44.     c.fillRect(x, y, 100, 1);
  45.   }
  46. }
  47.  
  48. function loop() {
  49.   draw();
  50.   window.requestAnimationFrame(loop);
  51. }
  52. loop();

Speed coded oscillating wave on canvas… Looks better in fullscreen.

// animation // canvas // javascript // speed-coded

Gravity Dots 2

  1. d = document
  2. b = d.body
  3. b.style.margin = 0
  4. b.style.background = 'black'
  5. r = (v = 1) => Math.random() * v
  6.  
  7. with(
  8.   b.appendChild(
  9.     d.createElement`canvas`
  10.   ).getContext`2d`) {
  11.  
  12.   onresize = () => {
  13.     canvas.width = innerWidth
  14.     canvas.height = innerHeight
  15.   }
  16.   onresize()
  17.  
  18.   fillStyle = 'red'
  19.  
  20.   dot = (
  21.     x = r(innerWidth),
  22.     y = 0,
  23.     mass = 20, sr = r(2) + 2, 
  24.     R = sr,
  25.     dx, dy,
  26.     col = '#005eb0',
  27.     dist, vx = .2, vy = 0) => { 
  28.  
  29.     return () => { 
  30.       fillStyle = col
  31.       R = sr
  32.       if (r() < .001) {
  33.         vx = r() * 4 - 2
  34.         R = sr * 2
  35.         fillStyle = 'red'
  36.         col = `hsl(${r(360)}deg, 50%, 50%)`
  37.       }
  38.  
  39.       dx = innerWidth / 2 - x
  40.       dy = innerHeight / 2 - y
  41.       dist = Math.sqrt(dx * dx + dy * dy)
  42.       dist *= dist
  43.       vx += dx / dist * mass
  44.       vy += dy / dist * mass
  45.  
  46.       x += vx
  47.       y += vy
  48.  
  49.       beginPath()
  50.       arc(x, y, R, 0, 6.29)
  51.       fill()
  52.     }
  53.   }
  54.  
  55.   const dots = []
  56.   for (let i = 0; i < 100; i++) dots.push(dot())
  57.   loop = () => {
  58.     fillStyle = 'rgba(0, 0, 0, 0.05)'
  59.     fillRect(0, 0, canvas.width, canvas.height)
  60.     dots.map(d => d())
  61.   }
  62.   setInterval(loop, 16)
  63. }

A variation on this recent post.

// animation // canvas // javascript // math // speed-coded

Gravity Dots

  1. d = document
  2. b = d.body
  3. b.style.margin = 0
  4. b.style.background = 'black'
  5. r = (v = 1) => Math.random() * v
  6.  
  7. with(
  8.   b.appendChild(
  9.     d.createElement`canvas`
  10.   ).getContext`2d`) {
  11.  
  12.   onresize = () => {
  13.     canvas.width = innerWidth
  14.     canvas.height = innerHeight
  15.   }
  16.   onresize()
  17.  
  18.   fillStyle = 'red'
  19.  
  20.   dot = (
  21.     x = r(innerWidth),
  22.     y = r(innerHeight),
  23.     mass = 10, sr = r(8) + 4, 
  24.     R = sr,
  25.     dx, dy,
  26.     dist, vx = .2, vy = 0) => { 
  27.  
  28.     return () => { 
  29.       fillStyle = '#005eb0'
  30.       R = sr
  31.       if (r() < .005) {
  32.         vx = r() * 4 - 2
  33.         R = sr * 2
  34.         fillStyle = 'white'
  35.       }
  36.  
  37.       dx = innerWidth / 2 - x
  38.       dy = innerHeight / 2 - y
  39.       dist = Math.sqrt(dx * dx + dy * dy)
  40.       dist *= dist
  41.       vx += dx / dist * mass
  42.       vy += dy / dist * mass
  43.  
  44.       x += vx
  45.       y += vy
  46.  
  47.       beginPath()
  48.       arc(x, y, R, 0, 6.29)
  49.       fill()
  50.     }
  51.   }
  52.  
  53.   const dots = []
  54.   for (let i = 0; i < 10; i++) dots.push(dot())
  55.   loop = () => {
  56.     fillStyle = 'rgba(0, 0, 0, 0.2)'
  57.     fillRect(0, 0, canvas.width, canvas.height)
  58.     dots.map(d => d())
  59.   }
  60.   setInterval(loop, 16)
  61. }

Some speed coded dots that gravitate to the center of the screen and occasionally change direction.

// animation // canvas // graphics // javascript // math // random // speed-coded

Fermat’s Spiral Tweak/Fork

  1. document.body.style.margin = 0;
  2. const canvas = document.body.appendChild(document.createElement('canvas'));
  3. const c = canvas.getContext('2d');
  4.  
  5. function resize() {
  6.   canvas.width = window.innerWidth;
  7.   canvas.height = window.innerHeight;
  8.   draw();
  9. }
  10.  
  11. setInterval(draw, 16);
  12.  
  13. let t = 0;
  14. function draw() {
  15.   c.fillStyle = 'rgba(155, 155, 155, .9)';
  16.   c.fillRect(0, 0, canvas.width, canvas.height);
  17.   c.fillStyle = 'rgba(0, 0, 0, 0.5)';
  18.  
  19.   const iter = 500;
  20.   const halfWidth = window.innerWidth / 2;
  21.   const halfHeight = window.innerHeight / 2;
  22.   let rad = 0,
  23.     scale = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.006,
  24.     theta = 0,
  25.     x,
  26.     y;
  27.  
  28.   c.save();
  29.   c.translate(halfWidth, halfHeight);
  30.  
  31.   for (let i = 0; i < iter; i++) {
  32.     rad = 3 * Math.sin(Math.sqrt(theta)) * scale;
  33.     x = rad * Math.cos(theta);
  34.     y = rad * Math.sin(theta * 0.99);
  35.     c.fillRect(x, y, 2, 2);
  36.     c.fillRect(-x, -y, 4, 4);
  37.     theta += 0.05 + t * 0.001;
  38.   }
  39.   c.restore();
  40.   t += 0.1;
  41. }
  42.  
  43. resize();
  44. window.addEventListener('resize', resize);
// animation // canvas // javascript // speed-coded
Older Posts
Newer Posts

Recent

Archive

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