hacks/HexaSpinner/HexaSpinner.js

   1 enyo.kind({
   2         name: "Point",
   3         constructor: function(x, y) {
   4                 this.x = x;
   5                 this.y = y;
   6         },
   7         add: function(p) {
   8                 this.x += p.x;
   9                 this.y += p.y;
  10         }
  11 });
  12
  13 enyo.kind({
  14         name: "RandomPoint",
  15         kind: "Point",
  16         constructor: function(x, y, w, h) {
  17                 this.x = Math.random() * w + x;
  18                 this.y = Math.random() * h + y;
  19         }
  20 });
  21
  22 enyo.kind({
  23         name: "HexaSpinner",
  24         constructor: function(position, velocity, scale, color, rate) {
  25                 this.position = position;
  26                 this.velocity = velocity;
  27                 this.scale = scale;
  28                 this.color = color;
  29                 if (rate) {
  30                         this.rate = rate;
  31                 } else {
  32                         this.rate = Math.PI / 40;
  33                 }
  34                 this.rotation = 0;
  35         },
  36         update: function(bb) {
  37                 this.position.add(this.velocity);
  38                 if (this.position.x > bb.right) {
  39                         this.position.x -= (this.position.x - bb.right) * 2;
  40                         this.velocity.x *= -1;
  41                 } else if (this.position.x < bb.left) {
  42                         this.position.x -= (this.position.x - bb.left) * 2;
  43                         this.velocity.x *= -1;
  44                 }
  45                 if (this.position.y > bb.bottom) {
  46                         this.position.y -= (this.position.y - bb.bottom) * 2;
  47                         this.velocity.y *= -1;
  48                 } else if (this.position.y < bb.top) {
  49                         this.position.y -= (this.position.y - bb.top) * 2;
  50                         this.velocity.y *= -1;
  51                 }
  52         },
  53         draw: function(ctx) {
  54                 ctx.save();
  55                 ctx.translate(this.position.x, this.position.y);
  56                 ctx.rotate(this.rotation);
  57                 ctx.scale(this.scale, this.scale);
  58                 ctx.fillStyle = this.color;
  59                 for (i = 0; i < 6; i++) {
  60                         ctx.fillRect(-10, -50, 20, 34);
  61                         ctx.rotate(2 * Math.PI / 6);
  62                 }
  63                 ctx.restore();
  64                 this.rotation += this.rate;
  65                 if (this.rotation > Math.PI * 2)
  66                         this.rotation -= Math.PI * 2;
  67                 else if (this.rotation < 0)
  68                         this.rotation += Math.PI * 2;
  69         }
  70 });
  71
  72 enyo.kind({
  73         name: "HexaSpinnerHack",
  74         kind: "Hack",
  75         style: "background-color: white",
  76         components: [
  77                 {name: "canvas", nodeTag: "canvas"}
  78         ],
  79         rendered: function() {
  80                 this.canvas = this.$.canvas.hasNode();
  81                 this.ctx = this.canvas.getContext('2d');
  82                 this.resize(window.innerWidth, window.innerHeight);
  83
  84                 this.spinners = [];
  85                 this.spinners.push(new HexaSpinner(
  86                         new RandomPoint(0, 0, this.w, this.h),
  87                         new RandomPoint(-0.5, -0.5, 1.0, 1.0),
  88                         18.0, 'black', -Math.PI / 150));
  89                 this.spinners.push(new HexaSpinner(
  90                         new RandomPoint(0, 0, this.w, this.h),
  91                         new RandomPoint(-0.8, -0.8, 1.6, 1.6),
  92                         12.0, 'white', Math.PI / 120));
  93                 this.spinners.push(new HexaSpinner(
  94                         new RandomPoint(0, 0, this.w, this.h),
  95                         new RandomPoint(-0.9, -0.9, 1.8, 1.8),
  96                         9.0, 'black', -Math.PI / 140));
  97                 this.spinners.push(new HexaSpinner(
  98                         new RandomPoint(0, 0, this.w, this.h),
  99                         new RandomPoint(-0.5, -0.5, 1.0, 1.0),
 100                         4.0, 'white', -Math.PI / 100));
 101                 this.spinners.push(new HexaSpinner(
 102                         new RandomPoint(0, 0, this.w, this.h),
 103                         new RandomPoint(-1.2, -1.2, 2.4, 2.4),
 104                         3.0, 'black'));
 105                 this.spinners.push(new HexaSpinner(
 106                         new RandomPoint(0, 0, this.w, this.h),
 107                         new RandomPoint(-1.8, -1.8, 3.2, 3.2),
 108                         1.8, 'white', -Math.PI / 30));
 109
 110                 this.engine();
 111         },
 112         start: function() {
 113                 if (!this.timer)
 114                         this.timer = setInterval(this.engine.bind(this), 30);
 115         },
 116         stop: function() {
 117                 clearInterval(this.timer);
 118                 this.timer = null;
 119         },
 120         resize: function(w, h) {
 121                 this.canvas.width = this.w = w;
 122                 this.canvas.height = this.h = h;
 123                 this.bb = {
 124                         left: 50,
 125                         right: w - 50,
 126                         top: 50,
 127                         bottom: h - 50
 128                 };
 129         },
 130         engine: function() {
 131                 this.ctx.fillStyle = 'white';
 132                 this.ctx.fillRect(0, 0, this.w, this.h);
 133                 for (i in this.spinners) {
 134                         this.spinners[i].update(this.bb);
 135                         this.spinners[i].draw(this.ctx);
 136                 }
 137         }
 138 });