Annulus 3D

// engineer: jWilliamDunn, 2019.1213

// 2020.0803 updates to annulus function

// 2023.0723 update to p5.js 1.7.0 and remove webgl2 hack

// 2023.1028 update to p5.js 1.8.0

// 2024.0328 update to p5.js 1.9.2 and remove the temp fix for issue 4214

// 2024.0428 update to p5.js 1.9.3

// 2024.0524 update to p5.js 1.9.4

// 2024.0804 update to p5.js 1.10.0 and p5.easycam 1.2.3

// 2024.1021 update to p5.js 1.11.0

// 2024.1214 update to p5.js 1.11.2

// 2025.0201 update to p5.js 1.11.3

​

p5.disableFriendlyErrors = true;

​

// /////////////////////////////////////////////////////////////////////////////

// fix for stroke issue introduced in v0.10.2                  2024.0328: CLOSED  

// see github.com/processing/p5.js/issues/4214

/*p5.Shader.prototype._setMatrixUniforms_ = function() {

  this.setUniform('uProjectionMatrix', this._renderer.uPMatrix.mat4);

  if (this.isStrokeShader()) this.setUniform('uPerspective', 1);

  this.setUniform('uModelViewMatrix', this._renderer.uMVMatrix.mat4);

  this.setUniform('uViewMatrix', this._renderer._curCamera.cameraMatrix.mat4);

  if (this.uniforms.uNormalMatrix) {

    this._renderer.uNMatrix.inverseTranspose(this._renderer.uMVMatrix);

    this.setUniform('uNormalMatrix', this._renderer.uNMatrix.mat3);

  }

};*/

// /////////////////////////////////////////////////////////////////////////////

​

var angle=Math.PI/4, t=0, u=100;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  setAttributes('antialias', true);

  createEasyCam();

  perspective(PI/3, width/height, 1, 8000);

  document.oncontextmenu = () => false;

  strokeWeight(1);

}

​

function draw() {

  background(0,0,20);

  t+=0.001;

  u+=0.01;

​

  noStroke();

  fill(212,105,87);

  //noFill();

  //stroke(212,105,87);

  //ellipse(0,0, 270,270, 50);

  annulus(133,136, TAU*0.96,50);

  push();

    fill(212,105,87, 200);

    rotateZ(-TAU*0.02);

    translate(133,0,-0.1);

    rotateZ(-PI/2);

    annulus(17,25, PI,20);

  pop();

  push();

    fill(41,146,176, 127);

    rotateZ(TAU*0.01);

    annulus(138,140, TAU*0.94,50);

  pop();

  stroke(68,24,15);

  noFill();

  for(let i=0;i<20;i++)

    ellipse(0,0, 240+i,240+i, 50);

  ellipse(0,0, 50,50, 50);

​

  strokeWeight(2);

​

  translate(0,0,1);

  fill(127,50,0,31);

  stroke(204,111,96);

  push();

    rotateZ(TAU*noise(u*2));

    annulus(30,70, Math.PI/4,6);

  pop();

  noFill();

  translate(0,0,5);

  stroke(41,146,176);

  push();

    rotateZ(TAU*noise(u*3+10));

    annulus(60,100, Math.PI/4,6);

  pop();

​

  translate(0,0,5);

  stroke(204,111,96);

  push();

    rotateZ(TAU*noise(t));

    annulus(125,240, Math.PI/3);

  pop();

​

  fill(127,50,0,31);

  translate(0,0,5);

  push();

    rotateZ(TAU/4+TAU*noise(t*2+80));

    annulus(150,270, Math.PI/4);

  pop();

​

  fill(127,50,0,31);

  noStroke();

  translate(0,0,5);

  push();

    rotateZ(1+TAU/4+TAU*noise(t*2+180));

    annulus(160,240, Math.PI/4);

  pop();

​

  stroke(204,111,96);

  noFill();

  translate(0,0,5);

  push();

    rotateZ(TAU/2+TAU*noise(t*3));

    annulus(100,200, Math.PI/4);

  pop();

​

  fill(0,0,127,15);

  stroke(41,146,176);

  translate(0,0,-35);

  push();

    rotateZ(3*TAU/4+TAU*noise(t*4+20));

    annulus(175,275, TAU/3,20);

  pop();

  translate(0,0,10);

  stroke(204,111,96);

  curvedChart(40, 60, u);

}

​

function curvedChart(inner, outer, data) {

  push();

    line(inner,0, inner+(outer-inner)*noise(u),0);

    for(var i=0; i<10; i++) {

      rotateZ(angle*1/10);

      line(inner,0, inner+(outer-inner)*noise(u+i),0);

    }

  pop();

}

​

// jWilliamDunn 20200803 handle fill and stroke separately

function annulus(inner, outer, angle, segs){

  if(segs===undefined)segs=20;

  if(segs<5)segs=5;

  if(this._renderer._doStroke){

    push();

    noFill();

    beginShape();

    for(let i=0; i<=segs; i++)

      vertex(outer*Math.cos(angle*i/segs), outer*Math.sin(angle*i/segs));

    for(let i=segs; i>=0; i--)

      vertex(inner*Math.cos(angle*i/segs), inner*Math.sin(angle*i/segs));

    endShape(CLOSE);

    pop();

  }

  if(this._renderer._doFill){

    push();

    noStroke();

    beginShape(TRIANGLE_STRIP);

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

      vertex(outer*Math.cos(angle*i/segs), outer*Math.sin(angle*i/segs));

      vertex(inner*Math.cos(angle*i/segs), inner*Math.sin(angle*i/segs));

    }

    endShape();

    pop();

  }

}