Ribbon

gistfile1.txt

// Grid
var gridSize = 25,
    cols = Math.floor( window.innerWidth / (gridSize * 1.75) ),
    rows = Math.floor( window.innerHeight / (gridSize * 1.5 ) ) * 2;

var offsetX = -20;
// 
for ( var x = 1; x <= cols; x++) {

    for (var y = 1; y < rows; y++ ) {
        var tri = new Path.RegularPolygon([ offsetX + ((gridSize*1.5) * x), (gridSize*.85) * y ], 3, gridSize);
        
        tri.strokeColor = 'red';

        if (x % 2) {
            if (y % 2)
                tri.rotate(90);
            else 
                tri.rotate(-90);
            
        } else {
            if (y % 2)
                tri.rotate(-90);
            else 
                tri.rotate(90);
            
        }
    }
}

var points = [
    new Point( 112, 227),
    new Point( 112, 100),
    new Point( 223, 163),
    new Point( 223, 78),
    new Point( 486, 228),
    new Point( 486, 78),
]

var values = {
    lines: 1,
    size: 50,
    smooth: false
};
var paths = [];

for (var i = 0; i < values.lines; i++) {
    var path = new Path();
    path.strokeColor = '#000000';
    paths.push(path);
}

for (var i = 1; i < points.length; i++ ) {
    var point = points[i],
        prevPoint = points[i-1],
        diff = prevPoint - point,
        width = 42.5;
        
    var offset = prevPoint.clone();
        offset.angle = -30;
        offset.length = width;
    
    var segment = new Path ();
    segment.add( prevPoint - offset);
    segment.add( prevPoint + offset);
    segment.add( point + offset );
    segment.add( point - offset );
    segment.fillColor = getFillColour(segment, diff.y > 0);
    
    segment.closed = true;
}

// Trace
var debug = new Path();
debug.strokeColor = 'red';

for (var i = 0; i < points.length; i++ ) {
  debug.add(points[i]);
}

function getFillColour( path, is_up ) {
    var color = '#169CE2';
    if ( is_up ) {
        color = {
            gradient: {
                stops: [['#0A436E', 0], ['#146FB8', 0.6]]
                //stops: [['red', 0.1], ['yellow', 0.3], 'lime']
            },
            origin: path.bounds.topRight,
            destination: path.bounds.bottomLeft
        }
    }
    return color;
}

/**
 * Making it a mouse tool
 * 
 * Limit mouse points to points on the isometric grid
 */
var mousePath = new Path();
mousePath.strokeColor = 'lime';

function onMouseMove(evt) {
    mousePath.add(
        iso_grid_pos(evt.middlePoint.x, evt.middlePoint.y, 40, 22)
    );    
}
/**
 * http://gmc.yoyogames.com/index.php?showtopic=290349
 */
function iso_grid_pos(x, y, grid_width, grid_height ) {
    var iso_x = Math.round(y/grid_height - x/grid_width);
    var iso_y = Math.round(y/grid_height + x/grid_width);
    
    return [
        (iso_y-iso_x)/2 * grid_width,
        (iso_y+iso_x)/2 * grid_height
    ]
}