Lorentz Attractor visualization using functional programming I have been working on this Lorenz Attractor visualization for the past day. I am currently also trying to change my coding style into a more functional programming one. 

I find it quite hard, to be honest, especially the "Only use pure functions." rule. That mostly means no side effects and functions that perform 1 small task. The "No side effect." rule is, of course, impossible while drawing on the HTML canvas. So I am looking for performance optimization and code style tips for FP in general. 

I also should like to pass the 3 global variables (x, y, z) as parameters when calling the update function ("No global variables allowed.") however I have had no luck so far. I can't find a way to keep them from resetting while using parameters. Unlike the draw function that calls itself. Any help is welcome, thanks for your time.

https://jsfiddle.net/9r8qcgnh/3/

{
  const canvas = document.querySelector('#canvas')
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = 'rgb(255, 255, 255)'
  ctx.translate(500, 400)
  ctx.scale(10.5, 10.5)

  let x = 0.01
  let y = 0.0
  let z = 0.0

  function update () {
    const a = 10.0
    const b = 28.0
    const c = 8.0 / 3.0
    const dt = 0.015
    const dx = a * (y - x) * dt
    const dy = (x * (b - z) - y) * dt
    const dz = (x * y - c * z) * dt
    x = x + dx
    y = y + dy
    z = z + dz
    return { x: x, y: y, z: z }
  }

  function draw (hue) {
    const { x, y } = update()
    hue = hue || 0
    hue &gt;= 240 ? (hue = 0) : hue++
    ctx.fillStyle = `hsl(${hue},100%, 50%)`
    ctx.fillRect(x, y, 0.1, 0.1)
    setTimeout(() =&gt; {
      return draw(hue)
    }, 5)
  }

  draw()
}
I don't know anything about Lorentz Attractors or functional programming, but I have a few things I want to mention.

getElementById is faster than querySelector

const canvas = document.getElementById('canvas')


You can use shorthand property names in your draw function.

return { x, y, z };


You can give parameters a default value

function draw (hue = 0) {
  //...
}


and remove this line

hue = hue || 0


I don't know if it's deliberate because you have something against purple, but the hue goes to 360.

Use semicolon at the end of your lines. Technically, JavaScript can run without them, but it just... looks wrong. If anything, do it to make it a habit, since it's gonna be a problem if you code something in another language later.

It seems more appropriate to use setInterval instead of setTimeout here. You will have to handle the hue differently in that case. Making it global is an option, but not good if you are trying to avoid those. Another option could be a generator.

function draw (hue = 0) {
  const { x, y } = update();
  ctx.fillStyle = `hsl(${hue},100%, 50%)`;
  ctx.fillRect(x, y, 0.1, 0.1);
}

const hueGenerator = (function*() {
  let hue = 0;
  while(true) {
    hue %= 360;
    yield hue++;
  }
})();

setInterval(() =&gt; {
  draw(hueGenerator.next().value);
}, 5)