Pocket Full of Canvas
August 31, 2009Jacob Seidelin
- http://blog.nihilogic.dk/
- Location:
- Copenhagen, Denmark
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
A collection of graphics effects rendered with JavaScript and the canvas element. You can view, edit and update the code for the effects, seeing the changes instantly. Make sure to also check out the musical demo.
Technology:
JavaScript, Canvas, SoundManager2, Pre3D
Comments
zaujimave
Reply to this commentHello, I am a Program Manager with the PC Ecosystem Engineering team at Microsoft. We've done some internal testing and found a compatibility issue with http://www.chromeexperiments.com/detail/pocket-full-of-canvas/ on Internet Explorer 9. Reference #: BUG 27657: mouse click is not captured due to empty div layer .This is because this author uses a canvas layer to render an interactive area with an empty div on top for input capture – this doesn’t work in IE. To work in IE, must use a transparent image or empty canvas . Please contact us for any support or plans to resolve this issue. Thanks for taking the time to review our communication.
Reply to this commentforget about IE. That's why you use chrome for this. That's why it's called "chrome experiments".
Reply to this commentchange transform.translate( cos(theta) * 2, bs, sin(theta) * 2 );
in Pre3D EQ to
transform.translate( tan(theta) * 2, bs, tan(theta) * 2 );
for a straight line of cubes
Reply to this commentTÚNEL DO TEMPO
Reply to this commentIsso é só o começo,perante essa pandemia que o crak transfoma tanto os pobres classe media e rica Agora todos são denominado como como VICIADO,LADÃOE SEN VEGONHA!!!!!!
Reply to this commentAcho que a sociedade emves de criticar,devia se aproveitar do vicio. Dando suas migajhas co mo se focemos um cão viralatas.
Reply to this commentA finalidade desse blog é,auxiliar trocar ideias eu até agora não tinha meus olhos abertos. fiquei doze anos dentro desse inféno por isso o nome do blog,entre o céu eo inferno.
Reply to this commentme gusta por el apecto ignotico
Reply to this commentnice one, it's seems like a development environment in itself !
Reply to this commentvery good:-)
Reply to this commentI kinda et dizzy looking at them :s
Reply to this commentI couldn't get it to run
Reply to this commentje veux voir tous
Reply to this commentbigginesh
Reply to this commentOMFG This ROCKS! Thankyou for making it sir...
Reply to this comment:( Not working in IE8
Reply to this commentThat's why it's called GOOGLE CHROME EXPERIMENTS. HURRDURR.
Reply to this comment"Users" on PCs think, that if something is not made for Windows or for IE, that it must be ugle, bad and unwanted. They sucks.
Gmail
Reply to this commentGreat Work!
Reply to this commentIf you change var cube = Pre3d.ShapeUtils.makeCube(1); to var cube = Pre3d.ShapeUtils.makeCube(6); the cube will grow giant! (in Pre3dColorscube)
Reply to this commentTry making drawText((i+1), "fstarf", 3, pos[i][0], pos[i][1]); into drawText((dx*1214), "fstarf", 3, pos[i][0], pos[i][1]); in BorderBlobs.
Reply to this commentWhoops, Accidentally doubleclicked.
Reply to this commentNever mind.
This stuff is just pure niceness! ;) Keep on coding!
Reply to this commentI'M SUPPORT YOUR SITE
Reply to this commentOh really? By what? By adding ads to sites?
Reply to this comment// mouse over for fancy magnifying glass effect (best in Chrome)
return { render : function() { drawImage("pirateship.jpg", 0, 0, 1, 1);
if (mouse.over) { deform(function(r,a,x,y){ var dx = x - mouse.x; var dy = y - mouse.y; var dist = sqrt(dx*dx+dy*dy); var radius = 0.15; return { moveX : dist > 0.45 ? 0 : (dx / dist) * radius * sin(dist/radius), moveY : dist > 0.45 ? 0 : (dy / dist) * radius * sin(dist/radius) } },12,12,0);
commit();
drawCircle(mouse.x, mouse.y, 0.47, null, "black", 6); drawCircle(mouse.x, mouse.y, 0.47, null, "white", 3); }
commit();
} };
Reply to this commentyou learn this picture
Reply to this commentvery nice demo
Reply to this commentAt first I didn't realize it was using SoundManager2 and thought it was using the HTML5 element and freaked out!! Now it's normal :P, cool though
Reply to this commentTry to change value "chars" in "Ones and Zeros" from "01 " to "01234567890qwertyuiopasdfghjklzxcvbnm" to get password cracker effect! (lol)
Reply to this commentHalted my computer to a standstill after I changed a variable. Couldn't close Chrome, even Ctrl+Alt+Del did nothing, so I had to do a hard reboot >:-(
Reply to this commentTURBO !
Reply to this commentHey!!! Great job there.... Tweaking the settings is real fun! Most fun is substituting the sine and cosine functions with tangents, and watch as they move erratically or go crazy :) try it on the Color Rects example, and change sine and cosine to tangent.... Wham crazy stuff :)
Reply to this commentSome nice oldskoolish demo effects here. Well done! :)
Reply to this commentgood
Reply to this commentit's not just good it' s awsomenesss
Reply to this commentits not awsomeness its awsome sauce!
This was funny! Many things of it works good on chrome 4.0.206.1!
Reply to this commentLooks great
Reply to this commentOMFG! This performance is amazing!
Reply to this commentneeds some more work
Reply to this commentRepresenting for the oldskool!
Reply to this commentThat's cool =)
Reply to this comment