Exploring De Jong Attractors (EDJA)

© 2022 Chris Culy

www.chrisculy.net

See blog post

This a page to explore the visual landscape of De Jong attractors. See the "About" tab for more information. Have fun exploring!

New! More multiple colors

NOTE: these may take a few seconds to draw.

WARNING 1: Safari does not always show the result when using more than 1 million iterations. However, when it says it is finished, you can click "Draw it" again (or press Option-D), and the result might appear quickly.
WARNING 2: Firefox does not necessarily draw "light" and "lighter" correctly. I cannot really recommend Firefox at this point (July 2022).

Speed: See the "About" tab for more details, and the "Tips" tab for suggestions. Short story: Safari is the fastest on the Mac, Edge/Chrome are the fastest on Windows .

Use a sample: OR OR Use settings from a file:
Or drop a settings file here.

Parameters: a: b: c: d: (Enter any numbers.)

Size: Downsize to 1000 x 1000 Shape for points: Iterations:

Drawing color(s): Transparency:
Sample Colors:
Background color:
Sample Colors:

Colors

  • To specify the drawing color(s) EITHER select one from the Sample colors list below the drawing text box OR enter a (CSS) color manually in the drawing color text box. You can specify multiple colors manually by separating them with a semicolon (e.g. red;green;blue).
  • Note: the drawing colors do not have to be unique. For example, you could have 'red;orange;orange'
  • To specify a background color, EITHER select one from the Sample colors list below the background color text box OR enter a single (CSS) color manually in the drawing color text box.

Keyboard shortcuts

  • Option-D: draw the image
  • Shift-alt-D: draw the image
  • Option-R: make random parameters
  • Shift-alt-R: make random parameters
  • Option-2: make random parameters and immediately draw the image
  • Alt-2: make random parameters and immediately draw the image
  • Option-1: choose random colors from the samples
  • Alt-2: choose random colors from the samples
  • Holding down optionalt key while selecting a drawing color from the list will put the actual values into the drawing text box, which you can then edit (for example I might remove gray from Brewer dark2)

Links

The URL contains the information about a, b, c and d parameters, but NOT the settings for color, iterations, and size (they are saved only in the settings files). You can bookmark the URL, make a link to it, or send it to someone to share the "location".

Speed

  • Changing the background color and (un)downsizing are relatively fast.
  • Large images: Chrome/Edge are somewhat faster than Firefox. They are a problem. Safari can't make them, Chrome is slow, and Firefox doesn't draw light/lighter colors correctly. One strategy is to use Safari (since it is faster) to figure out the image you want, save that smaller one, then open the settings file in Chrome/Brave, change the size, and make the larger one, and be prepared to wait a long time...

Miscellaneous

  • There is always something in the image. If you don't see anything, try setting the opacity to opaque and using strongly contrasting colors for the drawing color and the background.
  • It doesn't matter whether the parameters b and d are positive or negative [because cos(-x) = cos(x)].
  • Often when using more iterations, "light" transparency is more effective.
  • Sometimes using a larger size and then downsizing (either here or in an image editing program) will give cleaner results.

This is my new take on exploring De Jong attractors. The one first one is here.

De Jong attractors

De Jong attractors result from iterative calculations of successive points according to the equations:

nextX = sin(a * previousY) - cos(b * previousX)
nextY = sin(c * previousX) - cos(d * previousY)

The a, b, c and d are the parameters in the settings

The De Jong attractors are named after Peter de Jong, of Leiden, Holland. In the "Computer Recreations" column in the July 1987 issue of Scientific American (v. 257:1, 108-111), A.K.Dewdney gives the equations, attributing them to de Jong. Attractors had been written about the previous December in both Scientific American and in Byte magazine. Dewdney also gives 3 sets of parameters suggested by de Jong, which you can try out (the names are de Jong's).

Then, to get the figure de Jong calls "chicken legs," try a= 2.01,b= -2.53,c = 1.61and d = - .33. The respective values - 2.7, -.09, -.86 and -2.2 yield a "dot launcher," and the values - 2.24, .43, - .65 and - 2.43 produce a "self-deco­ rating Easter egg."

Coloring schemes

Even though there is no standard for coloring De Jong attractors, most examples that I've come across seem to follow the lead of Paul Bourke. His idea is to count the number of times the attractor passes through each point, and then color the points by mapping their counts to a palette of colors. That's a good way to visualize the attractor, though I haven't had much success with that technique here. Something to work on ... However, I've chosen a few other ways to visualize the attractor:

  • Use the same fixed opaque color for every point. This is the original method before Paul Bourke (and I think Bourke did this as well).
  • Use a fixed color, but with varying levels of transparency, depending on how far the point is from its predecessor. The more times a point occurs, the darker it will be, so this is related to Bourke's histogram approach, though not the same.
  • Use a fixed red/green/blue value, but with varying amounts of "white" added to the other 2 values, depending on how far the point is from its predecessor. This can be done with or without transparency.
  • Use shades of gray, depending on how far the point is from its predecessor. This can be done with or without transparency.
  • Use arbitrary multiple colors, depending on how far the point is from its predecessor. This can be done with or without transparency.

Speed

As of July 2022, on a Mac Safari is the fastest browser, Firefox is intermediate, and Chrome is the slowest. On Windows, Edge/Chrome is faster than Firefox by 15-20%. (I didn't test Chrome on Windows, since Edge uses the same engine.) Here are some comparisons using the "Standard" example at 1M and 10M iterations.

Times in seconds
Mac and Windows times are not comparable, since the processors are different.

					PC: Intel core i5-1035G4 @1.10 Ghz 1.50 Gh
					Mac: 1.4 GHz Quad-Core Intel Core i5
				

Mac times in seconds     Windows times in seconds
1M10M 1M10M
Safari0.333.53NANA
Firefox2.4223.336.5464.99
Chrome (Brave)8.1274.19NANA
Edge (Chrome)NANA5.754.45

Known issues

  • When a settings file is chosen, the previous image is not removed and the status does not change to "Calculating ..." even though it really is calculating to draw the new image.

In working on this page, I have been inspired by the examples on Paul Bourke's fantastic website.

L. Lee Mcintyre has made this page much more usable thanks to her numerous suggestions. Thank you! Remaining issues are mine alone.

Finally, I have used 2 javascript libraries: chroma.js to deal with color names, including the Color Brewer palettes, and FileSave.js for downloads. In addition, the special downsizing code is adapted from here.