Seamless Vector Texture

By Zevan | September 18, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 800, height = 450, backgroundColor=0xFFFFFF)]
  2.  
  3. graphics.beginFill(0xDEDEDE);
  4. graphics.drawRect(0,0,400,400);
  5.  
  6. var container:Sprite = Sprite(addChild(new Sprite()));
  7. draggable(rx(), ry(), 0x112233, 20);
  8. draggable(rx(), ry(), 0x2266FF, 15);
  9. draggable(rx(), ry(), 0x003299, 50, "rect");
  10. draggable(rx(), ry(), 0xFFFFFF, 30);
  11. draggable(rx(), ry(), 0x00CCFF, 15);
  12. draggable(rx(), ry(), 0x1188CC, 50, "rect");
  13.  
  14. function rx():Number{
  15.     return Math.random() * 200 + 100;
  16. }
  17. function ry():Number{
  18.     return Math.random() * 200 + 100;
  19. }
  20.  
  21. var guides:Shape = Shape(addChild(new Shape()));
  22. with(guides.graphics){
  23.        lineStyle(0, 0x666666)
  24.        moveTo(200,0);
  25.        lineTo(200,400);
  26.        moveTo(0, 200);
  27.        lineTo(400, 200);
  28.        moveTo(400,0);
  29.        lineTo(400,400);
  30.        moveTo(0,400);
  31.        lineTo(800,400);
  32. }
  33.  
  34. var canvas:BitmapData = new BitmapData(200,200,true, 0x00000000);
  35. var tex:BitmapData = new BitmapData(800,800,false, 0xFFFFFF);
  36.  
  37. var frame:Bitmap = Bitmap(addChild(new Bitmap(tex, "auto", true)));
  38. frame.x = 401;
  39. frame.scaleX = frame.scaleY = 0.5;
  40.  
  41. var pnt:Point = new Point();
  42. var m:Matrix = new Matrix();
  43.  
  44. addEventListener(Event.ENTER_FRAME, onLoop);
  45. function onLoop(evt:Event):void {
  46.     canvas.fillRect(canvas.rect, 0x00000000);
  47.     canvas.draw(container);
  48.     drawQuadrant(-200,0)
  49.     drawQuadrant(-400,0)
  50.     drawQuadrant(0,-200)
  51.     drawQuadrant(-200,-200);
  52.     tex.fillRect(tex.rect, 0xFFFFFF);
  53.     for (var i:int = 0; i<16; i++){
  54.         var px:Number = i % 4;
  55.         var py:Number = int(i / 4);
  56.         pnt.x = px * 200;
  57.         pnt.y = py * 200;
  58.         tex.copyPixels(canvas, canvas.rect, pnt, null, null, true);
  59.        }
  60. }
  61.  
  62. function drawQuadrant(x:Number, y:Number):void{
  63.      m.tx = x;
  64.      m.ty = y;
  65.      canvas.draw(container, m);
  66. }
  67.  
  68. // draggable Sprite
  69. function draggable(xp:Number, yp:Number, col:uint = 0xFF0000,
  70. size:Number=4, type:String="circle"):Sprite {
  71.        var s:Sprite = Sprite(container.addChild(new Sprite()));
  72.        s.x = xp;
  73.        s.y = yp;
  74.        with(s.graphics){
  75.                beginFill(col)
  76.                if(type == "circle"){
  77.                  drawCircle(size,size,size);
  78.                }else if(type == "rect"){
  79.                  drawRect(0,0,size, size);
  80.                }
  81.        }
  82.        s.buttonMode = true;
  83.        s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
  84.        return s;
  85. }
  86. function onDrag(evt:MouseEvent):void {
  87.     var w:Number = evt.currentTarget.width;
  88.     var h:Number = evt.currentTarget.height;
  89.     evt.currentTarget.startDrag(false, new Rectangle(0,0,400 - w, 400 - h));
  90. }
  91. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  92. function onUp(evt:MouseEvent):void{ stopDrag() }

This snippet creates a seamless texture from a few draggable vector shapes. BitmapData is used to combine four quadrants into one seamless tile.


Have a look at the swf

I created this snippet as a sketch for a new feature for my command drawing project.

This entry was posted in BitmapData, Graphics, misc and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. dVyper
    Posted September 21, 2009 at 9:28 am | Permalink

    Very nice :)

  2. Zevan
    Posted September 22, 2009 at 9:57 pm | Permalink

    Thanks dVyper…

  3. felisan
    Posted October 15, 2009 at 10:12 pm | Permalink

    wow, nice tip.
    created this from it:
    http://www.campjohn.dk/wp/?p=1243

    thanks for sharing :O)

One Trackback

  1. By ActionScript 3.0: creating dynamic background using BitmapData at Helpful stuff on October 15, 2009 at 12:18 am

    [...] having read this and liked it, I decided to setup an example of the way it could be [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*