* How to use:

 * Use the sliders to control the different variables that affect air pollution and use the buttons to add or remove particles. Take note of how much your vision of the city is impaired as you interact with the sketch.

 *

 * Vidya Kannappan N10887016

 *

 * Code adapted from:

 *https://editor.p5js.org/creativecoding/sketches/ZsWdIfrpp

 *https://editor.p5js.org/creativecoding/sketches/_5sdW5qYm

 * - I adapted the code from the first two examples to help me create particles that move around the canvas randomly and are of random shades of grey and stay within the size of the canvas.

 *

 *https://p5js.org/reference/#/p5/createSlider

 * - I used this example to create my sliders

 *https://p5js.org/reference/#/p5/createButton

 * - I used code from here to create my button

 *https://editor.p5js.org/elinsterz/sketches/NvK3RRihj

 * - I used this example to style my buttons to suit my sketch

 *https://editor.p5js.org/amygoodchild/sketches/6bWwRNyVB

 * - I used this example to style my sliders but changed the style so it would suit my sketch better

 *

 *

 *https://editor.p5js.org/hosken/sketches/LwHKjCKZV

 * - I used code from here to figure out how to remove particles when pressing a button using splice()

 *

 *https://p5js.org/examples/simulate-particles.html

 *https://p5js.org/examples/motion-bouncy-bubbles.html

 * - I adapted these two examples to control how the particles move around the screen and interact with one another. I used the bouncy bubble sketch as a foundation and then made some of my particles bounce of each other while other did not to mimic air pollution better

 *****/

​

let particles = [];

// Declare sliders

let sizeSlider;

let tensionSlider;

let opacitySlider;

// Declare buttons

let btn1;

let btn2;

// Declare a global variable 'img' to hold the image

let img;

// Default number of particles

let number = 200;

​

function preload() {

  img = loadImage("data/citybackground.png");

  font = loadFont("data/JosefinSans-Regular.ttf");

}

​

function setup() {

  createCanvas(400, 500);

  img.resize(400, 400);

  noStroke();

​

  /****SLIDERS****/

  // Sliders are styled in style.css

  // Slider that controls size of particle

  sizeSlider = createSlider(5, 50, 20, 1);

  sizeSlider.position(105, 10);

  sizeSlider.addClass("mySliders");

  // Slider that controls how clustered particles are

  tensionSlider = createSlider(0, 2, 1, 0.05);

  tensionSlider.position(105, 40);

  tensionSlider.addClass("mySliders");

  // Slider that controls opacity of particles

  opacitySlider = createSlider(25, 255, 100, 1);

  opacitySlider.position(105, 70);

  opacitySlider.addClass("mySliders");

​

  /****BUTTONS****/

  // Button to add particles

  btn1 = createButton("Add Particles");

  btn1.position(260, 20);

  btn1.mousePressed(addParticle);

  btn1.style("font-family", "josefin sans");

  btn1.style("color", "teal");

  btn1.style("height", "25px");

  // Button to remove particles

  btn2 = createButton("Remove Particles");

  btn2.position(260, 60);

  btn2.mousePressed(removeParticle);

  btn2.style("font-family", "josefin sans");

  btn2.style("color", "teal");

  btn2.style("height", "25px");

​

  // Add 200 particles

  for (let i = 0; i < number; i++) {

    particles.push(new Particle());

  }

}

​

function draw() {

  background("teal");

  image(img, 0, 100);

  // Variable that slider controls

  particleSize = sizeSlider.value();

  repulsionForce = tensionSlider.value();

  opacity = opacitySlider.value();

​

  // Controls particles interaction with each other

  particles.forEach((particle) => {

    particle.applyForce(0);

    particles.forEach((otherParticle) => {

      particle.applyForce(particle.interaction(otherParticle));

    });

​

    // Loop over the array and update each particle

    particle.show();

    particle.update();

  });

​

  // Text styles

  fill("white");

  textFont(font, 13);

  text("Particle size:", 10, 23);

  text("Clustering:", 10, 53);

  text("Particle clarity:", 10, 83);

}

​

function addParticle() {

  // Add ten new particles

  for (let i = 0; i < 10; i++) {

    particles.push(new Particle());

  }

}

​

function removeParticle() {

  //Remove 10 particles

  particles.splice(0, 10);

}

​