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

Groups > comp.lang.javascript > #124455 > unrolled thread

Lexical Binding

Back to article view | Back to comp.lang.javascript

Contents

  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

#124455 — Lexical Binding

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),
            ...
        }

[toc] | [next] | [standalone]

#124457

On Fri, 24 Jul 2026 06:43:10 -0000 (UTC), I wrote:

> 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),
>             ...
>         }

Just to make the code-reuse factor clear, here are 6 different visual
effects, each defined with just one line of code:

    window.effects = /* exported effects functions */
        {
            ...
            "stretch_from_bottom" :
                def_transform_effect_common(def_transform_stretch_shrink(true, 1), false),
            "stretch_from_middle" :
                def_transform_effect_common(def_transform_stretch_shrink(true, 0.5), false),
            "stretch_from_top" :
                def_transform_effect_common(def_transform_stretch_shrink(true, 0), false),
            "shrink_to_bottom" :
                def_transform_effect_common(def_transform_stretch_shrink(false, 1), true),
            "shrink_to_middle" :
                def_transform_effect_common(def_transform_stretch_shrink(false, 0.5), true),
            "shrink_to_top" :
                def_transform_effect_common(def_transform_stretch_shrink(false, 0), true),
            ...
        }

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web