var particles = [];

​

​

​

function setup() {

  createCanvas(900, 900);

}

​

​

​

//add 1000 particles in random location 

function mousePressed() {

  for (i = 1; i < 1000; i++) {

    var p = new Particle(random(20, 880), random(610, 880), 5);

    particles.push(p);

  }

}

​

​

​

function draw() {

  var w1 = createVector(0.08, -0.06);

  var w2 = createVector(-0.08, -0.06);

  var w3 = createVector(0, -0.1);

  var w4 = createVector(0, -0.1);

  var w5 = w4.add(w3);

​

  background(220);

  fill(255, 255, 0);

  noStroke();

​

  //draw background

  boarder();

  wind();

​

  //apply forces  

  // (#### question/problem: I wanted to give a condition when to apply forces but I couldn't figure it out ####)

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

​

    if (0 < particles[i].pos.x < 500) {

      if (particles[i].pos.y > 525) {

        particles[i].applyForce(w1);

      }

    }

​

    if (400 < particles[i].pos.x < 900) {

      if (particles[i].pos.y > 525) {

        particles[i].applyForce(w2);

      }

    }

​

    if (400 < particles[i].pos.x < 500) {

      if (particles[i].pos.y < 525) {

        particles[i].applyForce(w5);

      }

    }

​

    particles[i].display();

    particles[i].update();

    particles[i].edges();

  }

}

​

​

​

//create Particle

function Particle(x, y, m) {

​

  //set up pos,vel,acc,mass

  this.pos = createVector(x, y);

  this.vel = createVector(0, 0);

  this.acc = createVector(0, 0);

  this.mass = m;

​

  //display (color, ellipse)

  this.display = function() {

    fill(255, 0, 0);

    ellipse(this.pos.x, this.pos.y, this.mass, this.mass);

    ellipse(this.pos.x, this.pos.y, this.mass, this.mass);

  }

​

  //FORCE

  this.applyForce = function(force) {

    var f = force.copy();

    f.div(this.mass)

    this.acc.add(f)

  }

​

  //physics engine

  this.update = function() {

​

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    this.acc.set(0, 0);

  }

​

​

​

​

  //create Border

   // (#### question/problem: Particles won't go through the pipe/tunnel ####)

  this.edges = function() {

​

    //right 

    if (this.pos.x > (width - 10) - (this.mass / 2)) {

      this.vel.x *= -1;

    }

​

​

    //left

    if (this.pos.x < 10 + (this.mass / 2)) {

      this.vel.x *= -1;

    }

​

​

​

    //bottom

    if (this.pos.y > (height - 10) - (this.mass / 2)) {

      this.vel.y *= -1;

    }

​

​

    //top

    if (this.pos.y < 10 + (this.mass)) {

      this.vel.y *= -1;

    }

​

    //bottom-top

    if (this.pos.y < 600 + (this.mass / 2)) {

      if (10 + (this.mass / 2) < this.pos.x < 400 || 500 < this.pos.x < 890 - (this.mass / 2)) {

        this.vel.y *= -1;

      } 

    }

    //top-bottom

   if (this.pos.y > 300 + (this.mass / 2)) {

      if (10 + (this.mass / 2) < this.pos.x < 400 || 500 < this.pos.x < 890 - (this.mass / 2)) {

        this.vel.y *= 1;

    }

   }

​

    //pipe

​

​

​

​

​

​

  }

​

​

​

​

​

​

​

​

​

​

​

​

​

}

​

​

//wind indicator

function wind() {

​

  //var windX = 0.04

  //var windY = -0.03

​

  push();

  fill(255, 0, 0, 140);

  text("w2 = (-0.04 , -0.03)", 680, 720)

  text("w1 = (0.04 , -0.03)", 120, 720)

  text("w5 = (0.00 , -0.2)", 405, 545)

  text("w3 = (0.00 , -0.1)", 505, 495)

  pop();

​

​

  push();

  strokeWeight(3);

  stroke(0, 0, 255, 50);

​

​

  line(200, 750, 200 + 80, 750 - 60);

  line(200 + 80, 750 - 60, 200 + 80 - 10, 750 - 60);

  line(200 + 80, 750 - 60, 200 + 80, 750 - 60 + 10);

​

  line(700, 750, 700 - 80, 750 - 60);

  line(700 - 80, 750 - 60, 700 - 80 + 10, 750 - 60);

  line(700 - 80, 750 - 60, 700 - 80, 750 - 60 + 10);

​

  line(450, 525, 450, 400);

  line(450, 400, 440, 410);

  line(450, 400, 460, 410);

​

​

​

  pop();

}

​

​

//create boarder

function boarder() {

​

  //outer boarder

  rect(0, 0, 10, 900);

  rect(0, 0, 900, 10);

  rect(900, 0, -10, 900);

  rect(0, 900, 900, -10);

​

  //gate

  rect(0, 300, 400, 300);

  rect(500, 300, 400, 300);

​

​

  //boarder text 

  fill(0, 0, 0);

  text("(10,10)", 20, 10);

  ellipse(10, 10, 5, 5);

​

  text("(400,300)", 340, 310);

  ellipse(400, 300, 5, 5);

​

  text("(500,300)", 510, 310);

  ellipse(500, 300, 5, 5);

​

  text("(500,600)", 510, 600);

  ellipse(500, 600, 5, 5);

​

  text("(10,300)", 20, 310);

  ellipse(10, 300, 5, 5);

​

  text("(10,600)", 20, 600);

  ellipse(10, 600, 5, 5);

​

  text("(400,600)", 340, 600);

  ellipse(400, 600, 5, 5);

​

  text("(10,890)", 20, 900);

  ellipse(10, 890, 5, 5);

​

​

  text("(890,10)", 835, 10);

  ellipse(890, 10, 5, 5);

​

  text("(890,300)", 835, 310);

  ellipse(890, 300, 5, 5);

​

  text("(890,600)", 835, 600);

  ellipse(890, 600, 5, 5);

​

  text("(890,890)", 835, 900);

  ellipse(890, 890, 5, 5);

​

  text("(500,525)", 510, 535);

  ellipse(500, 525, 5, 5);

​

  push();

  strokeWeight(3);

  stroke(0, 0, 255, 50);

​

  line(500, 525, 500, 450);

  line(500, 450, 490, 460);

  line(500, 450, 510, 460);

  pop();

​

}