r: 0,

  g: 0,

  b: 0

};

var fg = {

  r: 0,

  g: 0,

  b: 0

};

var bgspeed = {

  r: 1,

  g: .33,

  b: .67

};

var fgspeed = {

  r: .33,

  g: .67,

  b: 1

};

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CENTER);

  noStroke();

}

​

function draw() {

​

  // Update background color

  bg.r += bgspeed.r;

  bg.g += bgspeed.g;

  bg.b += bgspeed.r;

​

  // Update foreground color

  fg.r += fgspeed.r;

  fg.g += fgspeed.g;

  fg.b += fgspeed.r;

​

  // Turn around colors

  if (bg.r < 0 || bg.r > 255) bgspeed.r *= -1;

  if (bg.g < 0 || bg.g > 255) bgspeed.g *= -1;

  if (bg.b < 0 || bg.b > 255) bgspeed.b *= -1;

​

  if (fg.r < 0 || fg.r > 255) fgspeed.r *= -1;

  if (fg.g < 0 || fg.g > 255) fgspeed.g *= -1;

  if (fg.b < 0 || fg.b > 255) fgspeed.b *= -1;

​

  // Draw background and foreground

  background(bg.r, bg.g, bg.b);

​

  fill(fg.r, fg.g, fg.b);

  rect(width / 2, height / 2, width / 2, height / 2);

  // Calculate distance traveled by mouse frame to frame

  var d = dist(mouseX, mouseY, pmouseX, pmouseY);

  // Base strokeweight on distance traveled

  // Can I calculate sw some other?

  var sw = map(d, 0, 1000, 0, 500); // d/2;

​

  strokeWeight(sw);

​

  // Calculate the alpha transparency based on d

  // Define alpha using map? Does it have the same result? Why?

  var a = 512 / d;

  stroke(255, a);

​

  // Draw the line

  line(mouseX, mouseY, pmouseX, pmouseY);

​

  // Define the fill for the ellipse

  fill(255, a);

  noStroke();

​

  // Calculate a random offset range for the ellipse based on d

  var range = d * 2;

  var offset = random(-range, range);

​

  // Draw the ellipse

  ellipse(mouseX + offset, mouseY + offset, d, d);

​

}