Mathematical Expression question for circle fill

zzap64zzap64 Member Posts: 405
edited May 2014 in Working with GS (Mac)

Hi,
Im looking for an expression or trick to gradually color 'fill' or 'un-fill' a circle actor dependent on a numerical variable.
Think of water rising up or down. Easier enough with a rectangle however within a circle is causing me a headache. I looked at a mask actor solution but it would cover up my background.
thanks.

Best Answers

  • SocksSocks London, UK.Posts: 12,822
    edited May 2014 Accepted Answer

    @tatiang said:
    Psshhh, I could have told you that.

    >

    Or no, actually I couldn't have.

    >

    Impressive demo!

    Cheers, it was actually fairly simple.

    Take any right-angled triangle.

    Take the two sides that "are not sloped" (a technical term look it up).

    Add up the square of both these sides and it comes to the square of the sloped side.

    So if we have the height of where we are plotting the line segment (in relation to the circle's origin) we can tell how wide it needs to be, by just reversing the above idea.

    Example, if we have a 200 pixel high circle, and we are 50 pixels from the bottom, then imagine a right angle triangle drawn from the centre of the circle down and right to the point at which it intersects the edge of the circle 50 pixels above the base of the circle, then back left to the centre line and back up to the centre . . . . so that's our triangle, we know the height of the left hand side upright section - and from this we can extract the length of the bottom of this triangle which is just the square root of (the square of the sloped side [minus] the square of the left hand side upright section) - that's the length, and the line section at that height needs to be twice as wide (our triangle only occupies one half of the circle.

    Hope that makes some sense, it's a messy explanation of a simple idea, it would be much simpler to explain with pictures.

  • SocksSocks London, UK.Posts: 12,822
    edited May 2014 Accepted Answer

    @tatiang said:

    @zzap64 said:

    P.S. I forgot the obvious trick of ganging up spawn behaviours, so you can have the fine setting for a perfectly smooth circle and still have it responsive / draw fast (depending on your needs).

    Much much faster version below:

    https://www.mediafire.com/?5kec2r6d463a93x

    . . .

Answers

  • tatiangtatiang Member, Sous Chef, PRO, Senior Sous-Chef Posts: 11,949

    You might consider an animation-style fill. That is, you create each step of the fill as a separate image and then change the image as needed based on the value.

    New to GameSalad? (FAQs)   |   Tutorials   |   Templates   |   Greenleaf Games   |   Educator & Certified GameSalad User

  • HopscotchHopscotch Member, PRO Posts: 2,782

    zzap64, with layering and "blending mode" tricks you should be able to do this very simply, without affecting your overall scene. Implementation should be simple.

    I don't have a moment to make an example, here are two videos to get you there though.

    and

  • zzap64zzap64 Member Posts: 405

    Thanks for the advice @Hopscotch, @tatiang.
    I played around with blend modes. Couldn't find a solution. I have the growing / shrinking actor over the circle actor with a graphic background.

  • zzap64zzap64 Member Posts: 405

    worked it out. Used multiply blend modes and made the alpha area on the circle actor much larger to mask the growing / shrinking actor. Yay. Thanks for your help, pointed me in the right direction.

  • SocksSocks London, UK.Member Posts: 12,822
    edited May 2014

    @zzap64 said:
    worked it out. Used multiply blend modes and made the alpha area on the circle actor much larger to mask the growing / shrinking actor. Yay. Thanks for your help, pointed me in the right direction.

    If you actually want a real circle fill (rather than a visual trick) it shouldn't be too hard, you just need to spawn some 1 pixel high squares with each one progressively getting wider . . .

    The width of each piece should be the square root of (the vertical distance from the centre point squared - minus the square of the Y position) x 2 . . I think ! Or something very similar to that at least . . .

    Hold on, let me do a quick demo . . . . back soon . . .

  • zzap64zzap64 Member Posts: 405

    ok cool. Look forward to it :)

  • SocksSocks London, UK.Member Posts: 12,822

    I think this is it . . .

    √(size-((Y position [minus] 400) * (Y position [minus] 400)))

  • SocksSocks London, UK.Member Posts: 12,822

    . . . . I'll stick it into a project for you to put it in some context . . .

  • SocksSocks London, UK.Member Posts: 12,822
    edited May 2014

    actully it's going to have to be

    2x√(size-((Y position [minus] 400) * (Y position [minus] 400)))

    (??)

  • SocksSocks London, UK.Member Posts: 12,822
    edited May 2014

    Demo file: https://www.mediafire.com/?iege6h2ndppxu53

    You can make the 'resolution' of the fill finer or coarser - finer fills look smoother, coarser fills fill faster and are less taxing on your project - but are, of course, coarser - but you can simply place a boarder over these rough edges if you need (see video below)

    To make the fill finer change the value that the spawner moves up on each iteration, if you change this to, for example, +5, then also change the height of the fill actor to the same value.

    P.S. the colour fills smoothly, but running GS and screen capture software to make the video makes it look bad.

  • zzap64zzap64 Member Posts: 405

    Cracking job sir, thanks @socks. Just poured a Guinness, rewatching the last few episodes of Breaking Bad and tinkering with GS on my lappy while my missus thinks i'm looking at Ikea. Rock and Roll Thursday night !
    Cheers again.

  • SocksSocks London, UK.Member Posts: 12,822

    @zzap64 said:
    Cracking job sir, thanks socks. Just poured a Guinness, rewatching the last few episodes of Breaking Bad and tinkering with GS on my lappy while my missus thinks i'm looking at Ikea. Rock and Roll Thursday night !
    Cheers again.

    Ah, the false Ikea web page scam, been keeping men 'busy' for nearly a decade.

  • tatiangtatiang Member, Sous Chef, PRO, Senior Sous-Chef Posts: 11,949

    @Socks‌

    @Socks said:
    actully it's going to have to be

    2x√(size-((Y position [minus] 400) * (Y position [minus] 400)))

    Psshhh, I could have told you that.

    Or no, actually I couldn't have.

    Impressive demo!

    New to GameSalad? (FAQs)   |   Tutorials   |   Templates   |   Greenleaf Games   |   Educator & Certified GameSalad User

  • zzap64zzap64 Member Posts: 405

    nice one, thank you @socks

  • tatiangtatiang Member, Sous Chef, PRO, Senior Sous-Chef Posts: 11,949

    @Socks said:
    Hope that makes some sense, it's a messy explanation of a simple idea, it would be much simpler to explain with pictures.

    It made sense. :)

    New to GameSalad? (FAQs)   |   Tutorials   |   Templates   |   Greenleaf Games   |   Educator & Certified GameSalad User

Sign In or Register to comment.