3D Arc

// 3d arc construction study

// engineer: jWilliamDunn, 2018.1105

// any key toggles fill/stroke mode

// 2024.0428 update to p5.js 1.9.3

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

// 2024.1214 update to p5.js 1.11.2 [thinned the stroke to 0.15]

// 2025.0201 update to p5.js 1.11.3

​

// prevent context menus

document.oncontextmenu=()=> false;

​

var easycam, angle=Math.PI/4, filler=true;

var camState = {

  distance: 120,

  center  : [46, 15, 1],

  rotation: [-0.096, 0.69, 0.548, -0.4565],

};

​

function setup() {

  createCanvas(windowWidth,windowHeight, WEBGL);

​

  perspective(PI/8, width/height, 1, 6000);

  easycam = createEasyCam({distance:450});

  // set initial camera state

  easycam.setState(camState, 1000); // animate to camState on 1 second

  easycam.state_reset = camState; // state to use on reset

  noStroke();

  fill(0,0,127);

}

​

function draw() {

  if(!easycam) return;

  background(100);

  specularMaterial(127,127,127);

  pointLight(255, 255, 255, 0, 20, 50);

  shininess(30);

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

    push();

      translate(50*Math.cos(angle*i/20), 50*Math.sin(angle*i/20));

      rotateZ(angle*i/20);

      box(2,2,20);

    pop();

  }

}

​

function keyPressed() {

  console.log(easycam.getState()); // useful for setting initial state

  filler = !filler;

  if(filler) {

    noStroke();

    fill(0,0,127);

    specularMaterial(0,0,255);

  } else {

    stroke(0);

    noFill();

    strokeWeight(0.15);

  }

}