Scribble Mouse Trail - Draw Bezier Curves using Greensock's Bezier Plugin


/ Published in: ActionScript 3
Save to your folder(s)

This creates a scribble mouse trail effect. More importantly, it illustrates how you can easily use the greensock bezier plugin for TweenMax to actually draw bezier curves.


Copy this code and paste it in your HTML
  1. //get these classes at http://www.greensock.com/tweenmax/
  2. import com.greensock.TweenMax;
  3. import com.greensock.plugins.BezierPlugin;
  4. import com.greensock.plugins.BezierThroughPlugin;
  5.  
  6. var xA:Array=new Array();
  7. var yA:Array=new Array();
  8.  
  9. xA.push(0);
  10. yA.push(0);
  11.  
  12. addEventListener(Event.ENTER_FRAME,loop);
  13. var container = new Sprite();
  14.  
  15.  
  16. addChild(container);
  17.  
  18. function loop(e){
  19. //trace(mouseX);
  20. xA.push(mouseX);
  21. yA.push(mouseY);
  22.  
  23. if(xA.length>3){
  24.  
  25. var bezierObj:Object=BezierPlugin.parseBeziers({x:xA,y:yA},true);
  26. trace(bezierObj["x"].length);
  27. container.graphics.clear();
  28. container.graphics.lineStyle(1);
  29. container.graphics.moveTo(xA[0],yA[0]);
  30. for( var i = 1; i<bezierObj["x"].length; i++){
  31. container.graphics.curveTo(bezierObj.x[i][1],bezierObj.y[i][1],bezierObj.x[i][2],bezierObj.y[i][2]);
  32. }
  33. if(xA.length>20){
  34. xA.shift();
  35. yA.shift();
  36. }
  37. }
  38.  
  39. }

URL: http://www.adamcoulombe.info/lab/as3/scribble-trail.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.