atommarvel/gist:10775638

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="c"></canvas>
<script>
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth - 30;
    canvas.height = window.innerHeight - 60;
    var electron1 = new electron(canvas.width/2,canvas.height/2 - 50,15,'green');
    var frameMovement = 10;
    setInterval(animate, 1);

    function electron (x,y,r, color) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color;
        this.theta = 0;
        this.center = {x: canvas.width/2, y: canvas.height/2};
        this.majorAxis = {x: 50, y: 50};
        this.minorAxis = {x: 50, y: 50};
        this.frame = 0;
        this.frameMax = 20;

        this.draw = function(){
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
                ctx.fillStyle = this.color;
                ctx.fill();
            ctx.lineWidth = 3;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        this.animate = function(){
            if(this.frame>this.frameMax){
                this.x = this.center.x + this.majorAxis.x * Math.sin(this.theta) + this.minorAxis.x*Math.cos(this.theta);
                this.y = this.center.y + this.majorAxis.y * Math.sin(this.theta) + this.minorAxis.y*Math.cos(this.theta);
                this.theta++;
            }
            this.frame = (this.frame+1)%this.frameMax+2;
        }
    }
    function fontStyle () {
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.font = "100px Helvetica";
        ctx.textAlign = "center";
        ctx.textBaseline = "top";
    }

    function animate () {
        ctx.clearRect(0,0,canvas.width, canvas.height);
        electron1.draw();
        fontStyle();
        ctx.fillText("Atom",canvas.width/2 , canvas.height/2);
        electron1.animate();
    }


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<canvas id="c"></canvas>
	<script>
	var canvas = document.getElementById("c");
	var ctx = canvas.getContext("2d");
	canvas.width = window.innerWidth - 30;
	canvas.height = window.innerHeight - 60;
	var electron1 = new electron(canvas.width/2,canvas.height/2 - 50,15,'green');
	var frameMovement = 10;
	setInterval(animate, 1);

	function electron (x,y,r, color) {
	this.x = x;
	this.y = y;
	this.r = r;
	this.color = color;
	this.theta = 0;
	this.center = {x: canvas.width/2, y: canvas.height/2};
	this.majorAxis = {x: 50, y: 50};
	this.minorAxis = {x: 50, y: 50};
	this.frame = 0;
	this.frameMax = 20;

	this.draw = function(){
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.fillStyle = this.color;
	ctx.fill();
	ctx.lineWidth = 3;
	ctx.strokeStyle = 'black';
	ctx.stroke();
	}

	this.animate = function(){
	if(this.frame>this.frameMax){
	this.x = this.center.x + this.majorAxis.x * Math.sin(this.theta) + this.minorAxis.x*Math.cos(this.theta);
	this.y = this.center.y + this.majorAxis.y * Math.sin(this.theta) + this.minorAxis.y*Math.cos(this.theta);
	this.theta++;
	}
	this.frame = (this.frame+1)%this.frameMax+2;
	}
	}
	function fontStyle () {
	ctx.fillStyle = "rgb(0,0,0)";
	ctx.font = "100px Helvetica";
	ctx.textAlign = "center";
	ctx.textBaseline = "top";
	}

	function animate () {
	ctx.clearRect(0,0,canvas.width, canvas.height);
	electron1.draw();
	fontStyle();
	ctx.fillText("Atom",canvas.width/2 , canvas.height/2);
	electron1.animate();
	}





	</script>
	</body>
	</html>