Radianti, coseni e seni

L'operazione più complessa rimane quindi quella di calcolare le coordinate x e y dei vertici una volta ottenuti gli angoli corrispondenti. Per farlo si possono usare i valori di coseno e seno di ogni angolo.

// height=400
let semiLarghezza;
let semiAltezza;
let raggio;
let mostraValori = false;

function setup() {
  createCanvas(windowWidth, 400);
  colorMode(HSL);
  textAlign(CENTER,CENTER);
  textSize(14);
  semiLarghezza = width/2;
  semiAltezza = height/2;
  raggio = min(width,height)*0.4;
  cursor(HAND);
}  

function windowResized() {
    resizeCanvas(windowWidth, 400);
    semiLarghezza = width/2;
    semiAltezza = height/2;
    raggio = min(width,height)*0.4;
}

function draw() {
  let radianti = frameCount / 200;
  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);

  // 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(3);

  // segmento
  stroke(80);
  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);
  strokeWeight(2);

  fill(70);
  text( "-x", -semiLarghezza+15, -10 );
  text( "+x", semiLarghezza-15, -10 );
  text( "-y", 15, -semiAltezza+10 );
  text( "+y", 15, semiAltezza-10 );

  let semiRadianti = (radianti % TWO_PI) / 2;
  if (mostraValori) {

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

    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 );  

  } else {

    fill(0,100,50);
    text( "rad", cos(semiRadianti)*raggio/2, sin(semiRadianti)*raggio/2 );

    fill(100,90,40);
    text( "cos", coseno, -10 );

    fill(220,100,55);
    text( "sin", 15, seno );
  }
}

function mouseClicked() {
  mostraValori = !mostraValori;
}

Ipotizzando un segmento (grigio in figura):

il coseno di rad corrisponde alla coordinata x della seconda estremità del segmento

il seno di rad corrisponde alla coordinata y della seconda estremità del segmento

Cliccare sulla figura per visualizzare i valori numerici corrispondenti.

Approfondimenti: