Rough PathContext

Demo.hx

package justTrianglesDemo;
import js.Browser;
import khaMath.Matrix4;
import justTrianglesDemo.WebGLDrawing;
import justTriangles.Triangle;
import justTriangles.Draw;
import justTriangles.Point;
import justTriangles.PathContext;
import justTriangles.ShapePoints;
import htmlHelper.tools.CSSEnterFrame;
@:enum
abstract RainbowColors( Int ){
    var Violet = 0x9400D3;
    var Indigo = 0x4b0082;
    var Blue   = 0x0000FF;
    var Green  = 0x00ff00;
    var Yellow = 0xFFFF00;
    var Orange = 0xFF7F00;
    var Red    = 0xFF0000;
}
class Demo {
    var rainbow = [ Red, Orange, Yellow, Green, Blue, Indigo, Violet ];    
    public function new(){
        var webgl = WebGLDrawing.create( 570*2 );
        draw();
        webgl.setTriangles( Triangle.triangles, cast rainbow );
        webgl.modelViewProjection = Matrix4.rotationZ( Math.PI / 4 );
        webgl.transformationFunc = spin;
    }
    var theta: Float = 0;
    inline function spin(): Matrix4{
        return Matrix4.rotationZ( theta += Math.PI/100 ).multmat( Matrix4.rotationY( theta ) );
    }
    public function draw(){
        Draw.colorFill_id = 1; 
        Draw.colorLine_id = 1;
        Draw.extraFill_id = 2;
        Draw.thickness = 25/1000;
        var scale = 4;
        var dx = 200;
        var dy = 250;
        var pp: Array<Point> = [
            { x: dx - 27*scale, y: dy - 20*scale }, 
            { x: dx - 15*scale, y: dy - 30*scale }, 
            { x: dx, y: dy - 15*scale },
            { x: dx + 15*scale, y: dy - 30*scale },
            { x: dx + 27*scale, y: dy - 20*scale },
            { x: dx + 34*scale, y: dy - 5*scale },
            { x: dx + 20*scale, y: dy + 6*scale },
            { x: dx + 25*scale, y: dy },
            { x: dx, y: dy + 30*scale },
            { x: dx - 25*scale, y: dy},
            { x: dx - 20*scale, y: dy + 6*scale },
            { x: dx - 34*scale, y: dy - 5*scale },
            { x: dx - 28*scale, y: dy - 20*scale },
            { x: dx - 27*scale, y: dy - 20*scale }];
            pp.reverse();
        for( i in 0...pp.length ){
            pp[i].x = pp[i].x/500 - 0.6;
            pp[i].y = pp[i].y/500 - 0.6;
        }
        var pathContext = new PathContext( 1 );
        pathContext.moveTo( pp[0].x, pp[1].y );
        var p0: Point;
        var p1: Point;
        for( i in 1...pp.length ){
            if( ( i - 2 )%2 == 0 ) {
                p0 = pp[ i - 2 ];
                p1 = pp[ i - 1 ];
                pathContext.quadTo( p0.x, p0.y, p1.x, p1.y );
            }
        }
        p0 = pp[ pp.length - 2 ];
        p1 = pp[ pp.length - 1 ];
        pathContext.quadTo( p0.x, p0.y, p1.x, p1.y );
        pathContext.render( 25/1000 );
    }
}