​

let rotationSpeed = 0.6;

let hueShift = 0;

​

const settings = [10, 10, 10]

​

function setup() {

  // WEBGL for 3d rendering

  createCanvas(500, 500, WEBGL);

  angleMode(DEGREES);

  // Change color mode to HSB (hue, saturation, brightness)

  colorMode(HSB);

  stroke(200, 80, 90);

  strokeWeight(3);

  noFill();

​

  // Define the radius for the spherical shape

  radius = width / 3;

​

  // Used for higher quality rendering

  pixelDensity(1);

}

​

​

function draw() {

  // Clear canvas every iteration

  clear();

  // Enable mouse control for orbiting the camera

  orbitControl(4, 4);

​

  // Rotate canvas by x and y based on frameCount

  rotateX(frameCount * rotationSpeed);

  rotateY(frameCount * rotationSpeed);

​

  // Initial tilt of 90 degrees

  rotateX(90);

  // Begin drawing a shape made of points (3D vertices)

  beginShape(POINTS);

    // Nest loops to generate a point at each theta and phi value to create spherical shape

  for (let theta = 0; theta < 180; theta += 2) {

    for (let phy = 0; phy < 360; phy += 2) {

      // Calc x, y, z coordinates of each point on the sphere

      let x = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * sin(1 * theta) * cos(phy);

      let y = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * sin(1 * theta) * sin(phy);

      let z = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * cos(1 * theta);

      // For dynamic effect adjust color

      stroke((hueShift + theta + phy) % 360, 80, 88);

      vertex(x, y, z);

    }

  }

  endShape();

​

  // Add hueShift to create continuous color shift

  hueShift += 0.1;

}