Subclip coordinates relative to canvas

Feature Suggestions
#1

Please complete the following questions!

Has this feature been suggested before?
no

Is your feature request related to a problem? Please describe.
I’m making a joystick thingy (kind of previewed in the topic “Text doesn’t reset (code)”), and I want to find the x and y magnitude of the joystick. the way i do it, it is kind of hard to do so without a ton of trigonometry since i have this subclip and it gets annoying.

Describe the solution you’d like
having a native way to find a subclip’s x relative to the canvas would be super helpful.

Describe alternatives you’ve considered
i could use trigonometry, but that would be painful to debug.

Additional context
here, I want to find the coordinates of “stick”. it is a sublip inside “joystick”. if I find joystick.stick.y, it gives stick’s y relative to joystick. (which is helpful in one place.) but i want to find stick’s x and y relative to the canvas.
joystick1-14-2021_19-55-19.wick (2.5 KB)

#2

I’m not sure I understood correctly

stick.X (relative to canvas) is joystick.x+ joystick.stick.x
and
stick.Y (relative to canvas) is joystick.y+ joystick.stick.y

isnt it?

#3

yeah you can just do

joystick.x + joystick.stick.x
joystick.y + joystick.stick.y

and actually if you want to find the magnitude of the joystick then local coordinates would be much more useful, since if it’s at rest it would be at (0, 0), making the magnitude 0. if you have global coordinates then it would probably be at something like (80, 416) making the magnitude 423.62 at rest, which would be less useful. you would have to subtract the joystick’s global position from the position to get (0, 0) at rest rendering getting the subclip’s position relative to the canvas useless. to find the magnitude you use Math.sqrt(x * x + y * y);

#4

I’m not sure, but I think what you want to do is find the subclips parents position.

To do that, you can refer to the clips parent as “parent” from inside the subclip

For example, go inside of “joystick,” and write this in the default script:

alert(parent.x);

The expected value would be 299.9999… or 300 because that’s the x value of the subclips original clip in the canvas

#5

it would be an easy task if it wasn’t for the fact that joystick rotates all 360 degrees.

otherwise, @blurredPixels’ and @pumpkinhead’s solution would be sufficient.

#6

it would be useful to see this joystick project but if I undestand correctly you may use a clip for your rotating joystick nested in a clip to get coordinates from

#7

i put it in the first post.

i rotate joystick toward the mouse and move stick (inside joystick) to make it reach the mouse. it’s the same result as moving joystick’s x and y to the mouse in most cases, but it allows me to set a maximum of where the joystick reaches (in an easy way).

#8

your joystick seems to be working fine, and i find it interesting how you made the joystick move (by setting the stick’s y and then rotating it). if i made a joystick, i would have normalized the joystick offset (making its magnitude 1), then multiply it by the capped distance.

but there’s one problem i have with the code:

this.mouseDist = Math.sqrt(Math.pow(Math.abs(joystick.x - mouseX), 2) + Math.pow(Math.abs(joystick.y - mouseY), 2));

you don’t need to get the absolute value, since because you’ll be squaring the difference, the result will always be a positive number. also you can use n ** 2 to square it. (if you’re worried about compatibility, the exponent operator was added in 2016 and the only browser that doesn’t support that now is internet explorer)

1 Like
#9

the problem with the x and y is that once you hold the joystick beyond the maximum, the numbers still follow the mouse even when it should be capped.

#10

here’s code that i wrote that fixes this problem:

//make stick follow mouse
this.x = mouseX - parent.x;
this.y = mouseY - parent.y;

//get distance from center
var magn = Math.sqrt(this.x * this.x + this.y * this.y);

//if distance > max distance
if (magn > this.limit) {
    //normalize position (so magnitude = 1) by dividing components by magnitude
    //then multiply by max distance to get it to the edge
    this.x = this.x / magn * this.limit;
    this.y = this.y / magn * this.limit;
}
1 Like