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 = '<div class="lineBg">&nbsp;</div>';
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(){
$('.lineBg').css('top', midPoint - 100);
$('.lineBg').css('left', '0');
$('.lineBg').css('display', 'block');
$(this).everyTime(200, function(lineCount) {
  }, 700);
function randomLines(i){	
var l1 = '<div id="';
var l2 = '" class="line">&nbsp;</div>';
	 var l = l1+i+l2;	
	 $('#'+i).css('left', getLeftPos(i,mainWidth));
	  $('#'+i).animate({rotate: getRotation(), height: getScale(), opacity: '+=0.5', backgroundColor:'#01a6fb' }, 300); 
	 var neg = true;
	  $('#'+i).css('top',midPoint - 100);
	  $('#'+i).animate({rotate: getRotation(neg), height: getScale(), opacity: '+=0.5' }, 300); 	 
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);
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() { 					   
	$('#container').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