{"id":422,"date":"2009-10-05T10:26:24","date_gmt":"2009-10-05T17:26:24","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2285"},"modified":"2009-10-05T10:26:24","modified_gmt":"2009-10-05T17:26:24","slug":"js-sketch-experiment","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=422","title":{"rendered":"JS Sketch Experiment"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width=950, height=600)]\r\nwith (graphics) beginFill(0xefefef), drawRect(0,0,stage.stageWidth, stage.stageHeight);\r\nvar btn:Sprite = Sprite(addChild(new Sprite()));\r\nwith (btn.graphics) beginFill(0x666666), drawRect(0,0,100,20);\r\nwith(btn)  x=320, y=430, buttonMode = true;\r\nbtn.addEventListener(MouseEvent.ROLL_OVER, function():void{\r\n  with(btn.graphics) clear(), beginFill(0x222222), drawRect(0,0,100,20);\r\n});\r\nbtn.addEventListener(MouseEvent.ROLL_OUT, function():void{\r\n  with(btn.graphics) clear(), beginFill(0x666666), drawRect(0,0,100,20);\r\n});\r\nbtn.addEventListener(MouseEvent.CLICK, function():void{\r\n    var res:*= ExternalInterface.call(&quot;function(){ plot=&#x5B;]; colors=&#x5B;]; &quot; + txt.text + &quot; return {plot:plot, colors:colors};}&quot;);\r\n    render((res == null) ? {plot:&#x5B;], colors:&#x5B;]} : res);\r\n});\r\n\r\nvar v:Shape = Shape(addChild(new Shape()));\r\nv.x = 700;\r\nv.y = 220;\r\nfunction render(obj:Object):void{\r\n\tvar plot:Array = obj.plot;\r\n\tvar colors:Array = obj.colors;\r\n\tvar leng:int = plot.length;\r\n\tv.graphics.clear();\r\n\tvar inc:int = 0;\r\n\tv.graphics.moveTo(plot&#x5B;0], plot&#x5B;1]);\r\n\tfor (var i:int = 2; i&lt;leng; i+=2){\r\n\t\tv.graphics.lineStyle(0,colors&#x5B;inc++]);\r\n\t\tv.graphics.lineTo(plot&#x5B;i], plot&#x5B;i + 1]);\r\n\t}\r\n}\r\n\r\n\r\nvar submit:TextField = TextField(btn.addChild(new TextField()));\r\nsubmit.defaultTextFormat = new TextFormat(&quot;_sans&quot;, 12);\r\nwith(submit) textColor=0xFFFFFF, width=100, autoSize=&quot;center&quot;;\r\nwith(submit) mouseEnabled = false,  text=&quot;submit&quot;;\r\n\r\nvar txt:TextField = TextField(addChild(new TextField()));\r\nwith(txt) x = y = 20, type = &quot;input&quot;, multiline=true;\r\nwith(txt) width = 400, height = 400, border = true, background = 0xFFFFFF;\r\ntxt.defaultTextFormat = new TextFormat(&quot;Monaco&quot;, 12);\r\ntxt.text = &quot;enter text&quot;; \r\ntxt.addEventListener(MouseEvent.MOUSE_DOWN, onDown);\r\nfunction onDown(evt:MouseEvent):void{\r\n\ttxt.text = &quot;&quot;;\r\n\ttxt.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);\r\n}\r\n<\/pre>\n<p>This snippet is a mini code editor that allows the user to write javascript into a textfield &#8211; the javascript is then run using external interface. Optionally the javascript code can populate two arrays (plot and colors). If these arrays are populated flash, will render the data in each array using the Graphics class.<br \/>\n<a data-asruffle-linked=\"true\" href=\"https:\/\/actionsnippet.com\/swfs\/js_sketch.html\" target=\"blank\"><br \/>\nHave a look at the demo:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/js_sketch.jpg\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/js_sketch.swf&quot;,&quot;title&quot;:&quot;js sketch&quot;,&quot;width&quot;:950,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:true,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: js sketch<\/span><\/button><\/span><\/p>\n<p>If you do something nice with this&#8230; post your javascript snippet as a comment and I&#8217;ll add it to the JS Sketch page&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(width=950, height=600)] with (graphics) beginFill(0xefefef), drawRect(0,0,stage.stageWidth, stage.stageHeight); var btn:Sprite = Sprite(addChild(new Sprite())); with (btn.graphics) beginFill(0x666666), drawRect(0,0,100,20); with(btn) x=320, y=430, buttonMode = true; btn.addEventListener(MouseEvent.ROLL_OVER, function():void{ with(btn.graphics) clear(), beginFill(0x222222), drawRect(0,0,100,20); }); btn.addEventListener(MouseEvent.ROLL_OUT, function():void{ with(btn.graphics) clear(), beginFill(0x666666), drawRect(0,0,100,20); }); btn.addEventListener(MouseEvent.CLICK, function():void{ var res:*= ExternalInterface.call(&quot;function(){ plot=&#x5B;]; colors=&#x5B;]; &quot; + txt.text + &quot; return {plot:plot, colors:colors};}&quot;); render((res == null) ? [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,88,17,33,121],"tags":[3,14,4,134],"class_list":["post-422","post","type-post","status-publish","format-standard","hentry","category-dynamic","category-external-data","category-functions","category-graphics","category-math","tag-actionscript","tag-as3","tag-flash","tag-javascript"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/422","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=422"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}