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.