Simplify JavaScript collision detection with offset
up vote
0
down vote
favorite
I am working on a background project that is a little interactive. Now I am using some collision detection to draw some lines and stuff.
The code I have works great but it is very bulky and hard to read.
if (background.allPixels[i].location.x - drawLineBetweenPixelRange < background.allPixels[j].location.x + background.allPixels[j].width &&
background.allPixels[i].location.x + background.allPixels[i].width + drawLineBetweenPixelRange > background.allPixels[j].location.x &&
background.allPixels[i].location.y - drawLineBetweenPixelRange < background.allPixels[j].location.y + background.allPixels[j].height &&
background.allPixels[i].location.y + background.allPixels[i].height + drawLineBetweenPixelRange > background.allPixels[j].location.y)
It comes down to running this for the x and y coordinates:
var result = (x - a < y + b) && (x + b + a > y)
Can this be simplified?
I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
javascript collision
edited Dec 11 at 17:41
200_success
128k15149412
asked Nov 10 at 1:36
JanWillem Huising
312
add a comment |
up vote
0
down vote
favorite
I am working on a background project that is a little interactive. Now I am using some collision detection to draw some lines and stuff.
The code I have works great but it is very bulky and hard to read.
if (background.allPixels[i].location.x - drawLineBetweenPixelRange < background.allPixels[j].location.x + background.allPixels[j].width &&
background.allPixels[i].location.x + background.allPixels[i].width + drawLineBetweenPixelRange > background.allPixels[j].location.x &&
background.allPixels[i].location.y - drawLineBetweenPixelRange < background.allPixels[j].location.y + background.allPixels[j].height &&
background.allPixels[i].location.y + background.allPixels[i].height + drawLineBetweenPixelRange > background.allPixels[j].location.y)
It comes down to running this for the x and y coordinates:
var result = (x - a < y + b) && (x + b + a > y)
Can this be simplified?
I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
javascript collision
edited Dec 11 at 17:41
200_success
128k15149412
asked Nov 10 at 1:36
JanWillem Huising
312
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am working on a background project that is a little interactive. Now I am using some collision detection to draw some lines and stuff.
The code I have works great but it is very bulky and hard to read.
if (background.allPixels[i].location.x - drawLineBetweenPixelRange < background.allPixels[j].location.x + background.allPixels[j].width &&
background.allPixels[i].location.x + background.allPixels[i].width + drawLineBetweenPixelRange > background.allPixels[j].location.x &&
background.allPixels[i].location.y - drawLineBetweenPixelRange < background.allPixels[j].location.y + background.allPixels[j].height &&
background.allPixels[i].location.y + background.allPixels[i].height + drawLineBetweenPixelRange > background.allPixels[j].location.y)
It comes down to running this for the x and y coordinates:
var result = (x - a < y + b) && (x + b + a > y)
Can this be simplified?
I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
javascript collision
edited Dec 11 at 17:41
200_success
128k15149412
asked Nov 10 at 1:36
JanWillem Huising
312
I am working on a background project that is a little interactive. Now I am using some collision detection to draw some lines and stuff.
The code I have works great but it is very bulky and hard to read.
if (background.allPixels[i].location.x - drawLineBetweenPixelRange < background.allPixels[j].location.x + background.allPixels[j].width &&
background.allPixels[i].location.x + background.allPixels[i].width + drawLineBetweenPixelRange > background.allPixels[j].location.x &&
background.allPixels[i].location.y - drawLineBetweenPixelRange < background.allPixels[j].location.y + background.allPixels[j].height &&
background.allPixels[i].location.y + background.allPixels[i].height + drawLineBetweenPixelRange > background.allPixels[j].location.y)
It comes down to running this for the x and y coordinates:
var result = (x - a < y + b) && (x + b + a > y)
Can this be simplified?
I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
javascript collision
javascript collision
edited Dec 11 at 17:41
200_success
128k15149412
asked Nov 10 at 1:36
JanWillem Huising
312
edited Dec 11 at 17:41
200_success
128k15149412
asked Nov 10 at 1:36
JanWillem Huising
312
edited Dec 11 at 17:41
200_success
128k15149412
edited Dec 11 at 17:41
200_success
128k15149412
edited Dec 11 at 17:41
200_success
128k15149412
128k15149412
asked Nov 10 at 1:36
JanWillem Huising
312
asked Nov 10 at 1:36
JanWillem Huising
312
asked Nov 10 at 1:36
JanWillem Huising
312
312
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
first accessing those properties all over again are really confusing
let bgI = background.allPixels[i]
let locI = bgI.location
let line = drawLineBetweenPixelRange
let bgJ = background.allPixels[j]
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on...
second redefining all those variables all over again really hurts efficiency
function detectCollision(background, line) {
let bgI = background.allPixels[i]
let bgJ = background.allPixels[j]
let locI = bgI.location
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on....
}
detectCollision(background, drawLineBetweenPixelRange)
hope it helps
answered Nov 10 at 6:10
Nikko Khresna
1012
Welcome to Code Review. Please go into more detail how it "hurts efficiency". Also note that your function uses global variablesiandjand therefore will be a a nightmare to debug.
– Zeta
Nov 10 at 8:21
Inefficient because: t gives space for human error, is not DRY, responsibilty of methods are not well separated.iandjcould be anythig, global var, index of iteration, etc. So I'll leave the real implementation ofiandjto OP.
– Nikko Khresna
Nov 10 at 11:20
Thanks for the feedback. Since this code does not run again on any other place i hadn't thought about putting it in its own function. I will think about applying this but is not the answer i am looking for. I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
– JanWillem Huising
Nov 10 at 14:29
@NikkoKhresna Additional information should be put into your post. Please edit accordingly. Comments may get deleted when they aren't needed anymore and don't have a history, whereas posts do.
– Zeta
Nov 11 at 12:24
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f207342%2fsimplify-javascript-collision-detection-with-offset%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
first accessing those properties all over again are really confusing
let bgI = background.allPixels[i]
let locI = bgI.location
let line = drawLineBetweenPixelRange
let bgJ = background.allPixels[j]
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on...
second redefining all those variables all over again really hurts efficiency
function detectCollision(background, line) {
let bgI = background.allPixels[i]
let bgJ = background.allPixels[j]
let locI = bgI.location
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on....
}
detectCollision(background, drawLineBetweenPixelRange)
hope it helps
answered Nov 10 at 6:10
Nikko Khresna
1012
Welcome to Code Review. Please go into more detail how it "hurts efficiency". Also note that your function uses global variablesiandjand therefore will be a a nightmare to debug.
– Zeta
Nov 10 at 8:21
Inefficient because: t gives space for human error, is not DRY, responsibilty of methods are not well separated.iandjcould be anythig, global var, index of iteration, etc. So I'll leave the real implementation ofiandjto OP.
– Nikko Khresna
Nov 10 at 11:20
Thanks for the feedback. Since this code does not run again on any other place i hadn't thought about putting it in its own function. I will think about applying this but is not the answer i am looking for. I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
– JanWillem Huising
Nov 10 at 14:29
@NikkoKhresna Additional information should be put into your post. Please edit accordingly. Comments may get deleted when they aren't needed anymore and don't have a history, whereas posts do.
– Zeta
Nov 11 at 12:24
add a comment |
up vote
0
down vote
first accessing those properties all over again are really confusing
let bgI = background.allPixels[i]
let locI = bgI.location
let line = drawLineBetweenPixelRange
let bgJ = background.allPixels[j]
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on...
second redefining all those variables all over again really hurts efficiency
function detectCollision(background, line) {
let bgI = background.allPixels[i]
let bgJ = background.allPixels[j]
let locI = bgI.location
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on....
}
detectCollision(background, drawLineBetweenPixelRange)
hope it helps
answered Nov 10 at 6:10
Nikko Khresna
1012
Welcome to Code Review. Please go into more detail how it "hurts efficiency". Also note that your function uses global variablesiandjand therefore will be a a nightmare to debug.
– Zeta
Nov 10 at 8:21
Inefficient because: t gives space for human error, is not DRY, responsibilty of methods are not well separated.iandjcould be anythig, global var, index of iteration, etc. So I'll leave the real implementation ofiandjto OP.
– Nikko Khresna
Nov 10 at 11:20
Thanks for the feedback. Since this code does not run again on any other place i hadn't thought about putting it in its own function. I will think about applying this but is not the answer i am looking for. I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
– JanWillem Huising
Nov 10 at 14:29
@NikkoKhresna Additional information should be put into your post. Please edit accordingly. Comments may get deleted when they aren't needed anymore and don't have a history, whereas posts do.
– Zeta
Nov 11 at 12:24
add a comment |
up vote
0
down vote
up vote
0
down vote
first accessing those properties all over again are really confusing
let bgI = background.allPixels[i]
let locI = bgI.location
let line = drawLineBetweenPixelRange
let bgJ = background.allPixels[j]
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on...
second redefining all those variables all over again really hurts efficiency
function detectCollision(background, line) {
let bgI = background.allPixels[i]
let bgJ = background.allPixels[j]
let locI = bgI.location
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on....
}
detectCollision(background, drawLineBetweenPixelRange)
hope it helps
answered Nov 10 at 6:10
Nikko Khresna
1012
first accessing those properties all over again are really confusing
let bgI = background.allPixels[i]
let locI = bgI.location
let line = drawLineBetweenPixelRange
let bgJ = background.allPixels[j]
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on...
second redefining all those variables all over again really hurts efficiency
function detectCollision(background, line) {
let bgI = background.allPixels[i]
let bgJ = background.allPixels[j]
let locI = bgI.location
let locJ = bgJ.location
if (locI.x - line < locJ.x + bgJ.width &&
locI.x + bgI.width + line > locJ.x &&
locI.y - line < locJ.y + bgJ.height &&
so on and so on....
}
detectCollision(background, drawLineBetweenPixelRange)
hope it helps
answered Nov 10 at 6:10
Nikko Khresna
1012
edited Nov 10 at 6:19
answered Nov 10 at 6:10
Nikko Khresna
1012
answered Nov 10 at 6:10
Nikko Khresna
1012
answered Nov 10 at 6:10
Nikko Khresna
1012
1012
Welcome to Code Review. Please go into more detail how it "hurts efficiency". Also note that your function uses global variablesiandjand therefore will be a a nightmare to debug.
– Zeta
Nov 10 at 8:21
Inefficient because: t gives space for human error, is not DRY, responsibilty of methods are not well separated.iandjcould be anythig, global var, index of iteration, etc. So I'll leave the real implementation ofiandjto OP.
– Nikko Khresna
Nov 10 at 11:20
Thanks for the feedback. Since this code does not run again on any other place i hadn't thought about putting it in its own function. I will think about applying this but is not the answer i am looking for. I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
– JanWillem Huising
Nov 10 at 14:29
@NikkoKhresna Additional information should be put into your post. Please edit accordingly. Comments may get deleted when they aren't needed anymore and don't have a history, whereas posts do.
– Zeta
Nov 11 at 12:24
add a comment |
Welcome to Code Review. Please go into more detail how it "hurts efficiency". Also note that your function uses global variablesiandjand therefore will be a a nightmare to debug.
– Zeta
Nov 10 at 8:21
Inefficient because: t gives space for human error, is not DRY, responsibilty of methods are not well separated.iandjcould be anythig, global var, index of iteration, etc. So I'll leave the real implementation ofiandjto OP.
– Nikko Khresna
Nov 10 at 11:20
Thanks for the feedback. Since this code does not run again on any other place i hadn't thought about putting it in its own function. I will think about applying this but is not the answer i am looking for. I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
– JanWillem Huising
Nov 10 at 14:29
@NikkoKhresna Additional information should be put into your post. Please edit accordingly. Comments may get deleted when they aren't needed anymore and don't have a history, whereas posts do.
– Zeta
Nov 11 at 12:24
Welcome to Code Review. Please go into more detail how it "hurts efficiency". Also note that your function uses global variables
i and j and therefore will be a a nightmare to debug.– Zeta
Nov 10 at 8:21
Welcome to Code Review. Please go into more detail how it "hurts efficiency". Also note that your function uses global variables
i and j and therefore will be a a nightmare to debug.– Zeta
Nov 10 at 8:21
Inefficient because: t gives space for human error, is not DRY, responsibilty of methods are not well separated.
i and j could be anythig, global var, index of iteration, etc. So I'll leave the real implementation of i and j to OP.– Nikko Khresna
Nov 10 at 11:20
Inefficient because: t gives space for human error, is not DRY, responsibilty of methods are not well separated.
i and j could be anythig, global var, index of iteration, etc. So I'll leave the real implementation of i and j to OP.– Nikko Khresna
Nov 10 at 11:20
Thanks for the feedback. Since this code does not run again on any other place i hadn't thought about putting it in its own function. I will think about applying this but is not the answer i am looking for. I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
– JanWillem Huising
Nov 10 at 14:29
Thanks for the feedback. Since this code does not run again on any other place i hadn't thought about putting it in its own function. I will think about applying this but is not the answer i am looking for. I whas hoping if the check itself could be shortened by taking stuff out that might counter eachother.
– JanWillem Huising
Nov 10 at 14:29
@NikkoKhresna Additional information should be put into your post. Please edit accordingly. Comments may get deleted when they aren't needed anymore and don't have a history, whereas posts do.
– Zeta
Nov 11 at 12:24
@NikkoKhresna Additional information should be put into your post. Please edit accordingly. Comments may get deleted when they aren't needed anymore and don't have a history, whereas posts do.
– Zeta
Nov 11 at 12:24
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f207342%2fsimplify-javascript-collision-detection-with-offset%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
