Slides

Slides

Let's have a look at slides 6-11 of toolsforthought & figure out how to do slides.

Code is here
Code for slides 6-11 here

Adding some comments:

# slide-reel or slide-show
present = mathbox.present()

# add one slide
slides =
    present
        .slide()

# split it into 6 sub-slides
expoGraph1 =
    slides.slide
        steps: 6

# draw a left-graph over these 6 frames (or sub-slides)
leftExpo1 = 
    expoGraph1
    .reveal()
        # COORD SYSTEM
        .cartesian
            range: [[-4, 4], [0, 16]]


        # animate grid scale & position
        .step
            # time multiplier, everything happens at 1.5x marked speed
            pace: 1.5,


            # Let's define 4 keyframes: synthetic-time = 0,1,2,3.
            # [Note:] Synthetic as pace=2 would make 1 synthetic-second = half a real second
            # [Note:] I'm putting script: before stops: to clarify what's happening
            #
            script: [
                {props: {scale: [1, 1, 1], position: [ 0,   0, 0]} }
                {props: {                  position: [-1.1, 0, 0]} }
                {props: {scale: [1, 2, 1], position: [-1.1, 1, 0]} }
                {props: {                  position: [ 0,   1, 0]} }
            ]
            # [Note:] Entries expand to: 
            #         "0"   : { props: {...} }
            #         "1"   : { props: {...} }
            #
            # etc. but you can put your own 'timings' in manually, e.g.
            #         "1.5" : { props: {...} }
            #


            # want sub-slides #1,2,3,4,5,(6) to stop at keyframes 0,1,2,2,3,(3)
            # [Note:] If not specified, stops = [0,1,2,3,...]
            #
            stops: [0, 1, 2, 2, 3]


        # GRID
        # ^ For steps (or sub-slides if you like) 0,1,2,3 ...
        .slide
            steps: 0
            from:  0  
            to:    4
            ### ^
                slide id="a"
                slide id="b"
                slide id="c"
                slide id="d"

                -> shows: [a] then [b] then [c] then [d]

                slide id="a"
                slide id="b" from={0} to={2}
                slide id="c"
                slide id="d"

                -> shows: [a + b] then [b] then [b + c] then [d]

                slide id="a"
                slide id="b" from={0} to={2} steps={0} />
                slide id="c"
                slide id="d"

                -> shows: [a + b] then [b + c] then [b + d]

                so you could think of 'steps' as '# of steps this slide consumes'
            ###


        # ... reveal the grid!
        .reveal()
            .grid
                color: 0xC0C0C0
                width: 1
                divideX: 8
                divideY: 8
            .axis
                axis: 'x'
                color: 0x0
                width: 2
            .axis
                axis: 'y'
                color: 0x0
                width: 2
            .end()
        .end()

        # make 64 points (x, 2^x) where x sampled over [-4,+4]
        .interval
            width: 65
            channels: 2
            expr: (emit, x, i) ->
                emit x, Math.pow 2, x

        # ... connect with blue line
        .line
            width: 3
            color: blue

        # draw blue points
        .interval
            width: 17
            channels: 2
            expr: (emit, x, i) ->
                emit x, Math.pow 2, x
        .point
            size: 10
            color: blue