Clifford Attractors

README.md

Based on http://paulbourke.net/fractals/clifford/

See the source typescript.

app.js

var ITERATIONS = 10000000;
var PER_FRAME = 10000;
var _a = [1.7, 1.7, 1.2, 0.6], A = _a[0], B = _a[1], C = _a[2], D = _a[3];
var _b = [470, 240, 155], LEFT = _b[0], TOP = _b[1], SCALE = _b[2];
var _c = [0, 0], x = _c[0], y = _c[1];
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext("2d");
context.fillStyle = "rgba(255,0,100,0.008)";
var getPixel = function (a, b, c, d, ox, oy) {
    x = Math.sin(a * oy) + c * Math.cos(a * ox);
    y = Math.sin(b * ox) + d * Math.cos(b * oy);
    return { x: x, y: y };
};
var drawPixel = function (_a) {
    var x = _a.x, y = _a.y;
    context.fillRect(LEFT + (SCALE * x), TOP + (SCALE * y), 1, 1);
};
var count = 0;
var doDrawing = function () {
    var p = (count / ITERATIONS);
    for (var i = 0; i < PER_FRAME; i++) {
        count++;
        drawPixel(getPixel(A, B, C, D, x, y));
    }
    console.log(p);
    if (count < ITERATIONS)
        requestAnimationFrame(doDrawing);
};
doDrawing();

app.ts

const ITERATIONS = 10000000
const PER_FRAME  = 10000

const [A, B, C, D] = [1.7, 1.7, 1.2, 0.6]
const [LEFT, TOP, SCALE] = [470, 240, 155]

let [x, y] = [0, 0]

const canvas = <HTMLCanvasElement> document.getElementById("canvas")
canvas.width  = window.innerWidth
canvas.height = window.innerHeight

const context = canvas.getContext("2d")
context.fillStyle = "rgba(255,0,100,0.008)"

const getPixel = (a, b, c, d, ox, oy)=> {
    x = Math.sin(a * oy) + c * Math.cos(a * ox)
    y = Math.sin(b * ox) + d * Math.cos(b * oy)
    
    return {x, y}
}

const drawPixel = ({x, y})=> {
    context.fillRect(LEFT+(SCALE * x), TOP+(SCALE * y), 1, 1)
}

let count = 0

const doDrawing = ()=> {
    const p = (count / ITERATIONS)

    for (var i = 0; i < PER_FRAME; i++) {
        count++
        drawPixel(getPixel(A, B, C, D, x, y))
    }
    
    console.log(p)
    
    if (count < ITERATIONS) requestAnimationFrame(doDrawing)
}

doDrawing()

index.html

<style>
    html, body {
        margin:  0;
        padding: 0;
    }
</style>
<canvas id="canvas"></canvas>
<script src="app.js"></script>