pixels = {
/**
* A port of https://en.wikipedia.org/w/index.php?title=Mandelbrot_set&oldid=1010793526#Computer_drawings
* See also https://gist.github.com/neuro-sys/4654176
*/
function f (px, py) {
function assert (b, e) {if (!b) throw new Error (e)}
assert (px < width, `px ${px} >= width ${width}`)
assert (py < height, `px ${px} >= height ${height}`)
const xto1 = px / width // is in the 0..1 range
// x0 := scaled x coordinate of pixel (scaled to lie in the Mandelbrot X scale (-2.5, 1))
const x0 = -2.5 + xto1 * 3.5
const yto1 = py / height // is in the 0..1 range
// y0 := scaled y coordinate of pixel (scaled to lie in the Mandelbrot Y scale (-1, 1))
const y0 = -1 + yto1 * 2
let x = 0.0, y = 0.0, it, escapeTime = 256
for (it = 0; it < escapeTime; ++it) {
// For complex numbers this should be similar to the bailout of |z| > 2
if (x*x + y*y > 2*2) break
const xtemp = x*x - y*y + x0
y = 2*x*y + y0
x = xtemp}
const colors = 256
const color = Math.floor (it * colors / escapeTime)
return color}
window.mandelbrot = f
let pixels = [], colored = 0
for (let y = 0; y < height; ++y) for (let x = 0; x < width; ++x) {
const color = f (x, y)
pixels.push (color)
if (color != 0) ++colored}
window.pixels = pixels
return md`Calculated ${pixels.length} pixels, ${colored} of them with color.`}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
