Skip to content

Radiating graphics: a burst effect around an element, and a radial particle emitter with a lifecycle #379

Description

@LeadcodeDev

Context

Two related kinds of emphasis graphic come up in this batch. Both are made of many short strokes radiating from a point, and both take today hundreds of hand-placed nodes generated by a script.

1. burst: a splash of strokes when an element pops

When a pill pops in, a few brush-like strokes radiate from it and vanish. Today it takes N line nodes at computed angles, each with its own draw_in timing.

{ "name": "burst", "delay": 0.2, "duration": 0.4, "count": 8, "length": 40, "gap": 12,
  "width": 4, "color": "#FFB020", "seed": 3, "jitter": 0.2 }

This is an animation effect drawn around the element's box. The strokes draw outward from gap px off the box edge, then retract.

2. A radial emitter with birth, travel, death and respawn

A warp tunnel: hundreds of light streaks shoot from the centre to the edges, accelerating, in a continuous flow, with a dark eye in the middle. particle is deprecated, and the for-each + rand + sin($t) recipe has no lifecycle. The reel 10 study generated 460 nodes in Python, each with its own keyframed trajectory: hundreds of kilobytes of JSON for 3 s.

{ "type": "emitter", "origin": { "x": 960, "y": 540 }, "rate": 180, "life": [0.7, 1.2],
  "direction": "radial", "speed": { "from": 200, "to": 1600, "easing": "ease_in" },
  "spawn_radius": [260, 470], "shape": "streak", "length": [60, 240],
  "color": "#EEF4FF", "seed": 7 }

It is deterministic for a given seed and time, so any frame renders independently, as the parallel renderer requires.

Found in: reel 3 (burst), reel 10 (emitter)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions