wip 2

​

let paths = [];

let painting = false;

let next = 0;

let current;

let previous;

var colorSlider

​

function setup() {

  createCanvas(800,800);

  current = createVector(0,0);

  previous = createVector(0,0);

  background(0);

  colorSlider = createSlider(0, 360, 360);

  //position

  colorSlider.position(20, 20);

  //change color mode to Hue Saturation and brightness

  colorMode(HSB);

  //increase line thickness

};

​

function draw() {

  var h = colorSlider.value();

​

  if (millis() > next && painting) {

​

    // Grab mouse position      

    current.x = mouseX;

    current.y = mouseY;

​

    // New particle's force is based on mouse movement

    let force = p5.Vector.sub(current, previous);

    force.mult(0.4);

​

    // Add new particle

    paths[paths.length - 1].add(current, force);

​

    previous.x = current.x;

    previous.y = current.y;

  }

      //colorslider

  noStroke();

  //draw a black rectangle on the top 

  fill(0, 0, 0);

  //draw a square in the selected color

  rect(0, 0, windowWidth, 60);

  fill(h, 255, 255);

  rect(180, 20, 20, 20);

​

  // Draw all paths

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

    paths[i].update();

    paths[i].display();

  }

}

​

​

function mousePressed() {

​

  next = 0;

  painting = true;

  previous.x = mouseX;

  previous.y = mouseY;

  paths.push(new Path());

}

​

​

function mouseReleased() {

  painting = false;

}

​

// A Path is a list of particles

class Path {

  constructor() {

    this.particles = [];

  }

​

  add(position, force) {

    this.particles.push(new Particle(position, force, colorSlider.value));

  }

  // Display path

  update() {  

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

      this.particles[i].update();

    }

  }  

  // Display path

  display() {    

    // Loop through backwards

    for (let i = this.particles.length - 1; i >= 0; i--) {

        this.particles[i].display(this.particles[i+1]);

     }

   }  

}

​

// Particles along the path

class Particle {

  constructor(position, force, hue) {

    this.position = createVector(position.x, position.y);

    this.velocity = createVector(force.x, force.y);

    this.drag = 1;

  }

​

  update() {

​

  this.position.add(this.velocity);

  this.velocity.mult(this.drag);

​

  }

​

​

  display(other) {

    blendMode(DIFFERENCE);

    noStroke();

    var h = colorSlider.value();

    fill(h, 255, 255)

    //fill(100);    

    var size = random(-1,1);

    ellipse(this.position.x,this.position.y, size, size);    

​

  }

}

​