fun challenge

[Ian Johnson]

hi all,

so this morning my friend EJ challenges me to recreate this with d3:

http://24.media.tumblr.com/tumblr_m46uw7Z5x61qzw1qyo1_500.gif

and i come close, but no cigar with this (click play in the top left):

http://enjalot.com/delta/3105745/

i was helped along quite a bit by this old block: http://bl.ocks.org/1123639

there's gotta be an elegant way to get all the squares to end up in the same place when t reaches 1, but rotate at varying speeds as t goes from 0 to 1.

any takers?

--
Ian Johnson

http://enja.org

[Zack Maril]

Take a look at each level of squares. The first level rotates 90 degrees. The second level rotates 180 degrees. Third does 270 degrees. Make each progressive level rotate i*90, starting from i=1. They will always line up at the end because of the rotational symmetry of the squares. 
-Zack

[Ian Johnson]

I'm not sure I see quite what you mean, perhaps you could use code to illustrate? :)

I took what I thought were your suggestions and incorporated them here:

http://enjalot.com/delta/3106115/

notice the sin calculation at the very bottom of the code is where all the "factor" variables get used.

Another big difference between this snippet and the last one i posted is here "d.angle =" instead of "d.angle +="

with the += the effect may be easier to create but it's not deterministic so you can't go back and forth in time.

after playing some more with the code i've come onto this fun example (still not an answer to the challenge)

http://enjalot.com/delta/3106064/

[Zack Maril]

Got it. It uses a custom attrTween and the secondary svg rotate function. 

http://bl.ocks.org/3106612

-Zack

[marc fawzi]

Tripping is part of the job or a side benefit?

[Ian Johnson]

yes! you win!

thank you :)

i incorporated your method into this one:

http://enjalot.com/delta/3107064/

what i like here is that you can slide the bar back and forth to any point inbetween (therefor exploring the attrTween you suggested)

[Frank Guerino]

Very cool

[marc fawzi]

very cool

is music visualization possible with browser's audio api and d3?

fractals, heatmap, plasma etc have all been accomplished with d3 ...
so i think someone should be able to build an in-browser music
visualizer like itunes using d3, or is that a misguided use of d3...?

[Ian Johnson]

far from misguided, i think it's a great use! i've begun experiments in that realm:

http://enjalot.com/flow/2956398/

(it may take quite some time for the mp3 to load, the play button will un-gray when its ready, also wait a few seconds after clicking play for the music to start)

i'm using the fft function of the audio api to affect different properties. basically out of the 1024 elements in the fft array, they all go from 0 to 255 for whatever frequency they correspond to. i normalize them to a number between 0 and 1 and then use that to interpolate between different numbers used for attributes of the visualization.

several things need to be improved in this view to make it a more suitable visualization development environment. but hopefully it keeps this discussion going :)

[Zack Maril]

Ian,

Try divorcing the editor from the same page as the content. If I could ctrl+tab back and forth between the code and display, that would be awesome. Like, have one page be editing the gists and another page be displaying them. 
-Zack

[Ian Johnson]

you can kind of do that by loading in a file from your OS, just drag and drop into the window (not the editor) (if in chrome) and it will auto reload the file whenever you save it. you can click the hide button to get rid of the code in that view. i prototype like that sometimes. I use this tributary environment as a way to get from 0-60 quickly, then once i think i have something nice or need more capabilities i rip out the code and put it in a proper repo/environment

[marc fawzi]

there must be some established numerical recipes for beat detection
... an i7 cpu can handle a lot and maybe use some JS matrix
computation library that runs stuff on the GPU (via WebGL) ... I did
come across one a while back

with beat detection, for example, you can animate the rotating square
thing that you've made (half circle clockwise and then rotate back, or
something like that) in sync with the beat! :) boom boom

meanwhile, working on animating a bar chart (with negative and
positive values, and switching between data sets and scale types..)
HOW MUNDANE IN COMPARISON!!

Lucky u :) Can't wait to catch up

[marc fawzi]

>> http://enjalot.com/flow/2956398/

Dude!

that kicks ass!

I can't believe you can get this much fun out of FFT