JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<canvas id="c" width="800" height="600"></canvas>

JavaScript

// Lorents attractor on canvas        
var cnv = document.getElementById("c");
var cx = cnv.getContext('2d');
var h = parseInt(cnv.getAttribute("height"));
var w = parseInt(cnv.getAttribute("width"));
var img = cx.createImageData(w, h);

var x = 3.051522,
  y = 1.582542,
  z = 15.62388,
  x1, y1, z1;
var dt = 0.0001;
var a = 5,
  b = 15,
  c = 1;


var idx = 0;
i = 1000000;
while (i--) {
  x1 = x + a * (-x + y) * dt;
  y1 = y + (b * x - y - z * x) * dt;
  z1 = z + (-c * z + x * y) * dt;
  x = x1;
  y = y1;
  z = z1;
  idx = 4 * (Math.round(19.3 * (y - x * 0.292893) + 320) + Math.round(-11 * (z + x * 0.292893) + 392) * w);
  img.data[idx + 3] = (25,150,200);
}
cx.putImageData(img, 0, 0);