let yoff = 0;

let zoff = 0;

let xStart = 0;

let yStart = 0;

let maxspeed = 3;

let isPlaying = false;

let inc = 0.08;

let incTime = 0;

let scl = 20;

let cols, rows;

let fr;

let particles = [];

let numofParticles = 100;

let flowField = [];

let sliderPSize;

let sliderLength;

let sliderMag;

let sliderInc;

let sliderIncT;

let sliderColorBegin;

let sliderColorEnd;

let sliderSpeed;

let sizeP = 1;

let lengthP = 100;

let magF = 10;

let colorBegin = 70;

let colorEnd = 100;

let button;

function setup() {

  createCanvas(600, 600);

​

  colorMode(HSB, 100);

  pixelDensity(1);

  noiseDetail(4, 0.5);

  cols = floor(width / scl);

  rows = floor(height / scl);

  fr = createP("");

  background(0);

​

  flowField = new Array(cols * rows);

  let p1 = createP("size of the particles");

  sliderPSize = createSlider(1, 20, 5);

  let p2 = createP("length of the strokes");

  sliderLength = createSlider(10, 100, 30);

  let p3 = createP("magnitude of the force field");

  sliderMag = createSlider(0, 20, 10);

  let p4 = createP("increment of space");

  sliderInc = createSlider(0, 20, 8);

  let p5 = createP("increment of time");

  sliderIncT = createSlider(0, 20, 8);

  let p6 = createP("begin of the color");

  sliderColorBegin = createSlider(0, 100, 70);

  let p7 = createP("end of the color");

  sliderColorEnd = createSlider(0, 100, 100);

  let p8 = createP("max speed");

  sliderSpeed = createSlider(0, 10, 3);

  button = createButton("Start!");

  button.mousePressed(toggle);

}

​

function draw() {

  // background(0);

  // rect(100,100,10,10);

  // loadPixels();

  if (isPlaying) {

    yoff = 0;

    for (let y = 0; y < rows; y++) {

      xoff = 0;

      for (let x = 0; x < cols; x++) {

        let index = y * cols + x;

        let r = noise(xoff, yoff, zoff) * 2 * PI;

        let v = p5.Vector.fromAngle(r);

        v.setMag(magF);

        flowField[index] = v;

        // console.log(r);

        // pixels[index] = r;

        // pixels[index + 1] = r;

        // pixels[index + 2] = r;

        // pixels[index + 3] = 255;

        push();

        stroke(0, 50);

        strokeWeight(1);

        translate(x * scl, y * scl);

        rotate(v.heading());

        stroke(255);

        // strokeWeight(10);

        // point(0,0);

        // line(0, 0, scl, 0);

        pop();

        // fill(r);

        // rect(x*scl, y*scl, scl,scl);

​

        xoff += inc;

      }

      yoff += inc;

    }

    zoff += incTime;

    particles.push(new Particle(sizeP, lengthP, colorBegin, colorEnd,maxspeed));

    // console.log(particles);

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

      particles[i].follow(flowField);

      particles[i].updateColor();

      particles[i].update();

      particles[i].edges();

      particles[i].show();

      particles[i].isEnded(i);

    }

  }

  // fr.html(floor(frameRate()));

  // updatePixels();

  // noLoop();

}

​

function toggle() {

  if (button.html() == "Start!") {

    isPlaying = true;

    button.html("Stop");

    sizeP = sliderPSize.value();

    lengthP = sliderLength.value();

    magF = sliderMag.value();

    inc = (sliderInc.value())/100;

    incTime = (sliderIncT.value())/100;

    colorBegin = sliderColorBegin.value();

    colorEnd = sliderColorEnd.value();

    maxspeed = sliderSpeed.value();

    console.log(colorBegin,colorEnd);

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

      particles[i] = new Particle(sizeP, lengthP, colorBegin, colorEnd,maxspeed);

    }

  } else if (button.html() == "Stop") {

    // console.log(particles);

    particles = [];

    // console.log(particles);

    isPlaying = false;

    button.html("Clean");

  } else if (button.html() == "Clean") {

    background(0);

    button.html("Start!");

  }

}

​