Skeleton Sphere

const nodeAmount = 500;

const rotateSpeed = 0.01;

const growSpeed = 0.01;

const nodeArray = [];

const linkArray = [];

let zoom;

let generator;

​

function setup() {

  generator = gabrielGraph();

  createCanvas(windowWidth, windowHeight);

  zoom = min(width, height) * 1.2;

​

  while (nodeArray.length < nodeAmount) {

    const alpha = random(TWO_PI);

    const beta = random(TWO_PI);

    const x = sin(alpha) * cos(beta);

    const y = cos(alpha);

    const z = sin(alpha) * sin(beta);

    const n = new node(x, y, z);

    nodeArray.push(n);

  }

}

​

function* gabrielGraph() {

// noprotect

  for (let i = 0; i < nodeArray.length; i++) {

    const current = nodeArray[i];

    const rest = nodeArray.slice(i+1);

    for (const target of rest) {

      const centre = current.vec3.copy().add(target.vec3).div(2);

      const distance = current.vec3.dist(target.vec3);

      const radius = distance / 2;

      if (nodeArray.every((extra) => 

          extra == current || extra == target || extra.vec3.dist(centre) > radius)

      ){

        linkArray.push(new link(current, target));

        yield;

      }

    }

  }

}

​

function draw() {

  generator.next();

​

  background("white");

  translate(width / 2, height / 2);

  nodeArray.forEach((node) => node.rotate());

  nodeArray.forEach((node) => node.update());

​

//  nodeArray.forEach((node) => node.show());

  linkArray.forEach((link) => link.show());

}

​

const node = function (x, y, z) {

  this.vec3 = createVector(x, y, z);

  this.vec2 = createVector(0, 0);

  this.depth = 0;

​

  this.rotate = () => {

    const { x, y } = createVector(this.vec3.x, this.vec3.z).rotate(rotateSpeed);

    this.vec3.x = x;

    this.vec3.z = y;

  };

​

  this.update = () => {

    const magnitude = map(cos(frameCount / 60), -1, 1, 3, 1);

    this.depth = magnitude + this.vec3.z;

    this.vec2.x = (this.vec3.x / this.depth) * zoom;

    this.vec2.y = (this.vec3.y / this.depth) * zoom;

    this.scaling = 10 / this.depth;

  };

  this.show = () => {

    noStroke();

    fill("black");

    ellipse(this.vec2.x, this.vec2.y, this.scaling);

  };

};

​

const link = function (node1, node2) {

  this.node1 = node1;

  this.node2 = node2;

  this.age = 0;

​

  this.show = () => {

    const totalScaling = this.node1.scaling + this.node2.scaling;

    strokeWeight(totalScaling / 4);

    if (this.age >= 1) {

      stroke("black");

      line(

        this.node1.vec2.x,

        this.node1.vec2.y,

        this.node2.vec2.x,

        this.node2.vec2.y

      );

      return;

    }

    this.age += growSpeed;

    const difference = this.node2.vec2.copy().sub(this.node1.vec2);

    const current = this.node1.vec2;

    const target = current.copy().add(difference.mult(this.age));

    stroke("red");

    line(current.x, current.y, target.x, target.y);

  };

};

​