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

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

Recent

Archive

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