brush4

var points = [];

var painting = false;

var strokeNumber = 0;

var numClosePoints = 10;

var spread = 10;

var r,g,b;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

}

​

function mousePressed() {

  painting = true;

  strokeNumber++;

  newColor();

}

​

function newColor(){

  let w = random(10);

  r=w;

  g=w;

  b=w;

}

​

function mouseReleased() {

  painting = false;

}

​

function draw() {

  if(painting){

    var p1 = new Point(mouseX,mouseY,strokeNumber,r,g,b);

    // p1.draw();

    points.push(p1);

    console.log('new point',p1);

    beginShape();

    vertex(p1.x,p1.y);

    var pPrev = p1;

    getSortedPoints(p1).filter(function(p){

      return true; //p.distance(p1) > 100;

    }).slice(0, numClosePoints).map(function(p2,i){

      var alpha = map(i,0,numClosePoints, 200,0);

      stroke(r,g,b,alpha);      

      fill(r,g,b,alpha);

      quadraticVertex(pPrev.x+ random(-spread,spread), pPrev.y+random(-spread,spread), p2.x,p2.y);    

      pPrev = p2;

    });

    endShape(CLOSE);    

  }

}

​

function getSortedPoints(pRef) {

  return points.filter(function(p){

    return p.strokeNumber == pRef.strokeNumber;

  }).sort(function(p1,p2){

    return pRef.distance(p1) > pRef.distance(p2) ? 1 : -1;

  })

}

class Point {

  constructor(x,y,strokeNumber){

    this.x=x;

    this.y=y;

    this.strokeNumber=strokeNumber;

  }

  distance(p) {

    return sqrt(pow(this.x-p.x,2)+pow(this.y-p.y,2));

  }

}

​

​