Puzzle of the day

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?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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

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

1
2
squares.x = 50
squares.y = -50

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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)

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:

1) I think I explicit set the origin of "squares" and "circles" by explicitly assigning xOrigin and yOrigin.

2) I draw the coordinate axes of "squares" in yellow. I draw the coordinate axes of "circles" in cyan.

3) I no longer rotate anything.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
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)

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.

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:

display.newRect(0, 0, 10, 10)

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.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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)
views:1772 update:2011/10/1 9:04:19
corona forums © 2003-2011