Based on http://paulbourke.net/fractals/clifford/
See the source typescript.
Based on http://paulbourke.net/fractals/clifford/
See the source typescript.
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(); |
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() |
<style> | |
html, body { | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
<canvas id="canvas"></canvas> | |
<script src="app.js"></script> |