Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

party mode for real-time visitors

  • Loading branch information...
commit 896c586100db30a9e3538d4b17de21a8621daff5 1 parent 542ca5e
@benlemasurier authored
Showing with 19 additions and 4 deletions.
  1. +12 −4 example/js/blode_map.js
  2. +7 −0 example/map.html
View
16 example/js/blode_map.js
@@ -18,11 +18,12 @@ var BlodeMap = Class.create({
this._map_image = "images/world_map.jpg";
this._background = this.create_canvas(this._container, 0);
this._foreground = this.create_canvas(this._container, 1);
+ this.party_mode = false;
this._point_size = 2;
+ this._point_color = "rgba(255, 0, 0, 0.5)";
this._point_buffer = [];
this._point_buffer_size = 1000;
- this._point_color = "rgba(255, 0, 0, 0.5)";
// prime the point buffer
this.initialize_point_buffer();
@@ -87,11 +88,14 @@ var BlodeMap = Class.create({
// clear layer
context.clearRect(0, 0, this._foreground.width, this._foreground.height);
- // set layer color
- context.fillStyle = this._point_color;
-
for(i = 0, j = this._point_buffer_size; i < j; i++) {
if(this._point_buffer[i].x != 0 && this._point_buffer[i].y != 0) {
+ // set layer color
+ if(this.party_mode)
+ context.fillStyle = this.select_random_color();
+ else
+ context.fillStyle = this._point_color;
+
var point_size = (i == 0) ? this._point_size * 2 : this._point_size;
context.beginPath();
context.arc(this._point_buffer[i].x - (point_size / 2),
@@ -127,5 +131,9 @@ var BlodeMap = Class.create({
this._point_buffer = this._point_buffer.slice(0, -1);
this.render_foreground();
+ },
+
+ select_random_color: function(index) {
+ return("rgba(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", 0.5)");
}
});
View
7 example/map.html
@@ -23,6 +23,10 @@
if(window.blode_map._point_size > 1)
window.blode_map._point_size--;
}
+
+ $('party_mode').onclick = function() {
+ window.blode_map.party_mode = (window.blode_map.party_mode) ? false : true;
+ }
};
</script>
</head>
@@ -34,6 +38,9 @@
<div class="point_size">
point size: [ <span id="size_up">+</span> / <span id="size_down">-</span> ]
</div>
+ <div class="party">
+ party mode: [ <input id="party_mode" type="checkbox" /> ]
+ </div>
</p>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.