So I'm doing some work with angles/trigonometry, but for some reason angleMode(DEGREES); does absolutely nothing. If I run angleMode(DEGREES); Math.sin(90); in the console I got the value of sin(90 radians) instead of the value for degrees.

Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis.

However, I would like to calculate the angle between a set of points other than the origin. Is there any way to do this, and if so, can I get a pointer towards the right track? Thanks in advance! :)

Problem: As you can see on the link above, my clock updates just fine ... but the pixels created in previous loop are not deleted. It's very obvious if you look at the time in text near the bottom. If you wait till the analog clock goes from 60 seconds to the next minute's first second - the previous arc is not deleted and leaves behind a circle. Please see the attached screenshot for a visual representation.

Update: I have a feeling, it might have something to do with the lack of a background on my canvas. When I add background(0); to draw, it works just fine. But I don't want a black background, I want a transparent one. Using background('rgba(0, 0, 0, 0)') does not solve this either :(

Code: GitHub repo - https://github.com/gurbuxani/time-and-tide

function setup() {
  createCanvas(800, 800);
  angleMode(DEGREES);
}

function draw() {
  translate(400, 400);
  rotate(-90);

  let hr = hour();
  let mn = minute();
  let sc = second();

  // seconds arc
  strokeWeight(2);
  stroke(255);
  noFill();
  let secondAngle = map(sc, 0, 60, 0, 360);
  arc(0, 0, 350, 350, 0, secondAngle);

  // minutes arc
  strokeWeight(4);
  stroke(255);
  let minuteAngle = map(mn, 0, 60, 0, 360);
  arc(0, 0, 280, 280, 0, minuteAngle);

  // hours arc
  strokeWeight(8);
  stroke(255);
  let hourAngle = map(hr % 12, 0, 12, 0, 360);
  arc(0, 0, 150, 150, 0, hourAngle);

  // center point
  strokeWeight(2);
  stroke(255);
  point(0, 0);

  // time in text
  rotate(90);
  fill(255);
  noStroke();
  text(hr + ':' + mn + ':' + sc, 5, 400);
}

What am I doing wrong? How can I fix this?

<3

i'm trying to do some kind of QTE game with p5.js, i have a question :

How can I check if the red line is touching the black or the white arc ?

To move the red line i'm using the rotate function so i'm not sure how i should proceed.

I think what I want is to have coordinates of everything so i could compare but the rotate function kind of prevent that.

Here's the code : https://pastebin.com/WXvGbT9g

It's my first program using p5.js so sorry if it's a stupid question.

Thanks for your help !

(sorry for my english)

import peasy.*;
PeasyCam camera;
float[] rot; 
float disx;
float disy;
float yaw,pitch,roll;
void setup(){
  size(600,400,P3D);
  disx=width*0.6;
  disy=height/10;
  camera = new PeasyCam(this, 100);
  camera.setCenterDragHandler(null);
  strokeWeight(3);
}
float [] rec;

void draw(){
 background(180);
 disx=(float)camera.getDistance()*0.86;
 disy=(float)camera.getDistance()*0.57;
 rec = new float [] {-disx,-disy,0,disx,-disy,0,disx,disy,0,-disx,disy,0};
 //rot = camera.getRotations();
 //yaw=rot[0]; pitch=rot[1]; roll=rot[2];

 if(keyPressed){
 float rotspeed=0.03;
 if(key=='p') { pitch += rotspeed; }
 if(key=='y') {   yaw += rotspeed; }
 if(key=='r') {  roll += rotspeed; }
 if(key==ENTER) {  yaw=pitch=roll=0; }
 }
 camera.setRotations(yaw,pitch,roll);

 float sinyaw,cosyaw, sinpitch,cospitch, sinroll, cosroll;
 sinyaw=sin(-yaw-HALF_PI);
 cosyaw=cos(-yaw-HALF_PI);
 sinpitch=sin(pitch-HALF_PI);
 cospitch=cos(pitch-HALF_PI);
 cosroll=cos(roll);
 sinroll=sin(roll);

 for(int i=0; i<12; i+=3){
 float x,y,z,x0,y0,z0;
 x0=x=rec[i]; y0=y=rec[i+1]; z=z0=rec[i+2];

 x=x0*cosroll-y0*sinroll;
 y=y0*cosroll+x0*sinroll;

 z=x0*cospitch;
 y*=sinpitch;

 z=y*cosyaw;
 y*=sinyaw;

 rec[i]=x; rec[i+1]=y; rec[i+2]=z;

 }

 stroke(#ff0000);
 line(0,0,0,100,0,0);
 stroke(#00ff00);
 line(0,0,0,0,100,0);
 stroke(#0000ff);
 line(0,0,0,0,0,100);

 stroke(0);
 line(rec[0],rec[1],rec[2], rec[3],rec[4],rec[5]);
 line(rec[3],rec[4],rec[5], rec[6],rec[7],rec[8]);
 line(rec[6],rec[7],rec[8], rec[9],rec[10],rec[11]);
 line(rec[9],rec[10],rec[11], rec[0],rec[1],rec[2]);
}

A bit simpler example just a rotating square and static camera, only rotating in one axis at the time.
Also just found this https://khanacademy.org/computer-programming/3d-tutorial-4/1648921303

import peasy.*;
PeasyCam camera;
float S,C,R,D;
float [] rec;
void setup(){
  size(600,400,P3D);
  camera = new PeasyCam(this, 100);
  camera.setCenterDragHandler(null);
  strokeWeight(3);
  D=30;
}
void draw(){
 background(180);
 rec = new float [] {-D,-D,0,D,-D,0,D,D,0,-D,D,0};
 camera.setRotations(0,0,0);
 R+=PI/60;
 S=sin(R);
 C=cos(R);
 for(int i=0; i<12; i+=3){
 float x,y,z,x0,y0,z0;
 x0=x=rec[i]; y0=y=rec[i+1]; z=z0=rec[i+2];
 if(frameCount%180<60){
 x=x0*C-y0*S;
 y=y0*C+x0*S;
 }
 else if(frameCount%180<120){
 z=z0*C-x0*S;
 x=x0*C+z0*S;
 }
 else{
 y=y0*C-z0*S;
 z=z0*C+y0*S;
 }
 rec[i]=x; rec[i+1]=y; rec[i+2]=z;
 }
 stroke(#ff0000);
 line(0,0,0,100,0,0);
 stroke(#00ff00);
 line(0,0,0,0,100,0);
 stroke(#0000ff);
 line(0,0,0,0,0,100);
 stroke(0);
 line(rec[0],rec[1],rec[2], rec[3],rec[4],rec[5]);
 line(rec[3],rec[4],rec[5], rec[6],rec[7],rec[8]);
 line(rec[6],rec[7],rec[8], rec[9],rec[10],rec[11]);
 line(rec[9],rec[10],rec[11], rec[0],rec[1],rec[2]);
}

I don't really know if there's any huge advantage of using the createVector() function, but I use vectors regularly to shorten my code, so I'm curious.

var table;
  var i;
  var j;
  var cellValue;
  var label;
  var test; 

  function preload() {
    matrix = loadTable("dataLayer2matrix.csv","csv")
    labels = loadTable("dataLayer2labels.csv","csv")
    test = matrix
  }

  function setup() {
    createCanvas(1500,1500)
    noStroke()
    fill(0,0,255,10)

   angleMode(DEGREES)
   background(255,255,255)
   matrixStartX = 200
   matrixStartY = 250
   var matrixRows = matrix.getRows()
   var matrixSize = matrixRows.length

   // Experiment with grid
   fill(75, 75, 75, 50)
   for (r = 0; r <= matrixSize; r++) {
   rect(matrixStartX , matrixStartY + r * 20 - 1 , 20 * matrixSize, 1)
   rect(matrixStartX + r * 20 - 1 , matrixStartY, 1, 20 * matrixSize)
   }

   // Draw matrix
   for (var mr = 0; mr < matrixSize; mr++) {
       for (var mc = 0; mc < matrixSize; mc++) {
         cellValue = matrixRows[mr].getNum(mc)
         fill(49,130,189,cellValue*10)
         rect(mc * 20 + matrixStartX, mr * 20 + matrixStartY, 19 ,19)
       }
   }

   // Labels - horizontal
   fill(75, 75, 75, 255)
   labelsRow = labels.getRows()
   for (mc = 0; mc < matrixSize; mc++) {
       label = labelsRow[0].getString(mc)
       text(label, 10, mc*20+matrixStartY + 15)
   }

   // Labels - vertical
   push()
   translate(matrixStartX + 15, matrixStartY - 15)
   rotate(-90)
   for (mc = 0; mc < matrixSize; mc++) {
       label = labelsRow[0].getString(mc)
       text(label, 0, mc*20)
   }
   pop() 

The resulting data matrix looks like this http://imgur.com/55jkRiJ . I have no idea where to start. This code does not have any attempted implementation of the tooltip. Just the code that generates the matrix so that maybe someone can point me in the right direction.