aturley/producer.sh

## producer.sh
cat ~/swarmpix | sed 's/^\(.*\)$/{"x":"\1"}/' | ./produce.py produce 660e96311f5ca4c39053726d2d0c81f2661a8ef3 00:23:12:55:73:b7 pic

## swarmpix.html
<html>
    <head>
        <script src="http://cdn.buglabs.net/swarm/swarm-v1.0.0.beta.js"></script>
        <!--

<script src="../dist/dev/swarm-v1.0.0.beta.js"></script>
<script src="../dist/int/swarm-v1.0.0.beta.js"></script>
<script src="../dist/test/swarm-v1.0.0.beta.js"></script>
<script src="../dist/stage/swarm-v1.0.0.beta.js"></script>
<script src="../dist/prod/swarm-v1.0.0.beta.js"></script>
-->
    </head>
    <body>
        <script>

     window.onload = function() {
     var setDivColor = function(div, c) {
         var bgColor = "#" + c + "00000";
         div.style.backgroundColor = bgColor;
     };

     var i = 0;

     var cols = 32;
     var rows = 24;
     var blocks = new Array(cols * rows);
     var picElement = document.getElementById("pic");
     var rowDiv;
     var thisDiv;
     for (i = 0; i < cols * rows; i++) {
         if ((i % cols) == 0) {
             rowDiv = document.createElement('div');
             rowDiv.style.width = "640px";
             rowDiv.style.height = "20px";
             picElement.appendChild(rowDiv);
         }
         thisDiv = document.createElement('div');
         thisDiv.style.width = "20px";
         thisDiv.style.height = "20px";
         thisDiv.style.cssFloat = "left";
         setDivColor(thisDiv, "F");
         rowDiv.appendChild(thisDiv);
         blocks[i] = thisDiv;
     };

     SWARM.join({apikey: 'cdb56c7dd912dab4c2f30a30a87b7bcfa2b34091',
                 swarms: ['660e96311f5ca4c39053726d2d0c81f2661a8ef3'],
                 callback: function(message) {
                 var strm = JSON.stringify(message);
                 var sm = message;
                 var gray = 0;
                 var data = null;
                 if (sm.message && sm.message.body && sm.message.body.data) {
                     console.log(Date.now() + ': ' + sm.message.body.data);
                     data = eval("(" + sm.message.body.data + ")").x;
                     for (var i = 0; i < cols * rows; i++) {
                         gray = data.substring(i, i+1);
                         setDivColor(blocks[i], gray);
                     }
                 } else {
                     // console.log(Date.now() + ': ' + sm);
                 }
             }
         });
 }

        </script>
    </body>
<div id="pic" style="width:640px; height:500px; background-color:blue">
</div>
</html>

## swarmpixsketch.pde
/**
 * SwarmPixSketch
 *
 * Sends a string representing pic data to a FIFO file.
 */


import processing.video.*;
import java.io.*;
import java.util.*;

// Size of each cell in the grid
int cellSize = 20;
// Number of columns and rows in our system
int cols, rows;
// Variable for capture device
Capture video;

BufferedWriter out;

int lastPicTime;

void setup() {
  size(640, 480, P2D);
  frameRate(30);
  cols = width / cellSize;
  rows = height / cellSize;
  colorMode(RGB, 255, 255, 255, 100);

  // Uses the default video input, see the reference if this causes an error
  video = new Capture(this, width, height, 12);
  try{
    out = new BufferedWriter(new FileWriter("/Users/aturley/swarmpixfifo"));
  } catch (Exception e) {
  }
  lastPicTime = 0;
  background(0);
}


void draw() {
  if (millis() - lastPicTime < 1000) {
  // if (false) {
    return;
  } else {
    lastPicTime = millis();
  }
  if (video.available()) {
    video.read();
    video.loadPixels();

    // Not bothering to clear background
    // background(0);

    // Begin loop for columns
    String colors = "0123456789ABCDEF";
    String s = "";
    for (int j = 0; j < rows; j++) {
      for (int i = 0; i < cols; i++) {
      // Begin loop for rows


        // Where are we, pixel-wise?
        int x = i*cellSize;
        int y = j*cellSize;
        int loc = (video.width - x - 1) + y*video.width; // Reversing x to mirror the image

        float r = red(video.pixels[loc]);
        float g = green(video.pixels[loc]);
        float b = blue(video.pixels[loc]);
        // Make a new color with an alpha component
        color c = color(r, g, b, 75);

        // Code for drawing a single rect
        // Using translate in order for rotation to work properly
        pushMatrix();
        translate(x+cellSize/2, y+cellSize/2);
        // Rotation formula based on brightness
        // rotate((2 * PI * brightness(c) / 255.0));
        int br = int(brightness(c) / 255.0 * 15);
        s += colors.charAt(br);
        rectMode(CENTER);
        c = color(br * 15);
        fill(c);
        noStroke();
        // Rects are larger than the cell for some overlap
        rect(0, 0, cellSize+6, cellSize+6);
        popMatrix();
      }
    }
    println(s);
    try {
      // out.write("{\"x\":\"" + s + "\"}" + "\n");
      out.write(s + "\n");
      out.flush();
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}
	<html>
	<head>
	<script src="http://cdn.buglabs.net/swarm/swarm-v1.0.0.beta.js"></script>
	<!--

	<script src="../dist/dev/swarm-v1.0.0.beta.js"></script>
	<script src="../dist/int/swarm-v1.0.0.beta.js"></script>
	<script src="../dist/test/swarm-v1.0.0.beta.js"></script>
	<script src="../dist/stage/swarm-v1.0.0.beta.js"></script>
	<script src="../dist/prod/swarm-v1.0.0.beta.js"></script>
	-->
	</head>
	<body>
	<script>

	window.onload = function() {
	var setDivColor = function(div, c) {
	var bgColor = "#" + c + "00000";
	div.style.backgroundColor = bgColor;
	};

	var i = 0;

	var cols = 32;
	var rows = 24;
	var blocks = new Array(cols * rows);
	var picElement = document.getElementById("pic");
	var rowDiv;
	var thisDiv;
	for (i = 0; i < cols * rows; i++) {
	if ((i % cols) == 0) {
	rowDiv = document.createElement('div');
	rowDiv.style.width = "640px";
	rowDiv.style.height = "20px";
	picElement.appendChild(rowDiv);
	}
	thisDiv = document.createElement('div');
	thisDiv.style.width = "20px";
	thisDiv.style.height = "20px";
	thisDiv.style.cssFloat = "left";
	setDivColor(thisDiv, "F");
	rowDiv.appendChild(thisDiv);
	blocks[i] = thisDiv;
	};

	SWARM.join({apikey: 'cdb56c7dd912dab4c2f30a30a87b7bcfa2b34091',
	swarms: ['660e96311f5ca4c39053726d2d0c81f2661a8ef3'],
	callback: function(message) {
	var strm = JSON.stringify(message);
	var sm = message;
	var gray = 0;
	var data = null;
	if (sm.message && sm.message.body && sm.message.body.data) {
	console.log(Date.now() + ': ' + sm.message.body.data);
	data = eval("(" + sm.message.body.data + ")").x;
	for (var i = 0; i < cols * rows; i++) {
	gray = data.substring(i, i+1);
	setDivColor(blocks[i], gray);
	}
	} else {
	// console.log(Date.now() + ': ' + sm);
	}
	}
	});
	}

	</script>
	</body>
	<div id="pic" style="width:640px; height:500px; background-color:blue">
	</div>
	</html>
	/**
	* SwarmPixSketch
	*
	* Sends a string representing pic data to a FIFO file.
	*/


	import processing.video.*;
	import java.io.*;
	import java.util.*;

	// Size of each cell in the grid
	int cellSize = 20;
	// Number of columns and rows in our system
	int cols, rows;
	// Variable for capture device
	Capture video;

	BufferedWriter out;

	int lastPicTime;

	void setup() {
	size(640, 480, P2D);
	frameRate(30);
	cols = width / cellSize;
	rows = height / cellSize;
	colorMode(RGB, 255, 255, 255, 100);

	// Uses the default video input, see the reference if this causes an error
	video = new Capture(this, width, height, 12);
	try{
	out = new BufferedWriter(new FileWriter("/Users/aturley/swarmpixfifo"));
	} catch (Exception e) {
	}
	lastPicTime = 0;
	background(0);
	}


	void draw() {
	if (millis() - lastPicTime < 1000) {
	// if (false) {
	return;
	} else {
	lastPicTime = millis();
	}
	if (video.available()) {
	video.read();
	video.loadPixels();

	// Not bothering to clear background
	// background(0);

	// Begin loop for columns
	String colors = "0123456789ABCDEF";
	String s = "";
	for (int j = 0; j < rows; j++) {
	for (int i = 0; i < cols; i++) {
	// Begin loop for rows


	// Where are we, pixel-wise?
	int x = i*cellSize;
	int y = j*cellSize;
	int loc = (video.width - x - 1) + y*video.width; // Reversing x to mirror the image

	float r = red(video.pixels[loc]);
	float g = green(video.pixels[loc]);
	float b = blue(video.pixels[loc]);
	// Make a new color with an alpha component
	color c = color(r, g, b, 75);

	// Code for drawing a single rect
	// Using translate in order for rotation to work properly
	pushMatrix();
	translate(x+cellSize/2, y+cellSize/2);
	// Rotation formula based on brightness
	// rotate((2 * PI * brightness(c) / 255.0));
	int br = int(brightness(c) / 255.0 * 15);
	s += colors.charAt(br);
	rectMode(CENTER);
	c = color(br * 15);
	fill(c);
	noStroke();
	// Rects are larger than the cell for some overlap
	rect(0, 0, cellSize+6, cellSize+6);
	popMatrix();
	}
	}
	println(s);
	try {
	// out.write("{\"x\":\"" + s + "\"}" + "\n");
	out.write(s + "\n");
	out.flush();
	} catch (Exception e) {
	e.printStackTrace();
	}
	}
	}