[processing]
// Multitouch Sparks
// Adrian Park
// 2012
ArrayList mouseTrail;
int prevX;
int prevY;
int ranX;
int ranY;
int update = 0;
// if multitouch events are fired, this is set to true
boolean useMultiTouch = false;
void setup() {
size( 655 , 630 );
background( 7,45,119 );
smooth();
mouseTrail = new ArrayList();
}
void draw() {
background( 7,45,119 );
if( ranX != prevX || ranY != prevY ) {
// create a spark if the mouse is moving
Disc newDisc = new Disc( ranX, ranY );
mouseTrail.add( newDisc );
prevX = ranX;
Challenging the status quo and empowering engineers
An interactive pie chart programmed with processing.js, this works with both a traditional mouse and keyboard as well as a touch screen such as iPad, Android or other tablet.
[processing]
// Global variables
float radius = 50.0;
boolean dragging=false;
//Canvas Variables
int height=400;
int width=550;
int margin=50;
int nX, nY;
//Pie Chart Variables
float lastAng = 0;
int diameter = height-2*margin;
int linethickness = 1;
//Data variables
int[] data=new int[length]; //the data array
string[] label=new string[length]; //the labels for the data array
//Define the data and labels to be graphed
data = {50,75,200,150,35,60,120,45,200,35};
label = {"2008","2009","2010","2011","2012","2013","2014","2015","2016","2017"};
length=data.length; //the length of the data array to be used in the for loops
// Setup the Processing Canvas
void setup(){
int maxd = max(data); //get the max data value to use for scaling
size( width, height ); //define the canvas size
frameRate( 15 ); //define the frame rate
float sumdata = 0;
for (int i=0; i 0 & (nX-width/2) > 0) {
angClick = atan(abs((nY-height/2)/(nX-width/2)))+0;
} else if( (nY-height/2) < 0 & (nX-width/2) > 0) {
angClick = 2*PI-atan(abs((nY-height/2)/(nX-width/2)));
} else if( (nY-height/2) > 0 & (nX-width/2) < 0) {
angClick = PI-atan(abs((nY-height/2)/(nX-width/2)));
} else if( (nY-height/2) < 0 & (nX-width/2) < 0) {
angClick = atan(abs((nY-height/2)/(nX-width/2)))+PI;
}
if ( lastAng
A simple bar graph example programmed with processing.js; the bars will change color on mouse over or touch events on multi-touch screen devices like iOS or Android. The bars ease up giving a clean dynamic effect for infographics or business intelligence graphs.
[processing]
// Global variables
float radius = 50.0;
boolean dragging=false;
//Canvas Variables
int height=400;
int width=550;
int margin=50;
int nX, nY;
//Bargraph Variables
int length=5;
int horzstep=0;
int linethickness=3;
int barwidth=50;
//Data variables
int[] Y=new int[length]; //used to invert data[] while drawing the graph since (0,0) is at the top of the canvas
int[] data=new int[length]; //the data array
int[] datas=new int[length]; //the data array scaled to fit within the graphing region
string[] label=new string[length]; //the labels for the data array
//Define the data and labels to be graphed
data = {50,75,200,150,35,60,120,45,200,35};
label = {"2008","2009","2010","2011","2012","2013","2014","2015","2016","2017"};
length=data.length; //the length of the data array to be used in the for loops
// Setup the Processing Canvas
void setup(){
int maxd = max(data); //get the max data value to use for scaling
size( width, height ); //define the canvas size
frameRate( 15 ); //define the frame rate
for(int i=0; i(height-2*margin-datas[i])) {
if(Y[i]-30>0){Y[i]-=30;}else{Y[i]=height-2*margin-datas[i];} //grow each bar
}
if((nX>(margin+0.5*horzstep-0.5*barwidth+horzstep*i))&(nX<(margin+0.5*horzstep-0.5*barwidth+horzstep*i+barwidth))&(nY>Y[i]+margin)&nY<(Y[i]+margin+height-2*margin-Y[i])){
fill(121,121,184);
} else {
fill(0,121,184);
}
rect(margin+0.5*horzstep-0.5*barwidth+horzstep*i,Y[i]+margin,barwidth,height-2*margin-Y[i]); //draw each bar
fill(230,230,0);
text(label[i],margin-0.5*barwidth+0.5*horzstep+5+horzstep*i,height-0.9*margin+14); //label each bar
}
}
//User Interaction Events
void touchMove(TouchEvent touchEvent) {
nX = touchEvent.touches[0].offsetX;
nY = touchEvent.touches[0].offsetY;
}
void touchEnd(TouchEvent touchEvent){
nX = touchEvent.touches[0].offsetX;
nY = touchEvent.touches[0].offsetY;
}
void touchStart(TouchEvent touchEvent){
nX = touchEvent.touches[0].offsetX;
nY = touchEvent.touches[0].offsetY;
}
void touchCancel(TouchEvent touchEvent){
nX = touchEvent.touches[0].offsetX;
nY = touchEvent.touches[0].offsetY;
}
void mouseClicked() {
nX = mouseX;
nY = mouseY;
}
[/processing]
This sketch has been adapted from a sketch done by Adrian Park. If you have a multitouch screen then you can make sparks appear at any point of contact, otherwise sparks will appear around the mouse pointer.
Data visualization has been a hot topic. There is so much data available that I get overwhelmed by all the potential. To help with this I like to organize data into simple graphs and charts, but they are so 2 dimensional and don't capture some of the obvious connections. One solution that I have seen is to create visualizations that are alive. Slider bars and knobs that immediately affect the visualization when adjusted help me to see relationships in large data. The problem until now has been the amount of work required to get simple visualizations programmed.
This week we had some fun shooting stuff with our newly made ping pong gun. The gun is made out of PVC pipe,which happens to come in standard dimensions that have an ID perfect for passing ping pongs. A leaf blower provides the motive for shooting the ping pongs and a pair of pneumatic actuators creates the semi-automatic feeder. I put a webcam on the barrel as well as cross hairs so that we could eventually have a remotely opperated ping pong shooter.
I discovered a simple method for adding interest to otherwise boring product photos. It didn't require any fancy software either, just a jquery plugin and a little time taking photos and figuring out how to stuff the photos into an array. The jquery reel plugin works by panning through pictures taken at incremental angles. I setup the engraver on a table and mounted a camera to a stool. Then I slowly rotated the engraver and snapped pictures. After the pictures were taken I assembled them into a 6 × 4 grid with each individual frame 500px wide and 422px high. Once the js file was referenced and the image id set I got a rotating engraver.
Disclaimer: This project was very entertaining and in no way high quality.
Canoes, paddles, too much work, lazy, row machine, generator, trolling motor... That's it! A row machine generator connected to a trolling motor to propel the canoe! Sometimes ideas arrive via twisted and confusing roads, but never the less this idea arrived.
This month I have been exploring the HTML5 geolocation tag. It is easy to integrate with google maps and the results are almost freaky. I made a mobile version of one of my websites that displays a small google map centered on the phone's location. Nine times out of ten the phone's gps is spot on. I also set it up to check the phone's location and compare it to the boundaries of a local venue. If the phone is outside of the venue the map shows parking spots, but if the phone is inside the venue the map marks attractions.
After setting up the basic drawing and capture program for creating machineable images, I focused on storing the images and route data. Naturally my first thought was to put them into a database. Since I am most familiar with MySQL that seamed to be the obvious choice. Recently I began exploring non-relational databases, specifically Amazon's SimpleDB.