Can anyone please help me with push and popstyle? I’ve tried to get it, but wiki isn’t clear enough for me…
Push and pop provide a convenient way to preserve and restore (respectively) the current set of graphical styles.
Imagine a stack of (playing) cards.
pushStyle writes information about the graphical styles currently being used onto a new card and puts it (pushes it) on the top of the stack.
popStyle takes the card off the top of the stack (pops it off), reads the styles from it and sets the graphical styles accordingly.
If applicable, you could push to preserve, change, push to preserve again, change, pop to restore, and pop to restore to return to the state where you started.
Yeah, i got so far, but can you give me an example or something like that? But thanks for your fast comment!
How about this example: I want to code a function that writes a message in the centre of the viewer, but I do not know what font etc has currently been set - and I do not want to disturb whatever those current settings are when the function is done. So I push to preserve, do what I want to do, and then pop to restore:
function message(str) pushStyle() -- Preserve the current styles on the stack -- Set the styles I need for this function: textMode(CENTER) fontSize(30) font("Inconsolata") text(str, WIDTH/2, HEIGHT/2) -- Write the message in string 'str' popStyle() -- Restore the previously current styles from the stack end
function setup() end function draw() background(40, 40, 50) strokeWidth(10) --Set thick strokewidth stroke(255, 0, 0, 255) --Border is red fill(0, 0, 255, 255) --fill is blue rect(WIDTH/2-100,500,100,50) --draw rectangle 1 (top) pushStyle() --tell codea we want to use some temporary styles noStroke() --set it to noStroke fill(255, 0, 255, 255) --set fill to purple rect(WIDTH/2-100,400,100,50) --draw rectangle 2 (middle) popStyle() --tell codea we are done with the temporary styles rect(WIDTH/2-100,300,100,50) --draw rect 3 (bottom) --last rectangle reverts to same style as first end
So is this playing cards analogy for the case where you have 2 playing cards ? Or each time you push you are making a new card with settings stored, so you then have 3 cards ?
@rydergaz pushstyle and popstyle has nothing to do with playing cards. It works where you change a font, font size, color, etc for a function. You can have one function that shows a fontsize of 50, with a certain color, with a certain font type and those values won’t affect what is done in another function if you put the push and pop styles at the start and end of the function. See the example below. Run it to see what it does. Then to see what pushStyle and popStyle does, comment out those 2 statements to see what happens.
function setup() fill(255) end function draw() background(40, 40, 50) text("this is default white text",WIDTH/2,HEIGHT/2) newText() end function newText() pushStyle() fill(255, 0, 0, 255) font("SnellRoundhand-Bold") fontSize(50) text("this is different style text",WIDTH/2,HEIGHT/2-200) popStyle() end
Imagine a stack of (playing) cards
pushstyle and popstyle has nothing to do with playing cards.
@dave1707 clearly the stack of cards is an analogy. And it is important to convey the idea of a stack.
If it helps, you can think of it in terms of nested blocks of code. Just as a block begins with
if and returns you to the calling context with
end, style operations can be scoped into blocks that begin with
pushStyle(), and return you to the previous context with
Note that comparing it to codeblocks is just an analogy (as is the idea of the stack). Your code won’t run if you don’t match
for etc with a corresponding
end statement. Whereas if you miss off a
popStyle() your code will still run, you just might find things drawing in unexpected colours. So it is highly recommended to match
push with a corresponding
pop (just not absolutely required)
Codea doesn’t indent push and pop, but I’ve indented them below, if it makes it easier to understand.
fill(255, 0, 0, 255) -- outermost layer is red. Let's call this layer 1 pushStyle() fill(0, 255, 0, 255) -- Layer 2 is green pushStyle() fill(0, 0, 255, 255) -- Layer 3 is blue popStyle() -- we are now back to layer 2. Fills will be green popStyle() -- we are now back to layer 1. Fills will be red again
@rydergaz OK, I totally misread the comment. @yojimbo2000 Anyways, you did a lot better job explaining it than I did.
Ah this all now makes sense, thank you guys for the comments.