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

Flun Draw

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. canvas.width = innerWidth * 2
  5. canvas.height = innerHeight * 2
  6. document.body.append(canvas)
  7. canvas.style.width = innerWidth + 'px'
  8. canvas.style.height = innerHeight + 'px'
  9. c.fillStyle = 'white'
  10. c.fillRect(0, 0, canvas.width, canvas.height)
  11.  
  12. const flun = (
  13.   ax = innerWidth,
  14.   ay = innerHeight,
  15.   r = 0,
  16.   x = 0, y = 0,
  17.   t = 0,
  18.   dt = 0,
  19.   spin = 0,
  20.   spinc = .1,
  21.   rinc = 0,
  22.   col = 'black',
  23.   hist = []
  24. ) => {
  25.  
  26.   const init = () => {
  27.     dt = Math.random() * Math.PI * 2
  28.     r = 0
  29.     rinc = Math.random() * 1
  30.     spinc = Math.random() * .01 - .005
  31.     col = ['black', 'white', 'rgba(0, 0, 0, 0.2)']
  32.       [~~(Math.random() * 3)]
  33.   }
  34.   init()
  35.  
  36.   return () => {
  37.  
  38.     spin += spinc
  39.     if (Math.random() < .005) {
  40.       init()
  41.     } else {
  42.       r += rinc
  43.     }
  44.  
  45.     if (Math.random() < .01) {
  46.       ax = x
  47.       ay = y
  48.       const inside = ax > 0 &&
  49.         ax < canvas.width &&
  50.         ay > 0 &&
  51.         ay < canvas.height
  52.       if (!inside) {
  53.         const p = hist[~~(Math.random() * hist.length)]
  54.         ax = p[0]
  55.         ay = p[1]
  56.       }
  57.       init()
  58.     } 
  59.  
  60.     t += (dt - t) / 22
  61.  
  62.     x = ax + Math.cos(t + spin) * r
  63.     y = ay + Math.sin(t + spin) * r
  64.  
  65.     if (x > 0 && x < canvas.width &&
  66.       y > 0 && y < canvas.height) {
  67.       hist.push([x, y])
  68.     }
  69.  
  70.     c.fillStyle = col
  71.     c.fillRect(x, y, 4, 4)
  72.   }
  73. }
  74.  
  75. const f = flun()
  76.  
  77. setInterval(() => {
  78.   for (let i = 0; i < 20; i++) f()
  79. }, 16)

Just randomly coded this one morning for a short – simple – but never did this exact motion before. It looks surprisingly organic and occasionally draws things that look like faces and other objects

// animation // canvas // drawing // golfed // graphics // javascript // math // random

Recent

Archive

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