Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: De Jong Attractor visualization

cjlarose.com

Post reply on HN
Print view View original

1–8 of 8 posts

Re: Show HN: De Jong Attractor visualization

#5

Post by markc »

cjlarose wrote: post #2

Written in Clojurescript using Om (React) and THREE.js. Code at https://github.com/cjlarose/de-jong

Very cool!

Nice UI touches too, e.g. maintaining js/history and show/hide editors. I notice the app state is captured in the URL which lets you save a favorite shape. Neat.

What does the throttling do? And what happens without it?

I'd enjoy reading someday about how you developed this (w/ annotated source) and your experiences using core.async, Om, figwheel, etc.

Thanks for sharing it!

Re: Show HN: De Jong Attractor visualization

#6

Post by cjlarose »

kriro wrote: post #3

Pretty awesome. Any specific reason for picking the de Jong attractor (other than the fact that it's pretty)? I usually see Lorenz attractors in tech demos so I'm curious :)

I first found out about the de Jong attractor from a talk recently at the Clojure West conference. https://www.youtube.com/watch?v=vLlbEZt-3j0. I found a few videos around where people were animating between different plots of the attractor, but nothing interactive.

Re: Show HN: De Jong Attractor visualization

#7

Post by cjlarose »

markc wrote: post #5
cjlarose wrote: post #2

Written in Clojurescript using Om (React) and THREE.js. Code at https://github.com/cjlarose/de-jong

Very cool! Nice UI touches too, e.g. maintaining js/history and show/hide editors. I notice the app state is captured in the URL which lets you save a favorite shape. Neat. What does the throttling do? And what happens without it? I'd enjoy reading someday about how you developed this (w/ annotated source) and your experiences using core.async, Om, figwheel, etc. Thanks for sharing it!

Yeah, so the application state is captured in the URL with throttling. The behavior isn't too different from Underscore/Lodash's throttle function (https://lodash.com/docs#throttle). Basically, you can click and drag the range sliders to update the visualization pretty rapidly. If I updated the URL with windows.history.pushState every time the state changed for a single keyframe, it would overload the history and be a pain to hit the "back" button. So instead, I throttle calls to pushState so it fires no more than every 500ms.

I think it might be too to do a write-up. I definitely learned a lot doing it!

Post reply on HN