{"id":395,"date":"2009-09-02T01:00:38","date_gmt":"2009-09-02T08:00:38","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2097"},"modified":"2009-09-02T01:00:38","modified_gmt":"2009-09-02T08:00:38","slug":"fake-light-w-uv-quads","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=395","title":{"rendered":"Fake Light w\/ UV &#038; Quads"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width = 500, height=500, backgroundColor = 0x000000)]\r\nx = stage.stageWidth \/ 2;\r\ny = stage.stageHeight \/ 2;\r\nvar quadNum:int = 2200;\r\n\/\/ standard Vectors for using drawTriangles\r\nvar verts:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;();\r\nvar pVerts:Vector.&lt;Number&gt;;\r\nvar uvts:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;();\r\nvar indices:Vector.&lt;int&gt; = new Vector.&lt;int&gt;();\r\n\/\/ needed for z-sorting\r\nvar sortedIndices:Vector.&lt;int&gt;;\r\nvar faces:Array = &#x5B;];\r\n\/\/ we&#039;ll use this for tranforming points\r\n\/\/ and as the transformation matrix for our render\r\nvar m:Matrix3D = new Matrix3D();\r\n\/\/ plot a quad\r\nvar quad:Vector.&lt;Number&gt;;\r\nquad = Vector.&lt;Number&gt;(&#x5B;-10, -10, 0,\r\n\t\t\t\t\t\t10, -10, 0,\r\n\t\t\t\t\t\t-10, 10, 0,\r\n\t\t\t\t\t\t10, 10, 0]);\r\n\/\/ temp vect for any transformed quads\r\nvar transQuad:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;();\r\nvar i:int;\r\nvar inc:int = 0;\r\nfor (i = 0; i&lt;quadNum; i++){\r\n\tm.identity();\r\n\tvar s:Number = (int(Math.random()*50) == 1) ? 2 + Math.random()*2 : .1 + Math.random() * 2;\r\n\tm.appendScale(s, s, 1);\r\n\tm.appendRotation(90, Vector3D.Y_AXIS);\r\n\tvar mult:Number = 100 + Math.random()*200;\r\n\tm.appendTranslation(mult, 0, 0);\r\n\tm.appendRotation(Math.random()*360, Vector3D.X_AXIS);\r\n\tm.appendRotation(Math.random()*360, Vector3D.Y_AXIS);\r\n\tm.appendRotation(Math.random()*360, Vector3D.Z_AXIS);\r\n\tm.transformVectors(quad, transQuad);\r\n\tverts = verts.concat(transQuad);\r\n\tfaces.push(new Vector3D());\r\n\tfaces.push(new Vector3D());\r\n\tvar i4:int = i * 4;\r\n\tindices.push(0 + i4, 1 + i4, 2 + i4,\r\n\t\t\t\t 1 + i4, 3 + i4, 2 + i4);\r\n\tmult \/= 300;\r\n\tuvts.push(mult,mult,0,\r\n\t\t\t  mult+.1,mult,0,\r\n\t\t\t  mult,mult - .1,0,\r\n\t\t\t  mult + .1,mult + .1,0);\r\n}\r\nsortedIndices = new Vector.&lt;int&gt;(indices.length, true);\r\n\/\/ create texture\r\nvar tex:BitmapData = new BitmapData(400,400,false, 0x000000);\r\nvar grad:Shape = new Shape();\r\nvar mat:Matrix = new Matrix();\r\nmat.createGradientBox(400,400,0,0,0);\r\nwith (grad.graphics){\r\n\tbeginGradientFill(GradientType.LINEAR, &#x5B;0xFFFFFF,0x002244], &#x5B;1, 1], &#x5B;100, 255], mat);\r\n\tdrawRect(0,0,400,400);\r\n}\r\ntex.draw(grad);\r\n\/\/ create background\r\nmat.createGradientBox(1600,1200,0,-550, 0);\r\nwith (grad.graphics){\r\n\tbeginGradientFill(GradientType.RADIAL, &#x5B;0x000000, 0x001133], &#x5B;1, 1], &#x5B;0, 255], mat);\r\n\tdrawRect(0,0,500,500);\r\n}\r\ngrad.x = -stage.stageWidth\/2\r\ngrad.y = -stage.stageHeight\/2;\r\naddChild(grad);\r\n\/\/ triangles will be drawn to this\r\nvar render:Shape = Shape(addChild(new Shape()));\r\n\/\/ fix all vector lengths\r\nverts.fixed = true, uvts.fixed = true, indices.fixed = true\r\npVerts = new Vector.&lt;Number&gt;(verts.length\/3 * 2, true);\r\n\/\/ we need these if we want perspective\r\nvar persp:PerspectiveProjection = new PerspectiveProjection();\r\npersp.fieldOfView = 45;\r\n\/\/ projection matrix\r\nvar proj:Matrix3D = persp.toMatrix3D();\r\nvar dx:Number = 0, dy:Number = 0;\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\tdx += (mouseX - dx) \/ 4;\r\n\tdy += (mouseY - dy) \/ 4;\r\n\tm.identity();\r\n\tm.appendRotation(dy, Vector3D.X_AXIS);\r\n\tm.appendRotation(dx, Vector3D.Y_AXIS);\r\n\tm.appendTranslation(0,0,800);\r\n\tm.append(proj);\r\n\tUtils3D.projectVectors(m, verts, pVerts, uvts);\r\n\tvar face:Vector3D;\r\n\tinc = 0;\r\n\tfor (var i:int = 0; i&lt;indices.length; i+=3){\r\n\t\tface = faces&#x5B;inc];\r\n\t\tface.x = indices&#x5B;i];\r\n\t\tface.y = indices&#x5B;int(i + 1)];\r\n\t\tface.z = indices&#x5B;int(i + 2)];\r\n\t\tvar i3:int = i * 3;\r\n\t\tface.w = (uvts&#x5B;int(face.x*3 + 2)] + uvts&#x5B;int(face.y*3 + 2)] + uvts&#x5B;int(face.z*3 + 2)]) * 0.333333;\r\n\t\tinc++;\r\n\t}\r\n\tfaces.sortOn(&quot;w&quot;, Array.NUMERIC);\r\n\tinc = 0;\r\n\tfor each (face in faces){\r\n\t\tsortedIndices&#x5B;inc++] = face.x;\r\n\t\tsortedIndices&#x5B;inc++] = face.y;\r\n\t\tsortedIndices&#x5B;inc++] = face.z;\r\n\t}\r\n\trender.graphics.clear();\r\n\trender.graphics.beginBitmapFill(tex, null, false, false);\r\n\trender.graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NEGATIVE);\r\n}\r\n<\/pre>\n<p>Expanding again on the z-sorting demos from the last few days &#8211; this snippet uses UV coords and a gradient to create something that vaguely resembles a light. Unlike the previous demos, the 3D cluster in this snippet is made up of quads &#8211; requiring a slight adjustment to the depth calculation.<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"http:\/\/www.actionsnippet.com\/swfs\/quadlight.html\" target=\"blank\" ><br \/>\nHave a look at the swf&#8230;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/quad_light.jpg\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/quadlight.swf&quot;,&quot;title&quot;:&quot;quadlight&quot;,&quot;width&quot;:500,&quot;height&quot;:500,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#000000&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: quadlight<\/span><\/button><\/span><\/p>\n<p><a href=\"http:\/\/wonderfl.net\/code\/6ac79780d9bd526bc0835ae21c9cd43ae619848c\" target=\"blank\">I also posted the code over at wonderfl.net&#8230;<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(width = 500, height=500, backgroundColor = 0x000000)] x = stage.stageWidth \/ 2; y = stage.stageHeight \/ 2; var quadNum:int = 2200; \/\/ standard Vectors for using drawTriangles var verts:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;(); var pVerts:Vector.&lt;Number&gt;; var uvts:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;(); var indices:Vector.&lt;int&gt; = new Vector.&lt;int&gt;(); \/\/ needed for z-sorting var sortedIndices:Vector.&lt;int&gt;; var faces:Array = &#x5B;]; \/\/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101,33,118,94,47,79],"tags":[3,14,4,126],"class_list":["post-395","post","type-post","status-publish","format-standard","hentry","category-3d","category-graphics","category-matrix","category-misc","category-sorton","category-vector","tag-actionscript","tag-as3","tag-flash","tag-fp10"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=395"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/395\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}