Creating a Zigzag Wave from a Timestamp: A Simple Triangle Wave

Creating a Zigzag Wave from a Timestamp in JavaScript: A Simple Triangle Wave Technique

When working with animations, visualizations, or time-based data transformations, it’s often useful to map an increasing timestamp into an oscillating pattern — something that cycles smoothly up and down, back and forth, or in a “zigzag” manner. This can help create effects like pulsing, bouncing, or alternating motion without complex trigonometry.

In this article, we explore a simple and elegant way to transform a continuously increasing timestamp into a zigzag (triangle wave) pattern using plain JavaScript, with minimal arithmetic and no external libraries.

The Problem

Suppose you have a timestamp t that increases monotonically — for example, it could be frame count, elapsed seconds, or any progressive integer/float value. You want to convert this into a value that oscillates around zero in a smooth, repeating zigzag:

...→ 1 → 0 → -1 → 0 → 1 → 0 → -1 → ...

The pattern repeats every 4 units of t, cycling between 1 and -1 in a piecewise linear fashion.

The Basic Technique

Here’s the one-liner that accomplishes this:

t = Math.abs(t % 4 - 2) - 1;

How does this work?

• Step 1: t % 4 This takes the timestamp modulo 4, wrapping t into the range [0, 4) repeatedly.
• Step 2: Subtract 2 We shift the range to center around zero: (t % 4) - 2 maps to [-2, 2).
• Step 3: Math.abs(...) Taking the absolute value folds the range into a “V” shape: values go from 2 down to 0, then back to 2.
• Step 4: Subtract 1 Shifts the waveform vertically to oscillate between 1 and -1.

Visualizing the Output

This gives the repeating zigzag pattern:

1 → 0 → -1 → 0 → 1 → 0 → -1 → ...

Why Use This Instead of Sine or Cosine?

While sine or cosine functions provide smooth oscillations, they rely on more expensive floating-point calculations, and sometimes you want a linear, piecewise pattern instead of a smooth curve.

Advantages of this technique:

• Simplicity: Uses just modulus, subtraction, absolute value.
• Performance: Only basic arithmetic operations — fast even in tight loops.
• Deterministic: Perfectly repeatable pattern without floating-point noise.
• Control: Easy to adjust amplitude and period by changing constants.

Customizing the Pattern

You can easily change the period and amplitude of the zigzag by introducing variables:

functionzigzag(t, period = 4, amplitude = 1) {
return amplitude * (Math.abs((t % period) - period / 2) - period / 4) / (period / 4);
}

• period controls how many time units it takes to complete a full cycle.
• amplitude scales the peak value.

For example:

zigzag(0);    // 1
zigzag(1);    // 0
zigzag(2);    // -1
zigzag(3);    // 0
zigzag(4);    // 1 (cycle repeats)

Performance Optimization

If you know t is an integer, you can replace modulo with bitwise AND for speed:

t = Math.abs((t & 3) - 2) - 1;

Because t & 3 is equivalent to t % 4 for non-negative integers but generally faster.

Real-World Applications

• Animation timing: Make an object bounce smoothly up and down.
• LED or pixel brightness: Cycle brightness linearly back and forth.
• Game mechanics: Alternate speeds, directions, or states in a predictable pattern.
• Signal generation: Create simple waveform patterns without trigonometry.

Summary

Transforming an increasing timestamp into a zigzag or triangle wave is simple with the formula:

t = Math.abs(t % 4 - 2) - 1;

This elegant expression gives you a repeating piecewise linear oscillation between 1 and -1 with a period of 4 units, without the need for complex math or libraries.

By adjusting constants or wrapping this into a reusable function, you can easily customize period and amplitude for many creative and performance-sensitive applications.