Аттрактор Лоренца на канве

Иногда еще можно встретить людей, которым не известно, что такое аттрактор Лоренца. Специально для таких не сведущих сообщаем следующее:

Аттрактор Лоренца (от англ. to attract — притягивать) ― компактное инвариантное множество L в трехмерном фазовом пространстве гладкого потока, которое имеет определённую сложную топологическую структуру и является асимптотически устойчивым, оно устойчиво по Ляпунову и все траектории из некоторой окрестности \(L\) стремятся к \(L\) при \(t\to\infty\) (отсюда название).

Для тех же, кто знает что это такое покажем как нарисовать аттрактор на канве средствами javascript. Смотрите результат: А теперь код для отрисовки. Вам понадобятся стили:

.divbody {
 background: #222;
 text-align: center;
margin-top:10px;margin-bottom:10px;
}

canvas {
 display: inline-block;
 max-width: 100%;
 max-height: 100%;
}

Затем ставим на странице контейнер:
<div class="divbody"> <canvas id="canvas" width="500" height="660"> </div> И сам javascript:

var canvas = document.getElementById('canvas'),
 context = canvas.getContext('2d'),
 c = 28, 
 h = 0.015,
 t = -6,
 x0 = 0, 
 y0 = 1, 
 z0 = 10,
 x1,
 y1,
 z1,
 cx = 250,
 cy = 330,
 scale = 15,
 n = 20000,
 i = 0;

var interval = setInterval(function() {
 if (i < n) {
 for (var k = 0; k < 20; k += 1) {
 x1 = x0 + h * t * (x0 - y0);
 y1 = y0 + h * (-x0 * z0 + c * x0 - y0);
 z1 = z0 + h * (x0 * y0 - z0);

 context.strokeStyle = "hsl(" + Math.abs(x1)*10 + 
"," + Math.abs(y1)*10 + "%," + Math.abs(z1)*2 + "%)";
 
 context.beginPath();
 context.moveTo(cx + x0 * scale, cy + y0 * scale);
 context.lineTo(cx + x1 * scale, cy + y1 * scale);
 context.stroke();

 x0 = x1;
 y0 = y1;
 z0 = z1;

 i += 1;
 }
 } else {
 clearInterval(interval);
 }
}, 1);