Puzzle of the day

Cerberus · May 21, 2011, 10:02pm

Why do you have to set the coordinates of group “circles” to -150, 150 to place that group in the opposite direction of group “squares”, while group “squares” was positioned using 50, -50?

[lua]display.setStatusBar(display.HiddenStatusBar)

– Mark screen origin

local screenOrigin = display.newCircle(0, 0, 4)

screenOrigin:setFillColor(128, 128, 128)

local screenOriginLabel = display.newText(“Screen Origin”, 10, 10, native.systemFont, 16)

screenOriginLabel:setTextColor(128, 128, 128)

– Create and position top group

local topGroup = display.newGroup()

topGroup.x = display.contentWidth / 2
topGroup.y = display.contentHeight / 2

– Mark top group origin

local topGroupOrigin = display.newCircle(topGroup.xOrigin, topGroup.yOrigin, 4)

topGroupOrigin:setFillColor(128, 128, 128)

local topGroupLabel = display.newText(“Top Group Origin”, 0, 0, native.systemFont, 16)

topGroupLabel:setTextColor(128, 128, 128)

topGroupLabel:setReferencePoint(display.CenterReferencePoint)

topGroupLabel.x = topGroup.xOrigin
topGroupLabel.y = topGroup.yOrigin + 10

– Create the “squares” group and position it at 50, -50 in relation to the origin of the top group

local squares = display.newGroup()

topGroup:insert(squares)

squares.x = 50
squares.y = -50

– Add 4 red squares to the “squares” group

local square1 = display.newRect(0, 0, 10, 10)

square1:setFillColor(255, 0, 0)

squares:insert(square1)

square1.x = 50
square1.y = -50

local square2 = display.newRect(0, 0, 10, 10)

square2:setFillColor(255, 0, 0)

squares:insert(square2)

square2.x = 75
square2.y = -50

local square3 = display.newRect(0, 0, 10, 10)

square3:setFillColor(255, 0, 0)

squares:insert(square3)

square3.x = 50
square3.y = -25

local square4 = display.newRect(0, 0, 10, 10)

square4:setFillColor(255, 0, 0)

squares:insert(square4)

square4.x = 75
square4.y = -25

– Create the “circles” group and position it at -50, 50 in relation to the origin of the top group

local circles = display.newGroup()

topGroup:insert(circles)

– WHY? Why doesn’t -50, 50 produce the expected result?

circles.x = -150
circles.y = 150

– Add 4 red circles to the “circles” group

local circle1 = display.newCircle(0, 0, 5)

circle1:setFillColor(0, 0, 255)

circles:insert(circle1)

circle1.x = 50
circle1.y = -50

local circle2 = display.newCircle(0, 0, 5)

circle2:setFillColor(0, 0, 255)

circles:insert(circle2)

circle2.x = 75
circle2.y = -50

local circle3 = display.newCircle(0, 0, 5)

circle3:setFillColor(0, 0, 255)

circles:insert(circle3)

circle3.x = 50
circle3.y = -25

local circle4 = display.newCircle(0, 0, 5)

circle4:setFillColor(0, 0, 255)

circles:insert(circle4)

circle4.x = 75
circle4.y = -25[/lua] [import]uid: 59054 topic_id: 10328 reply_id: 310328[/import]

croisened · May 22, 2011, 7:52am

I think the confusion is coming from these lines of code…

squares.x = 50  
squares.y = -50

and

-- WHY? Why doesn't -50, 50 produce the expected result?  
   
circles.x = -150  
circles.y = 150

Really what is happening here is that you are moving the bounding containers and thus shifting how the coords are going to work for everything inside of them. Comment out all four of these lines of code and you will be moving the circles and squares around the origin in the same way as you expect, OR you an set these two group to the same coords so that everything inside them move the same as well. (Also, don’t forget not to invert your X and Y coords, (50,-50) not the same as (-50,50)

–croisened

[import]uid: 48203 topic_id: 10328 reply_id: 37690[/import]

Cerberus · May 22, 2011, 10:09am

My rationale was:

“Those lines are needed to position the “squares” group and the “circles” group within the local coordinates of the “topGroup”. Without them, the “squares” group and the “circles” group would be centered on the “topGroup” origin, in the middle of the screen.”

But the code proves otherwise…

Here is another piece of code with interesting findings:

Notice how I do not change the x and y of “squares” or “circles”.
Notice how I do not change the xReference and yReference of “square” or “circles”.

Yet, observe how both groups rotate around the center of the screen.
And observe how the value printed out to the terminal are all 0, as expected.

So, I still do not get that coordinate system at all.

[lua]display.setStatusBar(display.HiddenStatusBar)

– Create and position top group

local topGroup = display.newGroup()

topGroup.x = display.contentWidth / 2
topGroup.y = display.contentHeight / 2

– Create the “squares” group and position it at 50, -50 in relation to the origin of the top group

local squares = display.newGroup()

topGroup:insert(squares)

– squares.x = 50
– squares.y = -50

– Add 4 red squares to the “squares” group

local square1 = display.newRect(0, 0, 10, 10)

square1:setFillColor(255, 0, 0)

squares:insert(square1)

square1.x = 50
square1.y = -50

local square2 = display.newRect(0, 0, 10, 10)

square2:setFillColor(255, 0, 0)

squares:insert(square2)

square2.x = 75
square2.y = -50

local square3 = display.newRect(0, 0, 10, 10)

square3:setFillColor(255, 0, 0)

squares:insert(square3)

square3.x = 50
square3.y = -25

local square4 = display.newRect(0, 0, 10, 10)

square4:setFillColor(255, 0, 0)

squares:insert(square4)

square4.x = 75
square4.y = -25

local frame1 = display.newLine(squares, 50, -50, 75, -50)

frame1:append(75, -25, 50, -25, 50, -50)

– Move the reference point of the “squares” group to the origin of the top group

– squares.xReference = -50
– squares.yReference = 50

– Create the “circles” group and position it at -50, 50 in relation to the origin of the top group

local circles = display.newGroup()

topGroup:insert(circles)

– circles.x = -50
– circles.y = 50

– Add 4 green circles to the “circles” group

local circle1 = display.newCircle(0, 0, 5)

circle1:setFillColor(0, 255, 0)

circles:insert(circle1)

circle1.x = -50
circle1.y = 50

local circle2 = display.newCircle(0, 0, 5)

circle2:setFillColor(0, 255, 0)

circles:insert(circle2)

circle2.x = -75
circle2.y = 50

local circle3 = display.newCircle(0, 0, 5)

circle3:setFillColor(0, 255, 0)

circles:insert(circle3)

circle3.x = -50
circle3.y = 25

local circle4 = display.newCircle(0, 0, 5)

circle4:setFillColor(0, 255, 0)

circles:insert(circle4)

circle4.x = -75
circle4.y = 25

local frame2 = display.newLine(circles, -50, 50, -75, 50)

frame2:append(-75, 25, -50, 25, -50, 50)

– Move the reference point of the “circles” group to the origin of the top group

– circles.xReference = 50
– circles.yReference = -50

print("squares.xOrigin = " … squares.xOrigin)
print("squares.yOrigin = " … squares.yOrigin)
print("squares.xReference = " … squares.xReference)
print("squares.yReference = " … squares.yReference)

print("circles.xOrigin = " … circles.xOrigin)
print("circles.yOrigin = " … circles.yOrigin)
print("circles.xReference = " … circles.xReference)
print("circles.yReference = " … circles.yReference)

Runtime:addEventListener(“enterFrame”, function(event)
if squares.rotation < 180 then
squares.rotation = squares.rotation + 1
end
if circles.rotation < 180 then
circles.rotation = circles.rotation + 1
end
end)[/lua] [import]uid: 59054 topic_id: 10328 reply_id: 37696[/import]

Cerberus · May 22, 2011, 10:45am

And here is another test that behaves almost coherently (I also almost because you may have to reload it in the simulator several times to get it to actually display.)…

What changed in this code:

I think I explicit set the origin of “squares” and “circles” by explicitly assigning xOrigin and yOrigin.
I draw the coordinate axes of “squares” in yellow. I draw the coordinate axes of “circles” in cyan.
I no longer rotate anything.

With this code, results are somewhat “logical”. (except for the display glitch in the simulator)

[lua]display.setStatusBar(display.HiddenStatusBar)

– Create and position top group

local topGroup = display.newGroup()

topGroup.x = display.contentWidth / 2
topGroup.y = display.contentHeight / 2

– Create the “squares” group and position it at 50, -50 in relation to the origin of the top group

local squares = display.newGroup()

topGroup:insert(squares)

squares.xOrigin = 50
squares.yOrigin = -50

– Draw the coordinate axes of the “squares” group

local axes1 = display.newLine(squares, 0, 100, 0, 0)

axes1:append(100, 0)

axes1:setColor(255, 255, 0)

– Add 4 red squares to the “squares” group

local square1 = display.newRect(0, 0, 10, 10)

square1:setFillColor(255, 0, 0)

squares:insert(square1)

square1.x = 50
square1.y = -50

local square2 = display.newRect(0, 0, 10, 10)

square2:setFillColor(255, 0, 0)

squares:insert(square2)

square2.x = 75
square2.y = -50

local square3 = display.newRect(0, 0, 10, 10)

square3:setFillColor(255, 0, 0)

squares:insert(square3)

square3.x = 50
square3.y = -25

local square4 = display.newRect(0, 0, 10, 10)

square4:setFillColor(255, 0, 0)

squares:insert(square4)

square4.x = 75
square4.y = -25

– Draw a frame that goes through the centers of all 4 squares.

local frame1 = display.newLine(squares, 50, -50, 75, -50)

frame1:append(75, -25, 50, -25, 50, -50)

– Create the “circles” group and position it at -50, 50 in relation to the origin of the top group

local circles = display.newGroup()

topGroup:insert(circles)

circles.xOrigin = -50
circles.yOrigin = 50

– Draw the coordinate axes of the “circles” group

local axes2 = display.newLine(circles, 0, 100, 0, 0)

axes2:append(100, 0)

axes2:setColor(0, 255, 255)

– Add 4 green circles to the “circles” group

local circle1 = display.newCircle(0, 0, 5)

circle1:setFillColor(0, 255, 0)

circles:insert(circle1)

circle1.x = -50
circle1.y = 50

local circle2 = display.newCircle(0, 0, 5)

circle2:setFillColor(0, 255, 0)

circles:insert(circle2)

circle2.x = -75
circle2.y = 50

local circle3 = display.newCircle(0, 0, 5)

circle3:setFillColor(0, 255, 0)

circles:insert(circle3)

circle3.x = -50
circle3.y = 25

local circle4 = display.newCircle(0, 0, 5)

circle4:setFillColor(0, 255, 0)

circles:insert(circle4)

circle4.x = -75
circle4.y = 25

– Draw a frame that goes through the centers of all 4 circles.

local frame2 = display.newLine(circles, -50, 50, -75, 50)

frame2:append(-75, 25, -50, 25, -50, 50)

print("squares.xOrigin = " … squares.xOrigin)
print("squares.yOrigin = " … squares.yOrigin)
print("squares.xReference = " … squares.xReference)
print("squares.yReference = " … squares.yReference)

print("circles.xOrigin = " … circles.xOrigin)
print("circles.yOrigin = " … circles.yOrigin)
print("circles.xReference = " … circles.xReference)
print("circles.yReference = " … circles.yReference)[/lua] [import]uid: 59054 topic_id: 10328 reply_id: 37702[/import]

Cerberus · May 22, 2011, 10:48am

Based on my prior test, I would assume assigning the x and y of a group does not relocate its origin.
To relocate its origin, you seem to have to assign xOrigin and yOrigin.
[import]uid: 59054 topic_id: 10328 reply_id: 37703[/import]

Cerberus · May 22, 2011, 4:01pm

In the doc, I don’t understand this:

When an Display Object is created, the origin specifies the TopLeft corner of the object. After the object has been created, the reference point is now the center of the object and the x,y values will reference that point.

If I have:

[lua]display.newRect(0, 0, 10, 10)[/lua]

The doc says:

Creates a width by height rectangle with the top-left corner at (0, 0). The local origin is at the center of the rectangle; the reference point is initialized to this local origin.
[import]uid: 59054 topic_id: 10328 reply_id: 37726[/import]

Cerberus · May 22, 2011, 4:21pm

The doc is very confusing on that topic, but I think this final code documents all the concepts (x, y, xOrigin, yOrigin, xReference, yReference):

[lua]display.setStatusBar(display.HiddenStatusBar)

– Create and position top group

local topGroup = display.newGroup()

topGroup.x = display.contentWidth / 2
topGroup.y = display.contentHeight / 2

print("topGroup.xOrigin = " … topGroup.xOrigin)
print("topGroup.yOrigin = " … topGroup.yOrigin)

– Create the “squares” group and position it at 50, -50 in relation to the origin of the top group

local squares = display.newGroup()

topGroup:insert(squares)

squares.x = 50
squares.y = -50

print("squares.xOrigin = " … squares.xOrigin)
print("squares.yOrigin = " … squares.yOrigin)

– Draw the coordinate axes of the “squares” group

local axes1 = display.newLine(topGroup, 50, 0, 50, -50)

axes1:append(100, -50)

axes1:setColor(255, 255, 0)

– Add 4 red squares to the “squares” group

local square1 = display.newRect(0, 0, 10, 10)

square1:setFillColor(255, 0, 0)

squares:insert(square1)

square1.x = 50
square1.y = -50

local square2 = display.newRect(0, 0, 10, 10)

square2:setFillColor(255, 0, 0)

squares:insert(square2)

square2.x = 75
square2.y = -50

local square3 = display.newRect(0, 0, 10, 10)

square3:setFillColor(255, 0, 0)

squares:insert(square3)

square3.x = 50
square3.y = -25

local square4 = display.newRect(0, 0, 10, 10)

square4:setFillColor(255, 0, 0)

squares:insert(square4)

square4.x = 75
square4.y = -25

– Draw a frame that goes through the centers of all 4 squares.

local frame1 = display.newLine(squares, 50, -50, 75, -50)

frame1:append(75, -25, 50, -25, 50, -50)

– Create the “circles” group and position it at -50, 50 in relation to the origin of the top group

local circles = display.newGroup()

topGroup:insert(circles)

circles.x = -50
circles.y = 50

print("circles.xOrigin = " … circles.xOrigin)
print("circles.yOrigin = " … circles.yOrigin)

– Draw the coordinate axes of the “circles” group

local axes2 = display.newLine(topGroup, 0, 50, -50, 50)

axes2:append(-50, 100)

axes2:setColor(0, 255, 255)

– Add 4 green circles to the “circles” group

local circle1 = display.newCircle(0, 0, 5)

circle1:setFillColor(0, 255, 0)

circles:insert(circle1)

circle1.x = -50
circle1.y = 50

local circle2 = display.newCircle(0, 0, 5)

circle2:setFillColor(0, 255, 0)

circles:insert(circle2)

circle2.x = -75
circle2.y = 50

local circle3 = display.newCircle(0, 0, 5)

circle3:setFillColor(0, 255, 0)

circles:insert(circle3)

circle3.x = -50
circle3.y = 25

local circle4 = display.newCircle(0, 0, 5)

circle4:setFillColor(0, 255, 0)

circles:insert(circle4)

circle4.x = -75
circle4.y = 25

– Draw a frame that goes through the centers of all 4 circles.

local frame2 = display.newLine(circles, -50, 50, -75, 50)

frame2:append(-75, 25, -50, 25, -50, 50)

Runtime:addEventListener(“enterFrame”, function(event)
squares.rotation = squares.rotation - 1
circles.rotation = circles.rotation + 1
end)[/lua] [import]uid: 59054 topic_id: 10328 reply_id: 37728[/import]