P5JS Chaos Game 3D

The chaos game generalizes to higher dimensions when the number of points is increased.

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script>

JavaScript

var a;
var b;
var c;
var points = [];
var numPoints = 5000;
function setup() {
  createCanvas(400, 400, WEBGL);
  
  a = createVector(height/2, height/2, height/2);
  b = createVector(height/2, -height/2, -height/2);
  c = createVector(-height/2, height/2, -height/2);
  d = createVector(-height/2, -height/2, height/2);
    
  points.push(createVector(random(width), random(height), random(height)));
  while (points.length < numPoints) {
    selectedPoint = random([a, b, c, d]);
    var lastPoint = points[points.length - 1].copy();

    points.push(createVector(
      (lastPoint.x + selectedPoint.x) / 2, 
      (lastPoint.y + selectedPoint.y) / 2, 
      (lastPoint.z + selectedPoint.z) / 2
    ));
  }
  
	pointLight(250, 250, 250, 0, 0, 0);
}

function draw() {
  background(0);
  rotateY(frameCount * 0.02);
  
  for (var point of points) {
  	push();
    translate(point.x, point.y, point.z);
    //box(5, 5, 5);
    sphere(3);
    pop();
  }
}