Category Archives: setPixel

k-th Order Catmull-Rom Spline

By Zevan | March 26, 2009

Actionscript:

var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
addChild(new Bitmap(canvas));
var pnts:Array = new Array();
// make 8 control points
for (var i:int = 0; i<8; i++){
    pnts.push(dot(50 + i * (30 + Math.random()*10),
                             50 + i * (30 + Math.random()*10)));
}
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    canvas.lock();
    canvas.fillRect(canvas.rect, 0x000000);
    curve(pnts);
    canvas.unlock();
}
function tangent(pk1:Sprite, pk_1:Sprite){
    return new Point((pk1.x - pk_1.x) / 2, (pk1.y - pk_1.y) / 2);
}
// all math from http://en.wikipedia.org/wiki/Cubic_Hermite_spline
function curve(p:Array, res:Number=.03):void{
    var px:Number = 0;
    var py:Number = 0;
    var pIter:int = p.length - 1;
    var m:Array = [];
    m[0] = tangent(p[1], p[0]);
    for (var i:int = 1; i<pIter; i++){
        m[i] = tangent(p[i + 1], p[i - 1]);
    }
    m[pIter] = tangent(p[pIter], p[pIter - 1]);
    for (var t:Number = 0; t <1; t+=res){
         var t_2:Number = t * t;
         var _1_t:Number = 1 - t;
         var _2t:Number = 2 * t;
         var h00:Number =  (1 + _2t) * (_1_t) * (_1_t);
         var h10:Number =  t  * (_1_t) * (_1_t);
         var h01:Number =  t_2 * (3 - _2t);
         var h11:Number =  t_2 * (t - 1);
         for (var k:int = 0; k <pIter; k++){
             var k1:int = k + 1;
             var pk:Sprite = p[k];
             var pk1:Sprite = p[k1];
             var mk:Point = m[k];
             var mk1:Point = m[k1];
             px = h00 * pk.x + h10 * mk.x + h01 * pk1.x + h11 * mk1.x;
             py = h00 * pk.y + h10 * mk.y + h01 * pk1.y + h11 * mk1.y;
             canvas.setPixel(px, py, 0xFFFFFF);
         }
    }
}
// draggable dot
function dot(xp:Number, yp:Number, col:uint = 0xFF0000, rad:Number=4):Sprite {
    var s:Sprite = Sprite(addChild(new Sprite));
    s.x = xp;
    s.y = yp;
    with(s.graphics) beginFill(col), drawCircle(0,0,rad);
    s.buttonMode = true;
    s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
    return s;
}
function onDrag(evt:MouseEvent):void {
    evt.currentTarget.startDrag()
}
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
function onUp(evt:MouseEvent):void{
    stopDrag();
}

More Catmull-Rom stuff. This one can have any number of control points:

Check it out here:

Also posted in Math, graphics algorithms | Leave a comment

Catmull-Rom Spline

By Zevan | March 25, 2009

CLICK HERE TO COPY

Actionscript:

var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
addChild(new Bitmap(canvas));
 
var p0:Sprite = dot(100, 100);
var p1:Sprite = dot(120, 180);
var p2:Sprite = dot(220, 180);
var p3:Sprite = dot(250, 250);
 
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    canvas.lock();   
    canvas.fillRect(canvas.rect, 0x000000);
 
    curve(p0, p1, p2, p3);
    canvas.unlock();
}
 
 
// all math from http://en.wikipedia.org/wiki/Cubic_Hermite_spline
function curve(p0:Sprite, p1:Sprite, p2:Sprite, p3:Sprite, rez:Number=.02):void{
    var px:Number = 0;
    var py:Number = 0;
    var m0:Point = tangent(p1, p0);
    var m1:Point = tangent(p2, p0);
    var m2:Point = tangent(p3, p1);
    var m3:Point = tangent(p3, p2);
    
    for (var t:Number = 0; t <1; t+=rez){
         var t_2:Number = t * t;
         var _1_t:Number = 1 - t;
         var _2t:Number = 2 * t;
         
         var h00:Number =  (1 + _2t) * (_1_t) * (_1_t);
         var h10:Number =  t  * (_1_t) * (_1_t);
         var h01:Number =  t_2 * (3 - _2t);
         var h11:Number =  t_2 * (t - 1);
         
         px = h00 * p0.x + h10 * m0.x + h01 * p1.x + h11 * m1.x;
         py = h00 * p0.y + h10 * m0.y + h01 * p1.y + h11 * m1.y;
         canvas.setPixel(px, py, 0xFFFFFF);
         
         px = h00 * p1.x + h10 * m1.x + h01 * p2.x + h11 * m2.x;
         py = h00 * p1.y + h10 * m1.y + h01 * p2.y + h11 * m2.y;
         canvas.setPixel(px, py, 0xFFFFFF);
         
         px = h00 * p2.x + h10 * m2.x + h01 * p3.x + h11 * m3.x;
         py = h00 * p2.y + h10 * m2.y + h01 * p3.y + h11 * m3.y;
         canvas.setPixel(px, py, 0xFFFFFF);
    }
}
 
function tangent(pk1:Sprite, pk_1:Sprite){
    return new Point((pk1.x - pk_1.x) / 2, (pk1.y - pk_1.y) / 2);
}
 
// draggable dot
function dot(xp:Number, yp:Number, col:uint = 0x507399, rad:Number=5):Sprite {
    var s:Sprite = Sprite(addChild(new Sprite));
    s.x = xp;
    s.y = yp;
    with(s.graphics) beginFill(col), drawCircle(0,0,rad);
    s.buttonMode = true;
    s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
    return s;
}
function onDrag(evt:MouseEvent):void {
    evt.currentTarget.startDrag()
}
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
function onUp(evt:MouseEvent):void{
    stopDrag();
}

This is snippet draws a Catmull-Rom spline based on 4 control points. A nice feature of Catmull-Rom splines is that they always pass through each of their control points.

have a look at the swf here:

I first learned about Catmull-Rom splines somewhere in the processing forums.

I got all my info for this snippet from this wikipedia page.

There is a good deal of room for optimization here... I may post an optimized version in the future.

Also posted in Math, graphics algorithms | Tagged actionscript, flash | 5 Comments

Cubic Hermite Spline

By Zevan | March 24, 2009

CLICK HERE TO COPY

Actionscript:

var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
addChild(new Bitmap(canvas));
 
// create some draggable dots
var p0:Sprite = dot(100, 100);
var p1:Sprite = dot(200, 200);
var m0:Sprite = dot(200, 100, 0xFFFFFF, 3)
var m1:Sprite = dot(100, 200, 0xFFFFFF, 3);
 
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    canvas.fillRect(canvas.rect, 0x000000);
    var px:Number = 0;
    var py:Number = 0;
    for (var t:Number = 0; t <1; t+=.01){
        var t_2:Number = t * t;
        var t_3:Number = t_2 * t;
        
        // some repetitive math for clarity
        px = (2 * t_3  - 3 * t_2 + 1) * p0.x +(t_3 - 2 * t_2 + t) *
                 m0.x + (-2 * t_3 + 3 * t_2) * p1.x + (t_3 - t_2) * m1.x;
        py = (2 * t_3  - 3 * t_2 + 1) * p0.y +(t_3 - 2 * t_2 + t) *
                 m0.y + (-2 * t_3 + 3 * t_2) * p1.y + (t_3 - t_2) * m1.y;
        canvas.setPixel(px, py, 0xFF0000);
    }
}
// draggable dot
function dot(xp:Number, yp:Number, col:uint = 0x507399, rad:Number=5):Sprite {
    var s:Sprite = Sprite(addChild(new Sprite()));
    s.x = xp;
    s.y = yp;
    with(s.graphics) beginFill(col), drawCircle(0,0,rad);
    s.buttonMode = true;
    s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
    return s;
}
function onDrag(evt:MouseEvent):void {
    evt.currentTarget.startDrag()
}
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
function onUp(evt:MouseEvent):void{
    stopDrag();
}

This is the start of my exploration of Cubic Hermite Splines (like Catmull–Rom)... I wrote this snippet while skimming the wikipedia article on the subject.... at first I wasn't sure if this was correct, but I added tangent calculations for a Catmull-Rom and it worked nicely... will post that tomorrow.

Also posted in Math, graphics algorithms | Tagged actionscript, flash | Leave a comment

Circle of Particles #2

By Zevan | March 18, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width = 400, height = 400)];
var canvas:BitmapData = new BitmapData(400,400, false, 0x000000);
var eraser:BitmapData = new BitmapData(400,400, true, 0x11000000);
addChild(new Bitmap(canvas));
 
var particles:Array = new Array();
for (var i:int = 0; i <500; i++){
    particles.push(makeParticle());
}
 
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    canvas.copyPixels(eraser, eraser.rect, new Point(0,0), null, null, true);
    for (var i:int = 0; i <particles.length; i++){
        particles[i]();
    }
}
 
function makeParticle():Function {
    var dx:Number, dy:Number;
    var x:Number = 200;
    var y:Number = 200;
    var vx:Number = Math.random() * 4 - 2;
    var vy:Number = Math.random() * 4 - 2;
    var ang:Number;
    return function():void {
              x += vx;
              y += vy;
              dx = 200 - x;
              dy=  200 - y;
               if (Math.sqrt((dx * dx) + (dy * dy))> 130){
                ang = Math.atan2(dy, dx) / Math.PI * 180;
                 vx = Math.cos(ang);
                 vy = Math.sin(ang);
               }
               canvas.setPixel(x, y, 0xFFFFFF);
    }
}