Drawing

p5.isarch.js

// Based on Drawing example
// http://p5js.org/examples/demos/Hello_P5_Drawing.php
// All the paths
var paths = [];
// Are we painting?
var painting = false;
// How long until the next circle
var next = 0;
// Where are we now and where were we?
var current;
var previous;

function setup() {

var myCanvas = createCanvas(windowWidth, 400);
// Get container from the HTML
// https://github.com/processing/p5.js/wiki/beyond-the-canvas#using-parent
var myContainer = myCanvas.parent('myContainer');
// Get container dimensions
// https://github.com/processing/p5.js/issues/391
var w = myContainer.elt.offsetWidth;
var h = myContainer.elt.offsetHeight;
var myCanvas = createCanvas(w, h);
var myContainer = myCanvas.parent('myContainer');

current = createVector(0,0);
previous = createVector(0,0);
};

function draw() {
  cursor(CROSS);
  background(245, 245, 245);

  // If it's time for a new point
  if (millis() > next && painting) {

    // Grab mouse position
    current.x = mouseX;
    current.y = mouseY;

    // New particle's force is based on mouse movement
    var force = p5.Vector.sub(current, previous);
    force.mult(0.05);

    // Add new particle
    paths[paths.length - 1].add(current, force);

    // Schedule next circle
    next = millis() + random(10);

    // Store mouse values
    previous.x = current.x;
    previous.y = current.y;
  }

  // Draw all paths
  for( var i = 0; i < paths.length; i++) {
    paths[i].update();
    paths[i].display();
  }
}

// Start it up
function mousePressed() {
  next = 0;
  painting = true;
  previous.x = mouseX;
  previous.y = mouseY;
  paths.push(new Path());
}

// Stop
function mouseReleased() {
  painting = false;
}

// A Path is a list of particles
function Path() {
  this.particles = [];
  this.hue = random(100);
}

Path.prototype.add = function(position, force) {
  // Add a new particle with a position, force, and hue
  this.particles.push(new Particle(position, force, this.hue));
}

// Display plath
Path.prototype.update = function() {
  for (var i = 0; i < this.particles.length; i++) {
    this.particles[i].update();
  }
}

// Display plath
Path.prototype.display = function() {

  // Loop through backwards
  for (var i = this.particles.length - 1; i >= 0; i--) {
    // If we shold remove it
    if (this.particles[i].lifespan <= 0) {
      this.particles.splice(i, 1);
    // Otherwise, display it
    } else {
      this.particles[i].display(this.particles[i+1]);
    }
  }

}

// Particles along the path
function Particle(position, force, hue) {
  this.position = createVector(position.x, position.y);
  this.velocity = createVector(force.x, force.y);
  this.drag = 0.95;
  this.lifespan = 255;
}

Particle.prototype.update = function() {
  // Move it
  this.position.add(this.velocity);
  // Slow it down
  this.velocity.mult(this.drag);
  // Fade it out
  this.lifespan--;
}

// Draw particle and connect it with a line
// Draw a line to another
Particle.prototype.display = function(other) {
  // If we need to draw a line
  stroke(175, 39, 21, this.lifespan);
  strokeWeight(0);
  if (other) {
    line(this.position.x, this.position.y, other.position.x, other.position.y);
  }
  stroke(230, 64, 42);
  strokeWeight(5);
  fill(175, 39, 21);
  var ellipse_size = floor(random(8, 24));
  ellipse(this.position.x,this.position.y, ellipse_size, ellipse_size);
}