I have put together a simple experiment that draws semi-transparent lines on an HTML page incrementally for no particular purpose.  This is something I can do with ActionScript the difference is this experiment in ActionScript would be 3 times faster and I would have greater control not only would it be faster but it would also work on every browser and render the exact same way.  I do like JavaScript but it is not substitution for ActionScript or C#.  Someday I am quite sure it will mature and more and more libraries of code will be ported over but the expectation for things to render the same way cross browser is a long ways away form a reality.  HTML5 is simply not a Flash or Silverlight Killer. I also know that browsers will need faster JavaScript engines more like Google’s Chrome V8 to compete with browser plugins.  I love ActionScript I find it to be a powerful fast solution with stunning results that cannot be found on the web else where.  In the future I think I will focus most of my JavaScript experiments on jQuery using processingJS because processing is easy to use fast and is the weapon of choice I believe for making really cool data visualization mashups.  In this experiment I used a jQuery timer to execute drawing of lines on the page.  It is a relatively easy experiment and didn’t take long to make and was fun to create so here you go.

simple jQuery Abstract line experiment

var bg = '
 
'; var lpos = 0; var lint = 1; var midPoint; var lineCount = 0; var mainWidth = $(window).width(); mainWidth = mainWidth - 15; var mainHeight = $(window).height(); midPoint = mainHeight / 2; function goLines(){ $('#container').append(bg); $('.lineBg').css('top', midPoint - 100); $('.lineBg').css('left', '0'); $('.lineBg').css('display', 'block'); $(this).everyTime(200, function(lineCount) { lineCount++; randomLines(lineCount); }, 700); } function randomLines(i){ var l1 = '
 
'; var l = l1+i+l2; $('#container').append(l); $('#'+i).css('left', getLeftPos(i,mainWidth)); if(isEven(i)){ $('#'+i).css('top',midPoint); $('#'+i).animate({rotate: getRotation(), height: getScale(), opacity: '+=0.5', backgroundColor:'#01a6fb' }, 300); }else{ var neg = true; $('#'+i).css('top',midPoint - 100); $('#'+i).animate({rotate: getRotation(neg), height: getScale(), opacity: '+=0.5' }, 300); } $('#'+i).css('display','block'); } function getLeftPos(i,mainWidth){ lPos = i; lPos *= 5; if(lint > mainWidth){ lint = 1; } if(lPos > mainWidth){ lPos = 0 + lint++; lPos *= 5; } console.log("Width " + mainWidth+ " lPos " + lPos + " lint " +lint ); return lPos; } function isEven(num) { return !(num % 2); } function getRotation(neg){ if(neg == undefined){ var rotation = Math.random()*100-50; var rotation = '-=' + rotation.toString(); console.log("Neg " + rotation); }else{ var rotation = Math.random()*300-50; var rotation = '+=' + rotation.toString(); console.log("Pos " + rotation); } return rotation; } function getScale(){ var scale = Math.random()*300; var scale = '+=' + scale.toString(); return scale; } $(document).ready(function() { if(!$.browser.msie){ goLines(); }else{ $('#container').append("Please don't use this browser it lacks HTML5 capablites and is the bane of Web Development! Go get Chrome, Firefox, Safari, something!"); } });

Launch Experiment / Download Code