canvas border line

border.js

var JSX = {};
(function () {

/**
 * copies the implementations from source interface to target
 */
function $__jsx_merge_interface(target, source) {
	for (var k in source.prototype)
		if (source.prototype.hasOwnProperty(k))
			target.prototype[k] = source.prototype[k];
}

/**
 * defers the initialization of the property
 */
function $__jsx_lazy_init(obj, prop, func) {
	function reset(obj, prop, value) {
		delete obj[prop];
		obj[prop] = value;
		return value;
	}

	Object.defineProperty(obj, prop, {
		get: function () {
			return reset(obj, prop, func());
		},
		set: function (v) {
			reset(obj, prop, v);
		},
		enumerable: true,
		configurable: true
	});
}

/*
 * global functions called by JSX as Number.* (renamed so that they do not conflict with local variable names)
 */
var $__jsx_parseInt = parseInt;
var $__jsx_parseFloat = parseFloat;
var $__jsx_isNaN = isNaN;
var $__jsx_isFinite = isFinite;

var $__jsx_ObjectToString = Object.prototype.toString;
var $__jsx_ObjectHasOwnProperty = Object.prototype.hasOwnProperty;

/*
 * public interface to JSX code
 */
JSX.require = function (path) {
	var m = $__jsx_classMap[path];
	return m !== undefined ? m : null;
}
/**
 * class _Main extends Object
 * @constructor
 */
function _Main() {
}

_Main.prototype = new Object;
/**
 * @constructor
 */
function _Main$() {
};

_Main$.prototype = new _Main;

/**
 */
_Main.getRequestAnimationFrame$ = function () {
	return js.global.requestAnimationFrame !== undefined ? (function (tick) {
		return dom.window.requestAnimationFrame(tick);
	}) : js.global.webkitRequestAnimationFrame !== undefined ? (function (tick) {
		return dom.window.webkitRequestAnimationFrame(tick);
	}) : js.global.mozRequestAnimationFrame !== undefined ? (function (tick) {
		return dom.window.mozRequestAnimationFrame(tick);
	}) : (function (tick) {
		return dom.window.setTimeout((function () {
			tick(0);
		}), 16.666666666666668);
	});
};

var _Main$getRequestAnimationFrame$ = _Main.getRequestAnimationFrame$;

/**
 */
_Main.main$ = function () {
	/** @type {Canvas} */
	var canvas;
	var callTick;
	canvas = new Canvas$LHTMLCanvasElement$((function (o) { return o instanceof HTMLCanvasElement ? o : null; })(dom.window.document.getElementById('bgcanvas')));
	canvas.initLines$N(Math.floor(Math.random() * 100 + 10));
	callTick = (function (elasped) {
		canvas.draw$();
		if (canvas.finished) {
			return;
		}
		_Main.requestAnimationFrame(callTick);
	});
	_Main.requestAnimationFrame(callTick);
};

var _Main$main$ = _Main.main$;

/**
 * class Line extends Object
 * @constructor
 */
function Line() {
}

Line.prototype = new Object;
/**
 * @constructor
 * @param {!number} x
 * @param {!number} y
 * @param {!number} w
 * @param {!number} h
 */
function Line$NNNN(x, y, w, h) {
	this.d = 100;
	this.finished = false;
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	this.R = Math.floor(Math.random() * 200) + 1;
	this.G = Math.floor(Math.random() * 200) + 1;
	this.B = Math.floor(Math.random() * 200) + 1;
};

Line$NNNN.prototype = new Line;

/**
 * @param {!number} num
 * @return {!number}
 */
Line.prototype.randomInt$N = function (num) {
	return Math.floor(Math.random() * num) + 1;
};

/**
 * @param {!number} r
 * @param {!number} g
 * @param {!number} b
 * @return {!number}
 */
Line.prototype.maxColorRange$NNN = function (r, g, b) {
	return 255 - Math.max(r >= g ? r : g, b);
};

/**
 * @param {!number} r
 * @param {!number} g
 * @param {!number} b
 * @return {!string}
 */
Line.prototype.createRGBString$NNN = function (r, g, b) {
	return 'rgb(' + (r + "") + ',' + (g + "") + ',' + (b + "") + ')';
};

/**
 * @param {!number} r
 * @param {!number} g
 * @param {!number} b
 * @param {!number} a
 * @return {!string}
 */
Line.prototype.createRGBAString$NNNN = function (r, g, b, a) {
	return 'rgba(' + (r + "") + ',' + (g + "") + ',' + (b + "") + ',' + (a + "") + ')';
};

/**
 * @param {CanvasRenderingContext2D} ctx
 */
Line.prototype.draw$LCanvasRenderingContext2D$ = function (ctx) {
	/** @type {CanvasGradient} */
	var gradient;
	/** @type {!number} */
	var range;
	/** @type {!number} */
	var r$0;
	/** @type {!number} */
	var g$0;
	/** @type {!number} */
	var b$0;
	ctx.beginPath();
	ctx.rect(this.x, this.y, this.w, this.h);
	gradient = ctx.createLinearGradient(this.x > 0 ? this.x : 0, this.y > 0 ? this.y : 0, this.x + this.w, this.y + this.h);
	gradient.addColorStop(0, this.createRGBString$NNN(this.R, this.G, this.B));
	r$0 = this.R;
	g$0 = this.G;
	b$0 = this.B;
	range = 255 - Math.max(r$0 >= g$0 ? r$0 : g$0, b$0);
	gradient.addColorStop(1, this.createRGBString$NNN(this.R + range, this.G + range, this.B + range));
	ctx.fillStyle = gradient;
	ctx.closePath();
	ctx.fill();
};

/**
 * class Canvas extends Object
 * @constructor
 */
function Canvas() {
}

Canvas.prototype = new Object;
/**
 * @constructor
 * @param {HTMLCanvasElement} canvas
 */
function Canvas$LHTMLCanvasElement$(canvas) {
	this.lines = null;
	this.finished = false;
	this.canvas = canvas;
	this.ctx = (function (o) { return o instanceof CanvasRenderingContext2D ? o : null; })(canvas.getContext('2d'));
	this.isHorizontal = (Math.random() * 2 > 1 ? true : false);
};

Canvas$LHTMLCanvasElement$.prototype = new Canvas;

/**
 * @param {!number} num
 */
Canvas.prototype.initLines$N = function (num) {
	/** @type {!number} */
	var x;
	/** @type {!number} */
	var y;
	/** @type {!number} */
	var width;
	/** @type {!number} */
	var height;
	/** @type {!number} */
	var i;
	(x = 0, y = 0);
	if (this.isHorizontal) {
		width = Math.floor(this.canvas.width / (num * 2 - 1)) + 1;
		height = (Math.floor(this.canvas.height / (num * 2)) + 1) * 2;
	} else {
		width = (Math.floor(this.canvas.width / (num * 2)) + 1) * 2;
		height = Math.floor(this.canvas.height / (num * 2 - 1)) + 1;
	}
	this.lines = [  ];
	for (i = 0; i < num; ++ i) {
		this.lines.push(new Line$NNNN(x, y, width, height));
		if (this.isHorizontal) {
			x += width * 2;
			y -= height * 2;
		} else {
			x -= width * 2;
			y += height * 2;
		}
	}
};

/**
 */
Canvas.prototype.clear$ = function () {
	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

/**
 */
Canvas.prototype.draw$ = function () {
	var $this = this;
	/** @type {Array.<undefined|Line>} */
	var this$0;
	/** @type {!number} */
	var i$0;
	/** @type {!number} */
	var m$0;
	if (this.lines.filter((function (line) {
		return line.finished ? false : true;
	})).length === 0) {
		this.finished = true;
		return;
	}
	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	this$0 = this.lines;
	for ((i$0 = 0, m$0 = this$0.length); i$0 < m$0; ++ i$0) {
		(function (line) {
			/** @type {CanvasRenderingContext2D} */
			var ctx$0;
			/** @type {CanvasGradient} */
			var gradient$0;
			/** @type {!number} */
			var range$0;
			/** @type {!number} */
			var r$0$0;
			/** @type {!number} */
			var g$0$0;
			/** @type {!number} */
			var b$0$0;
			ctx$0 = $this.ctx;
			ctx$0.beginPath();
			ctx$0.rect(line.x, line.y, line.w, line.h);
			gradient$0 = ctx$0.createLinearGradient(line.x > 0 ? line.x : 0, line.y > 0 ? line.y : 0, line.x + line.w, line.y + line.h);
			gradient$0.addColorStop(0, line.createRGBString$NNN(line.R, line.G, line.B));
			r$0$0 = line.R;
			g$0$0 = line.G;
			b$0$0 = line.B;
			range$0 = 255 - Math.max(r$0$0 >= g$0$0 ? r$0$0 : g$0$0, b$0$0);
			gradient$0.addColorStop(1, line.createRGBString$NNN(line.R + range$0, line.G + range$0, line.B + range$0));
			ctx$0.fillStyle = gradient$0;
			ctx$0.closePath();
			ctx$0.fill();
			if ($this.isHorizontal) {
				if (line.y + line.h >= $this.canvas.height) {
					line.finished = true;
				} else {
					line.h += line.d;
				}
			} else {
				if (line.x + line.w >= $this.canvas.width) {
					line.finished = true;
				} else {
					line.w += line.d;
				}
			}
		})(this$0[i$0]);
	}
};

/**
 * class js extends Object
 * @constructor
 */
function js() {
}

js.prototype = new Object;
/**
 * @constructor
 */
function js$() {
};

js$.prototype = new js;

/**
 * class dom extends Object
 * @constructor
 */
function dom() {
}

dom.prototype = new Object;
/**
 * @constructor
 */
function dom$() {
};

dom$.prototype = new dom;

/**
 * @param {!string} id
 * @return {HTMLElement}
 */
dom.id$S = function (id) {
	return (function (o) { return o instanceof HTMLElement ? o : null; })(dom.window.document.getElementById(id));
};

var dom$id$S = dom.id$S;

/**
 * @param {!string} id
 * @return {HTMLElement}
 */
dom.getElementById$S = function (id) {
	return (function (o) { return o instanceof HTMLElement ? o : null; })(dom.window.document.getElementById(id));
};

var dom$getElementById$S = dom.getElementById$S;

/**
 * @param {!string} tag
 * @return {HTMLElement}
 */
dom.createElement$S = function (tag) {
	return dom.window.document.createElement(tag);
};

var dom$createElement$S = dom.createElement$S;

/**
 * class TimerHandle extends Object
 * @constructor
 */
function TimerHandle() {
}

TimerHandle.prototype = new Object;
/**
 * @constructor
 */
function TimerHandle$() {
};

TimerHandle$.prototype = new TimerHandle;

/**
 * class Timer extends Object
 * @constructor
 */
function Timer() {
}

Timer.prototype = new Object;
/**
 * @constructor
 */
function Timer$() {
};

Timer$.prototype = new Timer;

/**
 * @param {!number} milliseconds
 * @return {TimerHandle}
 */
Timer.setTimeout$F$V$I = function (listener, milliseconds) {
	var f;
	f = (function (o) { return typeof(o) === "function" ? o : null; })(js.global.setTimeout);
	return f(listener, milliseconds);
};

var Timer$setTimeout$F$V$I = Timer.setTimeout$F$V$I;

/**
 * @param {TimerHandle} timerID
 */
Timer.clearTimeout$LTimerHandle$ = function (timerID) {
	var f;
	f = (function (o) { return typeof(o) === "function" ? o : null; })(js.global.clearTimeout);
	f(timerID);
};

var Timer$clearTimeout$LTimerHandle$ = Timer.clearTimeout$LTimerHandle$;

/**
 * @param {!number} milliseconds
 * @return {TimerHandle}
 */
Timer.setInterval$F$V$I = function (listener, milliseconds) {
	var f;
	f = (function (o) { return typeof(o) === "function" ? o : null; })(js.global.setInterval);
	return f(listener, milliseconds);
};

var Timer$setInterval$F$V$I = Timer.setInterval$F$V$I;

/**
 * @param {TimerHandle} timerID
 */
Timer.clearInterval$LTimerHandle$ = function (timerID) {
	var f;
	f = (function (o) { return typeof(o) === "function" ? o : null; })(js.global.clearInterval);
	f(timerID);
};

var Timer$clearInterval$LTimerHandle$ = Timer.clearInterval$LTimerHandle$;

$__jsx_lazy_init(_Main, "requestAnimationFrame", function () {
	return _Main$getRequestAnimationFrame$();
});
js.global = (function () { return this; })();

$__jsx_lazy_init(dom, "window", function () {
	return js.global.window;
});
var $__jsx_classMap = {
	"border.jsx": {
		_Main: _Main,
		_Main$: _Main$,
		Line: Line,
		Line$NNNN: Line$NNNN,
		Canvas: Canvas,
		Canvas$LHTMLCanvasElement$: Canvas$LHTMLCanvasElement$
	},
	"system:lib/js/js.jsx": {
		js: js,
		js$: js$
	},
	"system:lib/js/js/web.jsx": {
		dom: dom,
		dom$: dom$
	},
	"system:lib/js/timer.jsx": {
		TimerHandle: TimerHandle,
		TimerHandle$: TimerHandle$,
		Timer: Timer,
		Timer$: Timer$
	}
};


}());

border.jsx

import 'js.jsx';
import 'js/web.jsx';
import 'timer.jsx';

final class _Main {
    static function getRequestAnimationFrame() : function (tick: (number) -> void) : number {
        if (js.global['requestAnimationFrame'] != undefined) {
            return (tick) -> dom.window.requestAnimationFrame(tick);
        }
        else if (js.global['webkitRequestAnimationFrame'] != undefined) {
            return (tick) -> dom.window.webkitRequestAnimationFrame(tick);
        }
        else if (js.global['mozRequestAnimationFrame'] != undefined) {
            return (tick) -> dom.window.mozRequestAnimationFrame(tick);
        }
        else {
            return (tick) -> dom.window.setTimeout(() -> { tick(0); }, 1000 / 60);
        }
    }
    static const requestAnimationFrame = _Main.getRequestAnimationFrame();

    static function main() : void {
        var canvas = new Canvas(
            dom.window.document.getElementById('bgcanvas') as HTMLCanvasElement
        );
        canvas.initLines(Math.floor(Math.random() * 100 + 10));

        var callTick = (elasped: number) : void -> {
            canvas.draw();
            if (canvas.finished) return;
            _Main.requestAnimationFrame(callTick);
        };
        _Main.requestAnimationFrame(callTick);
    }
}

class Line {
    var x: number;
    var y: number;
    var w: number;
    var h: number;
    var R: number;
    var G: number;
    var B: number;
    var d = 100;
    var finished: boolean = false;

    function constructor(x:number, y:number, w: number, h: number) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.R = this.randomInt(200);
        this.G = this.randomInt(200);
        this.B = this.randomInt(200);
    }

    function randomInt(num: number) : number {
        return Math.floor(Math.random() * num) + 1;
    }

    function maxColorRange(r: number, g: number, b: number) : number {
        return 255 - Math.max(Math.max(r, g), b);
    }

    function createRGBString(r: number, g: number, b:number) : string {
        return 'rgb('
            + r as string + ','
            + g as string + ','
            + b as string + ')';
    }

    function createRGBAString(r: number, g: number, b: number, a: number) : string {
        return 'rgba('
            + r as string + ','
            + g as string + ','
            + b as string + ','
            + a as string + ')';
    }

    function draw(ctx: CanvasRenderingContext2D) : void {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.w, this.h);
            var gradient = ctx.createLinearGradient(
                this.x > 0 ? this.x : 0,
                this.y > 0 ? this.y : 0,
                this.x + this.w,
                this.y + this.h
            );
            gradient.addColorStop(0, this.createRGBString(this.R, this.G, this.B));
            var range = this.maxColorRange(this.R, this.G, this.B);
            gradient.addColorStop(1, this.createRGBString(
                this.R + range,
                this.G + range,
                this.B + range
            ));
        ctx.fillStyle = gradient;
        ctx.closePath();
        ctx.fill();
    }
}

class Canvas {
    var canvas      : HTMLCanvasElement;
    var ctx         : CanvasRenderingContext2D;
    var lines       : Array.<Line>;
    var finished    : boolean;
    var isHorizontal: boolean;

    function constructor(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        this.ctx    = canvas.getContext('2d') as CanvasRenderingContext2D;
        this.isHorizontal = Math.random() * 2 > 1 ? true : false;
    }

    function initLines(num: number) : void {
        var x = 0, y = 0;
        var width: number, height: number;

        if (this.isHorizontal) {
            width  = Math.floor(this.canvas.width / (num * 2 - 1)) + 1;
            height = (Math.floor(this.canvas.height / (num * 2)) + 1) * 2;
        }
        else {
            width  = (Math.floor(this.canvas.width / (num * 2)) + 1) * 2;
            height = Math.floor(this.canvas.height / (num * 2 - 1)) + 1;
        }

        this.lines = [] : Array.<Line>;
        for (var i = 0; i < num; ++i) {
            this.lines.push(new Line(x, y, width, height));
            if (this.isHorizontal) {
                x += width * 2;
                y -= height * 2;
            }
            else {
                x -= width * 2;
                y += height * 2;
            }
        }
    }

    function clear() : void {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    function draw() : void {
        if (this.lines.filter((line) -> {
            return line.finished ? false : true;
        }).length == 0) {
            this.finished = true;
            return;
        }

        this.clear();
        this.lines.forEach((line) -> {
            line.draw(this.ctx);
            if (this.isHorizontal) {
                if (line.y + line.h >= this.canvas.height)
                    line.finished = true;
                else
                    line.h += line.d;
            }
            else {
                if (line.x + line.w >= this.canvas.width)
                    line.finished = true;
                else
                    line.w += line.d;
            }
        });
    }
}