Skip to content

Instantly share code, notes, and snippets.

@umurgdk

umurgdk/colors.js

Last active August 29, 2015 14:05
Show Gist options
  • Save umurgdk/7e6eef2ec8f15c5449f8 to your computer and use it in GitHub Desktop.
Save umurgdk/7e6eef2ec8f15c5449f8 to your computer and use it in GitHub Desktop.
Download ZIP
bunch of triangles made with p5.js
Raw
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]
];
Raw
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>
Raw
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;
}
}
};
Raw
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);
}
Raw
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;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment