Фракталы, отрисовка фракталов

Помогите пожалуйста, нужно создать страницу на html и js, которая отрисует два типа алгебраических фракталов, использующих тригонометрическую функцию tg z. Я в компьютерной графике вообще не разбираюсь, может, посоветуете ещё ценный материал


Исправил проблемы с отображением, теперь всё работает

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Алгебраїчний фрактал</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        function shZ(x, y, iterations, xConst, yConst) {
            var zr = xConst;
            var zi = yConst;
            var cr = x;
            var ci = y;

            for(var i = 0; i < iterations; i++) {
                var zrNew = zr * zr - zi * zi + cr;
                var ziNew = 2 * zr * zi + ci;

                if (zrNew * zrNew + ziNew * ziNew > 16) {
                    return i;
                }

                zr = zrNew;
                zi = ziNew;
            }

            return iterations;
        }

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        var iterations = 100;

        for (var i = 0; i < canvas.width; i++) {
            for (var j = 0; j < canvas.height; j++) {
                var x = (i - canvas.width/2) * 4 / canvas.width;
                var y = (j - canvas.height/2) * 4 / canvas.height;
                var color = shZ(x, y, iterations, 0, 0);
                var to255 = Math.floor(color / iterations * 255);
                ctx.fillStyle = 'rgb(0, 0, ' + to255 + ')';
                ctx.fillRect(i, j, 1, 1);
            }
        }
    </script>
</body>
</html>

только теперь проблема, так как нужно итерировать по функции tan(z), чтобы получить примерно такое изображение


Ответы (0 шт):