Check colision

garwan50

Hello,

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)

GoToLoop

Perhaps it'd be much easier if you simply checked line()'s current angle, whether it's within arc()'s collision angle range. :-?

garwan50

Hello, thanks for your answer.

How can i check the current line's angle ?

edit : with the value of rotate probably ?

GoToLoop

• According to rotate(frameCount*3);, line()'s current angle is frameCount*3.
• If you get its remaining w/ operator %: const ang = frameCount*3 % 360;
• You're gonna get an ang between 0 - 360 range.
• Now you can determine "collision" w/: if (ang >= ANG_BEGIN && ang <= ANG_END) {}
• Where ANG_BEGIN & ANG_END are const variables representing collision's angle range. *-:)

kfrajer

http://p5js.sketchpad.cc/sp/pad/view/mofHErR274/latest

Let's check this out:

    stroke(color(173, 6, 6)); // red
    strokeWeight(4);    
    var angle=(frameCount*3)%360;
    angle=angle-90;
    if(angle>x && angle<y){
      stroke(color(250,250, 6));  //Yellow    
    }
    rotate(angle+90);
    line(0, -65, 0, -90); // red dot

When you use frameCount, this number will always increase without control. You need to use the module operator to keep it within bounds. In your case, you are only interested, for the sake of this exercise, in values between 0 and 360. To solve this problem, I used:

var angle=(frameCount*3)%360; //Values always within 0 and 359

The P5.js doesn't have a reference of module, but the Processing website does: https://processing.org/reference/modulo.html and although this is jave, no js, the concept explain there still applies.

Now, you draw your line like this: line(0, -65, 0, -90); so you are drawing this line along the Y axis. This is inconvenient because angles are usually measured with respect to the X axis. In other words, the starting position of your line is offset by a value of 90 degrees. This is why I apply the correction of 90 in the calculation above.

Last part, when the angle is between x and y, then it makes it yellow. This is the condition you are after.

By the way, x and y are usually used to denote coordinates. You can use greek letters like phi, theta and gamma to denote angles. It makes easier to understand your code.

Final comment, if I aligned the red line with the positive X axis, the code is more clear. Check below.

Kf

    var angle=(frameCount*3)%360;
    if(angle>x && angle<y){
      //noLoop();
      stroke(color(250,250, 6))    
    }
    rotate(angle);
    line( 65,0,90,0); // red dot

Kf

garwan50

Hey,

thank you for your answers, and thanks for the details, my problem is solved.

i appreciate it, thank you.