Adjust Orbit size to better fill the screen.

[Hacks.git] / hacks / Orbit / Orbit.js

diff --git a/hacks/Orbit/Orbit.js b/hacks/Orbit/Orbit.js
index 0bc7fac..af5e916 100644 (file)
--- a/hacks/Orbit/Orbit.js
+++ b/hacks/Orbit/Orbit.js
@@ -7,23 +7,24 @@ enyo.kind({
        align: "center",
        style: "background-color: lightgray",
        components: [
-               {kind: "Control", nodeTag: "canvas", name: "canvas", width: "250px", height: "250px"}
+               {kind: "Control", nodeTag: "canvas", name: "canvas", width: "700px", height: "700px"}
        ],
        rendered: function() {
                var canvas = this.$.canvas.hasNode();
-               canvas.width = 250;
-               canvas.height = 250;
+               canvas.width = 700;
+               canvas.height = 700;
                this.context = canvas.getContext('2d');
+               this.context.fillStyle = 'lightgray';
 
                this.center_x = canvas.width / 2;
                this.center_y = canvas.height / 2;
-               this.radius = 100;
+               this.radius = 250;
                this.zr = 0;
                this.xr = 0;
 
                this.chromeball = new Image();
                this.chromeball.onload = this.setReady.bind(this);
-               this.chromeball.src = "hacks/orbit/chrome_ball.png";
+               this.chromeball.src = "hacks/Orbit/chrome_ball.png";
        },
        setReady: function() {
                this.ready = true;
@@ -38,7 +39,7 @@ enyo.kind({
                this.timer = null;
        },
        engine: function() {
-               this.context.clearRect(this.center_x - this.radius - 25, this.center_y - this.radius - 25, this.radius * 2 + 50, this.radius * 2 + 50);
+               this.context.fillRect(0, 0, 700, 700);
                this.zr += 0.1;
                this.xr += 0.05;
                var objects = [];
@@ -47,7 +48,7 @@ enyo.kind({
                        var cxr = this.xr + Math.PI + i * Math.PI/4;
                        var cx = this.center_x + this.radius * Math.sin(czr);
                        var cy = this.center_y + this.radius * Math.cos(czr) * Math.cos(this.xr);
-                       var r = 20 + 10 * Math.cos(czr) * Math.cos(this.xr + Math.PI/2);
+                       var r = 50 + 25 * Math.cos(czr) * Math.cos(this.xr + Math.PI/2);
 
                        objects.push({
                                x: cx - r,