// - Opanprocessing demo: https://openprocessing.org/sketch/352817/

// - Cached geometry version by @cacheflowe: https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/

​

let numPoints = 200;

let points = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  for(let i=0; i < numPoints; i++) {

    points.push(new Point(random(-width*2, width*2), random(-height*2, height*2)));

  }

}

​

function draw() {

  background(239,248,255);

  noStroke();

​

  for(let i=0; i < numPoints; i++) {

    points[i].draw();

  }

​

  if(frameCount % 600 == 100) print('frameRate: '+deltaTime);

}

​

class Point {

  constructor(x, y, index) {

    this.x = x;

    this.y = y;

    this.index = index;

    this.id = noise(random(1000)) * 100;

    if (random(1) > 0.5) {

      this.color = color(239,248,255);

    } else {

      this.color = color(214,237,255);

    }

    this.shape = this.buildShape();

  }

  buildShape() {

    return new p5.Geometry(

      1, 1,

      function createGeometry() {

        let cellDetail = 32;

        let hoffOrthoFactor = width * 2;// dist(0, 0, width, height);

        let shapeRads = 0;

        let segmentRads = TWO_PI / cellDetail;

        let rFix = hoffOrthoFactor * 0.9;

​

        for (let j = 0; j < cellDetail; j++) {

          let rads = segmentRads * j;

          this.vertices.push(

            new p5.Vector(0, 0, -rFix),

            new p5.Vector(

              hoffOrthoFactor * cos(rads), 

              hoffOrthoFactor * sin(rads), 

              -hoffOrthoFactor

            ),

            new p5.Vector(

              hoffOrthoFactor * cos(rads + segmentRads), 

              hoffOrthoFactor * sin(rads + segmentRads), 

              -hoffOrthoFactor

            )

          );

​

          this.faces.push([j*3, j*3+1, j*3+2]); // [0,1,2], and so on

        }

​

        this.gid = 'shape-'+this.index;

      }

    );

  }

  draw() {

    // fall downward    

    this.y += this.id / 100;

    if(this.y > height*4) this.y = -height*4;

​

    // draw shape

    push();

    translate(this.x, this.y);

    fill(this.color);

    model(this.shape);

    pop();

  }

}