Drawing with Particles

P5.js, repeat, interact, mouse, key, color
Fabian Morón Zirfas
This example shows different interaction types. Keycodes and mouse movement. Text on screen and also global color creation.
/*eslint-disable*/
var agents = [];
var nottouched = true;
var once = false;
var col = null;
function setup() {
  var canvas = createCanvas(500, 500);
  canvas.parent('sketch');
  colorMode(HSB);
  col = color(random(360), 70, 90);
}

function draw() {
  if(nottouched == true){
    background(255);
    textAlign(CENTER);
    text('draw here and hit "s" to save an image', width/2, height/2);

  }
  if(once == false && nottouched == false){
    background(255);
    once = true;
  }
  for (var i = 0; i < agents.length; i++) {
    agents[i].run();
  }
}

function mouseDragged() {
  nottouched = false;
  agents.push(new Particle(mouseX, mouseY));
}

function keyPressed (){
  // console.log(keyCode);
  if(keyCode === 83 || keyCode === 16){
    // lower case and upper case s
    saveCanvas(canvas, 'out','png');
  }
}

function Particle(_x, _y) {
  this.x = _x;
  this.y = _y;
  this.color = col;
  this.display = function() {
    fill(this.color);
    push();
    translate(this.x, this.y);
    ellipse(0, 0, 10, 10);
    pop();
  };
  this.move = function() {
    this.x = this.x + random(-1, 1);
    this.y += random(-1, 1);

    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  };
  this.run = function() {
    this.display();
    this.move();
  };
}
// END OF CLASS