Indicazione degli angoli

Per impostazione predefinita, gli angoli vengono espressi in radianti, da 0 a 6,283185307179586 (2π).

// height=400
let semiLarghezza;
let semiAltezza;
let raggioMax;
let raggioAssi;
let raggio;
let radianti = 0;

function setup() {
  createCanvas(windowWidth, 400);
  colorMode(HSL);
  textAlign(CENTER,CENTER);
  //textSize(14);
  //textSize(18);
  setupResizable();
  //cursor(HAND);
  cursor(MOVE);
}  

function windowResized() {
    resizeCanvas(windowWidth, 400);
    setupResizable();
}

function setupResizable() {
    semiLarghezza = width/2;
    semiAltezza = height/2;
    //raggio = min(width,height)*0.3;
    raggioMax = min(width,height)/2;
    raggioAssi = raggioMax*0.8;
    raggio = raggioMax*0.6;
    textSize(raggioMax*0.085)
}

function draw() {
//  let radianti = frameCount / 200;
  if (mouseIsPressed) {
    let dx = mouseX-semiLarghezza;
    let dy = mouseY-semiAltezza;
    radianti = (atan2(dy, dx) + TWO_PI) % TWO_PI;

  } else {
    radianti += 0.005;
  }
  let coseno = cos(radianti)*raggio;
  let seno = sin(radianti)*raggio;

  background(255);
  translate(semiLarghezza,semiAltezza);

  strokeWeight(1);

  // assi cartesiani
  stroke(80);
  //line(-semiLarghezza,0,semiLarghezza,0);
  //line(0,-semiAltezza,0,semiAltezza);
  line(-raggioAssi,0,raggioAssi,0);
  line(0,-raggioAssi,0,raggioAssi);

  // proiezioni
  //stroke(90);
  //line(coseno,seno,coseno,0);
  //line(coseno,seno,0,seno);

  // radianti
  noStroke();
  fill(0,100,50,0.05);
  arc( 0,0, raggio*2,raggio*2, 0,radianti );

  // punto
//  fill(80);
//  circle(coseno,seno,7);

  strokeWeight(5);

  // segmento
  stroke(40);
  line(0,0,coseno,seno);

  // coseno
  //stroke(100,90,45);
  //line(0,0,coseno,0);

  // seno
  //stroke(220,100,55);
  //line(0,0,0,seno);

  // testi

  //stroke(100,0.5);
  stroke(100);
  strokeWeight(2);
  textStyle(BOLD);

  fill(35);
  text( "3.14\n(π)", -raggioAssi*1.1, 0 );
  text( "6.28\n(2π)", raggioAssi*1.1, -raggioAssi*0.17 );
  text( " 0", raggioAssi*1.1, raggioAssi*0.085 );
  text( "4.71", 0, -raggioAssi );
  text( "1.57", 0, raggioAssi );

  //let semiRadianti = (radianti % TWO_PI) / 2;
  let radiantiTxt = (radianti % TWO_PI);
  let raggioTxt = raggio*1.175;

  fill(0,100,50);
  //text( nfc(radianti % TWO_PI, 2), cos(semiRadianti)*raggio/2, sin(semiRadianti)*raggio/2 );
  text( nfc(radianti % TWO_PI, 2), cos(radiantiTxt)*raggioTxt, sin(radiantiTxt)*raggioTxt );

  //fill(100,90,40);
  //text( nfc(cos(radianti)*1.01,2), coseno, -10 );

  //fill(220,100,55);
  //text( nfc(sin(radianti)*1.01,2), 21, seno );  
}

Gli angoli possono essere indicati in gradi, da 0 a 360, inserendo prima l'istruzione angleMode(DEGREES).