Simple jQuery Abstract line Experiment

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.

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(){
$('#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 = '<div id="';
var l2 = '" class="line">&nbsp;</div>';
	 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 <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

Other Websites

Brendon Smith Social Networks

jQuery Abstract Lines Experiment

Brendon Smith

Photos

Recent Comments

LifeStream