Do hitboxes rotate

[Desmond]

when I play the line stops rotating before it hits the square.
My Project10-9-2022_15-56-19.wick (1.8 KB)

[Jovanny]

In green you will see your collision box… The collision box of the line is hitting the black square…

[Desmond]

how do I see the hitbox like that / is there a way to make the hitbox rotate with the line?

[Jovanny]

You can’t see it, I just draw it, but that is what is happening… it is doing the collision like that. I think @Hamzah_Alani knows some tricks… but you can put some invisible tiny boxes inside the line clip… then if you use 1.19.4 (https://www.wickeditor.com/test/) you can test hits against those child tiny boxes…

[Desmond]

I was already using 1.19.4

[Jovanny]

For example…

My Project10-9-2022_18-10-24.wick (2.0 KB)

[Hamzah_Alani]

@Jovanny

I think @Hamzah_Al_Ani knows some tricks…

I think I might.

In this case, the origin point (marked with a red dot) is not the center of the object, so that’s something to take into account.

The width & height of the rotating object aren’t really changing, so we’ll need to focus on the rotation of the object to determine whether or not it’s hitting the box.

Now, I’d be lying if I say I’m great at trigonometry , but there is code that has been shared on the forums to have an object rotate towards the cursor or a specific point, I can reverse that code to see if the object is rotated towards a point, or in this case, the edge of the clip.

That’s how I made this function:

this.withinPoint = function(x,y,a){
    let dx = (this.x - x);
    let dy = (this.y - y);
    window.R=(Math.atan(dy/dx)*180/Math.PI)-(dx>0?0:180);
    R=Math.round(R/a)*a;
    return (Math.round(this.rotation/a)*a===R)?true:false;
};

Extra explanation

While working on this, it actually all started coming back to me from geometry class… atan is the inverse of tan. dx & dy are set to the difference in x and y.

In trigonometry, you’d refer to the dx as the “a” and dy as the “o.” To set atan(number) (atan=arctan, the inverse of tan) to the Angle in the drawing above, you’d need the number to be equal to the o divided by the a. We then multiply the answer by 180/pi to convert it into degrees. Knowing this, I set the variable, R, to the angle that the line would need to be at in order to be “touching” the box.

I just realized that there is an extra step I needed to add, and that is to make sure the line is long enough to be touching the point. Keep in mind, the width and height of the actual line don’t change, so the width of the line by default is how long it can reach. To know how far away the edge is from the line, we can use the pythangeroem theorem (a formula that I use often yet can’t remember how to spell). Here’s the idea:

if(line.width>=Math.sqrt(Math.pow(point.x-line.x,2)+Math.pow(point.y-line.y,2))){
// the line can reach and touch the object
}else{
// the line can't touch the object from its current position
}

---

Above is the simple version of the “this.withinPoint” function, with some adjustments I made a better version to use in this scenario.

this.withinPoint = function(obj,a){
    var pointsArr = obj.activeFrame._children[0].json[1].segments;
    let tx=this.x;
    let ty=this.y;
    let ox=obj.x;
    let oy=obj.y;
    var points=[];
    var limit=this.width;
    pointsArr.forEach(function(value,index){
        let dx=tx-(value[0]+ox);
        let dy=ty-(value[1]+oy);
        if(Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2))<=limit)
        points.push(Math.round(((Math.atan(dy/dx)*180/Math.PI)-(dx>0?0:180))/a)*a);
    });
    return points.includes((Math.round(this.rotation/a)*a));
};

@Jovanny’s method does work, but I think what makes the function above better is that you can adjust the shape in all types of ways, and it’ll return true if the line touches a segment point.

VISUAL EXAMPLES + RESULTS

True

True

False

True

True

False

I didn’t code it to handle any more complicated shapes though.

Here’s the project I used for testing:
My Project.wick (7.3 KB)

@Desmond

when I play the line stops rotating before it hits the square.
My Project10-9-2022_15-56-19.wick (1.8 KB)

Here’s a fixed version of your project using my strategy:
My Project.wick (2.1 KB)

It’s amazing how much could go into making an object rotate and pause at a point.
It’s simpler than it looks once you understand it, which is why I like explaining my process.
I hope this helps a bit, good luck with your project :)

[Desmond]

I don’t understand why yours and mine are different. I tried the same thing but it didn’t work.(I use wick editor 1.19.4)

[Desmond]

I wish I could understand

[Hamzah_Alani]

@Desmond

I wish I could understand

That’s alright, when I first started using Wick all I knew was “gotoAndStop(number)”
After some more experience and practice, you’ll start understanding it without realizing :)

Until then, as long as you know what the code does, you won’t have to worry about how it works

Also, did my method work?

[Desmond]

It worked.