var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width = 800; var height = 800; var pixels = Array(width).fill(0).map(x => Array(height).fill(0.0)); //var a = -1.4, b = 1.6, c = 1.0, d = 0.7; //var a = 1.7, b = 1.7, c = 0.6, d = 1.2; //var a = -1.8, b = -2.0, c = -0.5, d = -0.9; var a = -1.4, b = 1.6, c = -1.0, d = 0.9; //var a = 1.5, b = -1.8, c = 1.6, d = 0.9; var x = 0, y = 0; var max = 0.0; // generate for (var i = 0; i < 40000000; ++i) { var x1 = Math.sin(a * y) + c * Math.cos(a * x); var y1 = Math.sin(b * x) + d * Math.cos(b * y); var m = Math.round((x1 + 2.5) * width / 5); var n = Math.round((2.5 - y1) * height / 5); var h = ++pixels[m][n]; max = Math.max(max, h); x = x1; y = y1; } // draw for (var m = 0; m < width; ++m) { for (var n = 0; n < height; ++n) { var color = 2 * Math.round(Math.sqrt(pixels[m][n] / max) * 100.0); color = Math.max(0, Math.min(color, 100)); ctx.fillStyle = "hsl("+ 30 + "," + 100 + "%," + (100 - color) +"%)"; ctx.fillRect(m, n, 1, 1); } }