Simple flower experiment didn’t take to long this experiment uses jQuery. This experiment didn’t take long to put together but at the same time I can’t help but think it would be better with Flash/Silverlight/Processing simply because of the way the browser doesn’t seem to be able to handle the PNG with semi-transparency and the animation ends up being kind of slow might have been better if I would have used ProcessingJS, but at the same time it was an idea I had and took all of about a half hour to produce. While searching for a plugin that could rotate the object I also found a cool bezier, curve, arc plugin and really it is kind of fun to play around with jQuery. This was kind of fun to make although it also kind of reminds me of playing around with a Mandala kids toolkit for drawing (you know those simple toolkits where you get a wheel and you spin it around to create various concentric circles). Don’t get me wrong I like both JavaScript and technologies like Flash/Silverlight/Processing but I see those technologies being able to handle extreme graphic rendering extremely well and more importantly consistently. The catch with no plugin has always been browser support. Maybe that will go away if the next generation browser all implement the new technologies consistently but honestly I don’t see that happening anytime soon. I am also glad to hear that flash is going to be integrated into chrome! I think flash should honestly be integrated directly into the browsers. It is also exciting to see the new browsers supporting WebGL. I see adobe making future versions of flash with the ability to compile to Canvas just a hunch especially when you start to consider technologies like haXe and jangaroo
function bloom(){ var scale = 120; var rotation = 0; var flower = '<div class="flower"></div>'; var flower2 = '<div class="flower2"></div>'; var flower3 = '<div class="flower3"></div>'; var flower4 = '<div class="flower4"></div>'; for(i=0; i<40; i++){ $('#flowerBed').append(flower); $('#flowerBed').append(flower2); $('#flowerBed').append(flower4); $('#flowerBed').append(flower3); $('.flower').css('top', $('#flowerBed').height() / 2); $('.flower').css('left', $('#flowerBed').width() / 2); $('.flower').animate({rotate: '+=20deg', scale: '+=0.06', opacity: 0.90}, 400); $('.flower2').css('top', $('#flowerBed').height() / 2); $('.flower2').css('left', $('#flowerBed').width() / 2); $('.flower2').animate({rotate: '+=40deg', scale: '+=0.04', opacity: 0.60}, 600); $('.flower4').css('top', $('#flowerBed').height() / 2); $('.flower4').css('left', $('#flowerBed').width() / 2); $('.flower4').animate({rotate: '+=60deg', scale: '+=0.03', opacity: 0.30}, 800); $('.flower3').css('top', $('#flowerBed').height() / 2); $('.flower3').css('left', $('#flowerBed').width() / 2); $('.flower3').animate({rotate: '+=80deg', scale: '+=0.01'}, 1000); } } $(document).ready(function() { if(!$.browser.msie){ bloom(); }else{ $('#flowerBed').append("Please don't use this browser it lacks HTML5 capablites and is the bane of Web Development! Go get <a href='http://www.google.com/chrome/index.html' target='_blank'>Chrome</a>, <a href='http://www.mozilla.com/en-US/firefox/upgrade.html' target='_blank'>Firefox</a>, <a href='http://www.apple.com/safari/download/' target='_blank'>Safari</a>, something!"); } });
Launch Experiment / Download Code
Related posts:
Recent Comments