​

// this class describes the properties of a single particle.

class Particle {

// setting the co-ordinates, radius and the

// speed of a particle in both the co-ordinates axes.

  constructor(){

    this.x = random(0,width);

    this.y = random(0,height);

    this.r = random(1,8);

    this.xSpeed = random(-2,2);

    this.ySpeed = random(-1,1.5);

  }

​

// creation of a particle.

  createParticle() {

    noStroke();

    fill('rgba(200,169,169,0.5)');

    circle(this.x,this.y,this.r);

  }

​

// setting the particle in motion.

  moveParticle() {

    if(this.x < 0 || this.x > width)

      this.xSpeed*=-1;

    if(this.y < 0 || this.y > height)

      this.ySpeed*=-1;

    this.x+=this.xSpeed;

    this.y+=this.ySpeed;

  }

​

// this function creates the connections(lines)

// between particles which are less than a certain distance apart to a point

  joinToPoint(xPos,yPos,pm10) {

      let dis = dist(this.x,this.y,xPos,yPos);

      let m = map(pm10,0,100,1,40);  

      if(m<1){m=1;}

      if(m>200){m=200;}

      if(dis < m*20) {

        if(pm10 <= 50){

          stroke('rgba(255,255,255,0.2)');

        }else{

          stroke('rgba(255,50,50,0.2)');

        }

        strokeWeight(m/5);

        line(this.x,this.y,xPos,yPos);

      }

​

  }

}

​

// an array to add multiple particles

let particles = [];

let pm10_1;

let pm10_2;

let pm10_3;

​

​

function checkAPI() {

  loadJSON("https://api.opensensemap.org/boxes/5c450f991b7ca800193bfaf0", DataFromSenseBox_1); // Großbeerenstraße

  loadJSON("https://api.opensensemap.org/boxes/645f5b674fbc670007fced87", DataFromSenseBox_2); // machBar

  loadJSON("https://api.opensensemap.org/boxes/5eb3d22a9724e9001ce6d240", DataFromSenseBox_3); //Hauptbahnhof

}

​

function DataFromSenseBox_1(data) { 

  console.log("DataFromSenseBox_1:");

  console.log(data);

  pm10_1 = data.sensors[0].lastMeasurement.value; 

}

function DataFromSenseBox_2(data) {

  console.log("DataFromSenseBox_2:");

  console.log(data);

  pm10_2 = data.sensors[0].lastMeasurement.value; 

}

function DataFromSenseBox_3(data) { 

  console.log("DataFromSenseBox_3:");

  console.log(data);

  pm10_3 = data.sensors[0].lastMeasurement.value; 

}

​

​

​

​

function setup() {

  createCanvas(1400, 800);

  for(let i = 0; i<width/2; i++){

    particles.push(new Particle());

  }

  checkAPI(); 

  setInterval(checkAPI, 300000);

}

​

​

function draw() {

  background('#0f0f0f');

  stroke('rgba(255,255,255,0.5)');    

  strokeWeight(5);

  noFill();

  //Draw the points for the SenseBoxes

  ellipse(width/1.2,height*0.65,20,20);

  ellipse(width/2,height*0.65,20,20);

  ellipse(width/5.2,height*0.65,20,20);

​

  //Draw Headline

  fill('rgba(255,255,255,0.7)')

​

  textSize(40);

  noStroke();

​

  text("Feinstaub-Belastung", width*0.1,height*0.1);

    textSize(20);

  let t="Seit 2005 darf der Tagesmittelwert von Staubteilchen mit einem Durchmesser kleiner als 10µm (PM10) in der EU höchstens 35 mal im Kalenderjahr 50 µg/m³ überschreiten.";

  text(t,width*0.1,height*0.1+30,width*0.4,height);

  // Draw Text for Cities

  textSize(20);

  text(pm10_1 + "µg/m³", width/1.2-80,height*0.8);

  text('Großbeerenstraße', width/1.2-80,height*0.8-20);

  text(pm10_2 + "µg/m³", width/2-80,height*0.8);

  text('machBar', width/2-80,height*0.8-20);

  text(pm10_3 + "µg/m³", width/5.2-80,height*0.8);

  text('Hauptbahnhof', width/5.2-80,height*0.8-20);

​

  for(let i = 0;i<particles.length;i++) {

    particles[i].createParticle();

    particles[i].moveParticle();    

    if(pm10_1 && pm10_2 && pm10_3){

    particles[i].joinToPoint(width/1.2,height*0.65,pm10_1);

    particles[i].joinToPoint(width/2,height*0.65,pm10_2);

    particles[i].joinToPoint(width/5.2,height*0.65,pm10_3);    

    }

  }

}

​