sc3.rasterization.scanfill

This examples demonstrates the sc3.rasterization.scanfill function.

It implements an algorithm similar to that described here.

In addition to software rasterization purposes, a scanfill algorithm can potentially be useful in visibility calculations for grid-based spatial structures.

Example Code

$(function()
{   
    //
    // Run the scanline algorithm
    //
    var sc = require("surfacecurve-gfx");
    var Triangle = sc.primitives.g2d.Triangle;
    
    var triangles =
    [
        new Triangle([2, 10], [6, 2], [-3, -3]),
        new Triangle([-5, -4.5], [5, -6], [-4, -9])
    ];
    
    
    var colors = [ "#3C5", "#C85" ];
    _.each(triangles, function (triangle, i)
    {
        var scanlines = sc.rasterization.scanfill(triangle);
        displayScanlines(scanlines, colors[i%colors.length]);
    });
    
});

Setup

function displayScanlines (rows, color)
{
    var delay = 250;
    _.each(rows, function (arr, rownum) 
    {
        var y = arr[0];
        var x0 = arr[1];
        var x1 = arr[2];

        for (var x = x0; x <= x1; ++x)
        {
            var id = "#" + [x, y].join("_");
            
            $(id)
                .attr("title", id.substr(1).replace(/_/g, ","))
                .css({
                    "background-color" : color,
                    "border":"solid 1px #777",
                    opacity : .15
                });
                
            _.delay(_.bind(function() {
                this.$e.animate({ opacity : 1 }, 250);
            }, { $e : $(id) }), rownum * 250 + x * 50);
        }
    });    
}   


$(function()
{   
    //
    // Setup a grid view
    //   
    var $grid = $("<div/>").css({
        "margin" : "0 auto",
        "width" : (16 * 21) + "px",
        "background-color" : "#FFF"
    });
    for (var y = 10; y != -10; --y)
    {
        var $row = $("<div/>").css({
            "padding" : "0",
            "margin" : "0",
            "height" : "16px"
        });
        for (var x = -10; x <= 10; ++x)
        {
            $row.append( $("<div/>")
                .attr("id", [x,y].join("_"))
                .css({
                    display : "inline-block",
                    "border":"solid 1px #CCC",
                    "border-radius" : "2px",
                    "width" : "16px",
                    "height" : "16px",
                    "background-color" : "black",
                    "opacity" : .05
                })
            );
        }
        $grid.append($row);
    }
    $("canvas").after($grid);
    $("canvas").remove();
 
});