Two Objects Not Registering That They Are Touching Each Other

[Sagrawal8]

I'm creating an app that checks if two objects are touching by looking at their x and y coordinates and seeing if they are within a certain range using if else statements. The code I have ensures that they will be inside the specified range unless the screen is clicked in time. However, the code below does not seem to register if the objects are with the specified range when they are not clicked in time.

In the index.js file:

import * as document from "document";

let image1 = document.getElementById("image1");
let image2 = document.getElementById("image2");

if (image1.x < 60 && image1.x > 20 && image2.y > 200) {
  console.log("touching"); 
  } else {
  console.log("not touching");
  }

In the index.gui file:

<image id="image2" x="20" y="200" width="25%" height="25%" href="image2.png" pointer-events="visible" >
  <animate attributeName="y" begin="mousedown" from="65%" to="45%" dur="1"/>
  <animate attributeName="y" begin="mousedown+1" from="45%" to="65%" dur="1"/>
</image>  
<image id="image1" x="200" y="200" width="25%" height="25%" href="image1.png" pointer-events="visible" >
   <animate attributeName="x" begin="load" from="95%" to="5%" dur="2" repeatCount = "indefinite"/>
</image>  

[Guy_]

Did you really mean?

if (image1.x < 60 && image1.x > 20 && image2.y > 200) 

[Gondwana]

That line of code is only going to be executed once (at startup). I don't know if JS x and y are updated during SVG animations.

[Sagrawal8]

@Guy_  Isn't that the code I have? 

@Gondwana The code in the index.js file is inside a ontick() handler that ticks every second. Every second, it is consoling "false." I would attach a screenshot if I knew how.

clock.granularity = "seconds";
clock.addEventListener("tick", (evt) => {
  let image1 = document.getElementById("image1");
  let image2 = document.getElementById("image2");
  if (image1.x < 60 && image1.x > 20 && image2.y > 200) {
    console.log("touching"); 
    } else {
    console.log("not touching");
    }
});

[Guy_]

@Sagrawal8  - the IF seems odd, can image1.x ever be both < 60 AND > 20 ?

[Sagrawal8]

@Guy_ - image1.x could be both less than 60 and greater than 20 because the image is sliding across the screen, so for a short time, its x value is between 20 and 60.

[Guy_]

@Sagrawal8- perhaps you need OR not AND?

[Sagrawal8]

@Guy_ I tried that and that always consoled true.

[Sagrawal8]

In order to figure out why my code was always consoling false, I consoled the values of the image1.x and image2.y. It appears the index.js file was not updating their values. image1.x always consoled 0, and image2.y always consoled 200 until it was clicked, and then it consoled 0. @JonFitbit Do you anyway to fix this?

[Sagrawal8]

@Gondwana You never seem to have responded to me regarding this thread, which has been dormant for a while. Maybe image1.x and image2.y is not the way to read their x/y coordinates, respectively? Also, could it be that because the animation is taking place in the index.gui it is registering properly? Thanks in advance.

[SunsetRunner]

A wild guess:

It might be possible that you can't log the coordinates as you had set to % in your animation.

Perhaps try with integers instead.

[Sagrawal8]

@SunsetRunner Yeah, I thought that might have been the issue too, but after fiddling around with it, I had no luck.

[SunsetRunner]

So you can't even log the values? Or is it just your if statement not logging?

[Sagrawal8]

@SunsetRunner Whether I specify pixels or just use percentages makes no difference regarding what is consoled. See this post from about a year ago:

In order to figure out why my code was always consoling false, I consoled the values of the image1.x and image2.y. It appears the index.js file was not updating their values. image1.x always consoled 0, and image2.y always consoled 200 until it was clicked, and then it consoled 0. 

---

[Guy_]

Hi @Sagrawal8 - Don't know your setup but have you tried setting the x y values in the code - may be after that it will be accessible.

[SunsetRunner]

I tested a bit out of curiosity. It seems actually that the SVG <animate/> can't be logged in js.
But I found a workaround to use in SVG:
You can wrap your image in a group, then do a animateTransform translate inside that group.
You can then console.log the coordinates like
groupName.groupTransform.translate.x (or y)

<g id="anim1">
        <image id="image1" y="0" width="25%" height="25%" href="image1.png" pointer-events="visible"/>
        <animateTransform attributeType="translate" from="200,250" to="0,250" easing="linear"  begin="load"  dur="2" repeatCount="indefinite"/>
    </g>

[Sagrawal8]

@Guy_ The coordinates are set in the index.gui file, but it seems that it is not registering in the index.js file. Everything regarding the set-up is in the original post.

[Sagrawal8]

Thanks, @SunsetRunner, but are you actually able to log the coordinates using the method you described?

[SunsetRunner]

Yes, definitively. I tested that in running code.
But another problem in your usecase might be, that you only check at each
full second. Perhaps you need to do so in a setInterval < 1000ms

[Sagrawal8]

@SunsetRunner So what code did you use to log the coordinates? Also, how would I set the interval to be less than 1000ms? The smallest tick possible is a second based on the Fitbit docs.