Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #124455

Lexical Binding

Show all headers | View raw

Common code for applying a transition effect where the image being
transitioned to has some matrix transform applied:

    function def_transform_effect_common(transform, swap_parms)
      /* function factory for transform-related effect functions. */
      {
        return function(ctx, parms, t)
          {
            ctx.save()
            ctx.reset()
            ctx.resetTransform()
            ctx.drawImage(swap_parms ? parms.image_bitmap_2 : parms.image_bitmap_1, 0, 0)
            ctx.setTransform(transform(t))
            ctx.drawImage(swap_parms ? parms.image_bitmap_1 : parms.image_bitmap_2, 0, 0)
            ctx.restore()
          }
      } /*def_transform_effect_common*/

A specific matrix transform: stretch/shrink the image vertically,
from/to a specified y-coordinate:

    function def_transform_stretch_shrink(stretch, y0)
      {
        return function(t)
          {
            const mtx =
                {
                    "a" : 1,
                    "c" : 0,
                    "e" : 0,
                    "b" : 0,
                    "d" : (stretch ? t : 1 - t),
                    "f" : %(height)d * y0 * (stretch ? 1 - t : t),
                }
            return mtx
          }
      } /*def_transform_stretch_shrink*/

Put them together, to define a “shrink to bottom” effect:

    window.effects = /* exported effects functions */
        {
            ...
            "shrink_to_bottom" :
                def_transform_effect_common(def_transform_stretch_shrink(false, 1), true),
            ...
        }

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Lexical Binding Lawrence D’Oliveiro <ldo@nz.invalid> - 2026-07-24 06:43 +0000
  Re: Lexical Binding Lawrence D’Oliveiro <ldo@nz.invalid> - 2026-07-25 22:56 +0000

csiph-web