Help with push and popstyle

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 function, for, 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 popStyle().

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 function, 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.