stars on the follow demo

2 files changed, 81 insertions, 4 deletions

diff --git a/emoji/follow.html b/emoji/follow.html
index e612263..8dabb47 100644
--- a/emoji/follow.html
+++ b/emoji/follow.html
@@ -56,6 +56,7 @@
 	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.scene.js"></script>
 	<script type="text/javascript" src="http://asdf.us/dither/js/util.js"></script>
 	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/image.js"></script>
+	<script type="text/javascript" src="okstars.js"></script>
 	<script type="text/javascript">
 	(function( ua ) {
       ua = ua.toLowerCase();
@@ -187,7 +188,7 @@
 				if (z_min > item.z) {
 					item.loadTexture({
 						src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png",
-						scale: randrange(0.4, 1.6)
+						scale: randrange(0.8, 2.6)
 					})
 					item.reposition()
 					// var theta = TWO_PI*random()
@@ -203,17 +204,19 @@
 			})
 		}
 		MX.Image.prototype.reposition = function(){
+			var w = window.innerWidth
 			var h = window.innerHeight
 			var theta = TWO_PI*random()
-			this.x = sin(theta) * randrange(0.5, 1.6) * h
-			this.y = cos(TWO_PI*random()) * randrange(0.5, 1.2) * h
+			this.x = sin(theta) * randrange(0.5, 1.6) * w
+			this.y = cos(TWO_PI*random()) * randrange(0.5, 1.2) * w
 			// this.z = randrange(z_min, z_max)
 			this.z = z_max + randint(z_shadow)
-			this.rotationZ = random()*360
+			this.rotationZ = 30 * (random() - 0.5)
 			this.el.style.opacity = 1.0
 			this.dz = randrange(-800,-400)
 			this.drz = randrange(-1,1)/2
 			// this.update()
 		}
+    $('body').okstars()
 		</script>
 		</html>
diff --git a/emoji/okstars.js b/emoji/okstars.js
new file mode 100644
index 0000000..4f1cde3
--- /dev/null
+++ b/emoji/okstars.js
@@ -0,0 +1,74 @@
+(function($){
+
+    $.okstars = function(el, options){
+        var base = this;
+        base.$el = $(el);
+        base.el = el;
+        base.$el.data("okstars", base);
+
+        base.init = function () {
+            base.options = $.extend({}, $.okstars.options, options);
+            if (! base.canvas) base.canvas = base.new_canvas();
+            base.context = base.canvas.getContext("2d");
+            base.build();
+            $(window).resize(base.build)
+        };
+
+        base.new_canvas = function () {
+            var canvas = document.createElement("canvas");
+            canvas.style.cssText = "position:fixed;top:0;left:0;z-index:-1;";
+            base.$el.append(canvas);
+            return canvas;
+        };
+        function randrange(a,b){
+          var x = Math.random()
+          return a * (1-x) + b * x
+        }
+        base.build = function () {
+            var w = base.canvas.width = window.innerWidth
+            var h = base.canvas.height = window.innerHeight
+            var context = base.context;
+            var starcount = ~~randrange(base.options.starMin, base.options.starMax)
+            var tt = +new Date()
+            for (var i = 0; i < starcount; i++) {
+                var radius = Math.random() * 2
+                context.fillStyle = base.mottle_gray(base.options.color, base.options.colorrange)
+                context.fillRect( Math.random() * w, Math.random() * h, radius,radius)
+            }
+//            console.log("generated", starcount, "stars in", (+new Date() - tt), "ms")
+        };
+
+        base.clamp = function (x, min, max) {
+            return Math.max(min, Math.min(max, x));
+        };
+        base.mottle_gray = function (color, radius) {
+            var rgb = color.split("")
+            var rgbcolor = 'rgb('
+            var offset = Math.floor(Math.random()*radius*2 - radius)
+            rgbcolor += parseInt(rgb[0], 16) * 16 + offset
+            rgbcolor += ","
+            rgbcolor += parseInt(rgb[1], 16) * 16 + offset
+            rgbcolor += ","
+            rgbcolor += parseInt(rgb[2], 16) * 16 + offset
+            rgbcolor += ")"
+            return rgbcolor
+        };
+
+        base.init();
+    };
+
+    $.okstars.options = {
+        transparent: false,
+        starMin: 100,
+        starMax: 1000,
+        color: "888",
+        colorrange: 128
+    };
+
+    $.fn.okstars = function(options){
+        return this.each(function(){
+            (new $.okstars(this, options));
+        });
+    };
+
+})(jQuery);