Playing with colors and patterns

mix.exs

@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
 
   def project do
     [app: :grains,
-     version: "0.0.62",
+     version: "0.0.63",
      elixir: "~> 1.2",
      elixirc_paths: elixirc_paths(Mix.env),
      compilers: [:phoenix, :gettext] ++ Mix.compilers,

web/static/js/presencesketch.js

@@ -305,8 +305,26 @@ Boid.prototype.adjust_radius = function() {
 Master.prototype.adjust_radius = function() {
 }
 
+// sets the fill color for a certain type shape
+Boid.prototype.fillColor = function() {
+  let color;
+  switch(this.type) {
+
+  case 'square': color = this.p.color(0, 80+ Math.random() * 20, (this.radius* 3));
+    break;
+
+  case 'circle': color = this.p.color(90, 80 + Math.random() * 20, (this.radius * 3));
+    break;
+  case 'triangle': color = this.p.color(180, 80 + Math.random() * 20, (this.radius * 3));
+    break;
+  case 'star': color = this.p.color(270, 80 + Math.random() * 20, (this.radius * 3));
+    break;
+  }
+  return color;
+}
+
 Boid.prototype.render = function() {
-  this.p.fill((this.radius * 8) -1);
+  this.p.fill(this.fillColor());
   this.p.stroke(200);
 
   this.p.push();
@@ -399,8 +417,12 @@ let PresenceSketch = {
 
   sketch(s) {
     PresenceSketch.p5 = s;
+    var X_AXIS = 1;
+    var Y_AXIS = 2;
+
     s.setup = function() {
       s.createCanvas(PresenceSketch.width, PresenceSketch.height);
+      s.colorMode(s.HSB);
       s.background(0);
 
       PresenceSketch.masters['square'] = new Master(PresenceSketch.p5,
@@ -418,10 +440,38 @@ let PresenceSketch = {
                                                   PresenceSketch.width - 100,
                                                   PresenceSketch.height - 100, 'star');
 
+      let b1 = s.color(88, 131, 120);
+      let b2 = s.color(0);
+      s.setGradient(0, 0, PresenceSketch.width/2, PresenceSketch.height,
+                    b1, b2, X_AXIS);
+      s.setGradient(PresenceSketch.width/2, 0, PresenceSketch.width/2, PresenceSketch.height,
+                    b2, b1, X_AXIS);
+    };
+
+    s.setGradient = function(x, y, w, h, c1, c2, axis) {
+
+      s.noFill();
+
+      if (axis == Y_AXIS) {  // Top to bottom gradient
+        for (var i = y; i <= y+h; i++) {
+          var inter = s.map(i, y, y+h, 0, 1);
+          var c = s.lerpColor(c1, c2, inter);
+          s.stroke(c);
+          s.line(x, i, x+w, i);
+        }
+      }
+      else if (axis == X_AXIS) {  // Left to right gradient
+        for (var i = x; i <= x+w; i++) {
+          var inter = s.map(i, x, x+w, 0, 1);
+          var c = s.lerpColor(c1, c2, inter);
+          s.stroke(c);
+          s.line(i, y, i, y+h);
+        }
+      }
     };
 
     s.draw = function() {
-      s.background(88, 131, 120);
+      // s.background(88, 131, 120);
        // Run all the boids
 
       _.each(PresenceSketch.boids, function(boid, key, list) {