waaaazzzzaaaaa

fractal1.js

// inspired by coding challenge #2

function setup() {
  createCanvas(400, 400);
  background(0);
  noLoop();
}

function draw() {
  var b = new Box(50, 50, 300, 1);
  b.subdivide(3);
  b.subdivide(3);
  b.subdivide(3);
  b.subdivide(3);
  b.show();
}

function Box(x, y, side, a) {
  // upper left hand corner positioning
  this.x = x;
  this.y = y;
  this.side = side;
  this.alpha = a; // inappropriately named but whatever it's grayscale
  this.subdivisions = [];

  this.subdivide = function(n) {
    if (this.subdivisions.length > 0) {
      this.subdivisions.map(function(s) {
        s.subdivide(n);
      });
    } else {
      var subSide = this.side/n;
      var alpha;
      for (var i = 0; i < n; i++) {
        for (var j = 0; j < n; j++) {
          if (i == Math.floor(n/2) && i == j) {
            alpha = this.alpha*5;
          } else {
            alpha = this.alpha*2;
          }
          var subB = new Box(this.x + i*subSide, this.y + j*subSide, subSide, alpha);
          this.subdivisions.push(subB);
        }
      }
    }
  };

  this.show = function() {
    stroke(255, 50);
    if (this.subdivisions.length == 0) {
      // ok i could condense this by just returning if nosubdivsions
      // and moving the drawing portion out of the conditional
      fill(this.alpha);
      rect(this.x, this.y, this.side, this.side);
    } else {
      fill(this.alpha);
      rect(this.x, this.y, this.side, this.side);
      this.subdivisions.map(function(s) {
        s.show();
      });
    }
  }
}

fractal1_3d.js

// this is the menger sponge fractal
// using my 2d code
// with some tips from dan shiffman's coding challenge 2

var sponge;
var a = 0;

function setup() {
  createCanvas(600, 600, WEBGL);
  noFill();
  sponge = new Sponge(0, 0, 0, 273);
}

function draw() {
  background(0);
  rotateX(a);
  rotateY(a);
  sponge.show();
  a += 0.01;
}

function mouseClicked() {
  // do not click more than 3 times cuz it will get mad slow and probably crash
  sponge.subdivide();
}

function Sponge(x, y, z, s) {
  this.pos = createVector(x, y, z);
  this.side = s;
  this.subdivisions = [];

  this.subdivide = function() {
    if (this.subdivisions.length) {
      this.subdivisions.map(function(s) {
        s.subdivide();
      });
    } else {
      // subdiv by 3
      var side = this.side/3;
      for (var i = -1; i < 2; i++) {
        for (var j = -1; j < 2; j++) {
          for (var k = -1; k < 2; k++) {
            if (abs(i) + abs(j) + abs(k) > 1) { // thanks shiffman
              var s = new Sponge(
                this.pos.x + i*side,
                this.pos.y + j*side,
                this.pos.z + k*side,
                this.side/3
              );
              this.subdivisions.push(s);
            }
          }
        }
      }
    }
  }

  this.show = function() {
    if (!this.subdivisions.length) {
      push();
      translate(this.pos.x, this.pos.y, this.pos.z);
      box(this.side, this.side, this.side);
      pop();
    } else {
      this.subdivisions.map(function(s) {
        s.show();
      });
    }
  }
}