Peter de Jong Attractor
Mesmerizing, isn’t it?
This is a Peter de Jong attractor. Although you can read more about attractors on Wikipedia, you don’t have to understand all the mathematical details to draw it. Paul Bourke keeps a great gallery of attractors. Here is the page for Peter de Jong attractors. Take a look!
What’s beautiful about attractors is that they can be described succinctly in mathematical formulas. For example, this formula below captures the essence of all Peter de Jong attractors:
let xn = Math.sin(a * y) - Math.cos(b * x)
let yn = Math.sin(c * x) - Math.cos(d * y)let xn = Math.sin(a * y) - Math.cos(b * x)
let yn = Math.sin(c * x) - Math.cos(d * y)where
- a/b/c/d are four constants
xnis the next x positionynis the next y position
Let’s have some fun drawing attractors today.
The Task
The sketch above is adapted from Jeremy Ashkenas’s sketch on Observable. I feel Jeremy needs no introduction — you must have heard about CoffeeScript, Underscore and Backbone. If you are new to the web dev scene, ES6 took inspiration from CoffeeScript and Lodash from Underscore. Nuff said.
Observable is a notebook platform for data visualization and web development in general. All cells are reactive — that means you can slide the slider cells to update a, b, c, d and the attractor will be updated to reflect the change. Try it out!
So, today’s task is to recreate the Peter de Jong attractor. Here are my suggested steps:
- Play with Jeremy’s sketch on Observable: https://observablehq.com/@jashkenas/mini-dejong-attractor
- Recreate the sketch in p5.js
- Pick another attractor from Paul Bourke’s gallery and draw it
If you have more time, try to add some colors or interactions to your sketch. For example, Pine did a few interactive drawing sketches for his 100-day compform challenge. As the attractor is gradually drawn onto the screen, the user can use shift/ctrl/alt + mouse movement to control various constants. Together with the trick of mapping a/b/c/d to r/g/b/a to create distinct color for each attractor, these sketches allow you to draw with attractors.
When you are all done, post your work on Twitter with the hashtag #codecember and #day4. Remember to include a link to the source code, so others can learn from your creation. We look forward to seeing your sketch!