Created
October 4, 2011 12:16
-
-
Save aturley/1261490 to your computer and use it in GitHub Desktop.
The Processing sketch takes pictures, encodes them as strings, and writes them to a fifo. The shell script reads from the fifo, sticks the string into a json object, and publishes to the swarm. The HTML file gets data from swarm and draws the picture.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| cat ~/swarmpix | sed 's/^\(.*\)$/{"x":"\1"}/' | ./produce.py produce 660e96311f5ca4c39053726d2d0c81f2661a8ef3 00:23:12:55:73:b7 pic |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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(); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment