Following on from my first forray into Processing, I needed to display some data in a simple graph, with time as the X axis and scaled data value as the Y axis.
I thought I would post what I came up with here, as I think its quite nice (although perhaps not the best designed code) and it does a job which might be useful for others.
Design idea
I wanted to display a time-varying variable as a point on a graph, with a straight line between each data points. I wanted to be able to scale the whole graph easily. It needed to be be easy to read. I had a stream of data which entered my progam every second.
Processing Code
Here is the code I came up with. It uses a random input variable, so that you can view the example. You would need to change the random variable into your data point.
And here is the code, hopefully with some useful comments. You should be able to cut and paste it straight into a new Processing sketch and get a graph similar to the one above.
Feel free to adjust and re-use as you might require.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/* * Graphing program * by Matt Little 25/7/13 * * This takes in a random value * Plots that data with a time stamp * When timeMax has gone by it redraws the graph and plots the next set of data */ int seconds = second(); int oldSeconds = 0; float oldData = 0; float newData = random(250); // This is the data stream (in this case a random number to start with) int startPointX = 50; // Where to position the graph within the main box int startPointY = 50; int rectangleX = 500; // The size of the graph and data int rectangleY = 250; int timeMax = 60; // This is the maximum length of data shown. It will cycle back after this and delete previous data int i=0; void setup() { size(640, 360); // The background size background(200); fill(123); strokeWeight(2); // Stroke weight to 2 pixels rect(startPointX,startPointY,rectangleX,rectangleY); } void draw() { newData = random(250); // This is the next data point to display if(second()!=seconds) // Only draw a new line if the time has changed - every second { i++; // This is the index for saving the data and displaying the data if(i==1) { // Redraw the graph, deleting previous lines stroke(0); // This is the colour of the edge of the box strokeWeight(2); // Stroke weight to 2 pixels fill(123); rect(startPointX,startPointY,rectangleX,rectangleY); } seconds = second(); // Store the new time to check again stroke(255,134,100); // This is the colour of the line strokeWeight(8); // Stroke weight to 8 pixels line((((rectangleX*oldSeconds)/timeMax)+startPointX), rectangleY-oldData+startPointY, ((((rectangleX*i)/timeMax))+startPointX), rectangleY-newData+startPointY); oldData = newData; oldSeconds = i; if(i>=timeMax) { i=0; // Reset the time base oldSeconds = i; } } } |