bgcanvas

bgcanvas.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.main$ = function () {
	/** @type {Canvas} */
	var canvas;
	canvas = new Canvas$LHTMLCanvasElement$((function (o) { return o instanceof HTMLCanvasElement ? o : null; })(dom.window.document.getElementById('bgcanvas')));
	canvas.initCircle$N(100);
	Timer$setInterval$F$V$I((function () {
		canvas.draw$();
	}), 30);
};

_Main$main$ = _Main.main$;

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

Circle.prototype = new Object;
/**
 * @constructor
 * @param {!number} width
 * @param {!number} height
 * @param {!boolean} is_negative
 */
function Circle$NNB(width, height, is_negative) {
	this.x = Math.floor(Math.random() * width) + 1;
	this.y = Math.floor(Math.random() * height) + 1;
	this.r = Math.floor(Math.random() * 15) + 1;
	this.R = Math.floor(Math.random() * 255) + 1;
	this.G = Math.floor(Math.random() * 255) + 1;
	this.B = Math.floor(Math.random() * 255) + 1;
	this.dx = (is_negative ? Math.floor(Math.random() * 5) + 1 : - (Math.floor(Math.random() * 5) + 1));
	this.dy = (is_negative ? Math.floor(Math.random() * 5) + 1 : - (Math.floor(Math.random() * 5) + 1));
};

Circle$NNB.prototype = new Circle;

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

/**
 * @param {CanvasRenderingContext2D} ctx
 */
Circle.prototype.draw$LCanvasRenderingContext2D$ = function (ctx) {
	/** @type {!string} */
	var R;
	/** @type {!string} */
	var G;
	/** @type {!string} */
	var B;
	/** @type {!string} */
	var edgecolor1;
	/** @type {!string} */
	var edgecolor2;
	/** @type {!string} */
	var edgecolor3;
	/** @type {!string} */
	var edgecolor4;
	/** @type {CanvasGradient} */
	var gradblur;
	ctx.beginPath();
	R = this.R + "";
	G = this.G + "";
	B = this.B + "";
	edgecolor1 = 'rgba(' + R + ',' + G + ',' + B + ',0.93)';
	edgecolor2 = 'rgba(' + R + ',' + G + ',' + B + ',0.6)';
	edgecolor3 = 'rgba(' + R + ',' + G + ',' + B + ',0.1)';
	edgecolor4 = 'rgba(' + R + ',' + G + ',' + B + ',0)';
	gradblur = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
	gradblur.addColorStop(0.0, edgecolor1);
	gradblur.addColorStop(0.4, edgecolor1);
	gradblur.addColorStop(0.7, edgecolor2);
	gradblur.addColorStop(0.9, edgecolor3);
	gradblur.addColorStop(1.0, edgecolor4);
	ctx.fillStyle = gradblur;
	ctx.arc(this.x, this.y, this.r, 0, 6.283185307179586, true);
	ctx.closePath();
	ctx.fill();
};

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

Canvas.prototype = new Object;
/**
 * @constructor
 * @param {HTMLCanvasElement} canvas
 */
function Canvas$LHTMLCanvasElement$(canvas) {
	this.canvas = canvas;
	this.ctx = (function (o) { return o instanceof CanvasRenderingContext2D ? o : null; })(canvas.getContext('2d'));
	this.circles = [  ];
};

Canvas$LHTMLCanvasElement$.prototype = new Canvas;

/**
 * @param {!number} num
 */
Canvas.prototype.initCircle$N = function (num) {
	/** @type {!number} */
	var width;
	/** @type {!number} */
	var height;
	/** @type {!number} */
	var i;
	width = this.canvas.width;
	height = this.canvas.height;
	for (i = 0; i < num; ++ i) {
		this.circles[i] = new Circle$NNB(width, height, i % 2 === 0 ? true : false);
	}
};

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

/**
 */
Canvas.prototype.draw$ = function () {
	var $this = this;
	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	this.circles.forEach((function (circle) {
		/** @type {CanvasRenderingContext2D} */
		var ctx$0;
		/** @type {!string} */
		var R$0;
		/** @type {!string} */
		var G$0;
		/** @type {!string} */
		var B$0;
		/** @type {!string} */
		var edgecolor1$0;
		/** @type {!string} */
		var edgecolor2$0;
		/** @type {!string} */
		var edgecolor3$0;
		/** @type {!string} */
		var edgecolor4$0;
		/** @type {CanvasGradient} */
		var gradblur$0;
		ctx$0 = $this.ctx;
		ctx$0.beginPath();
		R$0 = circle.R + "";
		G$0 = circle.G + "";
		B$0 = circle.B + "";
		edgecolor1$0 = 'rgba(' + R$0 + ',' + G$0 + ',' + B$0 + ',0.93)';
		edgecolor2$0 = 'rgba(' + R$0 + ',' + G$0 + ',' + B$0 + ',0.6)';
		edgecolor3$0 = 'rgba(' + R$0 + ',' + G$0 + ',' + B$0 + ',0.1)';
		edgecolor4$0 = 'rgba(' + R$0 + ',' + G$0 + ',' + B$0 + ',0)';
		gradblur$0 = ctx$0.createRadialGradient(circle.x, circle.y, 0, circle.x, circle.y, circle.r);
		gradblur$0.addColorStop(0.0, edgecolor1$0);
		gradblur$0.addColorStop(0.4, edgecolor1$0);
		gradblur$0.addColorStop(0.7, edgecolor2$0);
		gradblur$0.addColorStop(0.9, edgecolor3$0);
		gradblur$0.addColorStop(1.0, edgecolor4$0);
		ctx$0.fillStyle = gradblur$0;
		ctx$0.arc(circle.x, circle.y, circle.r, 0, 6.283185307179586, true);
		ctx$0.closePath();
		ctx$0.fill();
		if (circle.x + circle.dx > $this.canvas.width || circle.x + circle.dx < 0) {
			circle.dx = - circle.dx;
		}
		if (circle.y + circle.dy > $this.canvas.height || circle.y + circle.dy < 0) {
			circle.dy = - circle.dy;
		}
		circle.x += circle.dx;
		circle.y += circle.dy;
	}));
};

/**
 * 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));
};

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));
};

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

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

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);
};

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);
};

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);
};

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);
};

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

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

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

js$.prototype = new js;

Circle.MAX_RADIUS = 15;
$__jsx_lazy_init(dom, "window", function () {
	return js.global["window"];
});
js.global = (function () { return this; })();

var $__jsx_classMap = {
	"bgcanvas.jsx": {
		_Main: _Main,
		_Main$: _Main$,
		Circle: Circle,
		Circle$NNB: Circle$NNB,
		Canvas: Canvas,
		Canvas$LHTMLCanvasElement$: Canvas$LHTMLCanvasElement$
	},
	"system:lib/js/js/web.jsx": {
		dom: dom,
		dom$: dom$
	},
	"system:lib/js/timer.jsx": {
		TimerHandle: TimerHandle,
		TimerHandle$: TimerHandle$,
		Timer: Timer,
		Timer$: Timer$
	},
	"system:lib/js/js.jsx": {
		js: js,
		js$: js$
	}
};


}());

bgcanvas.jsx

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

class _Main {
  static function main() : void {
    var canvas = new Canvas(dom.window.document.getElementById('bgcanvas') as HTMLCanvasElement);
    canvas.initCircle(100);
    Timer.setInterval(function() : void {
      canvas.draw();
    }, 30);
  }
}

class Circle {
  var x : number;
  var y : number;
  var r : number;
  var R : number;
  var G : number;
  var B : number;
  var dx: number;
  var dy: number;

  static const MAX_RADIUS: number = 15;

  function constructor(width: number, height: number, is_negative: boolean) {
    this.x  = this.randomInt(width);
    this.y  = this.randomInt(height);
    this.r  = this.randomInt(Circle.MAX_RADIUS);
    this.R  = this.randomInt(255);
    this.G  = this.randomInt(255);
    this.B  = this.randomInt(255);
    this.dx = is_negative ? this.randomInt(5) : -this.randomInt(5);
    this.dy = is_negative ? this.randomInt(5) : -this.randomInt(5);
  }
  
  function randomInt(num: number) : number {
    return Math.floor(Math.random() * num) + 1;
  }

  function draw(ctx: CanvasRenderingContext2D) : void {
    ctx.beginPath();
      var R = this.R as string;
      var G = this.G as string;
      var B = this.B as string;
      var edgecolor1 = 'rgba(' + R + ',' + G + ',' + B + ',0.93)';
      var edgecolor2 = 'rgba(' + R + ',' + G + ',' + B + ',0.6)';
      var edgecolor3 = 'rgba(' + R + ',' + G + ',' + B + ',0.1)';
      var edgecolor4 = 'rgba(' + R + ',' + G + ',' + B + ',0)';
      var gradblur  = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
      gradblur.addColorStop(0.0, edgecolor1);
      gradblur.addColorStop(0.4, edgecolor1);
      gradblur.addColorStop(0.7, edgecolor2);
      gradblur.addColorStop(0.9, edgecolor3);
      gradblur.addColorStop(1.0, edgecolor4);
    ctx.fillStyle = gradblur;
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
  }
}

class Canvas {
  var canvas : HTMLCanvasElement;
  var ctx    : CanvasRenderingContext2D;
  var circles: Array.<Circle>;
  
  function constructor(canvas: HTMLCanvasElement) {
    this.canvas  = canvas;
    this.ctx     = canvas.getContext('2d') as CanvasRenderingContext2D;
    this.circles = [] : Array.<Circle>;
  }

  function initCircle(num: number) : void {
    var width   = this.canvas.width;
    var height  = this.canvas.height;
    for (var i = 0; i < num; ++i) {
       this.circles[i] = new Circle(width, height, i % 2 == 0 ? true : false);
    }
  }

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

  function draw() : void {
    this.clear();
    this.circles.forEach(function (circle: MayBeUndefined.<Circle>) : void {
      circle.draw(this.ctx);
      if (circle.x + circle.dx > this.canvas.width  || circle.x + circle.dx < 0) {
        circle.dx = -circle.dx;
      }
      if (circle.y + circle.dy > this.canvas.height || circle.y + circle.dy < 0) {
        circle.dy = -circle.dy;
      }
      circle.x += circle.dx;
      circle.y += circle.dy;
    });
  }
}