Magnetic
July 02, 2010Hakim El Hattab
- http://www.hakim.se
- Location:
- Stockholm, Sweden
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
Magnetic points are used to control a flow of particles. If there are many particles orbiting a magnet, it will radiate color and increase in size.
Add plenty of magnets, move them around, and you'll see a new result each time!
Click and drag to move the magnets.
Double click to create a new magnet.
Keyboard left/right to change skin.
Technology:
Canvas, JavaScript
Comments
fun!
Reply to this commenti like the
Reply to this commentoiiiiiiiiii
Reply to this commenthi
Reply to this commentnice one - maybe the velocity and direction change of the small particles can be changed.
Reply to this commentgooglr c is god
Reply to this commentwow, this is amazing
Reply to this commentGreat !
Reply to this commentThe matter does touch your interests, please do not touch the exhibits, Jack's story touched me to the heart. He has a wonderful sence of humor, you just humor the baby and he'll be quiet, I am alway in good humor payday.
Reply to this commenti love this thing
Reply to this commentits so amazing!!!!
Reply to this commentVery interesting. With a large number of magnets, the particles start to coalesce into shapes that resemble galactic arms. Particularly interesting since magnetic force involves interacting dipoles, but gravity involves monopolar, spherically-symmetric attraction.
Reply to this commentIt drives me crazy that the particle movement can not be influenced to going other than clockwise - I would love to see clockwise and counter-clockwise movement at the same time. That would be rally cosmic!
Reply to this commentHad to give it a go, now with varied particle rotation: http://hakim.se/experiments/html5/magnetic/03/
Reply to this commentAWEEEEEEEEEEEESOOME!!1111
Reply to this commentPYIMPIN'
Reply to this commentGreat fun! Very cosmic.
Reply to this commentThis is great! Very interesting interaction between fields. Love it!
Reply to this commentThe glow effects made me want to play Lineage 2 again. Thank you
Reply to this commentBrilliant experiment, the only improvement i can think of is the ability to remove magnets.
Reply to this commentIt's not covered in the instructions but you can remove magnets by dragging, and releasing, them outside of the box :)
Reply to this commentJust toss them out of the screen.
Reply to this commentGreat work on this, they look awesome!
Just an idea - would it be possible to create gravitational particles? Like, they'd just be a bunch of dust floating around at first but as they collide and combine, their gravity gets stronger and they'd attract more dust, finally forming a huge object like a rock/planet, etc? :P
Reply to this commentes algo impresionante me quede sin palabras guau
Reply to this commentThat's juz FANTASTIC / Juz AWSOME !!!
Reply to this commentpapua
Reply to this commentHakim, yes the online copy works fine for me now. Thanks.
Reply to this commentNice experiment
Reply to this commentExcelente espectacular, muy interesante http://www.creceemprendedor.blogspot.com/
Reply to this commentFYI: wasn't working in my FF browser, so I looked at the code... and found that one of the color declarations is "#00000000" (eight digits). After editing this in my local copy, the demo works. Strange that other people have been able to view it as is. Chrome apparently is more forgiving (or handles invalid values more graciously) than FF.
Reply to this commentThe only FF version I have tested this in is 3.6 and it works fine there. In ActionScript, 24-bit colors are often defined using hexadecimals (RRGGBBAA), I think that's why I ended up using this syntax where it should have been 'rgba(r, g, b, a)' :)
I have updated the code, hope that takes care of the error for you.
Reply to this commentKOOL WEBSITE
Reply to this commentKOOL
Reply to this commentI'm wondering whether this demo could be altered to serve as a chemistry/physics visualization? I'm not asking you to alter it, Hakim, but would appreciate reading your opinion on the idea? Would it be difficult to code?
The code which increases the glow diameter of a 'nucleus' as it accumulates electron particle wouldn't need to be changed . Even though electrons don't have tails (or do they? hahah) the tail effect wouldn't need to be changed...
...changes would be to add properties to the nucleus (er, 'magnet') prototype to indicate valence and (hmm, how to represent atomic number?). The big changes would be to limit how many electrons are onscreen (based on which, and how many protons)... and to limit how many electrons a given proton could attract.
========
One detail I *do* encourage you to change is this:
Assign random clockwise or anticlockwise vectors to each particle when it is placed. As-is, all the particles swirling clockwise yields interactions which are too, umm, predictable.
Reply to this commentInteresting ideas! Anything is possible, but building a realistic visualization like you're suggesting would require more complex logic, better precision and backup from a scientist :)
I like the idea of introducing varied/randomized rotation patterns to make it less predictable, will see what I can do once I'm done with my current project.
Reply to this commentcool
Reply to this commentOne word amazing. It reminds me of planets, or neutrons. I love just playing around with them.
Reply to this commentSearch theme
Reply to this commentsimply amazing. 1 piece of critique: make it possible to take away magnets
Reply to this commentu can, move it out of the screen and it dissapears
Reply to this commentactually, they stay there, and dots sometimes orbit them. there should be some way to remove them.
I've updated it so that if you move a magnet outside of the canvas, it will be removed.
Wow, amazing! Just 1 little thing: could you make the glow and/or the paths smoother?
Reply to this commentThanks!
The glow quality being bad is a result of the technique used to smoothen the particle movement by leaving short trails.
I added another skin (#2, click right once) which has smoothening disabled - hopefully that looks a bit better :)
Reply to this comment