magical-machine-mandelbrot-1.js

// It's an old untuned TV screen
function setup() {
  createCanvas(400, 400);
  pixelDensity(1);
  loadPixels();
}

function shadeAt(x,y) {
  return random(255);
}

function setPixel(x,y,shade) {
  // jump into the 1-dimensional `pixels` array at the right x/y point
  let p_idx = (x + y * height) * 4;
  pixels[p_idx + 0] = shade; // R
  pixels[p_idx + 1] = shade; // G
  pixels[p_idx + 2] = shade; // B
  pixels[p_idx + 3] = 255;   // A
}

function draw() {
  background(240);
  
  for(let x = 0; x < width; x++) {
    for(let y = 0; y < height; y++) {
      setPixel(x,y,shadeAt(x,y))
    }
  }
  updatePixels();
}

magical-machine-mandelbrot-2.js

// A black-and-white Mandelbrot set based on 10 iterations
class Complex {
  constructor(a,b) {
    this.a = a;
    this.b = b;
  }
  add(other) {
    this.a = this.a + other.a
    this.b = this.b + other.b
  }
  square() {
    let new_a = this.a * this.a - this.b * this.b;
    let new_b = 2 * this.a * this.b;
    this.a = new_a;
    this.b = new_b;
  }
  isBiggerThan(mag) {
    return this.a * this.a + this.b * this.b > mag * mag;
  }
}

function setup() {
  createCanvas(400, 400);
  pixelDensity(1);
  loadPixels();
}

function shadeAt(x, y) {
  let z = new Complex(0, 0);
  let c_a = map(x, 0, width, -2, 2);
  let c_b = map(y, 0, height, -2, 2);
  let c = new Complex(c_a, c_b);
  for (let count = 0; count < 10; count++) {
    z.square();
    z.add(c);
  }
  if (z.isBiggerThan(2)) {
    return 0;
  } else {
    return 255;
  }
}

function setPixel(x,y,shade) {
  // jump into the 1-dimensional `pixels` array at the right x/y point
  let p_idx = (x + y * height) * 4;
  pixels[p_idx + 0] = shade; // R
  pixels[p_idx + 1] = shade; // G
  pixels[p_idx + 2] = shade; // B
  pixels[p_idx + 3] = 255;   // A
}

function draw() {
  background(240);
  
  for(let x = 0; x < width; x++) {
    for(let y = 0; y < height; y++) {
      setPixel(x,y,shadeAt(x,y))
    }
  }
  updatePixels();
  noLoop();
}

magical-machine-mandelbrot-3.js

// A greyscale Mandelbrot set based on 10 iterations
class Complex {
  constructor(a,b) {
    this.a = a;
    this.b = b;
  }
  add(other) {
    this.a = this.a + other.a
    this.b = this.b + other.b
  }
  square() {
    let new_a = this.a * this.a - this.b * this.b;
    let new_b = 2 * this.a * this.b;
    this.a = new_a;
    this.b = new_b;
  }
  isBiggerThan(mag) {
    return this.a * this.a + this.b * this.b > mag * mag;
  }
}

function setup() {
  createCanvas(400, 400);
  pixelDensity(1);
  loadPixels();
}

function shadeAt(x, y) {
    let z = new Complex(0, 0);
    let c_a = map(x, 0, width, -2, 2);
    let c_b = map(y, 0, height, -2, 2);
    let c = new Complex(c_a, c_b);
    let count;
    for (count = 0; count < 10; count++) {
        z.square();
        z.add(c);
        if (z.isBiggerThan(2)) {
            break;
        }
    }
    return map(count, 0, 10, 0, 255)
}

function setPixel(x,y,shade) {
  // jump into the 1-dimensional `pixels` array at the right x/y point
  let p_idx = (x + y * height) * 4;
  pixels[p_idx + 0] = shade; // R
  pixels[p_idx + 1] = shade; // G
  pixels[p_idx + 2] = shade; // B
  pixels[p_idx + 3] = 255;   // A
}

function draw() {
  background(240);
  
  for(let x = 0; x < width; x++) {
    for(let y = 0; y < height; y++) {
      setPixel(x,y,shadeAt(x,y))
    }
  }
  updatePixels();
  noLoop();
}

magical-machine-mandelbrot-4.js

// A greyscale Mandelbrot set based on 100 iterations
// with a non-linear pow applied to make it Not Dark
class Complex {
  constructor(a,b) {
    this.a = a;
    this.b = b;
  }
  add(other) {
    this.a = this.a + other.a
    this.b = this.b + other.b
  }
  square() {
    let new_a = this.a * this.a - this.b * this.b;
    let new_b = 2 * this.a * this.b;
    this.a = new_a;
    this.b = new_b;
  }
  isBiggerThan(mag) {
    return this.a * this.a + this.b * this.b > mag * mag;
  }
}

function setup() {
  createCanvas(800, 800);
  pixelDensity(1);
  loadPixels();
}

function shadeAt(x, y) {
  let z = new Complex(0, 0);
  let c_a = map(x, 0, width, -2, 2);
  let c_b = map(y, 0, height, -2, 2);
  let c = new Complex(c_a, c_b);
  let count;
  let iterations=100;
  for (count = 0; count < iterations; count++) {
      z.square();
      z.add(c);
      if (z.isBiggerThan(2)) {
          break;
      }
  }
  count = map(count, 0, iterations, 0, 1);
  return pow(count, 0.3) * 255;
}

function setPixel(x,y,shade) {
  // jump into the 1-dimensional `pixels` array at the right x/y point
  let p_idx = (x + y * height) * 4;
  pixels[p_idx + 0] = shade; // R
  pixels[p_idx + 1] = shade; // G
  pixels[p_idx + 2] = shade; // B
  pixels[p_idx + 3] = 255;   // A
}

function draw() {
  background(240);  
  for(let x = 0; x < width; x++) {
    for(let y = 0; y < height; y++) {
      setPixel(x,y,shadeAt(x,y))
    }
  }
  updatePixels();
  noLoop();
}