This is a WebGPU renderer (using compute shaders) for the Peter de Jong attractor. This attractor was first published 1987 in Scientific American in an article by A. K. Dewdney as a reader submission (that reader being Peter de Jong). It was documented by Paul Bourke on his website and in "The Pattern Book: Fractals, Art and Nature" (1995). The color scheme, animation and this implementation are by me. The attractor is defined by an iterated function, calculating a coordinate on each iteration:

• x2 = sin(a * y1) - cos(b * x1)
• y2 = sin(c * x1) - cos(d * y1)

These points jump around chaotically, but if you draw a small dot at each point (for millions of iterations) these unexpectedly detailed patterns appear. The colors are controlled by the difference from the last to the current point:

• red += abs(x2 - x1)
• green += abs(y2 - y1)
• blue += 1.0

The animation is controlled by a global time parameter, from which the 4 attractor parameters are calculated like this:

• a = 4 * sin(t * 1.03)
• b = 4 * sin(t * 1.07)
• c = 4 * sin(t * 1.09)
• d = 4 * sin(t * 1.13)

The compute shader runs short bursts of the attractor in each thread (from random starting points) to simulate sequential calculation. As the attractor is chaotic, starting over from a new random starting point is almost as good as continuing on.

The implementation tries to scale the number of iterations to the available hardware. It does this by running the attractor in multiple passes. Pass 1 is a fixed number of invocations. Pass 2 calculates how many points it can run until 50% of the time budget is used based on the timing information of pass 1. Pass 3 then does the same for 100% of the time budget based on the combined timing information of pass 1 and pass 2. Source code is here.

The info panel in the bottom right lists the timing and number of iterations for each shader pass. The graph in the bottomm left has: cyan - total number of iterations (log scale), green - frame time, red - total gpu time, yellow - javascript time, dark green / yellow / red - gpu time pass 1 / 2 / 3.

changeable parameter description input elements are number inputs - you can use up and down arrow to scroll through values
animation speed	controls how fast t is increased
t	time parameter for the animation can be changed manually if "animate" is switched off
a - d	attractor parameter (see formula) can be changed manually if "set from t" is switched off
inner loop	how many iterations are calculated for a single shader run decrease for weak gpus and mobile
brightness	brighten or darken the final image
gpu budget	how much time per frame the automatic work assignement is trying to use
render scale	changes the resolution of the buffer used to accumulate color information smaller values can help on weak gpus and mobile