Example Code


$(function()
{   
    var sc3 = require("surfacecurve-gfx");      

    // Here's the "interesting" part of the example: the table of
    // pattern functions.
    //
    var patterns =
    {
        "checker"       : sc3.patterns.checker(),
        "spot"          : sc3.patterns.spot(),
        "stripe"        : sc3.patterns.stripe(),    
        "tile"          : sc3.patterns.tile(),
        "diamond"       : sc3.patterns.diamond(),
        "wave"          : sc3.patterns.wave(),
        "star"          : sc3.patterns.star(),
        "ribbon"        : sc3.patterns.ribbon(),
        "circles"       : sc3.patterns.circles(),
        
        "spot small"    : sc3.patterns.spot({ radius : .2 })
    };
    
    
    // Create a micro "app" to manipulate the page state
    //
    function App()
    {
        this.current = patterns["checker"];
        this.highlight = true;
    }    
    _.extend(App.prototype, 
    {
        setup_ui : function ()
        {
            var $ui = $("#ui");

            // Pattern dropdown
            var $select = $("<select/>").css("width", "12em");
            _.each(patterns, function (value, key) {
                $select.append( $("<option/>").val(key).text(key) ); 
            });
            $select.on("change", function() {
                app.current = patterns[$(this).val()];
                app.update();
            });
            $ui.append($select);
            
            // Highlight checkbox
            var $div = $("<div/>").css({ "display" : "inline-block", "padding" : "0 1em" });
            var $input = $("<input/>").attr("type", "checkbox").attr("checked", true).val(true);
            $div.append($input, $("<span/>").text(" highlight"));
            $input.on("change", function() {
                app.highlight = $(this).is(":checked");
                app.update();
            });
            $ui.append($div);


        },
        check_url : function()
        {
            if (window.location.hash)
            {
                var name = window.location.hash.substr(1);                
                if (patterns[name])
                {
                    $("#ui").find("select").val(name);
                    this.current = patterns[name];
                }
            }
        },
        update : function()
        {
            sc3.util.canvas_sample_uv_1d({
                canvas  : $("#canvas").get(0), 
                sampler : app.current,
                color0  : [ 0, 90, 200 ], 
                color1  : [ 20, 10, 10],
                exteriorAlpha   : this.highlight ? .85 : 1.0
            });        
        }
    });
    
    // Set up and draw the initial view
    //
    var app = new App;
    app.setup_ui();
    app.check_url();
    app.update();
});

Setup