)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

2x mod 1 Map

  1. function twoXmodMap(start = 0.2) {
  2.   const seed = () => Math.random() * Math.random() * start
  3.   let xn = seed()
  4.   let xn1
  5.   let iter = 0
  6.   return () => {
  7.     iter++
  8.     if (iter > 50) {
  9.       xn = seed()
  10.       iter = 0
  11.     }
  12.  
  13.     // this is the key part:
  14.     xn1 = (2 * xn) % 1
  15.     xn = xn1
  16.  
  17.     return xn1
  18.   }
  19. }
  20.  
  21. const el = document.body.appendChild(document.createElement('div'))
  22. el.innerHTML = `
  23.   <svg>
  24.     <path d="M 0 0 L 1 1" fill="none" stroke="red" />
  25.   </svg>
  26.   <style>
  27.     svg, body, html {
  28.       width: 100%;
  29.       height: 100%;
  30.       overflow: visible;
  31.     }
  32.   </style>
  33. `
  34.  
  35. const path = el.querySelector('path')
  36. let pathStr = ''
  37.  
  38. const map = twoXmodMap()
  39.  
  40. let x = 0
  41. let yo = 0
  42. let y;
  43. function loop() {
  44.   y = map()
  45.   x += 2
  46.  
  47.   if (pathStr == '' || x > 300) {
  48.     x = 10
  49.     yo += 50
  50.     pathStr += `M 10 ${yo}`
  51.   } else {
  52.     pathStr += ` L ${x} ${yo + y * 30} `
  53.   }
  54.  
  55.   path.setAttribute('d', pathStr)
  56.   window.requestAnimationFrame(loop)
  57. }
  58. loop()

Drawing the 2x mod 1 map.

// javascript // math // svg
snippet.zone ~ 2021-24 /// {s/z}