Hallo Ingrid,
die Kollisionsabfrage löse ich jetzt so (live-Beispiel zum Testen dauert leider noch):
function doCollideElliptically (element1, element2) {
var ellipse1 = {
a: element1.offsetWidth,
b: element1.offsetHeight,
m: {
x: element1.offsetLeft + Math.floor(element1.offsetWidth / 2),
y: element1.offsetTop + Math.floor(element1.offsetHeight / 2)
}
},
ellipse2 = {
a: element2.offsetWidth,
b: element2.offsetHeight,
m: {
x: element2.offsetLeft + Math.floor(element2.offsetWidth / 2),
y: element2.offsetTop + Math.floor(element2.offsetHeight / 2)
}
},
isPixelInEllipse = function (pixel, ellipse) {
return (
Math.pow(pixel.x - ellipse.m.x, 2) / Math.pow(ellipse.a, 2)
+ Math.pow(pixel.y - ellipse.m.y, 2) / Math.pow(ellipse.b, 2)
<= 1
);
},
sharedPixels = [],
i, x, y;
// get pixels of intersection
for (
y = element1.offsetTop;
y < element1.offsetTop + element1.offsetHeight;
y++
) {
for (
x = element1.offsetLeft;
x < element1.offsetLeft + element1.offsetWidth;
x++
) {
// pixel inside both boxes?
if (
x >= element2.offsetLeft
&& x < element2.offsetLeft + element2.offsetWidth
&& y >= element2.offsetTop
&& y < element2.offsetTop + element2.offsetHeight
) {
sharedPixels.push({x:x, y:y});
}
}
}
// do shared pixels belong into both ellipses?
if (sharedPixels.length) {
for (i = 0; i < sharedPixels.length; i++) {
if (
isPixelInEllipse(sharedPixels[i], ellipse1)
&& isPixelInEllipse(sharedPixels[i], ellipse2)
) {
return true;
}
}
}
return false;
}
Allen an dieser sehr faszinierenden und umfangreichen Diskussion Beteiligten meinen herzlichen Dank für alle Anregungen, insbesondere auch die, die nicht (un)mittelbar zur Lösung beigetragen haben. Zusätzlich zu einer funktionierenden Kollisionsberechnung auf Ellipsenbasis habe ich jetzt ein besseres Verständnis, was es mit Ellipsen alles auf sich hat und welche Komplexitäten das Thema mit sich bringt. Es ist definitiv nicht Bestandteil dessen, was in der Schule an algebraischen und geometrischen Inhalten vermittelt wird.
Liebe Grüße,
Felix Riesterer.