Category Archives: Graphics

Three Color Triangle

By ascontest | October 27, 2009

Actionscript:

/*
*       Petri Leskinen, Finland
*       25 October 2009
*       pixelero.wordpress.com
*
*       Actionscript 3.0, Flash CS3, Flash Player 10
*
*       threeColorTriangle
*       draws a triangle with a gradient fill of three colors for each vertex
*       using graphics.drawTriangles and a BitmapData of size 2x2
*/
function threeColorTriangle(
      point0:Point, color0:uint,
      point1:Point, color1:uint,
      point2:Point, color2:uint):void {
 
      //      create a  bitmap of size 2x2 pixels
      var bmd:BitmapData = new BitmapData(2,2,true);
      //      copy colors to bitmap
      //      the fourth color is average of color1 and color2
      bmd.setVector(bmd.rect,
              Vector.<uint>([color0,color1,color2,
                                         (color1+color2)>>1
                                         ]));
 
      //      draw triangle
      this.graphics.beginBitmapFill(bmd,null,false,true /* =smooth */ );
      this.graphics.drawTriangles(
              // x,y -coordinates
              Vector.<Number>([
                      point0.x,point0.y,
                      point1.x,point1.y,
                      point2.x,point2.y]),
              // indices
              Vector.<int>([0,1,2]),
              // texture coordinates
              Vector.<Number>([0,0, 1,0, 0,1])
              );
}
 
 
// demo, let's draw some of these on the stage
randomize();
function randomize():void {
      this.graphics.clear();
 
      for (var i:int = 0;i<128;i++) {
              //      pick some random colors
              var color0:uint = 0xFFFFFFFF;
              var color1:uint = 0xFFFFFF*Math.random() | 0xFF000000;
              var color2:uint = 0xFFFFFF*Math.random() | 0xFF000000;
 
              //      random points 
var point0:Point = new Point(Math.random()*stage.stageWidth,
            Math.random()*stage.stageHeight);
var point1:Point = new Point(point0.x+200*(Math.random()-Math.random()),
            point0.y+200*(Math.random()-Math.random()));
var point2:Point = new Point(point0.x+200*(Math.random()-Math.random()),
            point0.y+200*(Math.random()-Math.random()));
 
        threeColorTriangle(point0, color0, point1, color1, point2,  color2);
      }
}

This snippet is by Petri Leskinen (pixelero). It draws a triangle with a gradient fill of three colors for each vertex using Graphics.drawTriangles and a BitmapData of size 2x2. This is the simplest case, it can easily be extended to four colors or maybe to use a larger 3x3, 4x4 etc... bitmap.

Here's a still...

Also posted in Vector | Tagged actionscript, as3, contest, flash | 5 Comments

Flowing Leaves (optical illusion)

By Zevan | October 19, 2009

Saw this optical illusion today... figured I'd make a snippet to create a few variations on the illusion...

CLICK HERE TO COPY

Actionscript:

[SWF( backgroundColor=0x2E7999, width=780, height = 600) ]
 
var leafNum:Number = 375;
var spacing:Number = 12;
var cols:Number = 25;
var hh:Number = stage.stageHeight / 2;
var hw:Number = stage.stageWidth / 2;
 
for (var i:Number = 0; i<leafNum; i++){
    var leaf:Shape = makeLeaf();
    leaf.scaleX = leaf.scaleY = 0.25;
    leaf.rotation = 90;
    leaf.x = 50 + (i % cols) * (leaf.width + spacing);
    leaf.y = 40 + int(i / cols) * (leaf.height + spacing);
    var dx:Number = leaf.x - hw;
    var dy:Number = leaf.y - hh;
    leaf.rotation = Math.sqrt(dx * dx + dy * dy);
}
 
function makeLeaf():Shape{
    var leaf:Shape = Shape(addChild(new Shape()));
    leaf.graphics.beginFill(0x9DC4D4);
    scaleYcircle(leaf.graphics, 50, .65, false);
    leaf.graphics.endFill();
    leaf.graphics.lineStyle(2, 0x003366, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
    scaleYcircle(leaf.graphics, 50, .65);
    leaf.graphics.lineStyle(2, 0xFFFFFF, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
    scaleYcircle(leaf.graphics, -50, .65);
    return leaf;
}
 
 
// original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
// circle that can be scaled on the y axis
function scaleYcircle(g:Graphics, r:Number, s:Number = 1, isHalf:Boolean=true):void {
     
    var c1:Number = r * (Math.SQRT2 - 1);
    var c2:Number = r * Math.SQRT2 / 2;
    var rs:Number = r * s, c1s:Number = c1 * s, c2s:Number = c2 * s;
    var x_r:Number =  -r, y_r:Number = -rs, x_c2:Number =  -c2;
    var y_c2:Number =  -c2s, x_c1:Number =  -c1, y_c1:Number =  -c1s
    g.moveTo(r, 0), g.curveTo(r, c1s, c2, c2s);
    g.curveTo(c1, rs, 0, rs), g.curveTo(x_c1,rs, x_c2, c2s);
    g.curveTo(x_r, c1s, x_r, 0);
    if (!isHalf){
     g.curveTo(x_r,y_c1,x_c2,y_c2);
     g.curveTo(x_c1,y_r,0,y_r), g.curveTo(c1,y_r,c2,y_c2);
     g.curveTo(r,y_c1,r,0);
    }
}

Also posted in Math, Vector, misc, motion, pixel manipulation | Tagged actionscript, as3, flash, optical illusion | 5 Comments

JS Sketch Experiment

By Zevan | October 5, 2009

CLICK HERE TO COPY

Actionscript:

[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("function(){ plot=[]; colors=[]; " + txt.text + " return {plot:plot, colors:colors};}");
    render((res == null) ? {plot:[], colors:[]} : res);
});
 
var v:Shape = Shape(addChild(new Shape()));
v.x = 700;
v.y = 220;
function render(obj:Object):void{
    var plot:Array = obj.plot;
    var colors:Array = obj.colors;
    var leng:int = plot.length;
    v.graphics.clear();
    var inc:int = 0;
    v.graphics.moveTo(plot[0], plot[1]);
    for (var i:int = 2; i<leng; i+=2){
        v.graphics.lineStyle(0,colors[inc++]);
        v.graphics.lineTo(plot[i], plot[i + 1]);
    }
}
 
 
var submit:TextField = TextField(btn.addChild(new TextField()));
submit.defaultTextFormat = new TextFormat("_sans", 12);
with(submit) textColor=0xFFFFFF, width=100, autoSize="center";
with(submit) mouseEnabled = false,  text="submit";
 
var txt:TextField = TextField(addChild(new TextField()));
with(txt) x = y = 20, type = "input", multiline=true;
with(txt) width = 400, height = 400, border = true, background = 0xFFFFFF;
txt.defaultTextFormat = new TextFormat("Monaco", 12);
txt.text = "enter text"; 
txt.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
function onDown(evt:MouseEvent):void{
    txt.text = "";
    txt.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
}

This snippet is a mini code editor that allows the user to write javascript into a textfield - 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.

Have a look at the demo:

If you do something nice with this... post your javascript snippet as a comment and I'll add it to the JS Sketch page...

Also posted in Math, dynamic, external data, functions | Tagged actionscript, as3, flash, javascript | Leave a comment

Seamless Vector Texture

By Zevan | September 18, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width = 800, height = 450, backgroundColor=0xFFFFFF)]
 
graphics.beginFill(0xDEDEDE);
graphics.drawRect(0,0,400,400);
 
var container:Sprite = Sprite(addChild(new Sprite()));
draggable(rx(), ry(), 0x112233, 20);
draggable(rx(), ry(), 0x2266FF, 15);
draggable(rx(), ry(), 0x003299, 50, "rect");
draggable(rx(), ry(), 0xFFFFFF, 30);
draggable(rx(), ry(), 0x00CCFF, 15);
draggable(rx(), ry(), 0x1188CC, 50, "rect");
 
function rx():Number{
    return Math.random() * 200 + 100;
}
function ry():Number{
    return Math.random() * 200 + 100;
}
 
var guides:Shape = Shape(addChild(new Shape()));
with(guides.graphics){
       lineStyle(0, 0x666666)
       moveTo(200,0);
       lineTo(200,400);
       moveTo(0, 200);
       lineTo(400, 200);
       moveTo(400,0);
       lineTo(400,400);
       moveTo(0,400);
       lineTo(800,400);
}
 
var canvas:BitmapData = new BitmapData(200,200,true, 0x00000000);
var tex:BitmapData = new BitmapData(800,800,false, 0xFFFFFF);
 
var frame:Bitmap = Bitmap(addChild(new Bitmap(tex, "auto", true)));
frame.x = 401;
frame.scaleX = frame.scaleY = 0.5;
 
var pnt:Point = new Point();
var m:Matrix = new Matrix();
 
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    canvas.fillRect(canvas.rect, 0x00000000);
    canvas.draw(container);
    drawQuadrant(-200,0)
    drawQuadrant(-400,0)
    drawQuadrant(0,-200)
    drawQuadrant(-200,-200);
    tex.fillRect(tex.rect, 0xFFFFFF);
    for (var i:int = 0; i<16; i++){
        var px:Number = i % 4;
        var py:Number = int(i / 4);
        pnt.x = px * 200;
        pnt.y = py * 200;
        tex.copyPixels(canvas, canvas.rect, pnt, null, null, true);
       }
}
 
function drawQuadrant(x:Number, y:Number):void{
     m.tx = x;
     m.ty = y;
     canvas.draw(container, m);
}
 
// draggable Sprite
function draggable(xp:Number, yp:Number, col:uint = 0xFF0000,
size:Number=4, type:String="circle"):Sprite {
       var s:Sprite = Sprite(container.addChild(new Sprite()));
       s.x = xp;
       s.y = yp;
       with(s.graphics){
               beginFill(col)
               if(type == "circle"){
                 drawCircle(size,size,size);
               }else if(type == "rect"){
                 drawRect(0,0,size, size);
               }
       }
       s.buttonMode = true;
       s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
       return s;
}
function onDrag(evt:MouseEvent):void {
    var w:Number = evt.currentTarget.width;
    var h:Number = evt.currentTarget.height;
    evt.currentTarget.startDrag(false, new Rectangle(0,0,400 - w, 400 - h));
}
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
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.

Also posted in BitmapData, misc | Tagged actionscript, as3, flash | 4 Comments

Category Archives: Graphics

Three Color Triangle

Flowing Leaves (optical illusion)

JS Sketch Experiment

Seamless Vector Texture

Search

Pages

Recent Posts

Categories

Archives

RSS Feeds