Cenzic 232 Patent
Paid Advertising
sla.ckers.org is
ha.ckers sla.cking
Sla.ckers.org
For any nonsense or banter that doesn't fit anywhere else. LoL! omg! ROFL! 
Go to Topic: PreviousNext
Go to: Forum ListMessage ListNew TopicSearchLog In
Pages: 12Next
Current Page: 1 of 2
AppSec Research Challenge 5: Javascript GFX
Posted by: holiman
Date: October 20, 2009 08:57AM

October 21st is here and with it a new OWASP AppSec Research 2010 challenge.
The winner gets free entrance to next year's AppSec conference in Stockholm.

Last month we had "Who's Who in Security?" so it's time for a more technical
task. JavaScript can be obfuscated as seen in Challenge 3 but you can also
get really creative with the language. *This month's challenge is about
writing the coolest graphical effect in a 2010 character script*.

As an example, copy the script below, switch to the Challenge GFX tab on the OWASP competition page and
paste the script over the URL in the URL bar.

javascript:R=0;%20x1=.1;%20y1=.05;%20x2=.25;%20y2=.24;%20x3=1.6;%20y3=.24;%20x4=300;%20y4=200;%20x5=300;%20y5=200;%20DI=document.getElementsByTagName(%22img%22);%20DIL=DI.length;%20function%20A(){for(i=0;%20i-DIL;%20i++){DIS=DI[%20i%20].style;%20DIS.position='absolute';%20DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22;%20DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval('A()',5);%20void(0)

*Rules*

* The script should work in Firefox 3.5 (yeah, that means HTML5 and CSS3 :)
* Any resource, linked document, script, or image defined on the AppSec Research 2010 wiki page may be loaded/accessed/used ( http://www.owasp.org/index.php/OWASP_AppSec_Research_2010_-_Stockholm,_Sweden )
* No requests to any other location is allowed
* No obfuscation is allowed
* The script may only use ASCII
* Max length of the script is 2010 characters
* You have to give your effect an id and a version number (further
explanation below)
* Any form of malicious code is of course banned ;)

*How to Compete*

There's an official thread on sla.ckers (yes, you're looking at it!) were you share your code and
thoughts (Worried someone will steal you code? Check the originality bullet
below). You can enter as many effects as you like but each effect has to
have an id and a version number, e.g. JohnWobbler_v1.3 for version 1.3 of
John's Wobbler effect.


*Choosing the Winner*

Since this is a creative challenge the OC will chose the winner based on the
following:

* Originality (tweaking someone's code is cool and encouraged but changing a
few magic numbers or inverting a function won't make you the winner)
* Coolness (yeah, you need to convince a few Scandinavian people that your
script is the coolest)

Either the OC choses a winner by ourselves or we choose the top effects and
let you guys vote for the winner.



Edited 2 time(s). Last edit at 10/21/2009 06:51AM by holiman.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: thornmaker
Date: October 20, 2009 02:06PM

Just have to get this out of the way... :)

NullEffect_v0.1:
javascript:x=document.getElementsByTagName('img');for(i=x.length-1;i>=0;i--){x.alt='';x.src=''};void(0)

[edit]: Can you add a link to the "Challenge 5 GFX" page to your post? I can't find it... maybe it's not up yet?



Edited 1 time(s). Last edit at 10/20/2009 02:10PM by thornmaker.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: holiman
Date: October 21, 2009 01:51AM

[EDIT]
Here is the official page on which the demo should run :
http://www.owasp.org/index.php/OWASP_AppSec_Research_2010_-_Stockholm,_Sweden#tab=Challenge_5%3A_Graphical_Effects



Edited 1 time(s). Last edit at 10/21/2009 06:50AM by holiman.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: spawn
Date: October 21, 2009 10:14AM

Can SVG be used ?

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: October 21, 2009 01:41PM

Yes, SVG is alright.

/MJT (aka John Wilander, conf chair)

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: TommyM
Date: October 23, 2009 02:07AM

Ok, here comes the wave:

TommyM_Wave_v1.0

javascript:R=0;DI=document.getElementsByTagName("img"); DIL=DI.length; function Wave(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(10+50*i)+"px"; DIS.top=(Math.cos(R*0.02+i*0.3)*110+150)+"px"}R++}setInterval('Wave()',10); void(0)

/TommyM

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: TommyM
Date: October 23, 2009 02:53AM

Is it ok with interactive stuff also, like for example games?

/TommyM

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: October 23, 2009 07:40AM

Some 8-bit music along with that and I'll feel like a young teenager again :).

Yeah, games are OK. But they'll be judged on gfx, originality, and coolness since we need to compare them with the gfx effects.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: Gareth Heyes
Date: October 23, 2009 11:12AM

Do I get bonus points because mine works in every browser and I have a cool name :) ?

detonate V1.0

http://www.businessinfo.co.uk/labs/jsgfx/jsgfx.html

And here is it compressed to 1010 characters because I thought the challenge was for 1010 not 2010 LOL

javascript:function d(o){var p=10,ids=[],M=100,X=300,Y=100;function a(){window.setInterval((function(d){return function(){for(var i=0;i<d.length;i++){var b=d;var c,sY,o,a;o=document.getElementById(b);if(!o){continue}a=o.a;c=Math.cos(a*Math.PI/180)*o.s;sY=Math.sin(a*Math.PI/180)*o.s;o.left=(N(o.left.replace('px',''))+c)+'px';o.top=(N(o.top.replace('px',''))+sY)+'px';o.m++;o.acc*=1.09;o.s+=o.acc;if(o.m>M){document.body.removeChild(o)}}}})(ids),1)}var c,t,r,b,l,s='style',C=Math.ceil,R=Math.random,N=parseInt,w=C(o.width/p),h=C(o.height/p),$=C(o.width/w),_=C(o.height/h);for(var i=0;i<$;i++){for(var j=0;j<_;j++){t=h*j;l=w*i;r=l+w;b=t+h;c=o.cloneNode(0);c.zIndex=1000;c.position='absolute';c.display='block';c.left=X+'px';c.top=Y+'px';c.clip='rect('+t+'px,'+r+'px,'+b+'px,'+l+'px)';c.id='pce'+i+''+j;c.s=R()*.99;c.acc=0.5;c.a=R()*360;c.m=0;ids.push(c.id);o.parentNode.appendChild(c)}}o.display='none';window.setTimeout(function(){a()},1000)};d(document.getElementsByTagName('img')[0])

------------------------------------------------------------------------------------------------------------
"People who say it cannot be done should not interrupt those who are doing it.";
labs : [www.businessinfo.co.uk]
blog : [www.thespanner.co.uk]
Hackvertor : [hackvertor.co.uk]



Edited 2 time(s). Last edit at 10/24/2009 05:06AM by Gareth Heyes.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: October 24, 2009 06:12AM

Works fine with the link but not when I paste it in the URL bar for the AppSec Research 2010 wiki page. I haven't spent time investigating why though. Safari 4.0.3 on a Mac.

Anyway -- a nice effect! And you have another 1000 chars to spend :).

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: haprika
Date: October 30, 2009 11:16AM

Definitely not gonna get an award for code quality, but here comes the first version of my superb script.
This version only runs on the AppSec Research Challenge 5 tab in the OWASP wiki (parameter to the function), for performance issues. I don't know if it's supposed to be able to run everywhere.

Let's call it: OWASPGathering_v1
1660 chars.

--------
javascript:function spanEm(n){if(n.nodeType==3){var s="";var t = n.data;for (var i=0; i < t.length; i++) {var c = t.charAt(i);if (c.match(/[owaspOWASP]/ig)) s=s + "<span class='letter"+c+"'>"+c+"</span>";else s=s + c;}n.parentNode.innerHTML = n.parentNode.innerHTML.replace(n.data, s);}else if (n.nodeType ==1 && n.tagName.toLowerCase()!="span") {var cns= n.childNodes;for (var i=0; i < cns.length; i++) {spanEm(cns);}}}function moveOne(l,dx,dy) {x = l.offsetLeft;y = l.offsetTop;st= 8;if (x<dx) {x = x + st;}else if (x>dx) { x = x - st;} if (y<dy) {y = y + st;}else if (y>dy) {y = y - st;}l.style.top= y+'px';l.style.left= x+'px';newSize = parseInt(l.style.fontSize.replace("%","")) + 10;l.style.fontSize=newSize + "%";l.style.color="#000";if ((x != dx) || (y != dy)) { window.setTimeout(function(){moveOne(l,dx,dy)}, 10);}}function moveEm() {var spans=document.getElementsByTagName("span");for (j=0; j<spans.length; j++) {spans[j].style.color="#ddd";if (spans[j].className.indexOf("letter")!=0) continue;spans[j].style.position = "absolute";spans[j].style.fontSize= "100%";switch(spans[j].className) {case "letterO": x=100; y=100; break;case "letterW": x=250; y=100; break;case "letterA": x=400; y=100; break;case "letterS": x=550; y=100; break;case "letterP": x=700; y=100; break;case "lettero": x=100; y=200; break;case "letterw": x=250; y=200; break;case "lettera": x=400; y=200; break;case "letters": x=550; y=200; break;case "letterp": x=700; y=200; break;default: x=0; y=0}moveOne(spans[j], x, y);}} document.getElementById('Challenge_5:_Graphical_Effects').style.color="#ddd"; spanEm(document.getElementById('Challenge_5:_Graphical_Effects')); moveEm();
----------------

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: November 01, 2009 02:31PM

The Challenge 5 tab is the official test page.

Nice work! Not really smooth on my MB Pro 2,33 GHz, FF 3.5.3 though.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 02, 2009 01:08AM

2010 are too many chars..

I haven't even tried to minify it..
=/

Name: IDontLikeMatrixButIWasBored_v1.js

javascript:with(document.body.appendChild(document.createElement('div')).style){position='fixed';backgroundColor='black';opacity='0.8';zIndex=10;top=left=0;width=height='100%';}document.getElementsByTagName('head')[0].appendChild(document.createElement('style')).appendChild(document.createTextNode('body *{color:#00FF55!important;}'));var t=[],x=document.getElementsByTagName('*');for(var i=0;i<x.length;i++)for(var j=0;j<x.childNodes.length;j++)if(x.childNodes[j].nodeType==3)t.push(x.childNodes[j]);(function(){var m=0;for(var i=0;i<t.length;i++)(function(t){var e,speed=10+Math.random()*30,offset=Math.random()*screen.height;if(t.parentNode.tagName=='STYLE')return;t.parentNode.appendChild(document.createTextNode(Array(String(t).length+1).join(' ')));t=(e=document.body.appendChild(document.createElement('span'))).appendChild(t);e.style.left=Math.random()*screen.width+'px';e.style.position='fixed';e.style.zIndex=20;setInterval(function(){e.style.top=((offset+speed*m)%screen.height)+'px';},250);})(t);setInterval(function(){m++},250);})();

Note that noscript messes with intervals, so use it on a clean profile (dont be afraid! xD).

Greetz!!

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat



Edited 1 time(s). Last edit at 11/02/2009 01:16AM by sirdarckcat.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: thornmaker
Date: November 02, 2009 01:16AM

@sdc you stole my matrix idea :)

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 02, 2009 01:24AM

hahaha, ok, then I make anotherone

the unonelined code was:
// green letters
document.getElementsByTagName('head')[0].appendChild(document.createElement('style')).appendChild(document.createTextNode('body *{color:#00FF55!important;}'));
// falling letters

var t=[],x=document.getElementsByTagName('*');
for(var i=0;i<x.length;i++)for(var j=0;j<x.childNodes.length;j++)if(x.childNodes[j].nodeType==3)t.push(x.childNodes[j]);

(function(){
	var m=0;
	for(var i=0;i<t.length;i++)(function(t){
		var e,speed=10+Math.random()*30,offset=Math.random()*screen.height;
		if(t.parentNode.tagName=='STYLE')return;//dont mess with css..
		t.parentNode.appendChild(document.createTextNode(Array(String(t).length+1).join(' ')));
		t=(e=document.body.appendChild(document.createElement('span'))).appendChild(t);
		e.style.left=Math.random()*screen.width+'px';
		e.style.position='fixed';
		e.style.zIndex=20;
		setInterval(function(){
			e.style.top=((offset+speed*m)%screen.height)+'px';
		},250);
	})(t);
	setInterval(function(){m++},250);
})();

Anyway, to disprove my last post, where I say 2010 is too much, now I present my new submission that is over 10k hahaha: AFlyFlyingOverSweedenWithLettersOrbitingAroundItOhDidIEverToldUGuysThatILikeLongNamesYeahhhhhhhhh_v1.js

http://pastebin.ca/1652676

I will make it smaller later.. =/

smallified!! now it's 1768 bytes

AFlyFlyingOverSweedenWithLettersOrbitingAroundItOhDidIEverToldUGuysThatILikeLongNamesYeahhhhhhhhh_v2.js


javascript:with(document)with(Math){(function(){$='height';_='width';r='appendChild';e='childNodes';var w=getElementById('p-logo')[r](getElementsByClassName('image')[0]);var v=w[e][0];v[_]="";v[$]=250;z=1;var nw=v.naturalWidth,nh=v.naturalHeight;var size=max(32,(nw>nh?v[$]:nh>nw?v[_]:v[$]));var object=v.parentNode;var w,qw=v.src;with((object.replaceChild(w=createElement('canvas'),v),v=w))height=size,width=size;setInterval(function(){z+=10;var zz=1,zo=(-1+(zz=floor(150+50*sin(PI*z/400))/100))/2;var sf=(100+100*sin(PI*z/200))/100;var sz=v[_],iw=round(sz*0.85),ic=iw/2,os=(sz-iw)/2;var img=new Image();img.onload=function(){with(v.getContext("2d")){beginPath();arc(os+ic,ic+.4,ic,0,(PI/180)*360,true);closePath();clip();clearRect(0,0,sz,sz);fillRect(os,0,iw,iw);globalAlpha=1;drawImage(img,nh*(zo*sf),nh*(zo*.5),nh*(1-zo),nh*(1-zo),os,0,iw,iw);restore();save();}};img.src=qw;},200);var lo=getElementById('p-logo');with((lo.replaceChild(w=new Image(),lo[e][1]),w)){src='/skins/monobook/ologo.gif';height=250;with(style){position='relative';opacity=0.45;zIndex=38;}}with(lo[e][3].style){top='-228px';left='0px';zIndex=37;position='relative';}with(lo.style)zIndex=36,position='fixed',left='40%',top='35%';body[r](lo);})();setTimeout(function(){var z=0;for(var i=6;i<11;i++)(function(o,e,i){body[r](o);with(o.style){position='fixed';zIndex=39+i;setInterval(function(){left=((47+15*cos(PI*(z+e)/50))+'%');},100);setInterval(function(){if(0==(z+e)% 50)zIndex=((z+e)/10)%2?35-i:39+i;top=((45+5*sin(PI*(z+e)/50))+'%');},100);}})(getElementsByClassName('image')[e][0],(11-i)*10,i-6);setInterval(function(){z++},100);},300);with(body[r](createElement('div')).style){position='fixed';backgroundColor='black';opacity='0.8';zIndex=10;top=left=0;width=height='100%';}};void(1)

Greetz!!

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat



Edited 1 time(s). Last edit at 11/02/2009 04:00AM by sirdarckcat.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: November 02, 2009 02:58AM

AFlyFlyingOverSweedenWithLettersOrbitingAroundItOhDidIEverToldUGuysThatILikeLongNamesYeahhhhhhhhh_v1.js is really nice (although currently to many chars)!

A pity the letters are anti-aliased for white background. Maybe we should fix that ...

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 02, 2009 04:01AM

@ManJit:
I just made it 1768.. before I was just copypasting a function from somewhere else haha.. (here: http://www.netzgesta.de/lab/)

I edited my previous post :)

Greetz!!

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat



Edited 1 time(s). Last edit at 11/02/2009 04:01AM by sirdarckcat.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 02, 2009 09:12AM

haha this contest is fun..

FireworksIsNotABrowser_v1.js

javascript:with(Math)with(document){/*sweeden at night*//*sky*/with(body.appendChild(createElement('div')).style)backgroundColor='#809aef',position='fixed',top=left=0,height=width='100%',zIndex=3;/*city*/with(body.appendChild(getElementsByTagName("img")[0]).style)width='100%',position='fixed',bottom=left=0,zIndex=4;/*night*/with(body.appendChild(createElement('div')).style)backgroundColor='black',position='fixed',top=left=0,height=width='100%',opacity=0.7,zIndex=5;/*get some letters*/var chr=(title+getElementById('Invitation').textContent).split('').map(function($,_){with(_=createElement('span'))with(style)position='fixed',zIndex=10,color='orange',bottom='1%',appendChild(createTextNode($));return _;});var sh=function(ds){var clk=0,fn=function(){throw 1;},us=0,std=0,stp=0,c=chr.map(function(x){return body.appendChild(x.cloneNode(true))}),i=setInterval(function(){if(stp>=ds.length){clearInterval(i);c.map(body.removeChild,body)}if(!std)std=clk;try{ds[stp].fn(c,clk-std,clk-std)}catch(e){}if(ds[stp].tm<clk-std)us=clk-std,stp++;},100);setInterval(function()clk++,10);};var _sf=function (s,z){s=s||floor(100*random());z=z||3;return [{fn:function(ch,t){for each(var c in ch)with(c.style)left=s+'%';},tm:0},{fn:function(ch,t){for each(var c in ch)with(c.style)bottom=(t/2+5*Math.random())+'%';},tm:150},{fn:function(ch,t){for each(var c in ch)with(c.style)bottom='75%';},tm:151},{fn:function(ch,t){},tm:175},{fn:function(ch,t,m){var l=ch.length,i=0;for each(var c in ch)with(c.style){i++;marginBottom=floor(m*sin(2*PI*i/l)/z)+'pt';marginLeft=floor(m*cos(2*PI*i/l)/z)+'pt';}},tm:350}];};sh(_sf(20,3));sh(_sf(80,3));/*start the fireworks*/}self.sdc;/**,{fn:function(ch,t){},tm:75}*/

I'm not sure how the rules apply on multiple submissions.. but if I have to choose.. I choose this last one!

super fun :)

Greetz!!

--edit--

FireworksIsNotABrowser_v2.js
javascript:$s='style';$f='fixed';$a='appendChild';var c=['orange','yellow','red','lightblue','#00FFFF','black'];with(Math)with(document){$r=random;with(body[$a](createElement('div'))[$s])backgroundColor='#809aef',position=$f,top=left=0,height=width='100%',zIndex=3;with(body[$a](getElementsByTagName("img")[0])[$s])width='100%',position=$f,bottom=left=0,zIndex=4;with(body[$a](createElement('div'))[$s])backgroundColor=c[5],position=$f,top=left=0,height=width='100%',opacity=0.7,zIndex=5;var chr=(title+title).split('').map(function($,_){with(_=createElement('span'))with(style)position=$f,zIndex=10,color=c[0],bottom='1%',appendChild(createTextNode($));return _;});var sh=function(ds){var clk=0,fn=function(){throw 1;},us=0,std=0,stp=0,c=chr.map(function(x){return body[$a](x.cloneNode(true))}),i=setInterval(function(){if(stp>=ds.length){clearInterval(i);clearInterval(ci);c.map(body.removeChild,body)}if(!std)std=clk;try{ds[stp].fn(c,clk-std,clk-std-us)==-1&&(stp=Infinity)}catch(e){}if(ds[stp].tm<clk-std)us=clk-std,stp++;},100);var ci=setInterval(function()clk+=10,100);};var _sf=function (w,s,z,h,i,cb,ce,ts,ne){s=s||floor(100*$r());z=z||3;h=h||80;i=i||0;ts=ts||5;return [{fn:function(ch,t){for each(var c in ch)with(c[$s])left=s+'%',(cb?(color=cb):1);},tm:w+0},{fn:function(ch,t,m){for each(var c in ch)with(c[$s])r=$r(),bottom=(m*(h/150)+ts*r)+'%',left=(s+(m*i*(h/150))+ts*r*i)+'%',(ce?(color=ce):1);},tm:w+150},{fn:function(ch,t){for each(var c in ch)with(c[$s])bottom=(h+ts)+'%',left=(s+h*i+ts*i)+'%';},tm:w+175},{fn:function(ch,t,m){var l=ch.length,i=0;for each(var c in ch)with(c[$s]){i++;marginBottom=floor(m*sin(2*PI*i/l)/z)+'pt';marginLeft=floor(m*cos(2*PI*i/l)/z)+'pt';}},tm:w+350}];};sh(_sf(0,20,3));sh(_sf(0,80,3));sh(_sf(400,15,1,80,.75,c[2],c[1]));sh(_sf(400,75,1,80,-.75,c[2],c[1]));sh(_sf(450,20,1,70,0,c[1]));sh(_sf(450,80,1,70,0,c[1]));setInterval(function(){for(var i=0;i<5;i++)sh(_sf(i*$r()*350,$r()*100,$r()*3,50+$r()*50,0.075-$r()*0.15,c[floor($r()*5)]));},7e3);}self.sdc;

how should I spend my last 10 bytes?

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat



Edited 3 time(s). Last edit at 11/02/2009 11:17AM by sirdarckcat.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: haprika
Date: November 02, 2009 11:54AM

Let's play some ILikeShortSimpleNamesSoLetsCallThisOnePingPong_v1
--------------

javascript:function getMousePosition(e){mouseX=e.clientX+document.body.scrollLeft;mouseY=e.clientX+document.body.scrollTop;moveOWASP();return true;}function moveOWASP(){var owaspLeft;var owaspRight;if(mouseX<=122)owaspLeft=0;else if(mouseX+122>=sw)owaspLeft=sw-244;else owaspLeft=mouseX-122;old=owasp.style.left;owasp.style.left=owaspLeft+"px";}function checkHit(){ballLeft=parseInt(ball.style.left.replace("px",""));owaspLeft=parseInt(owasp.style.left.replace("px",""));old=parseInt(old.replace("px",""));if(ballLeft+125<owaspLeft || ballLeft>owaspLeft+244){gameOver=true;cont=confirm("GAME OVER. Score: "+speed+".\nCare for another round?");if(cont){reset();moveBall();}}else{speed++;if(old<owaspLeft)incX=-speed;else if(old>owaspLeft)incX=speed;}}function moveBall(){if(gameOver)return;curX=parseInt(ball.style.left.replace("px",""));curY=parseInt(ball.style.top.replace("px",""));if(curY+125>=500)incY=-speed;else if(curY<=0)incY=speed;if(curX+125>=sw-30)incX=-speed;else if(curX<=0)incX=speed;newY=curY+incY;ball.style.top=newY+"px";newX=curX+incX;ball.style.left=newX+"px";if(newY+125>=500)checkHit();setTimeout("moveBall()",5);}function prepare() {with(document.body.appendChild(document.createElement('div')).style){top=left=0;zIndex='5'; opacity='0.8';width='100%';height='100%';position='fixed';backgroundColor='white';}var owasp=document.getElementById('Challenge_5:_Graphical_Effects').childNodes[10];owasp.id="owasp";with(owasp.style){position='absolute';zIndex=7;top='500px';left='250pt';}document.body.appendChild(owasp);sw=screen.width-20;}function reset(){speed=1;old=0;gameOver=false;ball.style.top='0px';ball.style.left='0px';ball.style.position='absolute';ball.style.zIndex=20;}prepare();document.onmousemove=getMousePosition;owasp=document.getElementById("owasp");ball=document.getElementById("p-logo");reset();moveBall();
-------------

cheers.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: November 02, 2009 03:30PM

FireworksIsNotABrowser_v2.js was cool. Did you copy-paste that one too? :P

I guess not since you worked it out with the view over Stockholm Old Town.

Works fine in my FF but not in Safari. Wonder why?

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 02, 2009 07:31PM

@ManJit
it wont work on safari.. I use for each cycles, and only firefox implemented that =/.. it should work on safari?

and the only copypaste was a function that created a sphere from an image lol.. the other stuff is mine :P, and I made my own sphere function for the 1768 chars version.

Greetz!!

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 02, 2009 08:34PM

this one is oversized by a couple of hundred bytes, I'll make it smaller @ night.. I'm not sure about the new effects.. haha, and the size of the flares seem to be too big =/..

FireworksIsNotABrowser_v3.js
javascript:$s='style';$f='fixed';$a='appendChild';var c=['orange','yellow','red','lightblue','#00FFFF','black'];with(Math)with(document){$r=random;with(body[$a](createElement('div'))[$s])backgroundColor='#809aef',position=$f,top=left=0,height=width='100%',zIndex=3;with(body[$a](getElementsByTagName("img")[0])[$s])width='100%',position=$f,bottom=left=0,zIndex=4;with(body[$a](createElement('div'))[$s])backgroundColor=c[5],position=$f,top=left=0,height=width='100%',opacity=0.7,zIndex=5;var chr=(title+title).split('').map(function($,_){with(_=createElement('span'))with(style)position=$f,zIndex=10,color=c[0],bottom='1%',appendChild(createTextNode($));return _;});var sh=function(ds){var clk=0,fn=function(){throw 1;},us=0,std=0,stp=0,c=chr.map(function(x){return body[$a](x.cloneNode(true))}),i=setInterval(function(){if(stp>=ds.length){clearInterval(i);clearInterval(ci);c.map(body.removeChild,body);delete c;}if(!std)std=clk;try{ds[stp].fn(c,clk-std,clk-std-us)==-1&&(stp=Infinity)}catch(e){}if(ds[stp].tm<clk-std)us=clk-std,stp++;},100);var ci=setInterval(function()clk+=10,100);};var _sf=function (w,s,z,h,i,cb,ce,ts,le){s=s||floor(100*$r());z=floor(z*2)/2||3;h=h||80;i=i||0;ts=ts||5;return [{fn:function(ch,t){for each(var c in ch)with(c[$s])left=s+'%',(cb?(color=cb):1);},tm:w+0},{fn:function(ch,t,m){for each(var c in ch)with(c[$s])r=$r(),bottom=(m*(h/150)+ts*r)+'%',left=(s+(m*i*(h/150))+ts*r*i)+'%',(ce?(color=ce):1);},tm:w+150},{fn:function(ch,t){for each(var c in ch)with(c[$s])bottom=(h+ts)+'%',left=(s+h*i+ts*i)+'%';},tm:w+175},{fn:function(ch,t,m){var l=ch.length,i=0;if(le){var f=l/le;for(var k=0;k<f;k++){for(var j=0;j<le;j++){with(ch[le*k+j].style){fontSize='8pt';if(j<=le*m/175){opacity=1;}else{opacity=0.4}marginBottom=floor(m*le*j*sin(2*PI*k*le/l)/(z*20))+'pt';marginLeft=floor(m*le*j*cos(2*PI*k*le/l)/(z*20))+'pt';}}}}else for each(var c in ch)with(c[$s]){i++;marginBottom=floor(m*sin(2*PI*i/l)/z)+'pt';marginLeft=floor(m*cos(2*PI*i/l)/z)+'pt';}},tm:w+350},{fn:function(ch,t,m){for each(var c in ch)with(c[$s]){opacity=1-m/50;}},tm:w+400}];};sh(_sf(0,20,3));sh(_sf(0,80,3));sh(_sf(400,15,1,80,.75,c[2],c[1],5,5));sh(_sf(400,75,1,80,-.75,c[2],c[1],5,5));sh(_sf(450,20,1,70,0,c[1]));sh(_sf(450,80,1,70,0,c[1]));setInterval(function(){for(var i=0;i<6;i++)sh(_sf(i*$r()*350,$r()*100,$r()*3,50+$r()*50,0.075-$r()*0.15,c[floor($r()*5)],0,3,$r()>.5?5:0));},1e4);}self.sdc;

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: November 03, 2009 02:17AM

@sirdarckcat
Version 3 is looking good.

It's fine if it only works in FF 3.5 (that's what we stated in the rules). But I use Safari as my default browser so I just noticed the fireworks didn't work there.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 03, 2009 10:45AM

this one is 2006 and is cross browser.. except IE of course.. and Safari has very well known GC problems on deleted html nodes, so it may be slow in there, but runs "ok" on firefox/chrome.. I can make it faster.. but it will be less smooth, if you want, you can change:

var ci=$i(function(){clk+=10},100);

to

var ci=$i(function(){clk+=100},1e3);

but it will be jumpy, and not smooth at all..

the un-onelined version is: http://pastebin.ca/1655010

you can modify and copy&paste to your address bar.. firefox will remove all extra spaces and stuff

I removed the circle effect since it's not nice haha, I left the star effect only.

FireworksIsNotABrowser_v4.js
javascript:$s='style';$f='fixed';$a='appendChild';$l='length';$w='createElement';var c=['orange','yellow','white','lightblue','#00FFFF','black'];with(Math)with($d=document){$r=random;$i=setInterval;$c=clearInterval;with(body[$a]($d[$w]('div'))[$s])backgroundColor='#809aef',position=$f,top=left=0,height=width='100%',zIndex=3;with(body[$a](getElementsByTagName("img")[0])[$s])width='100%',position=$f,bottom=left=0,zIndex=4;with(body[$a]($d[$w]('div'))[$s])backgroundColor=c[5],position=$f,top=left=0,height=width='100%',opacity=0.7,zIndex=5;var chr=(title+title).split('').map(function($,_){with(_=$d[$w]('span'))with(style)position=$f,zIndex=10,color=c[0],bottom='-1%',_[$a](createTextNode($));return _;});var sh=function(ds){var clk=0,us=0,std=0,stp=0,c=chr.map(function(x){return body[$a](x.cloneNode(true))}),i=$i(function(){if(stp>=ds[$l])return $c(i),$c(ci),c.map(body.removeChild,body),delete c;std=std||clk;try{ds[stp].fn(c,clk-std,clk-std-us)==-1&&(stp=Infinity)}catch(e){}if(ds[stp].tm<clk-std)us=clk-std,stp++;},100);var ci=$i(function(){clk+=10},100);};var _sf=function (w,s,z,h,i,cb,ce,ts){s=s||floor(100*$r());z=floor(z*2)/2||3;h=h||80;i=i||0;ts=ts||5;le=5;return [{fn:function(ch,t){ch.map(function(c){with(c[$s])left=s+'%',(cb?(color=cb):1);});},tm:w+0},{fn:function(ch,t,m){ch.map(function(c){with(c[$s])r=$r(),bottom=(m*(h/150)+ts*r)+'%',left=(s+(m*i*(h/150))+ts*r*i)+'%',(ce?(color=ce):1);});},tm:w+150},{fn:function(ch,t){ch.map(function(c){with(c[$s])bottom=(h+ts)+'%',left=(s+h*i+ts*i)+'%';});},tm:w+175},{fn:function(ch,t,m){var l=ch[$l];var f=l/le;for(var k=0;k<f;k++)for(var j=0;j<le;j++)with(ch[le*k+j][$s]){fontSize='8pt';opacity=j<=le*m/175?1:.4;marginBottom=floor(m*le*j*sin(2*PI*k*le/l)/(z*20))+'pt';marginLeft=floor(m*le*j*cos(2*PI*k*le/l)/(z*20))+'pt';}},tm:w+350},{fn:function(ch,t,m){ch.map(function(c){c[$s].opacity=1-m/50;});},tm:w+400}];};sh(_sf(0,50,1));$i(function(){sh(_sf($r()*350,10+$r()*80,$r()*3,50+$r()*45,0.15-$r()*0.3,c[floor($r()*5)],0,3));},2e3);}self.sdc;

unless I get really inspired or a serious bug I think this may be a RC haha

Greetz

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: ManJIT
Date: November 04, 2009 09:00AM

@sirdarckcat
Some nice refinements there. Yeah, the star effect looks better than the circle. Works nicely in my FF.

A rumor has it that TommyM is working on something really cool. He's been asking about games and someone said "sound" :P.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 05, 2009 12:22AM

Oh, sound.. that sounds so fun!

FireworksIsNotABrowser_v5.js 2412 bytes (I'll make it smaller @ night)
javascript:$s='style';$f='fixed';$a='appendChild';$l='length';$w='createElement';var c=['orange','yellow','white','lightblue','#00FFFF','black'];with(Math)with($d=document){$r=random;$i=setInterval;$c=clearInterval;with(body[$a]($d[$w]('div'))[$s])backgroundColor='#809aef',position=$f,top=left=0,height=width='100%',zIndex=3;with(body[$a](getElementsByTagName("img")[0])[$s])width='100%',position=$f,bottom=left=0,zIndex=4;with(body[$a]($d[$w]('div'))[$s])backgroundColor=c[5],position=$f,top=left=0,height=width='100%',opacity=0.7,zIndex=5;var chr=(title+title).split('').map(function($,_){with(_=$d[$w]('span'))with(style)position=$f,zIndex=10,color=c[0],bottom='-1%',_[$a](createTextNode($));return _;});var sh=function(ds){var clk=0,us=0,std=0,stp=0,c=chr.map(function(x){return body[$a](x.cloneNode(true))}),i=$i(function(){if(stp>=ds[$l])return $c(i),$c(ci),c.map(body.removeChild,body),delete c;std=std||clk;try{ds[stp].fn(c,clk-std,clk-std-us)==-1&&(stp=Infinity)}catch(e){}if(ds[stp].tm<clk-std)us=clk-std,stp++;},100);var ci=$i(function(){clk+=10},100);};var _sf=function (w,s,z,h,i,cb,ce,ts,e){s=s||floor(100*$r());z=floor(z*2)/2||3;h=h||80;i=i||0;ts=ts||5;le=5;return [{fn:function(ch,t){ch.map(function(c){with(c[$s])left=s+'%',(cb?(color=cb):1);});},tm:w+0},{fn:function(ch,t,m){ch.map(function(c){with(c[$s])r=$r(),bottom=(m*(h/150)+ts*r)+'%',left=(s+(m*i*(h/150))+ts*r*i)+'%',(ce?(color=ce):1);});},tm:w+150},{fn:function(ch,t){ch.map(function(c){with(e=c[$s])bottom=(h+ts)+'%',left=(s+h*i+ts*i)+'%';});},tm:w+175},{fn:function(){with(body[$a]($d[$w]('embed')))autoplay=1,src='data:audio/midi;base64,TVRoZAAAAAYAAQAEAeBNVHJrAAAAEwD/WAQEAhgIAP9RAwYagAD/LwBNVHJrAAAAQwDEfwCEAH8AlAB/eIQAfwAA'+Array(16).join('f3gA')+(x='fwD/LwBNVHJrAAAA')+'RgDFfwCFI394I38AI38AlSN/eIUjfwAj'+Array(15).join('f3gj')+x+'ZgDGfQCGI394I38AI38A'+(y='liN/eIYjfwAjfwCWI394hiN/ACN/')+'AJYjf3iGI38AI38A'+y+Array(11).join('eCN/')+'AP8vAA==';},tm:0},{fn:function(ch,t,m){var l=ch[$l];var f=l/le;for(var k=0;k<f;k++)for(var j=0;j<le;j++)with(ch[le*k+j][$s]){fontSize='8pt';opacity=j<=le*m/175?1:.4;marginBottom=floor(m*le*j*sin(2*PI*k*le/l)/(z*20))+'pt';marginLeft=floor(m*le*j*cos(2*PI*k*le/l)/(z*20))+'pt';}},tm:w+350},{fn:function(ch,t,m){ch.map(function(c){c[$s].opacity=1-m/50;});},tm:w+400}];};sh(_sf(0,50,1));$i(function(){sh(_sf($r()*350,10+$r()*80,$r()*3,50+$r()*45,0.15-$r()*0.3,c[floor($r()*5)],0,3));},2e3);}self.sdc;

Look a cool demo

javascript:"<embed src='data:audio/midi;base64,TVRoZAAAAAYAAQAHAeBNVHJrAAAAIgD/WQIAAAD/VAVhCxQAAAD/UQMHoSAA/1gEBAIYCAD/LwBNVHJrAAAAeAD/IQEAALFyNwDBMQDhAEAAsQobAAdajXCRTE+GdkwABUtKgz1LAAFMSoM9TAAASU2DPUkAAExFgz1MAAFLTYM9SwAATEqDPUwAAE5NjWdOAA9QUYM9UAAATFSDPUwAAUtKgz1LAABJTYM9SQAARECbTUQAAP8vAE1UcmsAAACKAP8hAQAAs3I3AMMuALMHZAAKQADjAEAAkyVNhWYlAIEQLFSGBCwAdiUzhXUlAIEGLECEeSwAggIlOoVwJQCBCyxChQgsAIFyMEiFCDAAgXMrVIUmKwCBVTBPhUkwAIEyK1GFYSsAgRkwWYUmMACBVStNhRwrAIFfME+FNTAAgUUrSIRwKwAA/y8ATVRyawAAAHgA/yEBAAC1cjcAB1oAxSgAtQpkAOUAQI1wlUw6hnZMAAVLSoM9SwABTEqDPUwAAElNgz1JAABMRYM9TAABS02DPUsAAExKgz1MAABOTY1nTgAPUFGDPVAAAExUgz1MAAFLSoM9SwAASU2DPUkAAERAm01EAAD/LwBNVHJrAAAA0QD/IQEAALdyNwDnAEAAtwdkAApAAMcAAJclTQAZPVklAAoZAIYTJUgAGTNoJQAAGQCGEiU9ABk3aCUALBkAhWcZMAAlRXIZAAAlAIYJJUAAGT1yJQAFGQCGBBk3ACVUhk4lABkZABMkMwAYYFkYAB4kAIYEGDcAJDBoGAAKJACGCSQ6ABg6WRgADyQAhhMkQgAYQmgkAAoYAIYIGEIAJEBjJAAPGACGCSRCABhCaCQAChgAhgkYQgAkQGMkAA8YAIYIJE0AGE9yJAAUGAAA/y8ATVRyawAAAEMA/yEBAAC4cjcAyFwAuAdkAApAAOgAQACYPUgARFkAQGanbkAABUQADz0AgVk/SABISgBDYLNJQwAFSAAKPwAA/y8ATVRyawAAAGYA/yEBAAC5B24A6QBAjXCZKkoAJEWLDCoAFCQAglYqTQAkSIpvKgAOJACCeCpAACRPigcqAB0kAINSKk0AJECLOSoAHSQAgh8qSgAkN4p9KgAPJACCaipZACQ9h2MqAAokAAD/LwA='>"

If someone else want's to play with this.. I found some cool res.
http://www.westnet.com/Halloween/midi/?S=A
http://midi.mathewvp.com/midiSequencer.php

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat



Edited 6 time(s). Last edit at 11/05/2009 02:18AM by sirdarckcat.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: holiman
Date: November 05, 2009 02:27AM

Wow, there are some really cool submissions here. I knew that some pretty amazing stuff could theoretically be done but it is really fun to actually see it pursued.

There should be a demo-scene for this stuff like there was back in the day of 64K-demos and no graphics cards...

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: sirdarckcat
Date: November 12, 2009 03:02AM

this one says owasp lol..
FireworksIsNotABrowser_v6.js 2341 bytes (I'll make it smaller later)
javascript:$s='style';$f='fixed';$a='appendChild';$l='length';$w='createElement';$o='opacity';c=['orange','yellow','white','lightblue','#00FFFF','black'];$1='100%';$b='backgroundColor';$p='position';with(Math)with(d=document){$r=random;$i=setInterval;$c=clearInterval;with($=body[$a](d[$w]('div'))[$s])$[$b]='#809aef',$[$p]=$f,top=left=0,height=width=$1,zIndex=3;with($=body[$a](getElementsByTagName("img")[0])[$s])width=$1,$[$p]=$f,bottom=left=0,zIndex=4;with($=body[$a](d[$w]('div'))[$s])$[$b]=c[5],$[$p]=$f,top=left=0,height=width=$1,$[$o]=0.7,zIndex=5;chr=(title+title).split('').map(function(w,_,$){with(_=d[$w]('span'))with($=style)$[$p]=$f,zIndex=10,color=c[0],bottom='-1%',_[$a](createTextNode('OWASP'));return _;});sh=function(ds){var clk=0,us=0,std=0,stp=0,c=chr.map(function(x){return body[$a](x.cloneNode(true))}),i=$i(function(){if(stp>=ds[$l])return $c(i),$c(ci),c.map(body.removeChild,body),delete c;std=std||clk;try{ds[stp].fn(c,clk-std,clk-std-us)==-1&&(stp=Infinity)}catch(e){}if(ds[stp].tm<clk-std)us=clk-std,stp++;},100);var ci=$i(function(){clk+=10},100);};var _sf=function (w,s,z,h,i,cb,ce,ts,e){le=5;return [{fn:function(ch,t){ch.map(function(c){with(c[$s])left=s+'%',(cb?(color=cb):1);});},tm:w+0},{fn:function(ch,t,m){ch.map(function(c){with(c[$s])r=$r(),bottom=(m*(h/150)+ts*r)+'%',left=(s+(m*i*(h/150))+ts*r*i)+'%',(ce?(color=ce):1);});},tm:w+150},{fn:function(ch,t){ch.map(function(c){with(e=c[$s])bottom=(h+ts)+'%',left=(s+h*i+ts*i)+'%';});},tm:w+175},{fn:function(){with(body[$a](d[$w]('embed')))autoplay=1,src='data:audio/midi;base64,TVRoZAAAAAYAAQAEAeBNVHJrAAAAEwD/WAQEAhgIAP9RAwYagAD/LwBNVHJrAAAAQwDEfwCEAH8AlAB/eIQAfwAA'+Array(16).join('f3gA')+(x='fwD/LwBNVHJrAAAA')+'RgDFfwCFI394I38AI38AlSN/eIUjfwAj'+Array(15).join('f3gj')+x+'ZgDGfQCGI394I38AI38A'+(y='liN/eIYjfwAjfwCWI394hiN/ACN/')+'AJYjf3iGI38AI38A'+y+Array(11).join('eCN/')+'AP8vAA==';},tm:0},{fn:function(ch,t,m){var l=ch[$l];var f=l/le;for(var k=0;k<f;k++)for(var j=0;j<le;j++)with($=ch[le*k+j][$s]){fontSize='8pt';$[$o]=j<=le*m/175?1:.4;marginBottom=floor(m*le*j*sin(2*PI*k*le/l)/(z*20))+'pt';marginLeft=floor(m*le*j*cos(2*PI*k*le/l)/(z*20))+'pt';}},tm:w+350},{fn:function(ch,t,m){ch.map(function(c){c[$s][$o]=1-m/50;});},tm:w+400}];};$i(function(){sh(_sf($r()*350,10+$r()*80,$r()*3,50+$r()*45,0.15-$r()*0.3,c[floor($r()*5)],0,3));},2e3);};self.sdc;

--------------------------------
http://sirdarckcat.blogspot.com/ http://www.sirdarckcat.net/ http://foro.elhacker.net/ http://twitter.com/sirdarckcat

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: TommyM
Date: November 14, 2009 03:16PM

So I like waves :-) Here comes the first version of a 3D cube wave, with a out of focus grayscaled background. 1997 chars

NOTE: Use a fairly large window, on a 1280x800 display try to make it cover most of the screen.

TommyM_3DWave_v1.0

javascript:w=window.innerWidth;wc=w/2;h=window.innerHeight;hc=300;Z=300;S=1/Z;aX=0;aZ=0;I=40;CU=[[I,I,-I],[I,I,I],[I,-I,-I],[I,-I,I],[-I,I,-I],[-I,I,I],[-I,-I,-I],[-I,-I,I]];side=[[0,2,6,4],[1,3,7,5],[4,5,7,6],[0,1,3,2],[0,1,5,4],[2,3,7,6]];c=document.createElement('CANVAS');document.body.appendChild(c);c.width=w;c.height=h;cs=c.style;cs.position="fixed";cs.left=cs.top=0;cs.zIndex=3;ctx=c.getContext('2d');function m(){aX+=0.03;aZ+=0.05}function r2(p){XD=p[0];YD=p[1];ZD=p[2];ZX=XD*Math.cos(aZ)-YD*Math.sin(aZ)-XD;ZY=XD*Math.sin(aZ)+YD*Math.cos(aZ)-YD;XY=(YD+ZY)*Math.cos(aX)-ZD*Math.sin(aX)-(YD+ZY);XZ=(YD+ZY)*Math.sin(aX)+ZD*Math.cos(aX)-ZD;return [ZX,ZY+XY,XZ]}function pr(p,r){z=p[2]+r[2]+Z;return new Array((p[0]+r[0])/z/S,(p[1]+r[1])/z/S,z)}function draw2(p,x,y){ctx.strokeStyle="rgb(0,0,255)";for(s=0;s<6;s++){ctx.beginPath();ctx.moveTo(x+p[side[0]][0],y+p[side[0]][1]);for(j=1;j<4;j++)ctx.lineTo(x+p[side[j]][0],y+p[side[j]][1]);ctx.closePath();ctx.stroke()}}b=null;function blur(w,h,x,y){if(b==null){ctx.drawImage(bg,x,y);b=ctx.createImageData(w,h);bd=b.data;od=ctx.getImageData(x,y,w,h).data;r=w*4;for(i=0;i<w;i++){if(i==0||i==w-1)for(j=0;j<h;j++){bd[(i+j*w)*4+3]=255}else{bd[(i+0*w)*4+3]=255;bd[(i+(h-1)*w)*4+3]=255;for(j=1;j<h-1;j++){R5=(i+j*w)*4;R4=R5-4;R6=R5+4;R1=R4-r;R2=R5-r;R3=R6-r;R7=R4+r;R8=R5+r;R9=R6+r;gray=(od[R1]+od[R2]+od[R3]+od[R4]+od[R5]+od[R6]+od[R7]+od[R8]+od[R9]+od[R1+1]+od[R2+1]+od[R3+1]+od[R4+1]+od[R5+1]+od[R6+1]+od[R7+1]+od[R8+1]+od[R9+1]+od[R1+2]+od[R2+2]+od[R3+2]+od[R4+2]+od[R5+2]+od[R6+2]+od[R7+2]+od[R8+2]+od[R9+2])/27;bd[R5]=gray;bd[R5+1]=gray;bd[R5+2]=gray;bd[R5+3]=255}}}}ctx.putImageData(b,x,y)}bg=document.getElementsByTagName('img')[0];bgw=bg.width;t=0;function run(){ctx.fillStyle="rgb(0,0,0)";ctx.fillRect(0,0,w,h);blur(bgw,bg.height,wc-bgw/2,0);p2=[];for(i=0;i<CU.length;i++){p=CU;p2=pr(p,r2(p))}for(ci=0;ci<5;ci++){cx=wc-300+150*ci;cy=hc-50+150*Math.sin(t-0.6+0.3*ci);draw2(p2,cx,cy)}t+=0.1;m()}setInterval('run()',40);void(0)



Edited 1 time(s). Last edit at 11/14/2009 03:18PM by TommyM.

Options: ReplyQuote
Re: AppSec Research Challenge 5: Javascript GFX
Posted by: TommyM
Date: November 14, 2009 05:27PM

More or less same as previous, but has colored sides on the cubes... 1988 chars

TommyM_3D_Wave_v1.1

javascript:w=window.innerWidth;wc=w/2;h=window.innerHeight;hc=300;Z=300;S=1/Z;aX=0;aZ=0;I=40;CU=[[I,I,-I],[I,I,I],[I,-I,-I],[I,-I,I],[-I,I,-I],[-I,I,I],[-I,-I,-I],[-I,-I,I]];side=[[0,2,6,4,0],[1,3,7,5,1],[4,5,7,6,4],[0,1,3,2,0],[0,1,5,4,0],[2,3,7,6,2]];c=document.createElement('CANVAS');document.body.appendChild(c);c.width=w;c.height=h;cs=c.style;cs.position="fixed";cs.left=cs.top=0;cs.zIndex=3;ctx=c.getContext('2d');function m(){aX+=0.03;aZ+=0.05}function r2(p){XD=p[0];YD=p[1];ZD=p[2];ZX=XD*Math.cos(aZ)-YD*Math.sin(aZ)-XD;ZY=XD*Math.sin(aZ)+YD*Math.cos(aZ)-YD;XY=(YD+ZY)*Math.cos(aX)-ZD*Math.sin(aX)-(YD+ZY);XZ=(YD+ZY)*Math.sin(aX)+ZD*Math.cos(aX)-ZD;return [ZX,ZY+XY,XZ]}function pr(p,r){z=p[2]+r[2]+Z;return new Array((p[0]+r[0])/z/S,(p[1]+r[1])/z/S,z)}function draw2(p,x,y){ctx.strokeStyle="rgb(0,0,255)";ctx.fillStyle="rgba(0,0,255,0.3)";for(s=0;s<6;s++){ctx.beginPath();ctx.moveTo(x+p[side[0]][0],y+p[side[0]][1]);for(j=1;j<5;j++)ctx.lineTo(x+p[side[j]][0],y+p[side[j]][1]);ctx.stroke();ctx.fill()}}b=null;function blur(w,h,x,y){if(b==null){ctx.drawImage(bg,x,y);b=ctx.createImageData(w,h);bd=b.data;od=ctx.getImageData(x,y,w,h).data;r=w*4;for(i=0;i<w;i++){if(i==0||i==w-1)for(j=0;j<h;j++){bd[(i+j*w)*4+3]=255}else{bd[(i+0*w)*4+3]=255;bd[(i+(h-1)*w)*4+3]=255;for(j=1;j<h-1;j++){R5=(i+j*w)*4;R4=R5-4;R6=R5+4;R1=R4-r;R2=R5-r;R3=R6-r;R7=R4+r;R8=R5+r;R9=R6+r;gray=(od[R2]+od[R3]+od[R4]+od[R5]+od[R6]+od[R7]+od[R8]+od[R2+1]+od[R3+1]+od[R4+1]+od[R5+1]+od[R6+1]+od[R7+1]+od[R8+1]+od[R2+2]+od[R3+2]+od[R4+2]+od[R5+2]+od[R6+2]+od[R7+2]+od[R8+2])/21;bd[R5]=gray;bd[R5+1]=gray;bd[R5+2]=gray;bd[R5+3]=255}}}}ctx.putImageData(b,x,y)}bg=document.getElementsByTagName('img')[0];bgw=bg.width;t=0;function run(){ctx.fillStyle="rgb(0,0,0)";ctx.fillRect(0,0,w,h);blur(bgw,bg.height,wc-bgw/2,0);p2=[];for(i=0;i<CU.length;i++){p=CU;p2=pr(p,r2(p))}for(ci=0;ci<5;ci++){cx=wc-300+150*ci;cy=hc-50+150*Math.sin(t-0.6+0.3*ci);draw2(p2,cx,cy)}t+=0.1;m()}setInterval('run()',40);void(0)

Options: ReplyQuote
Pages: 12Next
Current Page: 1 of 2


Sorry, only registered users may post in this forum.