3 constructor: function(x, y) {
16 constructor: function(x, y, w, h) {
17 this.x = Math.random() * w + x;
18 this.y = Math.random() * h + y;
24 constructor: function(position, velocity, scale, color, rate) {
25 this.position = position;
26 this.velocity = velocity;
32 this.rate = Math.PI / 40;
34 this.rotation = Math.random() * 2 * Math.PI;
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;
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;
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);
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;
73 name: "HexaSpinnerHack",
75 style: "background-color: white",
77 {name: "chaos", label: "Chaos", kind: "Slider", minimum: 1.0, maximum: 10.0, snap: 0.1},
78 {name: "color1", label: "Primary Color", kind: "ListSelector", items: colorList},
79 {name: "color2", label: "Secondary Color", kind: "ListSelector", items: colorList},
85 {name: "canvas", nodeTag: "canvas"}
87 rendered: function() {
88 this.canvas = this.$.canvas.hasNode();
89 this.ctx = this.canvas.getContext('2d');
90 this.resize(window.innerWidth, window.innerHeight);
96 initSpinners: function() {
98 this.spinners.push(new HexaSpinner(
99 new RandomPoint(0, 0, this.w, this.h),
100 new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
101 18.0, this.color2, -Math.PI / 150));
102 this.spinners.push(new HexaSpinner(
103 new RandomPoint(0, 0, this.w, this.h),
104 new RandomPoint(-0.8 * this.chaos, -0.8 * this.chaos, 1.6 * this.chaos, 1.6 * this.chaos),
105 12.0, this.color1, Math.PI / 120));
106 this.spinners.push(new HexaSpinner(
107 new RandomPoint(0, 0, this.w, this.h),
108 new RandomPoint(-0.9 * this.chaos, -0.9 * this.chaos, 1.8 * this.chaos, 1.8 * this.chaos),
109 9.0, this.color2, -Math.PI / 140));
110 this.spinners.push(new HexaSpinner(
111 new RandomPoint(0, 0, this.w, this.h),
112 new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
113 4.0, this.color1, -Math.PI / 100));
114 this.spinners.push(new HexaSpinner(
115 new RandomPoint(0, 0, this.w, this.h),
116 new RandomPoint(-1.2 * this.chaos, -1.2 * this.chaos, 2.4 * this.chaos, 2.4 * this.chaos),
118 this.spinners.push(new HexaSpinner(
119 new RandomPoint(0, 0, this.w, this.h),
120 new RandomPoint(-1.8 * this.chaos, -1.8 * this.chaos, 3.2 * this.chaos, 3.2 * this.chaos),
121 1.8, this.color1, -Math.PI / 30));
125 this.timer = setInterval(this.engine.bind(this), 30);
128 clearInterval(this.timer);
131 resize: function(w, h) {
132 this.canvas.width = this.w = w;
133 this.canvas.height = this.h = h;
141 preferencesChanged: function() {
145 this.ctx.fillStyle = this.color1;
146 this.ctx.fillRect(0, 0, this.w, this.h);
147 for (i in this.spinners) {
148 this.spinners[i].update(this.bb);
149 this.spinners[i].draw(this.ctx);