Graphs

A Color value is a single fact: this particle is red. But for most particles, you don’t want a single fact. You want behaviour over time. A spark that starts white-hot and fades to red. A smoke puff that grows transparent as it ages. A flame whose size pulses and then shrinks.

That’s what a graph is for. A graph is a value that varies as the particle ages.

How a graph is read

The horizontal axis of a graph is the particle’s age, from 0 (just born) to 1 (about to die). The vertical axis is the value at that age.

A simple graph might have two keypoints: one at time 0 with value white, one at time 1 with value red. The engine reads the graph every frame, looks up where the particle is in its lifetime, and produces the value at that point — interpolated smoothly between keypoints.

A more complex graph has more keypoints. A flame’s Size graph might rise from 1.0 at time 0, peak at 1.4 around time 0.3, and fall to 0.2 by time 1.0. Three keypoints, two segments, all interpolated.

The plugin’s Color, Size, Transparency, Speed, and several other properties are all graphs.

Two editors, one mental model

Graphs come in two flavours, edited in different tools:

• Number graphs (NumberSequence) — Size, Speed, Transparency, Brightness, Rotation Speed (axis-grouped, data attrs RotSpeedX/Y/Z), and many others. These open the Graph Editor, the focus of this chapter.
• Colour graphs (ColorSequence) — Color, TintColor on ColorCorrection. These open the Color Sequence Editor, a different tool. Covered briefly at the end of this chapter.

Both share the time-versus-value model: horizontal axis is the particle’s age (0 to 1), vertical axis is the value. Both interpolate between user-placed control points. They diverge in their UI controls, since editing a colour gradient is a different kind of work than editing a numeric curve.

The Graph Editor

When you click a number-graph property in the panel — say, Size or Speed — the Graph Editor opens. It shows the graph as keypoints on a 2D plot. You’ll see:

• The keypoints themselves, draggable.
• The segments between them, drawn as smooth lines.
• A horizontal time axis (0 to 1) and a vertical value axis.

You can:

• Click empty space to add a new keypoint at that time.
• Drag a keypoint to move it. Time can change (left and right) and value can change (up and down). Keypoints at time 0 and time 1 are locked horizontally — the start and end of life are fixed.
• Double-click a keypoint to open an edit panel where you set the time and value numerically.
• Shift-click to multi-select. Delete to remove selected keypoints.

Presets

Twenty preset graphs come with the editor. Seven shape presets (Linear, Ramp Down, Constant, Bell, Inv Bell, Step, Bounce) plus the easing families (InSine / OutSine / InOutSine, InQuad / OutQuad / InOutQuad, InCubic / OutCubic / InOutCubic, InExpo / OutExpo / InOutExpo, plus a generic Smooth). Click a preset and your graph is replaced with the preset’s keypoints. Useful when you have a shape in mind but don’t want to build it from scratch.

Bezier handles

By default, the segments between keypoints are smooth (cubic bezier). Each keypoint has a pair of bezier handles — small extensions that control the graph’s slope going into and out of the keypoint. Drag a handle to change the slope. The default handle position produces a natural smooth shape; pulling a handle makes the slope more pronounced near that point.

There’s a global toggle in the editor: Handles on or off. With handles off, segments render as straight lines (linear interpolation between keypoints). With handles on, each keypoint exposes its own pair and segments render as bezier curves.

Authored handle positions are preserved across the toggle and across keypoint additions. Adding a new keypoint while Handles is off no longer flattens the existing curves’ authored handle values — they stay in place, ready to be reused the moment you flip Handles back on. Same for keypoints added in linear mode: the handles on neighbouring keypoints aren’t disturbed.

Envelope mode

A graph produces the same value for every particle at the same age. Same age = same size, same transparency, same brightness. That’s deterministic and often what you want. Sometimes you want variation: each particle to have a slightly different value at the same age, randomised within a range.

Envelope mode is for that. When you enable Envelope on a keypoint, the keypoint sprouts a small range above and below its main value. The engine, when it reads the graph, picks a random value within that envelope per particle. A particle’s transparency at age 0.5 is no longer “the graph says X” — it’s “the graph says X, plus or minus envelope.”

Envelopes vary over the graph too. A keypoint at time 0 might have envelope 0 (no variation at birth) while a keypoint at time 1 has envelope 0.3 (significant variation at death). The envelope itself is interpolated between keypoints.

Envelopes only exist for number graphs — NumberSequence properties like Size, Transparency, Brightness, Speed. The Color Sequence Editor has no envelope system; per-particle colour variation isn’t part of the graph itself.

Simplification

If you’ve authored a graph with many keypoints and want to thin it out, the Simp button opens a slider. Drag the slider rightward and the editor removes keypoints that don’t change the graph’s shape much, keeping only the ones that matter. The slider goes from “no simplification” to “almost a straight line.” The original is preserved until you click Minimize to commit, so you can preview before committing. Closing the Simplify panel without clicking Minimize reverts to the original — there’s no way to lose the authored keypoints by accident.

Click-without-drag on a keypoint no longer pollutes the undo stack — only intentional changes (drag, edit, delete) push undo entries.

This is useful when a captured-from-something graph has fifty keypoints but really only needs eight to look the same. The simplification preserves the shape with the fewest keypoints possible.

Where graphs apply

Most graphs in the plugin are NumberSequence graphs: Size, Speed, Transparency, Brightness, Rotation Speed (axis-grouped, data attrs RotSpeedX/Y/Z), and several more. A few are ColorSequence graphs: Color, TintColor on ColorCorrection. These are Roblox’s own types — what you’d see in Studio’s property panel or use in a script. Number graphs open the Graph Editor described above; colour graphs open the Color Sequence Editor described next.

The Color Sequence Editor

Click a Color or TintColor field and a different editor opens — not the keypoint-and-curve plot but a horizontal gradient strip with stops along it. Each stop is a colour at a particular age. The strip itself is the interpolated gradient between stops.

You can:

• Click a stop to select it. The colour picker opens for that stop.
• Click empty gradient space to add a new stop at that age.
• Drag a stop to slide it along the gradient. Stops at age 0 and age 1 are locked horizontally, like keypoints in the Graph Editor.
• Delete a selected stop to remove it (except the locked endpoints).

The model is the same as a number graph — control points along an age axis, interpolated between — but the controls are tuned for the kind of work editing a colour gradient is. There’s no slope to tweak (colours don’t have slopes), no envelope mode for per-particle randomisation (the plugin uses a separate mechanism for colour variation). What you see on the strip is what every particle gets at that age.

What’s next

Graphs describe how a particle changes over its lifetime. But that raises a question: where do the particles come from in the first place? Do they spawn as fresh duplicates, each running through their own short life independently? Or does the plugin animate the source itself in place, on a loop, with no duplicates at all? Both are real choices, and the next chapter is about picking between them.