umurgdk/colors.js

## colors.js
var Colors = [
  [142, 161, 108],
  [194, 207, 48],
  [254, 199, 0],
  [255, 137, 0],
  [211, 67, 43],
  [187, 41, 82],
  [142, 30, 95],
  [222, 74, 182],
  [153, 0, 236],
  [58, 26, 168],
  [57, 50, 254],
  [50, 118, 255],
  [53, 185, 246],
  [145, 224, 203],
  [66, 188, 106],
  [91, 65, 65]
];

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Untitled</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <!-- Uncomment the lines below to include extra p5 libraries -->
    <!--<script src="libraries/p5.dom.js" type="text/javascript"></script>-->
    <!--<script src="libraries/p5.sound.js" type="text/javascript"></script>-->

    <script src="colors.js" type="text/javascript"></script>
    <script src="point.js" type="text/javascript"></script>
    <script src="triangle.js" type="text/javascript"></script>
    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body style="padding: 0; margin: 0;">
  </body>
</html>

## point.js
var Point = function (x, y, isFloating) {
  this.position = new p5.Vector(x, y);
  this.isFloating = isFloating;
  this.color = 0;

  if (this.isFloating) {
    this.direction = p5.Vector.random2D();
  } else {
    this.hash = (this.position.x * 73856093) ^ (this.position.y * 19349663);
  }
};

Point.prototype.draw = function () {
  noStroke();
  fill(this.color, 50);
  ellipse(this.position.x, this.position.y, 5, 5);
};

Point.prototype.update = function() {
  if (this.triangle.life <= 0) {
    this.triangle = null;
  }
};

Point.prototype.moveAround = function (CANVAS_WIDTH, CANVAS_HEIGHT) {
  if (this.direction.x > 0) {
    if (this.position.x + this.direction.x >= CANVAS_WIDTH) {
      this.position.x = CANVAS_WIDTH;
      this.direction.x = -this.direction.x;
    } else {
      this.position.x += this.direction.x;
    }
  } else if (this.direction.x < 0) {
    if (this.position.x - this.direction.x <= 0) {
      this.position.x = 0;
      this.direction.x = -this.direction.x;
    } else {
      this.position.x += this.direction.x;
    }
  }

  if (this.direction.y > 0) {
    if (this.position.y + this.direction.y >= CANVAS_HEIGHT) {
      this.position.y = CANVAS_HEIGHT;
      this.direction.y = -this.direction.y;
    } else {
      this.position.y += this.direction.y;
    }
  } else if (this.direction.y < 0) {
    if (this.position.y + this.direction.y <= 0) {
      this.position.y = 0;
      this.direction.y = -this.direction.y;
    } else {
      this.position.y += this.direction.y;
    }
  }
};

## sketch.js
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 600;

const GRID_WIDTH = 50;
const GRID_HEIGHT = 50;

const GRID_COLS = CANVAS_WIDTH / GRID_WIDTH;
const GRID_ROWS = CANVAS_HEIGHT / GRID_HEIGHT;

var points = [];
var floatingPoints = [];
var floatingPoints2 = [];

var triangles = [];
var triangleHashes = [];

var isPaused = false;

function setup() {
  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

  for (var row = 0; row < GRID_ROWS; row++) {
    for (var col = 0; col < GRID_COLS; col++) {
      points.push(new Point(col * GRID_WIDTH - (GRID_WIDTH / 2), row * GRID_HEIGHT - (GRID_HEIGHT / 2)));
    }
  }

  for (var i = 0; i < 100; i++) {
    var point = new Point(random(CANVAS_WIDTH), random(CANVAS_HEIGHT), true);
    point.color = 50;
    floatingPoints.push(point);
  }
}

function keyPressed () {
  isPaused = !isPaused;
}

function draw() {
  background(255);

  if (!isPaused) {
    points.forEach(function (point) {
      point.color = 0;
    });

    var nearestPoints = floatingPoints.filter(function (p) {
      return !p.triangle;
    }).map(function (point) {
      return {point: point, nears: findClosestPoints(point)};
    });

    nearestPoints.forEach(function (points) {
      var triangle = new Triangle(points.nears, Colors[floor(random(Colors.length))], false);
      triangles.push(triangle);
      points.point.triangle = triangle;
    });
  }

  triangles = triangles.filter(function (t) {
    t.draw();

    if (!isPaused) {
      t.update();
      if (t.life <= 0) {
        triangleHashes.splice(triangleHashes.indexOf(t.hash), 1);
        return false;
      }
    }

    return true;
  });

  // points.forEach(function (point) {
  //   point.draw();
  // });

  if (!isPaused) {
    floatingPoints.forEach(function (point) {
      point.moveAround(CANVAS_WIDTH, CANVAS_HEIGHT);
      point.update();
      // point.draw();
    });
  }
}

function findClosestPoints (point) {
  return points.filter(function (_p) {
    var dist = point.position.dist(_p.position);
    return dist <= 50;
  }).slice(0,3);
}

## triangle.js
var Triangle = function (points, color, forever) {
  this.points = points;
  this.color = color;
  this.life = random(30, 70);
  this.forever = forever;
};


Triangle.prototype.draw = function() {
  noStroke();
  fill.apply(null, this.color.concat(this.life));
  beginShape();
  this.points.forEach(function (p) {
    vertex(p.position.x, p.position.y);
  });
  endShape(CLOSE);
};

Triangle.prototype.update = function() {
  if (!this.forever) {
    this.life -= 1;
  }
};
	var Colors = [
	[142, 161, 108],
	[194, 207, 48],
	[254, 199, 0],
	[255, 137, 0],
	[211, 67, 43],
	[187, 41, 82],
	[142, 30, 95],
	[222, 74, 182],
	[153, 0, 236],
	[58, 26, 168],
	[57, 50, 254],
	[50, 118, 255],
	[53, 185, 246],
	[145, 224, 203],
	[66, 188, 106],
	[91, 65, 65]
	];
	<!DOCTYPE html>
	<html>
	<head>
	<title>Untitled</title>
	<script src="libraries/p5.js" type="text/javascript"></script>

	<!-- Uncomment the lines below to include extra p5 libraries -->
	<!--<script src="libraries/p5.dom.js" type="text/javascript"></script>-->
	<!--<script src="libraries/p5.sound.js" type="text/javascript"></script>-->

	<script src="colors.js" type="text/javascript"></script>
	<script src="point.js" type="text/javascript"></script>
	<script src="triangle.js" type="text/javascript"></script>
	<script src="sketch.js" type="text/javascript"></script>
	</head>
	<body style="padding: 0; margin: 0;">
	</body>
	</html>
	var Point = function (x, y, isFloating) {
	this.position = new p5.Vector(x, y);
	this.isFloating = isFloating;
	this.color = 0;

	if (this.isFloating) {
	this.direction = p5.Vector.random2D();
	} else {
	this.hash = (this.position.x * 73856093) ^ (this.position.y * 19349663);
	}
	};

	Point.prototype.draw = function () {
	noStroke();
	fill(this.color, 50);
	ellipse(this.position.x, this.position.y, 5, 5);
	};

	Point.prototype.update = function() {
	if (this.triangle.life <= 0) {
	this.triangle = null;
	}
	};

	Point.prototype.moveAround = function (CANVAS_WIDTH, CANVAS_HEIGHT) {
	if (this.direction.x > 0) {
	if (this.position.x + this.direction.x >= CANVAS_WIDTH) {
	this.position.x = CANVAS_WIDTH;
	this.direction.x = -this.direction.x;
	} else {
	this.position.x += this.direction.x;
	}
	} else if (this.direction.x < 0) {
	if (this.position.x - this.direction.x <= 0) {
	this.position.x = 0;
	this.direction.x = -this.direction.x;
	} else {
	this.position.x += this.direction.x;
	}
	}

	if (this.direction.y > 0) {
	if (this.position.y + this.direction.y >= CANVAS_HEIGHT) {
	this.position.y = CANVAS_HEIGHT;
	this.direction.y = -this.direction.y;
	} else {
	this.position.y += this.direction.y;
	}
	} else if (this.direction.y < 0) {
	if (this.position.y + this.direction.y <= 0) {
	this.position.y = 0;
	this.direction.y = -this.direction.y;
	} else {
	this.position.y += this.direction.y;
	}
	}
	};
	const CANVAS_WIDTH = 600;
	const CANVAS_HEIGHT = 600;

	const GRID_WIDTH = 50;
	const GRID_HEIGHT = 50;

	const GRID_COLS = CANVAS_WIDTH / GRID_WIDTH;
	const GRID_ROWS = CANVAS_HEIGHT / GRID_HEIGHT;

	var points = [];
	var floatingPoints = [];
	var floatingPoints2 = [];

	var triangles = [];
	var triangleHashes = [];

	var isPaused = false;

	function setup() {
	createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

	for (var row = 0; row < GRID_ROWS; row++) {
	for (var col = 0; col < GRID_COLS; col++) {
	points.push(new Point(col * GRID_WIDTH - (GRID_WIDTH / 2), row * GRID_HEIGHT - (GRID_HEIGHT / 2)));
	}
	}

	for (var i = 0; i < 100; i++) {
	var point = new Point(random(CANVAS_WIDTH), random(CANVAS_HEIGHT), true);
	point.color = 50;
	floatingPoints.push(point);
	}
	}

	function keyPressed () {
	isPaused = !isPaused;
	}

	function draw() {
	background(255);

	if (!isPaused) {
	points.forEach(function (point) {
	point.color = 0;
	});

	var nearestPoints = floatingPoints.filter(function (p) {
	return !p.triangle;
	}).map(function (point) {
	return {point: point, nears: findClosestPoints(point)};
	});

	nearestPoints.forEach(function (points) {
	var triangle = new Triangle(points.nears, Colors[floor(random(Colors.length))], false);
	triangles.push(triangle);
	points.point.triangle = triangle;
	});
	}

	triangles = triangles.filter(function (t) {
	t.draw();

	if (!isPaused) {
	t.update();
	if (t.life <= 0) {
	triangleHashes.splice(triangleHashes.indexOf(t.hash), 1);
	return false;
	}
	}

	return true;
	});

	// points.forEach(function (point) {
	// point.draw();
	// });

	if (!isPaused) {
	floatingPoints.forEach(function (point) {
	point.moveAround(CANVAS_WIDTH, CANVAS_HEIGHT);
	point.update();
	// point.draw();
	});
	}
	}

	function findClosestPoints (point) {
	return points.filter(function (_p) {
	var dist = point.position.dist(_p.position);
	return dist <= 50;
	}).slice(0,3);
	}
	var Triangle = function (points, color, forever) {
	this.points = points;
	this.color = color;
	this.life = random(30, 70);
	this.forever = forever;
	};


	Triangle.prototype.draw = function() {
	noStroke();
	fill.apply(null, this.color.concat(this.life));
	beginShape();
	this.points.forEach(function (p) {
	vertex(p.position.x, p.position.y);
	});
	endShape(CLOSE);
	};

	Triangle.prototype.update = function() {
	if (!this.forever) {
	this.life -= 1;
	}
	};