diff --git a/hacks/HexaSpinner/HexaSpinner.js b/hacks/HexaSpinner/HexaSpinner.js
line changes: +29/-15
index 4fc1c30..b585c6a
--- a/hacks/HexaSpinner/HexaSpinner.js
+++ b/hacks/HexaSpinner/HexaSpinner.js

@@ -73,6 +73,14 @@ enyo.kind({
 	name: "HexaSpinnerHack",
 	kind: "Hack",
 	style: "background-color: white",
+	preferences: [
+		{name: "chaos", label: "Chaos", kind: "Slider", minimum: 1.0, maximum: 10.0, snap: 0.1},
+		{name: "color1", label: "Primary Color", kind: "ListSelector", items: colorList},
+		{name: "color2", label: "Secondary Color", kind: "ListSelector", items: colorList},
+	],
+	chaos: 1.0,
+	color1: 'white',
+	color2: 'black',
 	components: [
 		{name: "canvas", nodeTag: "canvas"}
 	],

@@ -81,33 +89,36 @@ enyo.kind({
 		this.ctx = this.canvas.getContext('2d');
 		this.resize(window.innerWidth, window.innerHeight);
 
+		this.initSpinners();
+
+		this.engine();
+	},
+	initSpinners: function() {
 		this.spinners = [];
 		this.spinners.push(new HexaSpinner(
 			new RandomPoint(0, 0, this.w, this.h),
-			new RandomPoint(-0.5, -0.5, 1.0, 1.0),
-			18.0, 'black', -Math.PI / 150));
+			new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
+			18.0, this.color2, -Math.PI / 150));
 		this.spinners.push(new HexaSpinner(
 			new RandomPoint(0, 0, this.w, this.h),
-			new RandomPoint(-0.8, -0.8, 1.6, 1.6),
-			12.0, 'white', Math.PI / 120));
+			new RandomPoint(-0.8 * this.chaos, -0.8 * this.chaos, 1.6 * this.chaos, 1.6 * this.chaos),
+			12.0, this.color1, Math.PI / 120));
 		this.spinners.push(new HexaSpinner(
 			new RandomPoint(0, 0, this.w, this.h),
-			new RandomPoint(-0.9, -0.9, 1.8, 1.8),
-			9.0, 'black', -Math.PI / 140));
+			new RandomPoint(-0.9 * this.chaos, -0.9 * this.chaos, 1.8 * this.chaos, 1.8 * this.chaos),
+			9.0, this.color2, -Math.PI / 140));
 		this.spinners.push(new HexaSpinner(
 			new RandomPoint(0, 0, this.w, this.h),
-			new RandomPoint(-0.5, -0.5, 1.0, 1.0),
-			4.0, 'white', -Math.PI / 100));
+			new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
+			4.0, this.color1, -Math.PI / 100));
 		this.spinners.push(new HexaSpinner(
 			new RandomPoint(0, 0, this.w, this.h),
-			new RandomPoint(-1.2, -1.2, 2.4, 2.4),
-			3.0, 'black'));
+			new RandomPoint(-1.2 * this.chaos, -1.2 * this.chaos, 2.4 * this.chaos, 2.4 * this.chaos),
+			3.0, this.color2));
 		this.spinners.push(new HexaSpinner(
 			new RandomPoint(0, 0, this.w, this.h),
-			new RandomPoint(-1.8, -1.8, 3.2, 3.2),
-			1.8, 'white', -Math.PI / 30));
-
-		this.engine();
+			new RandomPoint(-1.8 * this.chaos, -1.8 * this.chaos, 3.2 * this.chaos, 3.2 * this.chaos),
+			1.8, this.color1, -Math.PI / 30));
 	},
 	start: function() {
 		if (!this.timer)

@@ -127,8 +138,11 @@ enyo.kind({
 			bottom: h - 50
 		};
 	},
+	preferencesChanged: function() {
+		this.initSpinners();
+	},
 	engine: function() {
-		this.ctx.fillStyle = 'white';
+		this.ctx.fillStyle = this.color1;
 		this.ctx.fillRect(0, 0, this.w, this.h);
 		for (i in this.spinners) {
 			this.spinners[i].update(this.bb);