HTML5 Canvas Tutorial

If you haven’t tried the html5 canvas tag yet, I suggest you give it a try. It falls under the same category as ActionScript’s Graphics and BitmapData classes. It is however much much simpler. One great thing about it is it runs really fast on IOS5. Have a look at some of these demos to see what I mean: http://zreference.com/projects/graphics/

A few days ago I recorded this short video tutorial… it’s very simple, but it will get you started if you’ve never tried canvas before:

Posted in html5, javascript | Tagged , , , , | Leave a comment

Gumowski/Mira Pseudo-Soundwave

Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var a:Number = 0.02;
  3. var b:Number = .9998;
  4.  
  5. var xn1:Number = 5;
  6. var yn1:Number = 0;
  7. var xn:Number, yn:Number;
  8.  
  9. var scale:Number = 10;
  10. var iterations:Number = 20000;
  11. var step:Number = stage.stageWidth / iterations;
  12.  
  13. function f(x:Number):Number{
  14.     var x2:Number = x * x;
  15.     return a * x + (2 * (1 - a) * x2) / (1 + x2);
  16. }
  17.  
  18. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(600,600,false,0xEFEFEF)))).bitmapData;
  19.  
  20. var circle = new Sprite();
  21. with(circle.graphics) beginFill(0, 0.3), drawCircle(2,2,1);
  22.  
  23. var dot:BitmapData = new BitmapData(4,4,true, 0x00000000);
  24. dot.draw(circle);
  25.  
  26. var pnt:Point = new Point();
  27.  
  28. var txt:TextField = TextField(addChild(new TextField()));
  29. txt.text = "move mouse";
  30.                                                       
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  33.    
  34.     canvas.fillRect(canvas.rect, 0xEFEFEF);
  35.  
  36.     a = mouseY / 1000;
  37.     xn1 = mouseX / 30;
  38.     yn1 = 0;
  39.     for (var i:int = 0; i<iterations; i++){
  40.           xn = xn1;
  41.           yn = yn1;
  42.          
  43.           xn1 = b * yn + f(xn);
  44.           yn1 =  -xn + f(xn1);
  45.           pnt.x = i * step;
  46.           pnt.y = 300 + yn1 * scale;
  47.           canvas.copyPixels(dot, dot.rect, pnt, null, null, true);
  48.        
  49.     }
  50. }

Try it out:

Gumowski Mira Pseudo-soundwave - wonderfl build flash online

Posted in BitmapData, Graphics, Math, graphics algorithms | Leave a comment

Closest Point on a Line

Actionscript:
  1. // from
  2. // http://www.gamedev.net/topic/444154-closest-point-on-a-line/
  3.  
  4. function getClosestPoint(A:*, B:*, P:*, segmentClamp:Boolean=true):Point {
  5.     var AP:Point = new Point(P.x - A.x, P.y - A.y),
  6.         AB:Point = new Point(B.x - A.x, B.y - A.y);
  7.     var ab2:Number=AB.x*AB.x+AB.y*AB.y;
  8.     var ap_ab:Number=AP.x*AB.x+AP.y*AB.y;
  9.     var t:Number=ap_ab/ab2;
  10.     if (segmentClamp) {
  11.         if (t<0.0) {
  12.             t=0.0;
  13.         } else if (t> 1.0) {
  14.             t=1.0;
  15.         }
  16.  
  17.     }
  18.     return new Point(A.x + AB.x * t, A.y + AB.y * t);
  19. }
  20.  
  21.  
  22. var point:Sprite = Sprite(addChild(new Sprite()));
  23. point.x = 50;
  24. point.y = 50;
  25. with(point.graphics) beginFill(0), drawCircle(0,0, 3);
  26.  
  27. var line:MovieClip = MovieClip(addChild(new MovieClip()));
  28. line.a = new Point(20, 100);
  29. line.b = new Point(300, 60);
  30. with(line.graphics) lineStyle(0), moveTo(line.a.x, line.a.y), lineTo(line.b.x, line.b.y);
  31.  
  32. var closestPoint:Point = getClosestPoint(line.a, line.b, point);
  33.  
  34. var closest:Sprite = Sprite(addChild(new Sprite()));
  35. closest.x = closestPoint.x;
  36. closest.y = closestPoint.y;
  37. with(closest.graphics) beginFill(0xFF0000), drawCircle(0,0, 3);

Posted in Math | Leave a comment

Crockford’s Create

So here is a javascript inspired snippet. It's also in javascript style with no typing really. To port to javascript would take less than 4 minutes:

Actionscript:
  1. // 1D
  2. function _(a, b){
  3. var c = {};
  4. for (var i in b){
  5. trace(i);
  6. a[i] = b[i];
  7. }
  8. return a;
  9. }
  10.  
  11. // douglas crockfords create
  12. function create(o){
  13. var F = function(){};
  14. F.prototype = o;
  15. return  new F();
  16. }
  17.  
  18. // 1D
  19. function obj(o){
  20. for (var i in o){
  21. trace(o[i]);
  22. }
  23. }
  24.  
  25. var Mover = {
  26. ox : 0, oy : 0,
  27. x : 100, y : 100, radius: 10, t : 0, speed : 0.2,
  28. run : function(){
  29. //namespace Mover;
  30. this.x = this.ox + this.radius * Math.cos(this.t);
  31. this.y = this.oy + this.radius * Math.sin(this.t);
  32. this.t += this.speed;
  33. }
  34. };
  35. var SubMover = _(Mover,
  36. {ox : 200, oy: 200,
  37. draw : function(){
  38. this.run();
  39. graphics.beginFill(0);
  40. graphics.drawCircle(this.x, this.y, 10);
  41. }
  42. });
  43.  
  44. var m = create(SubMover);
  45.  
  46. setInterval(function(){
  47. m.radius += 1;
  48. m.draw();
  49. }, 30)
  50.  
  51. for (var i in m){
  52. trace(i);
  53. }

This makes use of Douglas Crockford's Object.create method. Just one of the many ways to do Object Oriented programming with flash or js. I use a combo of many methods depending on the project:

Actionscript:
  1. function Thing(){
  2. var x = 0;
  3. return function(){
  4. x += 1;
  5. // do stuff
  6. }
  7. }

...is one that comes to mind - just a simple closure can be used like an object.

Here is more info about Object.create() :

http://javascript.crockford.com/prototypal.html

Posted in OOP, functions, javascript | Tagged , , , | Leave a comment

Stereoscopic Papervision

Cross your eyes to see 3D third image:

move your mouse up and down on the interactive demo... click ->

Posted in 3D | Tagged | 1 Comment

ActionSnippet.zip

Who would like a zip of the folder I used when making this site fla files and all? If you want one, post a comment and I'll send it to you.

Actually have a little new content for the site coming, at least one new post.

If you don't get yours within a day of posting... just let me know.

Posted in Uncategorized | 43 Comments

New Site zReference

Actionsnippet has been pretty inactive for the last few months. I took a short break from blogging, but I'm starting up again on a new site... go check it out: zReference

Posted in misc | Tagged | 3 Comments

Quick IE Test

Found this today, not related to actionscript but rather nice. It allows you to take a screen shot of your website in IE... if your on a mac without windows this is a quick way to test in a pinch:

http://ipinfo.info/netrenderer/index.php

Posted in Uncategorized | 6 Comments

Circle Fitting

Actionscript:
  1. var circs:Array = []
  2. var circNum:int = 600;
  3. addEventListener(Event.ENTER_FRAME, onAdd);
  4. function onAdd(evt:Event):void {
  5.     if (circs.length <circNum){
  6.         makeGrowable();
  7.     }
  8. }
  9.  
  10. function makeGrowable(){
  11.    
  12.     var s:MovieClip = MovieClip(addChild(new MovieClip()));
  13.     s.x = Math.random() * stage.stageWidth;
  14.     s.y = Math.random() * stage.stageHeight;
  15.     with(s.graphics){
  16.         lineStyle(0,0);
  17.         drawCircle(0,0,10);
  18.     }
  19.     s.scaleX = s.scaleY = 0;
  20.     circs.push(s);
  21.     s.addEventListener(Event.ENTER_FRAME, onScaleUp);
  22. }
  23.  
  24. function onScaleUp(evt:Event):void {
  25.     var c:MovieClip = MovieClip(evt.currentTarget);
  26.     c.scaleX = c.scaleY += 0.05;
  27.     for (var i:int = 0; i<circs.length; i++){
  28.         var circ:MovieClip = circs[i];
  29.         if (circ != c){
  30.             var amt:Number = circ.width/2 + c.width/2;
  31.             var dx:Number = circ.x - c.x;
  32.             var dy:Number = circ.y - c.y;
  33.             var dist:Number = Math.sqrt(dx * dx + dy * dy);
  34.             if (amt> dist){
  35.                 c.removeEventListener(Event.ENTER_FRAME, onScaleUp);
  36.                 if (c.scaleX <0.1){
  37.                     if (contains(c)){
  38.                     removeChild(c);
  39.                     }
  40.                 }
  41.             }
  42.         }
  43.        
  44.     }
  45. }

Circle fitting is one of those things I've never bothered to do... today I figured I'd give it a try and this is what I came up with. I posted it on wonderfl:

Posted in Graphics, misc, motion | Tagged , , , | 6 Comments

Fill in the Blank

Actionscript:
  1. var story:String = "Fill in the _____.";
  2.  
  3.  
  4. var txt:TextField = new TextField();
  5. txt.defaultTextFormat = new TextFormat("Georgia", 20);
  6. txt.width = stage.stageWidth;
  7. txt.multiline = true;
  8. txt.wordWrap = true;
  9. txt.text = story;
  10. addChild(txt);
  11.  
  12. var alph:Array = "abcdefghijklmnopqrstuvwxyz".split("");
  13. var keys:Object = {};
  14. for (var i:int = 0; i<alph.length; i++){
  15.     keys[65 + i] = alph[i];
  16. }
  17. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  18. function onKeyPressed(evt:KeyboardEvent):void{
  19.      
  20.     if (evt.keyCode == Keyboard.ENTER){
  21.         story = "Fill in the _____.";
  22.         txt.text = story;
  23.     }
  24.    
  25.     for (var i:int = 0; i<story.length; i++){
  26.         if (story.charAt(i) == "_"){
  27.             var head:String = story.substr(0, i);
  28.             var tail:String = story.substr(i + 1);
  29.             var letter:String = keys[evt.keyCode];
  30.             if (!letter) return;
  31.             story = head + letter + tail;
  32.            
  33.             txt.text = story;
  34.            
  35.             break;
  36.         }
  37.     }
  38. }

I needed to do a fill in the blank for a personal project that I'm working on and this is what I came up with. Have a look at the swf here:

(you need to click first so you can type with the keyboard):
Fill in the blank

Posted in TextField, UI | Tagged , , | 3 Comments