Data in Array - basics

We will expand our drawing capabilities, and meet lots of tricks on the way. First two ways to make a list of data. With a list, called an array, we avoid having to give names to each data individually. We kan collect the data in the array and get them in our drawing by calling an element: data[elementNumber]. Mind the square brackets. Also do remember the first element is 0 (zero) and not one.

There are two ways of declaring an array, without, or with the elements.

Main example:

//---------------------------------
//-------declarations-----------
//---------------------------------
int numberOfElements = 10;
int[] data1 = new int[numberOfElements];//making data automatically
int[] data2 = { 7,3,6,34,2,34,5,6,87,33 };//making data by hand
//---------------------------------
//------setup------------
//---------------------------------
void setup() {
size(320, 240);
background(176);
stroke(10);
line(5,5, 315, 5);
line(315, 5, 315, 235);
line(315, 235, 5, 235);
line(5 , 235, 5,5);
//---------------------------------
//making data automatically (could also be loading the data from an external source)
for (int i = 0; i < numberOfElements; i++) 
{ 
data1[i] = i*10; 
} 
} 
//--------------------------------- 
//--------draw------------- 
//--------------------------------- 
void draw() { 
for (int i = 0; i < numberOfElements; i++ ) 
{ 
//-----------data1---------------- 
strokeWeight(1);//make a thin line 
stroke(0); 
line(i*20, 160, i*20, 160 - data1[i] ); 
//----------data2----------------- 
strokeWeight(4);//make a thick line 
stroke(100);//grey colored 
line(i*20, 160, i*20, 160 + data2[i] );
} 
} 

Then we add some tricks, like making different drawing on keyinput, using a "showmode variable" and keypressed, see former post.

Then we add some images to the drawing of the data, for instance as a background, or accompanying the individual data using:

PImage b;
b = loadImage("someBackground.jpg");
image(b, 0, 0);


Then we add some typography, to indicate the individual data or to give our masterpiece a title:
For this we create a font in our sketchfolder using menu->tools->create font.

You can get the whole example here:
www.contrechoc.com/crosslab/data2_arrays.zip

Tutorials about Processing are very abundant, this one i came across looking for the rotation of a text:
http://www.learningprocessing.com/examples/chapter-17/example-17-5-rotating-text/
But this one rotates the whole canvas.
To rotate only a bit of the text you have to separate the textbit from the rest of the canvas by


pushmatrix();
rotate(.01);//parameter in radians
textFont(f);
popmatrix();


The pushmatrix and the popmatrix isolate the bit within from the canvas as a whole.

Array wonders

We start with the ARRAYS from the section learning of the Processing tutorials.
We slightly modify the example:

// Example: 2D Array
size(400,400);
int cols = 5;
int rows = 5;
// Declare 2D array
int[][] myArray = new int[cols][rows];
int cellWidthHeight = 80;
int showMode = 0;//see later on
//
void setup(){
// Initialize 2D array values RANDOM
for (int i = 0; i < cols; i++) 
{
for (int j = 0; j < rows; j++)
{
myArray[i][j] = int(random(255));
}
}
}
//
void draw(){
// Draw points
for (int i = 0; i < cols; i++)
{
for (int j = 0; j < rows; j++)
{
fill(myArray[i][j]);
rect(i*cellWidthHeight, j*cellWidthHeight,cellWidthHeight,cellWidthHeight); point(i,j);
}
}
}

But we see only one representation, 2D, we would like to see more perspectives, for instance on a line, or on a circle.
For this we make showModes, and depending on a showmode the view should change.
We make the keys of the keyboard interactive and use keypressed to choose a mode:

void keyPressed() {
 if ( key == 1 ) showMode = 1;
 if ( key == 2 ) showMode = 2;
 if ( key == 3 ) showMode = 3;
}

like that we can swith between "perspectives" of the same data.

void draw(){
if ( showMode == 1 ){
// Draw points
for (int i = 0; i < cols; i++)
{
for (int j = 0; j < rows; j++)
{
fill(myArray[i][j]);
rect(i*cellWidthHeight, j*cellWidthHeight,cellWidthHeight,cellWidthHeight); point(i,j);
}
} 
}
if ( showMode == 2 ){
 //do something else
}

if ( showMode == 3 ){
 //do something else
}
}

Now we can play around in diffeent primitive visualisations of the data.
source code: http://www.contrechoc.com/crosslab/array.pde

Starting with Processing

Dude, Where's the Timeline? This Sucks… / Awesome! A Flash Killer!

We're not targeting the same audience Flash. If we wanted to make a Flash killer, we'd have set out to do that and our stated purpose would have been more specific.....

see: http://wiki.processing.org/w/FAQ

So we will explore PROCESSING.....
http://www.processing.org/

take a look at the tutorials, under the tab learning, explore
Coordinate System and Shapes
the array examples in the Processing Programming Window
then
Two-Dimensional Arrays
and start with learning to draw
Overview

then start programming yourself!

Since we have collected data this week, we need to know what an array is and how to plot this array using the most simple techniques of making a line......

This is my very first masterpiece: landscaping by lines:

void setup() {
size(320, 240);
background(176);
stroke(10);
line(5,5, 315, 5);
line(315, 5, 315, 235);
line(315, 235, 5, 235);
line(5 , 235, 5,5);
}

void draw() {
for (int i = 5; i < 315; i+=6) 
{ 
float cosWave = 50* cos(float(i)/20*PI); 
line(i, 160, i, 160 - i/3 ); 
line(i+ 2, 80, i+2, 80 + i/3 ); 
line(i+ 4, 80, i+4, 160 -cosWave ); 
} 
}