Practical.pdf

Importing an image

1.
Like a font, notice the Pimage syntax

PImage myimage;

void setup(){
size (800,800);
String myimageURL = “http://beyond.wallviz.dk/wp-content/uploads/2014/11/Dyspercepia.jpg”;
myimage = loadImage( myimageURL );
}

void draw() {
background(205);
imageMode(CORNERS);
image(myimage, 100,100, 700, 500);
fill(255,0,0);
//ellipse (320,290, 20,20);
}

2.
Notice that you can draw over the image.
ellipse (320,290, 20,20);

3.
Examine the parameters of image and how imageMode affect the outcome.
Importing data into processing (a data table)

1.
Make sure you have the data file Mammals.csv in your sketch folder
And add the following syntax

Table mytable;

void setup() {
size(80,80);
mytable = loadTable(“mammals.csv”, “header”);

} // end setup

https://processing.org/reference/loadTable_.html

2.
Use println (read as print line) to see how big the table is

Table mytable;

void setup() {
size(80,80);
mytable = loadTable(“mammals.csv”, “header”);

println(mytable.getRowCount() + ” total rows in table”);

}

2.
Let’s use this syntax to look at every line of the table.

Table mytable;

void setup() {
size(80,80);
mytable = loadTable(“mammals.csv”, “header”);

println(mytable.getRowCount() + ” total rows in table”);
for ( TableRow row : mytable.rows() ) {

int id = row.getInt(“id”);
String species = row.getString(“species”);
String name = row.getString(“name”);

println(name + ” (” + species + “) has an ID of ” + id);

}

} // end setup
Loading a big data set and linking it to data

1.
Save your program as a new sketch and adjust your existing code for the new file eur_SPP_Rich.csv

Table mytable;

void setup() {
size(80,80);
mytable = loadTable(“Eur_SPP_Rich.csv”, “header”);
//mytable = loadTable(“mammals.csv”, “header”);

int Nrows = mytable.getRowCount();
println( Nrows+ ” total rows in mytable”);

//int row;
for (TableRow row : mytable.rows()) {
float Ylat = row.getFloat(“lat”);

println(Ylat);

}

} // end void setup

This is from
http://www.ibiochange.mncn.csic.es/files/eu.sp.rich.txt
Thanks to Miguel Araujo!

2.
Now we have more columns, so we need more variables to hold that data

Table mytable;

void setup() {
size(80,80);
mytable = loadTable(“Eur_SPP_Rich.csv”, “header”);
//mytable = loadTable(“mammals.csv”, “header”);

int Nrows = mytable.getRowCount();
println( Nrows+ ” total rows in mytable”);

//int row;
for (TableRow row : mytable.rows()) {
float Ylat = row.getFloat(“lat”);
float Xlong = row.getFloat(“long”);
float Nbirds = row.getFloat(“birds”);
float Nmamms = row.getFloat(“mammals”);
float Nherps = row.getFloat(“herptiles”);
float Nplants = row.getFloat(“plants”);

//println(Ylat);
println(“location ” + Ylat + ” + ” + Xlong + ” has Nbirds ” + Nbirds +” Nmamms “+ Nmamms + ” Nherps ” + Nherps + ” Nplants ” + Nplants);

}

} // end void setup

Why isn’t this totally helpful?

3.
We will create an ‘array’ to read the data into.

float mydata [][];
mydata = new float [Nrows][6];

https://processing.org/reference/Array.html

Then, can you copy the data into the array using syntax like this?

mydata[i][0] = Ylat;

4.
Just like before, lets print the data, e.g.
output.println(mydata[i][0] + ” , ” + mydata[i][1] + ” , ” + mydata[i][2] +” , “+ mydata[i][3] + ” , ” + mydata[i][4] + ” , ” + mydata[i][5] );

5.
Lets also print the data to a file to triple check…
Place the following syntax in your code to write a file following this example…
https://processing.org/reference/PrintWriter.html

PrintWriter output;
output = createWriter(“mydata.txt”);
output.println( <this is being printed> );
output.flush();
output.close();
exit();

6.
Check that this works and the file is written.

// these variables and arrays are ‘global’
Table mytable;
int Nrows;

int sizeX = 800;
int sizeY = 800;

void setup(){

noLoop(); // this means that the ‘draw’ function will not loop through, i.e. it will draw only once
size(sizeX,sizeY);
background(255);

mytable = loadTable(“Eur_SPP_Rich.csv”, “header”);
Nrows = mytable.getRowCount();
println( Nrows+ ” total rows in mytable”);

PrintWriter output;

float mydata [][];
mydata = new float [Nrows][6];

output = createWriter(“mydata.txt”);

int i=0;
//int row;
for (TableRow row : mytable.rows()) {
float Ylat = row.getFloat(“lat”);
float Xlong = row.getFloat(“long”);
float Nbirds = row.getFloat(“birds”);
float Nmamms = row.getFloat(“mammals”);
float Nherps = row.getFloat(“herptiles”);
float Nplants = row.getFloat(“plants”);

println(“location ” + Ylat + ” + ” + Xlong + ” has Nbirds ” + Nbirds +” Nmamms “+ Nmamms + ” Nherps ” + Nherps + ” Nplants ” + Nplants);

mydata[i][0] = Ylat;
mydata[i][1] = Xlong;
mydata[i][2] = Nbirds;
mydata[i][3] = Nmamms;
mydata[i][4] = Nherps;
mydata[i][5] = Nplants;

output.println(mydata[i][0] + ” , ” + mydata[i][1] + ” , ” + mydata[i][2] +” , “+ mydata[i][3] + ” , ” + mydata[i][4] + ” , ” + mydata[i][5] );

i=i+1;

}

output.flush();
output.close();

}

7.
We would really like to use some simple operations like max() to examine the data.
Does this work on your array?
Can you print the max value?

8.
So let’s create a set of arrays (vectors) for each column… but before the setup function so that they are global.

// these variables and arrays are ‘global’
Table mytable;
int Nrows;
float aYlat [] ;
float aXlong [] ;
float aNbirds [] ;
float aNmamms [] ;
float aNherps [] ;
float aNplants [] ;

int sizeX = 800;
int sizeY = 800;

float maxYlat;
float minYlat;
float maxXlong;
float minXlong;

9.
And then within setup, we say how big those arrays are with Nrows.

aYlat = new float [Nrows];
aXlong = new float [Nrows];
aNbirds = new float [Nrows];
aNmamms = new float [Nrows];
aNherps = new float [Nrows];
aNplants = new float [Nrows];

10.
Like before we will then read into those arrays…

aYlat[i] = Ylat;
aXlong[i] = Xlong;
aNbirds[i] = Nbirds;
aNmamms[i] = Nmamms;
aNherps[i] = Nherps;
aNplants[i] = Nplants;

11.
Print the outputs from the arrays by changing our existing syntax…
output.println( aYlat[i] + ” , ” + aXlong[i] + ” , ” + aNbirds[i] +” , “+ aNmamms[i] + ” , ” + aNherps[i] + ” , ” + aNplants[i] );

12.
And get the max and min values of latitude and longitude that are also read into a global value…
maxYlat = max(aYlat);
minYlat = min(aYlat);
maxXlong = max(aXlong);
minXlong = min(aXlong);

13.
We can print those as well to check.
println(“minYlat = ” + minYlat + ” maxYlat = ” + maxYlat);
println(“minXlong = ” + minXlong + ” maxXlong = ” + maxXlong);

14.
We have a big program now… but we know what everything does.
All the bits are in the right places and we don’t have to worry as much about the details. We think/know it works.
// these variables and arrays are ‘global’
Table mytable;
int Nrows;
float aYlat [] ;
float aXlong [] ;
float aNbirds [] ;
float aNmamms [] ;
float aNherps [] ;
float aNplants [] ;

int sizeX = 800;
int sizeY = 800;

float maxYlat;
float minYlat;
float maxXlong;
float minXlong;

void setup(){

noLoop(); // this means that the ‘draw’ function will not loop through, i.e. it will draw only once
size(sizeX,sizeY);
background(255);

mytable = loadTable(“Eur_SPP_Rich.csv”, “header”);
Nrows = mytable.getRowCount();
println( Nrows+ ” total rows in mytable”);

PrintWriter output;

aYlat = new float [Nrows];
aXlong = new float [Nrows];
aNbirds = new float [Nrows];
aNmamms = new float [Nrows];
aNherps = new float [Nrows];
aNplants = new float [Nrows];

output = createWriter(“mydata.txt”);

int i=0;
//int row;
for (TableRow row : mytable.rows()) {
float Ylat = row.getFloat(“lat”);
float Xlong = row.getFloat(“long”);
float Nbirds = row.getFloat(“birds”);
float Nmamms = row.getFloat(“mammals”);
float Nherps = row.getFloat(“herptiles”);
float Nplants = row.getFloat(“plants”);

//println(Ylat);
println(“location ” + Ylat + ” + ” + Xlong + ” has Nbirds ” + Nbirds +” Nmamms “+ Nmamms + ” Nherps ” + Nherps + ” Nplants ” + Nplants);

//ellipse();

aYlat[i] = Ylat;
aXlong[i] = Xlong;
aNbirds[i] = Nbirds;
aNmamms[i] = Nmamms;
aNherps[i] = Nherps;
aNplants[i] = Nplants;

output.println( aYlat[i] + ” , ” + aXlong[i] + ” , ” + aNbirds[i] +” , “+ aNmamms[i] + ” , ” + aNherps[i] + ” , ” + aNplants[i] );

i=i+1;

}

maxYlat = max(aYlat);
minYlat = min(aYlat);
maxXlong = max(aXlong);
minXlong = min(aXlong);

println(“minYlat = ” + minYlat + ” maxYlat = ” + maxYlat);
println(“minXlong = ” + minXlong + ” maxXlong = ” + maxXlong);

}

15.
So let’s use the data to draw something using the draw function…

void draw(){
int i ;

for(i=0; i<Nrows; i++){

float Nspp = aNplants[i];
float maxNspp = max(aNplants);

ellipse(aXlong[i], aYlat[i], 1,1);

}
}

16.
Underwhelmed?!
Let’s scale the data to the size of our graphics device.
float xs = sizeX*(aXlong[i]- minXlong)/(maxXlong-minXlong);
float ys = (sizeY*(aYlat[i]-minYlat)/(maxYlat-minYlat));
ellipse(xs, ys, 1,1);

Let me talk this through on the board….

17.
Does it look like the data is wrong?
What transformation does this do?

float xs = sizeY-(sizeX*(aXlong[i]- minXlong)/(maxXlong-minXlong));
float ys = (sizeY*(aYlat[i]-minYlat)/(maxYlat-minYlat));

18.
Still wrong?
Maybe the data is the wrong way round in the file?
ellipse(ys, xs, 1,1);
That’s one of the erasons why visualisation is important!

19.
Try a rectangle instead.
ellipse(ys,xs,1,1);
//rect(ys,xs, 4, 4);

20.
And lets colour the rectangles and make them have no outline….
colorMode(RGB, maxNspp); fill(Nspp);
//colorMode(HSB, maxNspp); fill(Nspp, Nspp, Nspp);
noStroke();
Try the different colorMode versions and see what you can do yourself.

21.
The whole program

// these variables and arrays are ‘global’
Table mytable;
int Nrows;
float aYlat [] ;
float aXlong [] ;
float aNbirds [] ;
float aNmamms [] ;
float aNherps [] ;
float aNplants [] ;

int sizeX = 800;
int sizeY = 800;

float maxYlat;
float minYlat;
float maxXlong;
float minXlong;

void setup(){

noLoop(); // this means that the ‘draw’ function will not loop through, i.e. it will draw only once
size(sizeX,sizeY);
background(255);

mytable = loadTable(“Eur_SPP_Rich.csv”, “header”);
Nrows = mytable.getRowCount();
println( Nrows+ ” total rows in mytable”);

PrintWriter output;

aYlat = new float [Nrows];
aXlong = new float [Nrows];
aNbirds = new float [Nrows];
aNmamms = new float [Nrows];
aNherps = new float [Nrows];
aNplants = new float [Nrows];

output = createWriter(“mydata.txt”);

int i=0;
//int row;
for (TableRow row : mytable.rows()) {
float Ylat = row.getFloat(“lat”);
float Xlong = row.getFloat(“long”);
float Nbirds = row.getFloat(“birds”);
float Nmamms = row.getFloat(“mammals”);
float Nherps = row.getFloat(“herptiles”);
float Nplants = row.getFloat(“plants”);

//println(Ylat);
println(“location ” + Ylat + ” + ” + Xlong + ” has Nbirds ” + Nbirds +” Nmamms “+ Nmamms + ” Nherps ” + Nherps + ” Nplants ” + Nplants);

//ellipse();

aYlat[i] = Ylat;
aXlong[i] = Xlong;
aNbirds[i] = Nbirds;
aNmamms[i] = Nmamms;
aNherps[i] = Nherps;
aNplants[i] = Nplants;

output.println( aYlat[i] + ” , ” + aXlong[i] + ” , ” + aNbirds[i] +” , “+ aNmamms[i] + ” , ” + aNherps[i] + ” , ” + aNplants[i] );

i=i+1;

}

maxYlat = max(aYlat);
minYlat = min(aYlat);
maxXlong = max(aXlong);
minXlong = min(aXlong);

println(“minYlat = ” + minYlat + ” maxYlat = ” + maxYlat);
println(“minXlong = ” + minXlong + ” maxXlong = ” + maxXlong);

}

void draw(){

int i ;

for(i=0; i<Nrows; i++){

float Nspp = aNplants[i];
float maxNspp = max(aNplants);

//colorMode(RGB, maxNspp); fill(Nspp);
colorMode(HSB, maxNspp); fill(Nspp, Nspp, Nspp);
noStroke();

float xs = sizeY-(sizeX*(aXlong[i]- minXlong)/(maxXlong-minXlong));
float ys = (sizeY*(aYlat[i]-minYlat)/(maxYlat-minYlat));
//ellipse(ys,xs,1,1);
rect(ys,xs, 4, 4);
}

}

22.
Can you draw all four maps on the same device?

23.
Can you add a colour bar legend?

// these variables and arrays are ‘global’
Table mytable;
int Nrows;

float aYlat [] ; float aXlong [] ; float aNbirds [] ;
float aNmamms [] ; float aNherps [] ; float aNplants [] ;

int sizeX = 800; int sizeY = 800;
float maxYlat; float minYlat; float maxXlong; float minXlong;

void setup(){ // all the housekeeping

noLoop(); // this means that the ‘draw’ function will not loop through, i.e. it will draw only once

size(sizeX+100,sizeY);
background(255);

mytable = loadTable(“Eur_SPP_Rich.csv”, “header”);
Nrows = mytable.getRowCount();
println( Nrows+ ” total rows in mytable”);

aYlat = new float [Nrows];
aXlong = new float [Nrows];
aNbirds = new float [Nrows];
aNmamms = new float [Nrows];
aNherps = new float [Nrows];
aNplants = new float [Nrows];

int i=0;
for (TableRow row : mytable.rows()) {
float Ylat = row.getFloat(“lat”);
float Xlong = row.getFloat(“long”);
float Nbirds = row.getFloat(“birds”);
float Nmamms = row.getFloat(“mammals”);
float Nherps = row.getFloat(“herptiles”);
float Nplants = row.getFloat(“plants”);
//println(“location ” + Ylat + ” + ” + Xlong + ” has Nbirds ” + Nbirds +” Nmamms “+ Nmamms + ” Nherps ” + Nherps + ” Nplants ” + Nplants);

aYlat[i] = Ylat;
aXlong[i] = Xlong;
aNbirds[i] = Nbirds;
aNmamms[i] = Nmamms;
aNherps[i] = Nherps;
aNplants[i] = Nplants;

i=i+1;

} /// end the reading of rowss

maxYlat = max(aYlat); // get max and minimum coordinates
minYlat = min(aYlat);
maxXlong = max(aXlong);
minXlong = min(aXlong);

println(“minYlat = ” + minYlat + ” maxYlat = ” + maxYlat);
println(“minXlong = ” + minXlong + ” maxXlong = ” + maxXlong);

} /// end setup

void draw(){ // the good bit!

int i ; float maxNspp; float Nspp; float xs; float ys;

for(i=0; i<Nrows; i++){

noStroke();

xs = sizeX/2-(sizeX/2*(aXlong[i]- minXlong)/(maxXlong-minXlong));
ys = (sizeY/2*(aYlat[i]-minYlat)/(maxYlat-minYlat));

Nspp = aNbirds[i];
maxNspp = max(aNbirds);

//colorMode(RGB, maxNspp); fill(Nspp);
colorMode(HSB, maxNspp); fill(Nspp, Nspp, Nspp);
rect(ys+sizeX/2,xs, 4, 4);

// change to mammals
Nspp = aNmamms[i];
maxNspp = max(aNmamms);

//colorMode(RGB, maxNspp); fill(Nspp);
colorMode(HSB, maxNspp); fill(Nspp, Nspp, Nspp);
rect(ys,xs+sizeY/2, 4, 4);

// change to herps
Nspp = aNherps[i];
maxNspp = max(aNherps);

//colorMode(RGB, maxNspp); fill(Nspp);
colorMode(HSB, maxNspp); fill(Nspp, Nspp, Nspp);
rect(ys+sizeX/2,xs+sizeY/2, 4, 4);

// change to plants
Nspp = aNplants[i];
maxNspp = max(aNplants);

//colorMode(RGB, maxNspp); fill(Nspp);
colorMode(HSB, maxNspp); fill(Nspp, Nspp, Nspp);
rect(ys,xs, 2, 2);

} // end the i loop through the data

//add a quick legend
for(i=0; i<sizeY; i=i+1){
colorMode(HSB, sizeY);
rectMode(CORNERS);
fill(i, i, i);
rect(sizeX+40, i, sizeY+80, i+1);
}

} // end draw

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s