Dont get how to group

General
1

I just don’t get Codea’s logic into my head. How thing are wired up? How can I build a complex visual object and then group it and interact with it? I always have the schema inside my head, that things are assigned to variables and then you use them to interact with this object. Say I have a rect with a direction indicator (line). Now I want the whole thing to reflect rotation() and other operations visually. How?

function setup()
    --displayMode(FULLSCREEN)
    supportedOrientations(LANDSCAPE_RIGHT)
end


function draw()
    background(144, 154, 146, 255)
    
    -- visual direction?
    fill(79, 123, 37, 255)
    strokeWidth(0)
    rect(WIDTH/2-30, HEIGHT/2-30, 60,60)
    stroke(255, 60, 0, 255)
    strokeWidth(5)
    line(WIDTH/2, HEIGHT/2, WIDTH/2, HEIGHT/2+35)
    
    rotate(90) --how to get this working?
end
2

i will try to help you but im also all new to this so if i find out ill drop it inn here

3

.@se24vad the only thing you have to keep in mind: apply your transform BEFORE the drawing

function setup()
    --displayMode(FULLSCREEN)
    supportedOrientations(LANDSCAPE_RIGHT)
end


function draw()
    background(144, 154, 146, 255)

    rotate(90) --how to get this working?

    -- visual direction?
    fill(79, 123, 37, 255)
    strokeWidth(0)
    rect(WIDTH/2-30, HEIGHT/2-30, 60,60)
    stroke(255, 60, 0, 255)
    strokeWidth(5)
    line(WIDTH/2, HEIGHT/2, WIDTH/2, HEIGHT/2+35)
    
    
end

All the commands rotate,tranlate,scale) pile up and are memorized. To reset them: resetMatrix()

4

There is only one thing you do and that is manipulating the coordinate system.
So this must accour before you draw and then the coordinates you use is related to the new system, not the general one or previous.
So pushMatrix() first to save what ever system you where using (normally the default one) and then popMatrix() when the drawing is finished to restore the previous system. resetMatrix() will allways restore all the way back to default.
It is a very powerfull method and makes it a lot easier to draw stuff even at odd angles and displacements.
Re Peter

5

I understand that all operations are piled up and happened as soon as they come, one after another, and in result effect everything that comes after those op’s. Thank you for describing that. But can I also group objects together and manipulate the group?

Codea’s coding experience reminds me of a “turn-by-turn direction”. (Do that, and afterwards do that.) But you never can go back to, say step 5, and correct that out, because everything fallows up to something another, in a sort of a stack. Am I right in that sight?

6

below is your example object “grouped”. Effectively do all your drawing relative to (0,0) coordinates for the centre of the object, and then doing the translations around that group of commands should work.

function setup()
    --displayMode(FULLSCREEN)
    supportedOrientations(LANDSCAPE_RIGHT)
    iparameter("x",0,WIDTH,WIDTH/2)
    iparameter("y",0,HEIGHT,HEIGHT/2)
    iparameter("angle",0,360,90)
end


function draw()
    background(144, 154, 146, 255)
    
    --store the current screen settings so we can revert
    pushMatrix()
    
    --position our object
    --move the effective origin to the middle of our object
    translate(x,y)
    --rotate the coordinate map
    rotate(angle)
    
    fill(79, 123, 37, 255)
    strokeWidth(0)
    --modified to centre on 0,0
    rect(-30, -30, 60,60)
    stroke(255, 60, 0, 255)
    strokeWidth(5)
    line(0, 0, 0, 35)
    
    --restore out previous coordinate state for other drawing
    popMatrix()
    
end
7

You can make a variable and point it to a class where there can be numerous objects.
I would describe this as a group, but still a stack when it is executed.
Someone please correct me if I am wrong, but this is how I understand the consept.

8

Thank you @spacemonkey! That is exactly what I wanted to do. Will examine the code and try to understand everything through playing with it…
Also thx to @macflyerdk for the kind help!
:wink:

9

To follow on what @macflyerdk said, objects are the best way to pull together multiple components into a “group.”

So you could create a class that looked something like this

RectWithLine = class()

function RectWithLine:init(left, bottom, width, height, angle) 
   self.left = left
   self.bottom = bottom
   self.width = width
   self.height = height
   self.angle = angle
end

function RectWithLine:draw()
    pushMatrix()
    translate(self.left, self.bottom)
    rotate(self.angle)
    fill(79, 123, 37, 255)
    strokeWidth(0)
    rect(0, 0, self.width, self.height)
    stroke(255, 60, 0, 255)
    strokeWidth(5)
    line(0, 0, 0, 35)
    popMatrix()
end

Then your main program could be reduced to

function setup()
   myRect = RectWithLine(200, 200, 300, 150, 45)
end

function draw()
  background(0,0,0,0)
  myRect:draw()
end

The advantage of doing it this way is that you could define more RectWithLine objects simply, with each object having its own location, size, and angle. Add some additional parameters, and you can give each it’s own fill style, line width. etc.

10

Mark, one slight issue with your version (not the extraction to a class, cos that is exactly the way to do it, but the rect you draw is from the origin (0,0) The issue with this is that rotating the angle will centre the rotation on (0,0) so the object will rotate around one of it’s corners.

This also means instead of self.left and self.bottom may be better as self.x and self.y representing the centre positioning of the object.

Fixed below:

function RectWithLine:draw()
    pushMatrix()
    translate(self.left, self.bottom)
    rotate(self.angle)
    fill(79, 123, 37, 255)
    strokeWidth(0)
    rect(-self.width/2, -self.height/2, self.width, self.height)
    stroke(255, 60, 0, 255)
    strokeWidth(5)
    line(0, 0, 0, 35)
    popMatrix()
end