*blog... kind of... *rss
Branching is fun.
17 comments written so far...It all started with this animated gif I found lurking on the internets some months ago...
I saved it for the day I was inspired enough to make the effect with Javascript. That day was yesterday...
I know I know, this isn't really branching, it's just a disgusting worms kind of effect, that was something I got while playing with it. The code is simple, a bunch of particles and you generate a random value that apply to the direction of each particle (aka random walk). To get branching now you need to randomly generate more particles on the position of these particles. Here it's the result:
I posted the effects over twitter and minutes later @thespite emailed me a modified version of this last iteration.
That was interesting! I didn't know <canvas> had a method for blitting. It gave an effect as if it was algae continuously growing while the camera was moving back. To enhance the effect I changed the path drawing to thicker circles.
That looked nice but was starting to be too visually complex (and cpu intensive). I like the 2D version better and then I wondered how could it work if I wired some of the values to the sound amplitude of a tune and then using <audio> again. Here it's the result.
I spent 10x more time looking for a track that suited the effect than doing the effect itself. In the end I found a nice track at the always-interesting enoughrecords netlabel.
And... that is all for today... as usual, with Javascript, the source code is one right click and one left click away. Have fun!
PS: It was nice to see that most of the effects worked on my Android phone. I guess they also work on iPhone? :D
I saved it for the day I was inspired enough to make the effect with Javascript. That day was yesterday...
I know I know, this isn't really branching, it's just a disgusting worms kind of effect, that was something I got while playing with it. The code is simple, a bunch of particles and you generate a random value that apply to the direction of each particle (aka random walk). To get branching now you need to randomly generate more particles on the position of these particles. Here it's the result:
I posted the effects over twitter and minutes later @thespite emailed me a modified version of this last iteration.
That was interesting! I didn't know <canvas> had a method for blitting. It gave an effect as if it was algae continuously growing while the camera was moving back. To enhance the effect I changed the path drawing to thicker circles.
That looked nice but was starting to be too visually complex (and cpu intensive). I like the 2D version better and then I wondered how could it work if I wired some of the values to the sound amplitude of a tune and then using <audio> again. Here it's the result.
I spent 10x more time looking for a track that suited the effect than doing the effect itself. In the end I found a nice track at the always-interesting enoughrecords netlabel.
And... that is all for today... as usual, with Javascript, the source code is one right click and one left click away. Have fun!
PS: It was nice to see that most of the effects worked on my Android phone. I guess they also work on iPhone? :D
The alguae one is pretty cool when adding indecent number of branches to the screen. I noticed good performances on ChromeOS. Quite interesting.
November 29th 2009, Tek
I follow the progress of this work on twitter the final result is great Congrats !!
Beautiful stuff. But the "thicker circles" example doesn't run correctly on my Mac browsers (FF, Chrome, etc). I've noticed that they are pickier about the beginPath/closePath/fill commands, and that you get "leaking" fills if you aren't careful.
I've posted the Mac-correct code at http://www.brainjam.ca/hyperbolic/01_spite_mrdoob.html , and the three statements that have been relocated are designated with a "// **" comment.
I don't know why the begin/close/fill Path commands are different on the Mac, but I recently noticed that my own code, which was working a few months ago, was now broken as well. So this is a recent development.
I've posted the Mac-correct code at http://www.brainjam.ca/hyperbolic/01_spite_mrdoob.html , and the three statements that have been relocated are designated with a "// **" comment.
I don't know why the begin/close/fill Path commands are different on the Mac, but I recently noticed that my own code, which was working a few months ago, was now broken as well. So this is a recent development.
It's funny that it doesn't work with arcs but it does with lines... I was trying to save on fills and just fill at the end. The blitting and fading is eating most of the CPU anyway.
Thanks! I'll fix it tomorrow.
Thanks! I'll fix it tomorrow.
Im running FF 3.0.15 on Win XP (at the office) and some demo's dont work at all or look very weird: the algae looks like it's doesn't do endFill's or moveTo's (it's a triangle mess). Some other's enver work, and some only after i switch tabs (yeah.. for real :)
Looks nice though, and that link to http://diveintohtml5.org is solid gold.
Looks nice though, and that link to http://diveintohtml5.org is solid gold.
Yeah, FF3 doesn't properly support most of all this stuff. I think <audio> started at 3.1... otherwise Chrome/Safari :P
You mention that fill works with lines but not arcs. I wonder whether it's some kind of rounding error in the arc path calculation. If you replace
context.arc(branch.x, branch.y, 5, 0, 2*Math.PI, true);
with
context.moveTo (branch.x+5, branch.y);
context.arc(branch.x, branch.y, 5, 0, 2*Math.PI, true);
context.lineTo (branch.x+5, branch.y);
it works. And you can go back to just filling at the end. But that's kind of cumbersome.
context.arc(branch.x, branch.y, 5, 0, 2*Math.PI, true);
with
context.moveTo (branch.x+5, branch.y);
context.arc(branch.x, branch.y, 5, 0, 2*Math.PI, true);
context.lineTo (branch.x+5, branch.y);
it works. And you can go back to just filling at the end. But that's kind of cumbersome.
Ok, in that last comment, you don't need the lineTo. Just the moveTo will get it working. I'll shut up now ;)
That's interesting! Thanks for sharing your findings :)
Mr.doob if that's your real name!
You've inspired me to go back and give canvas another go. I started porting a game i wrote at uni and got bored and quit. Now its cold outside i might get back on it.
A question for you as my new guru: Is there anything i could use that's maybe faster then AJAX+JSON for a possible multiplayer javascript based game?
Regards dude.
You've inspired me to go back and give canvas another go. I started porting a game i wrote at uni and got bored and quit. Now its cold outside i might get back on it.
A question for you as my new guru: Is there anything i could use that's maybe faster then AJAX+JSON for a possible multiplayer javascript based game?
Regards dude.
Hi man,
Nice and neat experiments, as usual, congrats! :)
What surprised me was the performance of canvas fills and blits... I didn't expected that. Although I guess navigator and compatibility issues are a drawback as usual..
anyway, keep fresh! :)
Nice and neat experiments, as usual, congrats! :)
What surprised me was the performance of canvas fills and blits... I didn't expected that. Although I guess navigator and compatibility issues are a drawback as usual..
anyway, keep fresh! :)
very cool experiments, thanks for sharing ... a bit off topic but I was wondering I you were still using linux for AS development
cheers
cheers
Very good question! Yes, I am. I'm currently using Eclipse/FDT under Ubuntu 9.10 and loving every minute of it ;)
ok! some raw thoughts now.
There are some guys called nvidia,amd,etc... still developing some fancy GPU hardware.
ChromeOS, Javascript, ...and so on, are considering taking profit of that technical advances in 2009?
It's a pitty wasting such efforts with a bunch of high-level functions, omitting the magic behind the graphic acceleration hardware.
But somehow this stuff has a "demoscene" spirit. Pushing the hardware to the limits _ replace here hardware for [a browser+javascript]
There are some guys called nvidia,amd,etc... still developing some fancy GPU hardware.
ChromeOS, Javascript, ...and so on, are considering taking profit of that technical advances in 2009?
It's a pitty wasting such efforts with a bunch of high-level functions, omitting the magic behind the graphic acceleration hardware.
But somehow this stuff has a "demoscene" spirit. Pushing the hardware to the limits _ replace here hardware for [a browser+javascript]
Thanks for the answer :) I was thinking of going back to Win ... but nevermind
@JaK: You must live under a rock... Have you heard of WebGL yet? Google it... ;)
Wow!
I must tell you that I got really inspired by this. Hadn't even thought about syncing audio like that.
But anyway, I managed to build my very first canvas + audio experiment thanks to this ;)
http://party.wall-r.com/flock/
GJ!
I must tell you that I got really inspired by this. Hadn't even thought about syncing audio like that.
But anyway, I managed to build my very first canvas + audio experiment thanks to this ;)
http://party.wall-r.com/flock/
GJ!
Have your say!
*profile
traditional id: Ricardo Cabello Miguel
based in: London, UK
more: twitter, twitpic and soundcloud.
*post nav
Making history not repeat itself
Moving back to Spain
Merry Xmas
Blobs Redux
Making of Starbucks Love Project
Branching is fun.
Setting up Ubuntu 9.10 on a Eee PC 1101HA
Eaze
svg tag + audio tag = 3D Waveform
More and more Javascript
I'm a Windows... ssss... sseven! ... PC...
*latest comments
Harmony
Harmony
Harmony
Harmony
Harmony
Harmony
Harmony
Harmony
Harmony
Harmony