Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Help with rectangle intersection code — Gideros Forum
  • Home
    • ›

    Help with rectangle intersection code

    GhandoGhando Member
    edited February 2012 in General questions
    Hi guys,
    I'd been using a collision detection function for rotated rectangles - original code: http://forums.xkcd.com/viewtopic.php?f=11&t=63710 - and had it working in another SDK.

    I've changed the code over to Gideros but am not seeing accurate collision detection. I'm sure it's something I'm doing - not taking into account the correct angle? Position? Anchor point? - but can't work out what.

    Any help would be greatly appreciated.
     
	rect1 = Shape.new()
	rect1:setLineStyle(3, 0x000000)
	rect1:setFillStyle(Shape.SOLID, 0xff0000, 0.5)
	rect1:beginPath()
	rect1:moveTo(0, 0)
	rect1:lineTo(100, 0)
	rect1:lineTo(100, 50)
	rect1:lineTo(0, 50)
	rect1:closePath()
	rect1:endPath()
	rect1:setPosition(100, 100)
	rect1:setRotation(45)
	stage:addChild(rect1)
 
	rect2 = Shape.new()
	rect2:setLineStyle(3, 0x000000)
	rect2:setFillStyle(Shape.SOLID, 0xff0000, 0.5)
	rect2:beginPath()
	rect2:moveTo(0, 0)
	rect2:lineTo(100, 0)
	rect2:lineTo(100, 50)
	rect2:lineTo(0, 50)
	rect2:closePath()
	rect2:endPath()
	rect2:setPosition(200, 200)	
	stage:addChild(rect2)
 
function onMouseDown(self, event)
	if self:hitTestPoint(event.x, event.y) then
		self.isFocus = true
 
		self.x0 = event.x
		self.y0 = event.y
 
		event:stopPropagation()
	end
end
 
function onMouseMove(self, event)
	if self.isFocus then
		local dx = event.x - self.x0
		local dy = event.y - self.y0
 
		self:setX(self:getX() + dx)
		self:setY(self:getY() + dy)
 
		self.x0 = event.x
		self.y0 = event.y
 
		event:stopPropagation()
	end
end
 
function onMouseUp(self, event)
	if self.isFocus then
		self.isFocus = false
		event:stopPropagation()
	end
end
 
rect1:addEventListener(Event.MOUSE_DOWN, onMouseDown, rect1)
rect1:addEventListener(Event.MOUSE_MOVE, onMouseMove, rect1)
rect1:addEventListener(Event.MOUSE_UP, onMouseUp, rect1)
 
 function checkForIntersection(a, b)
	 local function checkRotated(a, b)
			-- we put everything into a coordinate system where rectangle a is centered at the origin
			-- with no rotation.  i.e., it's corners are (-a.w/2,-a.h/2) and (a.w/2,a.h/2)
			--
			-- we'll need these a lot
			a_w2 = a:getWidth()/2.0
			a_h2 = a:getHeight()/2.0
			b_w2 = b:getWidth()/2.0
			b_h2 = b:getHeight()/2.0
			--
			-- first we put the center of b into this system
			-- translate
			b_xc_tmp = (b:getX()+b_w2) - (a:getX()+a_w2)
			b_yc_tmp = (b:getY()+b_h2) - (a:getY()+a_h2)
			-- rotate by -a.theta
			c = math.cos(-a:getRotation())
			s = math.sin(-a:getRotation())
			b_xc = b_xc_tmp*c - b_yc_tmp*s
			b_yc = b_yc_tmp*c + b_xc_tmp*s
			--
			-- next we compute each corner of rectangle b relative to (b_xc,b_yc)
			theta = b:getRotation() - a:getRotation()
			c = math.cos(theta)
			s = math.sin(theta)
 
			-- because we're rotating around the center, we have some symmetry
			b_x1 = b_w2*c - b_h2*s
			b_y1 = b_w2*s + b_h2*c
			b_x2 = b_w2*c + b_h2*s
			b_y2 = b_w2*s - b_h2*c
 
			-- find the bounding rectangle
			b_xmin = b_xc + math.min(b_x1, b_x2, -b_x1, -b_x2)
			b_xmax = b_xc + math.max(b_x1, b_x2, -b_x1, -b_x2)
			b_ymin = b_yc + math.min(b_y1, b_y2, -b_y1, -b_y2)
			b_ymax = b_yc + math.max(b_y1, b_y2, -b_y1, -b_y2)
			--
			-- check for intersection with rectangle a
			return b_xmax < -a_w2 or b_xmin > a_w2 or b_ymax < -a_h2 or b_ymin > a_h2
	 end
    return not (checkRotated(a, b) or checkRotated(b, a))
 end
 
 function onEnterFrame(self, event)
    myvar = checkForIntersection(rect1, rect2)
    if myvar then
		rect1:setColorTransform(0,139,0,1)
    else
		rect1:setColorTransform()
	end
 end
 
 stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)
    +1 -1Share on Facebook

    Comments

    • ar2rsawseenar2rsawseen Maintainer
      edited February 2012
      I think problem is in rotation
      c = math.cos(-a:getRotation())
s = math.sin(-a:getRotation())
      a:getRotation() returns rotation in degrees, but math.cos and math.sin accepts rotation in radians, you need to recalculate that
      c = math.cos(math.rad(-a:getRotation()))
s = math.sin(math.rad(-a:getRotation()))
      Same in other sections of your code, when you perform this calculations
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    • GhandoGhando Member
      Whoops! Thanks ar2rsawseen, I posted the wrong code - had already added the math.rad to the version I'm testing but am still seeing the same issue.

      Using the same code but without a rotation works fine, so I'm guessing that I'm not working with the correct points of my rotated rectangle??
      +1 -1Share on Facebook
    • ar2rsawseenar2rsawseen Maintainer
      Well by the way you draw your rectangle, you are rotating it by bottom left corner.

      If you want to rotate it by center, you should draw it like this:
      rect1:beginPath()
rect1:moveTo(-50, -25)
rect1:lineTo(50, -25)
rect1:lineTo(50, 25)
rect1:lineTo(-50, 25)
rect1:lineTo(-50, -25)
rect1:endPath()
      Didn't test but I hope you get the idea.
      http://appcodingeasy.com/Gideros-Mobile
      +1 -1Share on Facebook
    • GhandoGhando Member
      Thanks ar2rsawseen but I'm having the same issue if I replace the shapes with images eg:
      local rect1 = Bitmap.new(Texture.new("rectangle.png"))
rect1:setAnchorPoint(0.5, 0.5)
rect1:setPosition(100, 100)
rect1:setRotation(45)
stage:addChild(rect1)
 
local rect2 = Bitmap.new(Texture.new("rectangle.png"))
rect2:setAnchorPoint(0.5, 0.5)
rect2:setPosition(100, 100)
rect2:setRotation(45)
stage:addChild(rect2)
      Code works if both rectangles aren't rotated, breaks if one of them is rotated.

      As the code works in the another LUA SDK I guess I'm making an incorrect assumption with Gideros positioning and then calculating the corners of the rectangle.
      +1 -1Share on Facebook
    • GhandoGhando Member
      Ok, here's another sample that worked fine in Corona but not in Gideros (original code can be found at: http://developer.anscamobile.com/forum/2012/02/02/collision-detection-rotated-rectangles)

      I'm seeing the same problem with "collisions" occurring even though objects aren't overlapping.

      In the following both .png are 60px x 60px

      What am I doing wrong?
       
local rect1 = Bitmap.new(Texture.new("blue.png"))
rect1:setPosition(100, 100)
rect1:setRotation(45)
stage:addChild(rect1)
 
local rect2 = Bitmap.new(Texture.new("green.png"))
rect2:setPosition(200, 200)
stage:addChild(rect2)
 
function onMouseDown(self, event)
	if self:hitTestPoint(event.x, event.y) then
		self.isFocus = true
 
		self.x0 = event.x
		self.y0 = event.y
 
		event:stopPropagation()
	end
end
 
function onMouseMove(self, event)
	if self.isFocus then
		local dx = event.x - self.x0
		local dy = event.y - self.y0
 
		self:setX(self:getX() + dx)
		self:setY(self:getY() + dy)
 
		self.x0 = event.x
		self.y0 = event.y
 
		event:stopPropagation()
	end
end
 
function onMouseUp(self, event)
	if self.isFocus then
		self.isFocus = false
		event:stopPropagation()
	end
end
 
rect1:addEventListener(Event.MOUSE_DOWN, onMouseDown, rect1)
rect1:addEventListener(Event.MOUSE_MOVE, onMouseMove, rect1)
rect1:addEventListener(Event.MOUSE_UP, onMouseUp, rect1)
 
rect2:addEventListener(Event.MOUSE_DOWN, onMouseDown, rect2)
rect2:addEventListener(Event.MOUSE_MOVE, onMouseMove, rect2)
rect2:addEventListener(Event.MOUSE_UP, onMouseUp, rect2)
 
function checkForIntersection(rectangle1, rectangle2)
 
   local function chkForRotated(r1, r2)
      local x1 = r2:getX()-r1:getX()
      local y1 = r2:getY()-r1:getY()
 
      local x2 = x1*math.cos(math.rad(r1:getRotation())) + y1*math.sin(math.rad(r1:getRotation()))
      local y2 = y1*math.cos(math.rad(r1:getRotation())) - x1*math.sin(math.rad(r1:getRotation()))
 
      local angle1 = math.cos(math.rad(r2:getRotation() - r1:getRotation()))
      local angle2 = math.sin(math.rad(r2:getRotation() - r1:getRotation()))
      local arr1 = { r2:getWidth()*angle1, -r2:getHeight()*angle2, r2:getWidth()*angle1 - r2:getHeight()*angle2}
      local arr2 = { r2:getWidth()*angle2, r2:getHeight()*angle1, r2:getWidth()*angle2 + r2:getHeight()*angle1}
 
      local minX = 0 
      local maxX = 0
      local minY = 0
      local maxY = 0
      for i=1,3 do
                if minX > arr1[i] then
                        minX = arr1[i]
                end
                if maxX <  arr1[i] then
                         maxX = arr1[i]
                end
                if minY > arr2[i] then
                        minY = arr2[i]
                end
                if maxY <  arr2[i] then
                         maxY = arr2[i]
                end
      end
 
      return x2 + maxX < 0 or x2 + minX > r1:getWidth() or y2 + maxY < 0 or y2 + minY > r1:getHeight()
   end
   return not (chkForRotated(rectangle1,rectangle2) or chkForRotated(rectangle2,rectangle1))
end
 
 function onEnterFrame(self, event)
    myvar = checkForIntersection(rect1, rect2)
    if myvar then
		rect1:setColorTransform(0,139,0,1)
    else
		rect1:setColorTransform()
	end
 end
 
 stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)
      +1 -1Share on Facebook
    • atilimatilim Maintainer
      edited February 2012
      Hi,

      The problem is you call getWidth() and getHeight() after rotating the sprite. Therefore, they return bigger bounds. If you store the result of getWidth() and getHeight() before rotating and use the stored width/height, everything works well:
      local rect1 = Bitmap.new(Texture.new("blue.png"))
rect1.width = rect1:getWidth()
rect1.height = rect1:getHeight()
rect1:setPosition(100, 100)
rect1:setRotation(45)
stage:addChild(rect1)
 
local rect2 = Bitmap.new(Texture.new("green.png"))
rect2.width = rect2:getWidth()
rect2.height = rect2:getHeight()
rect2:setPosition(200, 200)
stage:addChild(rect2)
 
function onMouseDown(self, event)
	if self:hitTestPoint(event.x, event.y) then
		self.isFocus = true
 
		self.x0 = event.x
		self.y0 = event.y
 
		event:stopPropagation()
	end
end
 
function onMouseMove(self, event)
	if self.isFocus then
		local dx = event.x - self.x0
		local dy = event.y - self.y0
 
		self:setX(self:getX() + dx)
		self:setY(self:getY() + dy)
 
		self.x0 = event.x
		self.y0 = event.y
 
		event:stopPropagation()
	end
end
 
function onMouseUp(self, event)
	if self.isFocus then
		self.isFocus = false
		event:stopPropagation()
	end
end
 
rect1:addEventListener(Event.MOUSE_DOWN, onMouseDown, rect1)
rect1:addEventListener(Event.MOUSE_MOVE, onMouseMove, rect1)
rect1:addEventListener(Event.MOUSE_UP, onMouseUp, rect1)
 
rect2:addEventListener(Event.MOUSE_DOWN, onMouseDown, rect2)
rect2:addEventListener(Event.MOUSE_MOVE, onMouseMove, rect2)
rect2:addEventListener(Event.MOUSE_UP, onMouseUp, rect2)
 
function checkForIntersection(rectangle1, rectangle2)
 
   local function chkForRotated(r1, r2)
      local x1 = r2:getX()-r1:getX()
      local y1 = r2:getY()-r1:getY()
 
      local x2 = x1*math.cos(math.rad(r1:getRotation())) + y1*math.sin(math.rad(r1:getRotation()))
      local y2 = y1*math.cos(math.rad(r1:getRotation())) - x1*math.sin(math.rad(r1:getRotation()))
 
      local angle1 = math.cos(math.rad(r2:getRotation() - r1:getRotation()))
      local angle2 = math.sin(math.rad(r2:getRotation() - r1:getRotation()))
      local arr1 = { r2.width*angle1, -r2.height*angle2, r2.width*angle1 - r2.height*angle2}
      local arr2 = { r2.width*angle2, r2.height*angle1, r2.width*angle2 + r2.height*angle1}
 
      local minX = 0 
      local maxX = 0
      local minY = 0
      local maxY = 0
      for i=1,3 do
                if minX > arr1[i] then
                        minX = arr1[i]
                end
                if maxX <  arr1[i] then
                         maxX = arr1[i]
                end
                if minY > arr2[i] then
                        minY = arr2[i]
                end
                if maxY <  arr2[i] then
                         maxY = arr2[i]
                end
      end
 
      return x2 + maxX < 0 or x2 + minX > r1.width or y2 + maxY < 0 or y2 + minY > r1.height
   end
   return not (chkForRotated(rectangle1,rectangle2) or chkForRotated(rectangle2,rectangle1))
end
 
 function onEnterFrame(self, event)
    myvar = checkForIntersection(rect1, rect2)
    if myvar then
		rect1:setColorTransform(0,139,0,1)
    else
		rect1:setColorTransform()
	end
 end
 
 stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)
      http://en.wikipedia.org/wiki/Cytorus
      +1 -1Share on Facebook
    • GhandoGhando Member
      Thanks Atilim. That's been stumping me for weeks. I should have been tipped off when the docs referred to "content bounds".
      +1 -1Share on Facebook
    • atilimatilim Maintainer
      edited March 2012
      Yes, I agree. there is a possibility of misunderstanding here. I'll update the reference manual to be more clear.

      http://en.wikipedia.org/wiki/Cytorus
      +1 -1Share on Facebook
    Sign In or Register to comment.