09-28-2021 13:52 - edited 09-29-2021 05:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-28-2021 13:52 - edited 09-29-2021 05:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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>
Answered! Go to the Best Answer.

Accepted Solutions
08-10-2022 07:22 - edited 08-10-2022 07:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-10-2022 07:22 - edited 08-10-2022 07:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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!

09-28-2021 22:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


09-28-2021 22:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Did you really mean?
if (image1.x < 60 && image1.x > 20 && image2.y > 200)
Author | ch, passion for improvement.

09-28-2021 22:10
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


09-28-2021 22:10
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.
Gondwana Software

09-29-2021 05:09
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-29-2021 05:09
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@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");
}
});

09-29-2021 05:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


09-29-2021 05:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@Sagrawal8 - the IF seems odd, can image1.x ever be both < 60 AND > 20 ?
Author | ch, passion for improvement.

09-29-2021 06:25 - edited 09-29-2021 06:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-29-2021 06:25 - edited 09-29-2021 06:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@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.

09-29-2021 06:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


09-29-2021 06:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@Sagrawal8- perhaps you need OR not AND?
Author | ch, passion for improvement.

09-29-2021 06:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-29-2021 06:39
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@Guy_ I tried that and that always consoled true.

09-30-2021 05:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-30-2021 05:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?

08-09-2022 08:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 08:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@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.

08-09-2022 09:51
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 09:51
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

08-09-2022 10:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 10:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@SunsetRunner Yeah, I thought that might have been the issue too, but after fiddling around with it, I had no luck.

08-09-2022 11:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 11:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
So you can't even log the values? Or is it just your if statement not logging?

08-09-2022 11:27 - edited 08-10-2022 07:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 11:27 - edited 08-10-2022 07:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@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.

08-09-2022 12:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


08-09-2022 12:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.
Author | ch, passion for improvement.

08-09-2022 12:55 - edited 08-09-2022 13:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 12:55 - edited 08-09-2022 13:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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>

08-09-2022 13:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 13:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@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.

08-09-2022 13:33
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 13:33
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thanks, @SunsetRunner, but are you actually able to log the coordinates using the method you described?

08-09-2022 13:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 13:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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

08-09-2022 13:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 13:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@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.

