{"id":1281,"date":"2018-01-04T16:07:23","date_gmt":"2018-01-04T21:07:23","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1281"},"modified":"2021-01-17T20:20:40","modified_gmt":"2021-01-18T01:20:40","slug":"p5-js-build-menger-sponge","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/01\/04\/p5-js-build-menger-sponge\/","title":{"rendered":"p5.js: How to build a Menger sponge"},"content":{"rendered":"

According to Wikipedia<\/a>, a Menger sponge is:<\/p>\n

In mathematics, the Menger sponge (also known as the Menger universal curve) is a fractal curve. It is a three-dimensional generalization of the Cantor set and Sierpinski carpet, though it is slightly different from a Sierpinski sponge. It was first described by Karl Menger in 1926, in his studies of the concept of topological dimension.<\/p><\/blockquote>\n

A Menger sponge is essentially a block that is recursively subdivided into smaller blocks where the central block on each side is removed. Here is an animation showing what the Menger sponge looks like after four iterations:<\/p>\n

\"\"<\/p>\n

This code uses a class called Box to create the boxes and it has constructor(), generate(), and show() functions. The constructor uses the p5.js createVector(x, y, z)<\/code> method.<\/p>\n

According to the p5js.org reference page<\/a>, createVector():<\/p>\n

Creates a new p5.Vector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction.<\/span><\/p>\n

createVector(x, y, z)<\/code><\/p><\/blockquote>\n

The generate() function uses nested for loops to create all of the sub boxes, stored in an array.<\/p>\n

There is a mousePressed() function (the name of the function also happens to be a built-in for the mousePressed event, which means the function is triggered when the mouse is pressed!) which uses the generate() function to further sub-divide the box and create new boxes recursively.<\/p>\n

Here is the complete p5.js code for creating this:<\/p>\n

var a = 0;\nvar sponge = [];\n\nclass Box {\n  constructor(x, y, z, r) {\n    this.pos = createVector(x, y, z);\n    this.r = r;\n  }\n\n  generate() {\n    var boxes = [];\n    for (var x = -1; x < 2; x++) {\n      for (var y = -1; y < 2; y++) {\n        for (var z = -1; z < 2; z++) {\n          var sum = abs(x) + abs(y) + abs(z);\n          var newR = this.r \/ 3;\n          if (sum > 1) {\n            var b = new Box(this.pos.x + x * newR, this.pos.y + y * newR, this.pos.z + z * newR, newR);\n            boxes.push(b);\n          }\n        }\n      }\n    }\n    return boxes;\n  }\n\n  show() {\n    push();\n    translate(this.pos.x, this.pos.y, this.pos.z);\n    stroke(255);\n    noStroke();\n    noFill();\n    fill(\"#00ff00\");\n    pointLight(255, width\/2, height\/2, 0);\n    box(this.r);\n    pop();\n  }\n}\n\nfunction setup() { \n  createCanvas(400, 400, WEBGL);\n  \n  \/\/ An array of Box objects\n  \/\/ Start with one\n  var b = new Box(0, 0, 0, 200);\n  sponge.push(b);\n} \n\nfunction mousePressed() {\n  \/\/ Generate the next set of boxes\n  var next = [];\n  for (var i = 0; i < sponge.length; i++) {\n    var b = sponge[i];\n    var newBoxes = b.generate();\n    next = next.concat(newBoxes);\n  }\n  sponge = next;\n}\n\nfunction draw() { \n  background(51);\n  rotateX(a);\n  rotateY(a * 0.4);\n  rotateZ(a * 0.1);\n  \n  for (var i = 0; i < sponge.length; i++) {\n    sponge[i].show();    \n  }\n  \n  a += 0.01;\n}<\/pre>\n
Here is what the final result looks like: (Click the box only twice. Otherwise it will slow to a crawl.)<\/p>\n\n\n