HTML
>
Canvas
>
Processing
>Tippeligaen
Visualisering av data
Tippeligaen |
Det er fire involverte processing-filer:
_tippeligaen.pde
/*
Tippeligaen.
Showing the points for all teams during the season
*/
// the day we are showing
int currentDay;
// the year we are showing
int season=2011;
Liga liga;
PFont veryBigFont;
PFont smallFont;
void setup(){
size(700,500);
setUpLiga(season);
frameRate(20);
veryBigFont=createFont("Arial Bold",70);
smallFont=createFont("Arial",12);
}
void setUpLiga(int season){
liga=new Liga(season,"data/resultater"+season+".csv","data/teams"+season+".csv");
currentDay=60; // start of march
}
void draw(){
background(255);
liga.draw();
currentDay++;
if(currentDay < 365){
liga.reset();
liga.calculate(currentDay);
}
}
void mouseClicked(){
currentDay=50;
}
og
_Liga.pde
/*
Describing a liga in a certain year
Access to all teams and all matches
*/
class Liga{
int year;
float maxPoints;// needed for scaled draw
Team[] teams;
Match[] matches;
Liga(int year,String resultFile,String teamFile){
this.year=year;
// read and set up teams
// each line:
// one teamname
String[] T=loadStrings(teamFile);
teams=new Team[T.length];
for(int i=0;i< T.length;i++)
teams[i]=new Team(T[i]);
// read and set up matches
// each line:
// yyyy:mm:dd;round;hometeamname;awayteamname;homegoals;awaygoals
T=loadStrings(resultFile);
matches=new Match[T.length];
for (int i=0;i < T.length;i++){
String line=T[i];
// while debugging:println(line);
String[] parts=line.split(";");
String date=parts[0];
String hTeamName=parts[2];
String aTeamName=parts[3];
Team hTeam=null;
Team aTeam=null;
// find teams with matching names
for(int j=0;j< teams.length;j++){
if(hTeamName.equals(teams[j].name))
hTeam=teams[j];
if(aTeamName.equals(teams[j].name))
aTeam=teams[j];
}
if((hTeam==null ) || (aTeam==null))
println("trouble, cant fin teams:"+hTeamName+"-"+aTeamName);
matches[i] =new Match(date,hTeam,aTeam,int(parts[4]),int(parts[5]));
}
maxPoints=findMaxPoints();
}
// calculate point up to this day
void calculate(int day){
for(int i=0;i< matches.length;i++){
if(matches[i].dayInYear < day)
matches[i].calculate();
}
}
// take away all results
void reset(){
for(int i=0;i< teams.length;i++){
teams[i].clearPoints();
}
}
void draw(){
// show year in center
textFont(veryBigFont);
fill(220);
textAlign(CENTER);
text(year,width/2,height/2);
// let all teams display themselves
// based at certain horizontal position
Team bestTeam=getLeader();
for(int i=0;i < teams.length;i++){
float xpos= map(i,0,teams.length,30,width-30);
teams[i].drawAtPos(xpos,maxPoints,bestTeam==teams[i]);
}
}
Team getLeader(){
int maxValue=0;
Team team=teams[0];
for(int i=0;i< teams.length;i++){
if(teams[i].points > maxValue){
maxValue=teams[i].points;
team=teams[i];
}
}
if(maxValue > 0)
return team;
return null;
}
float findMaxPoints(){
calculate(365);
Team t=getLeader();
float max=t.points;
//println(max);
reset();
return max;
}
}
og
_Match.pde
/*
Describe a match between two teams at a certain date
*/
class Match{
String date;
Team homeT;
Team awayT;
int homeGoals;
int awayGoals;
int dayInYear;
Match(String date,Team H,Team A,int hg,int ag){
this.date=date;
homeT=H;
awayT=A;
homeGoals=hg;
awayGoals=ag;
// calculate day in year from a yyyy.mm.dd format
String[]parts=date.split(":");
int year=int(parts[0]);
int month=int(parts[1]);
int day=int(parts[2]);
int days=0;
// a little trick to avoid use of date-class
switch(month){
case 12:days+=30;
case 11:days+=31;
case 10:days+=30;
case 9:days+=31;
case 8:days+=31;
case 7:days+=30;
case 6:days+=31;
case 5:days+=30;
case 4:days+=31;
case 3:if((year % 4==0) && (year % 100 !=0))
days+=29;
else
days+=28;
case 2:days+=31;
break;
default:days=0;
}
dayInYear=days+day;
}
// distribute point to the two teams from this match
void calculate(){
if(homeGoals > awayGoals)
homeT.addPoints(3);
else if(awayGoals > homeGoals)
awayT.addPoints(3);
else{
homeT.addPoints(1);
awayT.addPoints(1);
}
}
}
og
_Team.pde
/*
Describing a team, with name and updated points
*/
class Team{
String name;
int points;
Team(String name){
this.name=name;
points=0;
}
void addPoints(int p){
points+=p;
}
int getPoints(){
return points;
}
void clearPoints(){
points=0;
}
void drawAtPos(float xpos,float maxPoints,boolean markedAsBest){
textFont(smallFont);
textAlign(LEFT);
fill(0);
float H=height-80;
// this is used to perform a temporary translate and rotation
pushMatrix();
// show teamname, base it 500 pixels from top
translate(xpos,H);
pushMatrix();
translate(0,20);
rotate(PI/4);
text(name,0,0);
strokeWeight(1);
rotate(-PI/4);
popMatrix();
// display a line up to a "baloon" with points
stroke(255,0,0);
float top=map(points,0,maxPoints,-10,-H+30);
fill(255);
line(0,0,0,top);
ellipse(0,top,30,30);
// show point within the baloon
fill(0);
textAlign(CENTER);
text(points,0,top);
// forget the translate and rotate
if(markedAsBest){
stroke(200);
line(-xpos,top-16,width,top-16);
}
popMatrix();
}
}
Javascriptkoden er slik, med to funksjoner som kaller skissen:
_index.js
function setYear(){
// identify processing
var pjs=Processing.getInstanceById("draw1");
var myselect = document.getElementById("year");
var season=myselect.options[myselect.selectedIndex].value;
//alert(season);
pjs.setUpLiga(season);
}