{"id":105,"date":"2007-07-17T09:52:38","date_gmt":"2007-07-17T14:52:38","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2007\/07\/17\/combining-shapes-from-the-past\/"},"modified":"2009-08-14T06:00:59","modified_gmt":"2009-08-14T11:00:59","slug":"combining-shapes-from-the-past","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2007\/07\/17\/combining-shapes-from-the-past\/","title":{"rendered":"Combining Shapes from the Past"},"content":{"rendered":"

When writing my recent article about Combining Vectors in Flash<\/a> the Overlapping Circles example reminded me of the entries I made for the now legendary Bit-101<\/a> “25 Lines Contest” back in 2002. I tried looking for all of the old contest entries but they seem to have been erased from the web. <\/p>\n

Fortunately I found a few different versions of the entries I posted back in 2002 still loitering on my hard drive in an abandoned folder thought to be lost long ago. So without much further ado, here are two files that probably haven’t been seen by anyone in the last five years!<\/p>\n

Here’s the code for my first entry called “Goin’ Mobile<\/strong>”<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\ncurPos = new<\/span> Array<\/span>(<\/span>)<\/span>;
\nnewPos = new<\/span> Array<\/span>(<\/span>)<\/span>;
\nfunction<\/span> drawCircle (<\/span>x, y, r)<\/span> {<\/span>
\n    moveTo<\/span>(<\/span>x, y-r)<\/span>;
\n    curveTo<\/span>(<\/span>x+r*<\/span>.9322, y-r*<\/span>.9322, x+r, y)<\/span>;
\n    curveTo<\/span>(<\/span>x+r*<\/span>.9322, y+r*<\/span>.9322, x, y+r)<\/span>;
\n    curveTo<\/span>(<\/span>x-r*<\/span>.9322, y+r*<\/span>.9322, x-r, y)<\/span>;
\n    curveTo<\/span>(<\/span>x-r*<\/span>.9322, y-r*<\/span>.9322, x, y-r)<\/span>;
\n}<\/span>
\nfunction<\/span> genRandPos (<\/span>arry)<\/span> {<\/span>
\n    for<\/span> (<\/span>i=0<\/span>; i<<\/span>20<\/span>; i++)<\/span>{<\/span>
\n        arry[<\/span>i]<\/span> = [<\/span>Math<\/span>.floor<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>550<\/span>)<\/span>, Math<\/span>.floor<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>400<\/span>)<\/span>]<\/span>;
\n    }<\/span>
\n}<\/span>
\nonMouseDown<\/span> = function<\/span>(<\/span>)<\/span>{<\/span>
\n    curPos[<\/span>0<\/span>]<\/span> ? clearInterval<\/span>(<\/span>myTimer)<\/span> : genRandPos(<\/span>curPos)<\/span>;
\n    myTimer = setInterval<\/span>(<\/span>genRandPos, 15000<\/span>, newPos)<\/span>;
\n    genRandPos(<\/span>newPos)<\/span>;
\n}<\/span>
\nonEnterFrame<\/span> = function<\/span>(<\/span>)<\/span>{<\/span>
\n    clear<\/span>(<\/span>)<\/span>;
\n    beginFill<\/span>(<\/span>0<\/span>, 100<\/span>)<\/span>; 
\n    for<\/span> (<\/span>i=0<\/span>; i<<\/span>20<\/span>; i++)<\/span>{<\/span>
\n        curPos[<\/span>i]<\/span> = [<\/span>curPos[<\/span>i]<\/span>[<\/span>0<\/span>]<\/span>+(<\/span>(<\/span>newPos[<\/span>i]<\/span>[<\/span>0<\/span>]<\/span>-curPos[<\/span>i]<\/span>[<\/span>0<\/span>]<\/span>)<\/span>\/<\/span>36<\/span>)<\/span>, curPos[<\/span>i]<\/span>[<\/span>1<\/span>]<\/span>+(<\/span>(<\/span>newPos[<\/span>i]<\/span>[<\/span>1<\/span>]<\/span>-curPos[<\/span>i]<\/span>[<\/span>1<\/span>]<\/span>)<\/span>\/<\/span>36<\/span>)<\/span>]<\/span>;
\n        drawCircle(<\/span>curPos[<\/span>i]<\/span>[<\/span>0<\/span>]<\/span>+4<\/span>, curPos[<\/span>i]<\/span>[<\/span>1<\/span>]<\/span>+4<\/span>, 12<\/span>+i*<\/span>15<\/span>)<\/span>;
\n    }<\/span>
\n    beginFill<\/span>(<\/span>0xFFFFFF, 100<\/span>)<\/span>;  
\n    for<\/span> (<\/span>i=0<\/span>; i<<\/span>20<\/span>; i++)<\/span>{<\/span>
\n        drawCircle(<\/span>curPos[<\/span>i]<\/span>[<\/span>0<\/span>]<\/span>, curPos[<\/span>i]<\/span>[<\/span>1<\/span>]<\/span>, 5<\/span>+i*<\/span>15<\/span>)<\/span>;
\n    }<\/span>
\n}<\/span>
\nonMouseDown<\/span>(<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

If you run the above code you’ll get a SWF file similar to the following:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

And here's the code for my second entry titled \"Eye Blender<\/strong>\"\"<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nfill = [<\/span>[<\/span>0xFFFF00, 0xFF8800, 0xFF0000, 0x8800FF]<\/span>, [<\/span>100<\/span>, 100<\/span>, 100<\/span>, 100<\/span>]<\/span>, [<\/span>0<\/span>, 100<\/span>, 150<\/span>, 255<\/span>]<\/span>]<\/span>;
\nv = {<\/span>points:20<\/span>, pointR:100<\/span>, curveR:250<\/span>, gradR:190<\/span>, speed:20000<\/span>, funkify:20<\/span>, x:275<\/span>, y:200<\/span>}<\/span>;
\nvar<\/span> deltaAlpha = 2<\/span>*<\/span>Math<\/span>.PI<\/span>\/<\/span>v.points<\/span>;
\nfunction<\/span> rand (<\/span>)<\/span> {<\/span>
\n    r = Math<\/span>.floor<\/span>(<\/span>(<\/span>r+Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>200<\/span>-100<\/span>)<\/span>)<\/span>\/<\/span>2<\/span>;
\n    return<\/span>(<\/span>r)<\/span>;
\n}<\/span>
\nfunction<\/span> draw(<\/span>)<\/span> {<\/span>
\n    matrix = {<\/span> matrixType:"box"<\/span>, x:v.x<\/span>-v.gradR<\/span>+rand(<\/span>)<\/span>, y:v.y<\/span>-v.gradR<\/span>+rand(<\/span>)<\/span>, w:2<\/span>*<\/span>v.gradR<\/span>, h:2<\/span>*<\/span>v.gradR<\/span>, r:0<\/span>}<\/span>;
\n    twist+=v.points<\/span>\/<\/span>v.speed<\/span>;
\n    clear<\/span>(<\/span>)<\/span>;
\n    beginGradientFill<\/span>(<\/span> "radial"<\/span>, fill[<\/span>0<\/span>]<\/span>, fill[<\/span>1<\/span>]<\/span>, fill[<\/span>2<\/span>]<\/span>, matrix )<\/span>;
\n    alpha = twist*<\/span>v.points<\/span>*<\/span>deltaAlpha;
\n    moveTo<\/span>(<\/span>v.x<\/span>+(<\/span>v.pointR<\/span>)<\/span>*<\/span>Math<\/span>.cos<\/span>(<\/span>alpha)<\/span>, v.y<\/span>+(<\/span>v.pointR<\/span>)<\/span>*<\/span>Math<\/span>.sin<\/span>(<\/span>alpha)<\/span>)<\/span>;
\n    for<\/span> (<\/span>i=1<\/span>; i<<\/span>=v.points<\/span>; i++)<\/span>{<\/span>
\n        alpha = (<\/span>i*<\/span>twist*<\/span>deltaAlpha)<\/span>;
\n        aX = (<\/span>v.pointR<\/span>)<\/span>*<\/span>Math<\/span>.cos<\/span>(<\/span>alpha)<\/span>;
\n        aY = (<\/span>v.pointR<\/span>)<\/span>*<\/span>Math<\/span>.sin<\/span>(<\/span>alpha)<\/span>;
\n        alpha = (<\/span>i*<\/span>twist*<\/span>deltaAlpha*<\/span>v.funkify<\/span>)<\/span>;
\n        bX = (<\/span>v.pointR<\/span>-v.curveR<\/span>)<\/span>*<\/span>Math<\/span>.cos<\/span>(<\/span>alpha)<\/span>;
\n        bY = (<\/span>v.pointR<\/span>-v.curveR<\/span>)<\/span>*<\/span>Math<\/span>.sin<\/span>(<\/span>alpha)<\/span>;
\n        curveTo<\/span>(<\/span>v.x<\/span>+bx, v.y<\/span>+by, v.x<\/span>+aX, v.y<\/span>+aY)<\/span>;
\n    }<\/span>
\n}<\/span>
\nonEnterFrame<\/span> = draw;
\nonMouseDown<\/span> = function<\/span>(<\/span>)<\/span>{<\/span>
\n    onEnterFrame<\/span> = onEnterFrame<\/span> ? null<\/span> : draw;
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

If you run the above code you will get something like this:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n","protected":false},"excerpt":{"rendered":"

Demonstrates how I exploited Flash’s vector drawing abilities and overlapping shapes to make moving eye candy for Bit-101’s “25 Lines” contest.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,36],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-swfs"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}