JS1k: The JavaScript code golfing competition
2010 - The Original
This demo displays 100 strings with the value "JavaScript" in random locations of an 800x600 rectangle. The font-family, size, and color are also randomized.
- Author:
- Jim Lawless
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- mailsend-online.com/blog
- Compo:
- classic
- Demo link:
- https://js1k.com/2010-first/demo/27
- Shortlink:
- https://js1k.com/27
- Blog post:
- please update here!
- Bytes:
- 832
- Chars:
- 832
- Submission
t=new Array();u=new Array();w=new Array();y=new Array();z=["Courier New","Times New Roman", "Arial", "Trebuchet", "Comic Sans MS" ];a=["red","orange","green","blue","violet","black"];m=function(x){return document.getElementById("z"+x).style;};s="";r=function(x){return parseInt(Math.random()*x);};for(i=0;i<100;i++){ s=s+'<div id="z'+i+'" style="position: absolute; left: ' + (t[i]=r(400) )+ 'px; top: ' + (u[i]=r(400) )+ 'px; font-family: ' + z[r(5)] +'; font-size: ' + r(4) + 4 +'px; color: ' + a[r(6)] +';">JavaScript</div>'; w[i]=r(10)-5;y[i]=r(10)-5;};document.body.innerHTML=s;b=function() {for(i=0;i<100;i++) {v=m(i);t[i]+=w[i]; if( (t[i]>800)||(t[i]<=0)) { w[i]=-w[i]; t[i]+=(w[i]*2); };u[i]+=y[i]; if( (u[i]>600) ||(u[i]<=0)){y[i]=-y[i]; u[i]+=(y[i]*2); };v.top=u[i]+"px";v.left=t[i]+"px"; } } ;setInterval("b()",100);- Description
- This demo displays 100 strings with the value "JavaScript" in random locations of an 800x600 rectangle. The font-family, size, and color are also randomized. At short intervals, each "JavaScript" string will move in random horizontal and vertical increments ( which each may be negative or zero ). Upon hitting a rectangular boundary, the associated increment is negated so that the "JavaScript" string will begin moving in the opposite direction. How does it work? Nothing terribly tricky. The code first generates new HTML and replaces the body.innerHTML with the new HTML ( overlaying the freebie canvas tag ). Take a look at the function named b() by itself. setInterval() is used to call b() no sooner than every 100 milliseconds. b() iterates through all of the "JavaScript" strings and alters the "left" and "top" style properties based on two counterpart increments. The increments are negated if a boundary is crossed.
- Base64 encoded
dD1uZXcgQXJyYXkoKTt1PW5ldyBBcnJheSgpO3c9bmV3IEFycmF5KCk7eT1uZXcgQXJyYXkoKTt6PVsiQ291cmllciBOZXciLCJUaW1lcyBOZXcgUm9tYW4iLCAiQXJpYWwiLCAiVHJlYnVjaGV0IiwgIkNvbWljIFNhbnMgTVMiIF07YT1bInJlZCIsIm9yYW5nZSIsImdyZWVuIiwiYmx1ZSIsInZpb2xldCIsImJsYWNrIl07bT1mdW5jdGlvbih4KXtyZXR1cm4gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInoiK3gpLnN0eWxlO307cz0iIjtyPWZ1bmN0aW9uKHgpe3JldHVybiBwYXJzZUludChNYXRoLnJhbmRvbSgpKngpO307Zm9yKGk9MDtpPDEwMDtpKyspeyAgIHM9cysnPGRpdiBpZD0ieicraSsnIiBzdHlsZT0icG9zaXRpb246IGFic29sdXRlOyBsZWZ0OiAnICsgKHRbaV09cig0MDApICkrICdweDsgdG9wOiAnICsgKHVbaV09cig0MDApICkrICdweDsgZm9udC1mYW1pbHk6ICcgKyB6W3IoNSldICsnOyBmb250LXNpemU6ICcgKyByKDQpICsgNCArJ3B4OyBjb2xvcjogJyArIGFbcig2KV0gKyc7Ij5KYXZhU2NyaXB0PC9kaXY+Jzsgd1tpXT1yKDEwKS01O3lbaV09cigxMCktNTt9O2RvY3VtZW50LmJvZHkuaW5uZXJIVE1MPXM7Yj1mdW5jdGlvbigpIHtmb3IoaT0wO2k8MTAwO2krKykge3Y9bShpKTt0W2ldKz13W2ldOyAgaWYoICAodFtpXT44MDApfHwodFtpXTw9MCkpIHsgd1tpXT0td1tpXTsgdFtpXSs9KHdbaV0qMik7IH07dVtpXSs9eVtpXTsgIGlmKCAodVtpXT42MDApIHx8KHVbaV08PTApKXt5W2ldPS15W2ldOyB1W2ldKz0oeVtpXSoyKTsgfTt2LnRvcD11W2ldKyJweCI7di5sZWZ0PXRbaV0rInB4IjsgfSB9IDtzZXRJbnRlcnZhbCgiYigpIiwxMDApOw==- Original source
Original source not submitted