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: "250px", height: "250px"}
  11         ],
  12         rendered: function() {
  13                 var canvas = this.$.canvas.hasNode();
  14                 canvas.width = 250;
  15                 canvas.height = 250;
  16                 this.context = canvas.getContext('2d');
  17
  18                 this.center_x = canvas.width / 2;
  19                 this.center_y = canvas.height / 2;
  20                 this.radius = 100;
  21                 this.zr = 0;
  22                 this.xr = 0;
  23
  24                 this.chromeball = new Image();
  25                 this.chromeball.onload = this.setReady.bind(this);
  26                 this.chromeball.src = "hacks/orbit/chrome_ball.png";
  27         },
  28         setReady: function() {
  29                 this.ready = true;
  30                 this.engine();
  31         },
  32         start: function() {
  33                 if (this.ready && !this.timer)
  34                         this.timer = setInterval(this.engine.bind(this), 20);
  35         },
  36         stop: function() {
  37                 clearInterval(this.timer);
  38                 this.timer = null;
  39         },
  40         engine: function() {
  41                 this.context.clearRect(this.center_x - this.radius - 25, this.center_y - this.radius - 25, this.radius * 2 + 50, this.radius * 2 + 50);
  42                 this.zr += 0.1;
  43                 this.xr += 0.05;
  44                 var objects = [];
  45                 for (var i = 0; i < 8; i++) {
  46                         var czr = this.zr + i * Math.PI/4;
  47                         var cxr = this.xr + Math.PI + i * Math.PI/4;
  48                         var cx = this.center_x + this.radius * Math.sin(czr);
  49                         var cy = this.center_y + this.radius * Math.cos(czr) * Math.cos(this.xr);
  50                         var r = 20 + 10 * Math.cos(czr) * Math.cos(this.xr + Math.PI/2);
  51
  52                         objects.push({
  53                                 x: cx - r,
  54                                 y: cy - r,
  55                                 s: r * 2
  56                         });
  57                 }
  58                 // Sort by size to simulate z-ordering
  59                 objects.sort(function(a,b) {
  60                         return a.s - b.s;
  61                 });
  62                 for (var i = 0; i < 8; i++)
  63                         this.context.drawImage(this.chromeball, objects[i].x, objects[i].y, objects[i].s, objects[i].s);
  64         }
  65 });