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>  

[SunsetRunner]

I used exactly what I wrote in my previous post.
And for checking more often than per second you won't do it in the tick,
but in a separate function.

setinterval(function () {
//your code
}, 500)
Would run all 500ms eG

Just make sure it only runs when needed.

[Sagrawal8]

So @SunsetRunner would I do:

setinterval(function () {
  console.log(groupName.groupTransform.translate.x) // x coord
  console.log(groupName.groupTransform.translate.y) // y coord
  // whatever is needed to be done with these values
}, 500)

 And call that whenever the game isn't over?

[SunsetRunner]

Oh "groupName" means the id of your group.

In js you need to get the group by document.getElementById() instead of getting the images.

Place your images in the group at 0,0, so when the group moves to 200 the image will also be at 200. 

And I don't know the logic if your game, but you definitely should run the setInterval only when the screen is on.

If it were in ontick, it would be stopped automatically,  but outside it would run on....

[Gondwana]

I'd probably use maths to calculate when the objects would touch, and set a timeout for then. It wouldn't be exact, but could be more accurate than periodic polling, and less CPU-intensive. If your animations are linear (ie, no easing), the maths should be fairly simple.

[Sagrawal8]

How exactly would I go about doing so, @Gondwana? Also, the animations are supposed to have some easing, but it is not a necessity.

[SunsetRunner]

Absolutely yes

[Gondwana]

Work out the maths to calculate when the objects would touch.

Code an event listener (touch/mouse) to detect when the animation starts.

In that event listener, code the maths and set a timeout to expire at the calculated time.

[Sagrawal8]

@SunsetRunner Ok, thanks for the clarification.

---

@SunsetRunner wrote:

Oh "groupName" means the id of your group.

In js you need to get the group by document.getElementById() instead of getting the images.

Place your images in the group at 0,0, so when the group moves to 200 the image will also be at 200. 

[Sagrawal8]

Thanks to everyone who helped me with this. I finally solved it using a modified version @SunsetRunner's code!

[Guy_]

@Sagrawal8 - I seem to recall the first time you use X y in your js it is not available from the gui, but once assigned in the js it is then available.

[SunsetRunner]

Then you can only log the assigned value, but not the animated one.

I had tried that first when I played with that 🙂

[Sagrawal8]

@Guy_ That's not exactly true. It was more so that it would only register in the index.js after it had been interacted with from the index.gui.

---

@Guy_ wrote:

I seem to recall the first time you use X y in your js it is not available from the gui, but once assigned in the js it is then available.

---

[Sagrawal8]

@SunsetRunner Exactly, which is why I ended up scrapping the animation and just using move x/y coordinate commands.

---

@SunsetRunner wrote:

Then you can only log the assigned value, but not the animated one.

I had tried that first when I played with that 🙂

---

[SunsetRunner]

Did you now skip all SVG animation?

You don't use groupTransform after I found this nice workaround???

😭

[Sagrawal8 · Accepted solution]

Thanks to the help of @SunsetRunner, this is my final code:

index.js:

import * as document from "document";

const image1 = document.getElementById("image1");
const image2 = document.getElementById("image2");
var image1Instance = document.getElementById("image1Instance");
var image1Group = image1Instance.getElementById("image1Group");
var image2Instance = document.getElementById("image2Instance");
var image2Group = image2Instance.getElementById("image2Group");
var gameOver = 0

image2Instance.animate("enable");

setInterval(function () {
  if (gameOver === 0) {
    let image1Coords = image1.getBBox();
    let image2Coords = image2.getBBox();
    if (image2Coords.x < 60 && image1Coords.y > 200) {
      gameOver = 1;    
    }
  }
  if (gameOver === 1) {
    console.log("Game Over!");
  } 
}, 250);

image1.addEventListener("click", (evt) => {
  if (gameOver === 0) { 
    image1Group.groupTransform.translate.y = -30;   
    setTimeout(() => {
      image1Group.groupTransform.translate.y = 30;
    }, 700);
  } 
});

index.gui:

<defs>
  <symbol id="image2HRef">
    <g id="image2Group" >
      <image id="image2" x="200" y="200" width="25%" height="25%" href="image2.png" pointer-events="visible" />
      <animateTransform attributeType="translate" begin="enable" from="250,0" to="0,0" dur="1.5" repeatCount = "indefinite" />
    </g>  
  </symbol>
</defs>  
<svg width="100%" height="100%">
  <use id="image2Instance" href="#image2HRef" width="100%" height="100%" />
</svg>
  
<defs>
  <symbol id="image1HRef">
    <g id="image1Group">
      <image id="image1" x="20" y="200" width="25%" height="25%" href="image1.png" pointer-events="visible" />        
    </g>  
  </symbol>
</defs>  
<svg width="100%" height="100%">
  <use id="image1Instance" href="#image1HRef" width="100%" height="100%" />
</svg>

It appears that I have switched images 1 & 2 around from my original post ... Not sure how that happened!

[SunsetRunner]

Hmmm... I wonder why you're loading such a bunch of elements.

You could do all this only initialisizing the 2 groups and checking their coordinates (which would represent those of the contained image, if you set this to 0,0).

But you might have a reason to do it this way 🙂

[Sagrawal8]

Not all of it, @SunsetRunner. See the best answer for the code.

---

@SunsetRunner wrote:

Did you now skip all SVG animation?

You don't use groupTransform after I found this nice workaround???

---

[SunsetRunner]

Your code is the best answer for solving your issue? 😁

[Sagrawal8]

You are probably right, @SunsetRunner, but having all those elements for each group is the way listed in the docs, which is why I said earlier that I used a modified version of your code.

---

@SunsetRunner wrote:

Hmmm... I wonder why you're loading such a bunch of elements.

You could do all this only initialisizing the 2 groups and checking their coordinates (which would represent those of the contained image, if you set this to 0,0).

But you might have a reason to do it this way 🙂

---

[Sagrawal8]

Yes, only because if someone in the future were to look at this thread, it would be easier to compile everyone's thoughts. If you think that one of your posts sums up everything, I will mark that as the best answer.

---

@SunsetRunner wrote:

Your code is the best answer for solving your issue? 😁

---