Bull's Eye 3D - OpenProcessing

mySketch
xxxxxxxxxx
 
const NB = 50;
const angles = new Array(NB).fill(0);
let GAP = 4;
let rX = 0, rY = 0, drX = 0, drY = 0;
let mouseDownX, mouseDownY;
let isDragging = false;
let deltaAngle = 0;
let NB_FACES = 5;
const MAX_R = 180;
​
function setup() {
  createCanvas(500, 500, WEBGL);
  setAttributes('antialias', true);
  rectMode(CENTER);
}
​
function draw() {
  background(240);
  rotateX(rX + drX);
  rotateY(rY + drY);
  for (let i = 1; i < NB; i ++) {
    angles[i] += (angles[i-1] - angles[i] + deltaAngle) * .42;
  }
​
  const da = TWO_PI / NB_FACES;
  for (let i = 1; i < NB; i ++) {
    const prevAngle = angles[i-1];
    const currAngle = angles[i];
    const prevZ = GAP * (NB - i);
    const currZ = GAP * (NB - i - 1);
    const prevR = map(i - 1, 0, NB-1, MAX_R / (NB-1), MAX_R);
    const currR = map(i, 0, NB-1, MAX_R / (NB-1), MAX_R);
​
    fill(lerpColor(color('orange'), color(0, 30), i/NB));
    for(let k = 0; k < NB_FACES; k ++){
      beginShape();
      vertex(prevR * cos(prevAngle + k * da), prevR * sin(prevAngle + k * da), prevZ);
      vertex(prevR * cos(prevAngle + (k + 1) * da), prevR * sin(prevAngle + (k + 1) * da), prevZ);
      vertex(currR * cos(currAngle + (k + 1) * da), currR * sin(currAngle + (k + 1) * da), currZ);
      vertex(currR * cos(currAngle + k * da), currR * sin(currAngle + k * da), currZ);
      endShape();
    }
    for(let k = 0; k < NB_FACES; k ++){
      beginShape();
      vertex(prevR * cos(prevAngle + k * da), prevR * sin(prevAngle + k * da), -prevZ);
      vertex(prevR * cos(prevAngle + (k + 1) * da), prevR * sin(prevAngle + (k + 1) * da), -prevZ);
      vertex(currR * cos(currAngle + (k + 1) * da), currR * sin(currAngle + (k + 1) * da), -currZ);
      vertex(currR * cos(currAngle + k * da), currR * sin(currAngle + k * da), -currZ);
      endShape();
    }
  }
}
​
function mouseMoved(){    
  if(!isDragging){
    angles[0] = map(mouseX, 0, width, PI, -PI);
    deltaAngle = map(mouseY, 0, height, -.1, .1);
  }
}
​
function mousePressed(){
  mouseDownX = mouseX;
  mouseDownY = mouseY;
  isDragging = true;
}
​
function mouseReleased(){
  rX += drX;
  rY += drY;
  drX = 0;
  drY = 0;
  isDragging = false;
}
​
function mouseDragged(){
  drY = map(mouseX - mouseDownX, -width, width, -PI, PI);
  drX = map(mouseY - mouseDownY, -height, height, PI, -PI);
}
​
function keyPressed(e){
  switch(e.keyCode){
    case 37://left
      NB_FACES = max(3, NB_FACES - 1);
    break;
    case 39://right
      NB_FACES++;
    break;
    case 38://up
      GAP *= 1.1;
    break;
    case 40://down
      GAP *= .9;
    break;
  }
}
​
​
​
​
​
​
​
​
​
​
​
​