{"id":142,"date":"2009-01-02T00:00:09","date_gmt":"2009-01-02T07:00:09","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=457"},"modified":"2009-01-02T00:00:09","modified_gmt":"2009-01-02T07:00:09","slug":"isometric-to-cartesian","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=142","title":{"rendered":"Isometric to Cartesian"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar centerX:Number=stage.stageWidth\/2;\r\nvar centerY:Number=stage.stageHeight\/2;\r\n\/\/ 1 to 2 ratio\r\n\/\/ try others 1 \/ 1.5 etc...\r\nvar theta:Number = Math.atan(1 \/ 2);\r\n \r\nvar cosX:Number=Math.cos(theta);\r\nvar sinX:Number=Math.sin(theta);\r\nvar pnt:Point = new Point();\r\n\r\nfunction iso3D(x:Number, y:Number, z:Number):Point {\r\n\tpnt.x = centerX + (x-z) *  cosX;\r\n\tpnt.y = centerY -  (x+z) * sinX - y;\r\n\treturn pnt;\r\n}\r\n\r\nvar p:Point = iso3D(0,0,0);\r\n\r\ngraphics.beginFill(0x000000);\r\ngraphics.drawCircle(p.x, p.y, 2);\r\n\r\n\/\/ x axis positive\r\ntrace(&quot;x = red&quot;);\r\nfor (var i:int = 1; i&lt;10; i++){\r\n\tgraphics.beginFill(0xFF0000);\r\n\tp = iso3D(i*10, 0, 0);\r\n\tgraphics.drawCircle(p.x, p.y, 2);\r\n}\r\n\r\n\/\/ y axis positive\r\ntrace(&quot;y = green&quot;);\r\nfor (i= 1; i&lt;10; i++){\r\n\tgraphics.beginFill(0x00FF00);\r\n\tp = iso3D(0, i * 10, 0);\r\n\tgraphics.drawCircle(p.x, p.y, 2);\r\n}\r\n\r\n\/\/ z axis positive\r\ntrace(&quot;z = blue&quot;);\r\nfor (i= 1; i&lt;10; i++){\r\n\tgraphics.beginFill(0x0000FF);\r\n\tp = iso3D(0, 0, i * 10);\r\n\tgraphics.drawCircle(p.x, p.y, 2);\r\n}\r\n<\/pre>\n<p>The above code demos a conversion from isometric coordinates to cartesian coordinates. It draws out part of the x, y and z axis using the iso3D() function.<\/p>\n<p>I&#8217;ve always faked isometric conversion by just tweaking numbers. A few years ago I created some <a data-asruffle-linked=\"true\" href=\"http:\/\/shapevent.com\/1\/entit\/scape_1.swf\" target='blank'>strange isometric engines<\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;http:\\\/\\\/shapevent.com\\\/1\\\/entit\\\/scape_1.swf&quot;,&quot;title&quot;:&quot;scape 1&quot;,&quot;width&quot;:550,&quot;height&quot;:400,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: scape 1<\/span><\/button><\/span> (<a data-asruffle-linked=\"true\" href=\"http:\/\/shapevent.com\/1\/entit\/scape_2.swf\">here&#8217;s another example<\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;http:\\\/\\\/shapevent.com\\\/1\\\/entit\\\/scape_2.swf&quot;,&quot;title&quot;:&quot;scape 2&quot;,&quot;width&quot;:550,&quot;height&quot;:400,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: scape 2<\/span><\/button><\/span>). The other day when <a href=\"https:\/\/actionsnippet.com\/?p=431\" target=\"blank\">I wrote the isometric voxels snippet<\/a> I just created the iso3D() function with a little trial and error. As you&#8217;ll see it&#8217;s not exactly the same as the one here. This new conversion is the result of some <a href=\"http:\/\/www.kirupa.com\/developer\/actionscript\/isometric_transforms.htm\">googling<\/a>. The updated conversion is pretty close to the one that I wrote for the voxel post, but has one less multiplication&#8230; and a clearer place to control the scale ratio &#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>var centerX:Number=stage.stageWidth\/2; var centerY:Number=stage.stageHeight\/2; \/\/ 1 to 2 ratio \/\/ try others 1 \/ 1.5 etc&#8230; var theta:Number = Math.atan(1 \/ 2); var cosX:Number=Math.cos(theta); var sinX:Number=Math.sin(theta); var pnt:Point = new Point(); function iso3D(x:Number, y:Number, z:Number):Point { pnt.x = centerX + (x-z) * cosX; pnt.y = centerY &#8211; (x+z) * sinX &#8211; y; return pnt; } [&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,94],"tags":[3,4,77],"class_list":["post-142","post","type-post","status-publish","format-standard","hentry","category-3d","category-misc","tag-actionscript","tag-flash","tag-isometric"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/142","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=142"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/142\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}