​

// 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);

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

      if(pm10>15){pm10=15}

      if(dis<20*pm10) {

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

        strokeWeight(pm10/3);

        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/5d6e465a953683001a2b62c5", DataFromSenseBox_1); // Bundeskanzleramt

  loadJSON("https://api.opensensemap.org/boxes/5b4898475dc1ec001b8e0742", DataFromSenseBox_2); // Sonnenallee, Berlin

  loadJSON("https://api.opensensemap.org/boxes/599f3364d67eb50011b85cd0", DataFromSenseBox_3);

}

​

function DataFromSenseBox_1(data) { 

  console.log("DataFromSenseBox_1:");

  console.log(data);

  pm10_1 = data.sensors[5].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, 1600);

  for(let i = 0;i<width/1;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/2,height*0.2,20,20);

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

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

​

  textSize(16);

  noStroke();

  fill('rgba(255,0,255,0.5)')

  text(pm10_1 + "µg/m³", width/2+20,height*0.2);

  text('Bundeskanzleramt', width/2+20,height*0.2+20);

  text(pm10_2 + "µg/m³", width/2+20,height*0.5);

  text('Sonnenallee, Berlin', width/2+20,height*0.5+20);

  text(pm10_3 + "µg/m³", width/2+20,height*0.8);

  text('Dahmestraße, Berlin', width/2+20,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/2,height*0.2,pm10_1);

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

    particles[i].joinToPoint(width/2,height*0.8,pm10_3);    

    }

  }

}

​