Weather Ankara | ARCHITECTURAL DIARY

Weather Ankara

Processing code and GIF:

//In order to get data from a table:
Table table;
//in order to have more than one font and call the fonts:
PFont montserrat1;
PFont montserrat2;
PFont montserrat3;
//in order to retrieve data from table about average temperature according to months:
float averageTemp;
//in order to get the specific month from table within a loop:
String selectedMonth;
//in order to create a color palette differing from tmperature colder average temperature= blue, hotter average temperature= red
int r = 255;
int g = 255;
int b = 255;
//this is the multiplying factor to create the span of particles; higher temperature = higher span (as in the tutorial) // i changed this value according to average temp * 10 (approximately)
int a = 50;

void setup(){
  size(600,600);
  background(0);
  //In order to make sure the table I want is called and the first row is header so processing know that it is header:
  table = loadTable("ankara-weather.csv", "header");
    //in order to make sure the fonts I want are called:
  montserrat1 = loadFont("Montserrat-ExtraBoldItalic-48.vlw");
  montserrat2 = loadFont("Montserrat-Bold-48.vlw");
  montserrat3 = loadFont("Montserrat-MediumItalic-48.vlw");
   }

void draw(){
  fill(255);
  //in order to create a title to my project:
  textFont(montserrat1);
  textSize(25);
   textAlign(CENTER, CENTER);
  text("Average Temperature(°C) of ''ANKARA''", width/2, 30);
  textSize(20);
  text("according to Months", width/2, 55);
  //to create instructions:
  fill(255, 10);
  textFont(montserrat3);
  textSize(13);
  textAlign(LEFT, CENTER);
  text("PRESS (1)January (2)February (3)March (4)April (5)May (6)June (7)July ", 25,525);
  text("          (8)August (9)September (0)October (Q)November (W)December", 25,540);
  //in order to add my name / lecturer's name at the end:
  fill(255);
  textFont(montserrat3);
  textSize(11);
  textAlign(RIGHT, CENTER);
  text("Created by Defne ISIKLI", 590,570);
  text("Lecturer: Grayson BAILEY", 590, 585);
  
  //in order to have month names on the left that we need a for loop to have them visible in each frame again and again:
  for (int month=0; month < (table.getRowCount())-1; month++){
    
    textFont(montserrat2);
    textSize(14);
    textAlign(LEFT, CENTER);
    //Blinking only the name of the month when the related key is pressed:
    // I actually replaced "month" value within its corresponding numbers in the for loop above to have the exact places of the months below: 
    //Blinking January (1. Month press--> 1)
    if(key == '1'){
    fill(r,g,b);
    selectedMonth = table.getString(0,0);
    text(selectedMonth, 25, 130+ 0);
    }
    //Blinking February (2. Month press--> 2)
    else if(key == '2'){
    fill(r,g,b);
    selectedMonth = table.getString(1,0);
    text(selectedMonth, 25, 130+ 30);
    }
    //Blinking March (3. Month press--> 3)
    else if(key == '3'){
    fill(r,g,b);
    selectedMonth = table.getString(2,0);
    text(selectedMonth, 25, 130+ 60);
    }
    //Blinking April (4. Month press--> 4)
    else if(key == '4'){
    fill(r,g,b);
    selectedMonth = table.getString(3,0);
    text(selectedMonth, 25, 130+ 90);
    }
    //Blinking May (5. Month press--> 5)
    else if(key == '5'){
    fill(r,g,b);
    selectedMonth = table.getString(4,0);
    text(selectedMonth, 25, 130+ 120);
    }
    //Blinking June (6. Month press--> 6)
    else if(key == '6'){
    fill(r,g,b);
    selectedMonth = table.getString(5,0);
    text(selectedMonth, 25, 130+ 150);
    }
    //Blinking July (7. Month press--> 7)
    else if(key == '7'){
    fill(r,g,b);
    selectedMonth = table.getString(6,0);
    text(selectedMonth, 25, 130+ 180);
    }
    //Blinking August (8. Month press--> 8)
    else if(key == '8'){
    fill(r,g,b);
    selectedMonth = table.getString(7,0);
    text(selectedMonth, 25, 130+ 210);
    }
    //Blinking September (9. Month press--> 9)
    else if(key == '9'){
    fill(r,g,b);
    selectedMonth = table.getString(8,0);
    text(selectedMonth, 25, 130+ 240);
    }
    //Blinking October (10. Month press--> 0)
    else if(key == '0'){
    fill(r,g,b);
    selectedMonth = table.getString(9,0);
    text(selectedMonth, 25, 130+ 270);
    }
    //Blinking November (11. Month press--> Q)
    else if(key == 'q'){
    fill(r,g,b);
    selectedMonth = table.getString(10,0);
    text(selectedMonth, 25, 130+ 300);
    }
    //Blinking December (12. Month press--> W)
    else if(key == 'w'){
    fill(r,g,b);
    selectedMonth = table.getString(11,0);
    text(selectedMonth, 25, 130+ 330);
    }
    //The existing state or start over state -- so go back to the initial mode of for loop;
    else{    
    selectedMonth = table.getString(month,0);
    text(selectedMonth, 25, 130+ month*30);
    }
  }
   //in order to animate the visual we add a rectangle as in the tutorial:
  fill(0, 20);
  noStroke();
  rect(0,0,width,height);
  //in order to have the center of the canvas in the middle:
  translate(width/2 + 50,height/2);
  
  //in order to create a set of circles within a circle trajectory as in the tutorial with small changes;
  for(int i = 0; i<360; i++){
    float angle = radians(i);
    float radius = mouseX*mouseY*a;   
    radius = 100 + noise(angle*frameCount)*a;    
    float x = cos(angle)*radius;
    float y = sin(angle)*radius;
    // the color of ellipses will vary:
    fill(r,g,b);
    noStroke();
    ellipse(x,y,2,2);    
  }   
}

  void keyPressed() {
    //in order to design a system between months, I used keyboard pressed;
    //its instructions is also present in the screen
    //I changed r,g,b,a values accordingly to the average temperature
    
    //January (1. Month press--> 1)      
    if(key == '1'){    
      averageTemp = table.getFloat(0,1);
      r = 0;
      g = 0;
      b = 139;
      a = 10;
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      // when i first run the sketch, i realized the values from the table comes with having 2 additional zeros at the end (after the comma); therefore i used nf in order to show my value in desired digits:
      text(nf(averageTemp,1,1), 0, 0);          
    }
    //February (2. Month press--> 2)
     if(key == '2'){       
      averageTemp = table.getFloat(1,1);      
      r = 0;
      g = 0;
      b = 255;
      a = 20;
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //March (3. Month press--> 3)
         if(key == '3'){
      averageTemp = table.getFloat(2,1);     
      r = 255;
      g = 255;
      b = 255;
      a = 60;
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //April (4. Month press--> 4)
         if(key == '4'){
      averageTemp = table.getFloat(3,1);      
      r = 255;
      g = 255;
      b = 0;
      a = 110;
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //May (5. Month press--> 5)
         if(key == '5'){
      averageTemp = table.getFloat(4,1);     
      r = 255;
      g = 127;
      b = 0;
      a = 160;  
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //June (6. Month press--> 6)
         if(key == '6'){
      averageTemp = table.getFloat(5,1);      
      r = 255;
      g = 0;
      b = 0;
      a = 200;   
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //July (7. Month press--> 7)
         if(key == '7'){
      averageTemp = table.getFloat(6,1);     
      r = 139;
      g = 0;
      b = 0;
      a = 230;
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //August (8. Month press--> 8)
         if(key == '8'){
      averageTemp = table.getFloat(7,1);      
      r = 139;
      g = 0;
      b = 0;
      a = 240;
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
          }
    
    //September (9. Month press--> 9)
         if(key == '9'){
      averageTemp = table.getFloat(8,1);      
      r = 255;
      g = 69;
      b = 0;
      a = 190;
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
         }    
       
    //October (10. Month press--> 0)
         if(key == '0'){
      averageTemp = table.getFloat(9,1);
      r = 255;
      g = 165;
      b = 0;
      a = 130;  
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //November (11. Month press--> Q)
         if(key == 'q'){
      averageTemp = table.getFloat(10,1);      
      r = 255;
      g = 222;
      b = 102;
      a = 70;   
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }
    //December (12. Month press--> W)
         if(key == 'w'){
      averageTemp = table.getFloat(11,1);      
      r = 0;
      g = 255;
      b = 255;
      a = 30;     
      fill(r,g,b);
      textFont(montserrat2);
      textSize(25);
      textAlign(CENTER, CENTER);
      text(nf(averageTemp,1,1), 0, 0);
    }    
    }        

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s