Tris

Tris.hx

import js.Browser.document;
import js.Browser.window;
import js.html.CanvasElement;
import js.html.CanvasRenderingContext2D;
import om.Random;

class Tris {

	public var canvas(default,null) : CanvasElement;
	public var dx(default,null) : Int;
	public var dy(default,null) : Int;
	public var size : Int;
	public var colorA : String;
	public var colorB : String;

	var context : CanvasRenderingContext2D;

	public function new( dx : Int, dy : Int, size : Int, colorA : String, colorB : String ) {

		this.dx = dx;
		this.dy = dy;
		this.size = size;
		this.colorA = colorA;
		this.colorB = colorB;

		canvas = document.createCanvasElement();
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		context = canvas.getContext2d();
		//context.lineWidth = 4;
	}

	public function setSize( size : Int ) {
		this.size = size;
		dx = Std.int( window.innerWidth / size );
		dy = Std.int( window.innerHeight / size );
	}

	public function drawRandom() {
		context.clearRect( 0, 0, dx * size, dy * size );
		for( iy in 0...dy ) {
			for( ix in 0...dx ) {
				var px = Std.int( ix * size );
				var py = Std.int( iy * size );
				drawTriangle( px, py, Std.int(Random.int(6)*(size/2)), Random.int(1) );
				var color = om.Random.bool() ? colorA : colorB;
				context.fillStyle = color;
				context.strokeStyle = color;
				context.fill();
				//context.stroke();
			}
		}
	}

	function drawTriangle( x : Int, y : Int, size : Int, direction = 0 ) {
		context.beginPath();
		switch direction {
		case 0:
			context.moveTo( x, y );
			context.lineTo( x + size, y );
			context.lineTo( x, y + size );
		case 1:
			context.moveTo( x + size, y );
			context.lineTo( x + size, y + size );
			context.lineTo( x, y );
		case 2:
			context.lineTo( x + size, y + size );
			context.lineTo( x, y + size );
			context.lineTo( x + size, y );
		case 3:
			context.moveTo( x, y + size );
			context.lineTo( x, y );
			context.lineTo( x + size, y + size );
		}
		context.closePath();
	}
}