hacks/Orbit/Orbit.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "Orbit",
   5         kind: "Hack",
   6         pack: "center",
   7         align: "center",
   8         style: "background-color: lightgray",
   9         components: [
  10                 {kind: "Control", nodeTag: "canvas", name: "canvas", width: "700px", height: "700px"}
  11         ],
  12         rendered: function() {
  13                 var canvas = this.$.canvas.hasNode();
  14                 canvas.width = 700;
  15                 canvas.height = 700;
  16                 this.context = canvas.getContext('2d');
  17                 this.context.fillStyle = 'lightgray';
  18
  19                 this.center_x = canvas.width / 2;
  20                 this.center_y = canvas.height / 2;
  21                 this.radius = 250;
  22                 this.zr = 0;
  23                 this.xr = 0;
  24
  25                 this.chromeball = new Image();
  26                 this.chromeball.onload = this.setReady.bind(this);
  27                 this.chromeball.src = "hacks/Orbit/chrome_ball.png";
  28         },
  29         setReady: function() {
  30                 this.ready = true;
  31                 this.engine();
  32         },
  33         start: function() {
  34                 if (this.ready && !this.timer)
  35                         this.timer = setInterval(this.engine.bind(this), 20);
  36         },
  37         stop: function() {
  38                 clearInterval(this.timer);
  39                 this.timer = null;
  40         },
  41         engine: function() {
  42                 this.context.fillRect(0, 0, 700, 700);
  43                 this.zr += 0.1;
  44                 this.xr += 0.05;
  45                 var objects = [];
  46                 for (var i = 0; i < 8; i++) {
  47                         var czr = this.zr + i * Math.PI/4;
  48                         var cxr = this.xr + Math.PI + i * Math.PI/4;
  49                         var cx = this.center_x + this.radius * Math.sin(czr);
  50                         var cy = this.center_y + this.radius * Math.cos(czr) * Math.cos(this.xr);
  51                         var r = 50 + 25 * Math.cos(czr) * Math.cos(this.xr + Math.PI/2);
  52
  53                         objects.push({
  54                                 x: cx - r,
  55                                 y: cy - r,
  56                                 s: r * 2
  57                         });
  58                 }
  59                 // Sort by size to simulate z-ordering
  60                 objects.sort(function(a,b) {
  61                         return a.s - b.s;
  62                 });
  63                 for (var i = 0; i < 8; i++)
  64                         this.context.drawImage(this.chromeball, objects[i].x, objects[i].y, objects[i].s, objects[i].s);
  65         }
  66 });