PolyJS
PolyJS is a lightweight, fast, and easy to use JavaScript library for manipulating 2D polygons on the HTML5 Canvas.
It lets you create, modify and draw polygons. It also lets you attach points to other points (with or without an offset) so that you can potentially change everything on the screen just by adjusting one value.
I really want to see what kinds of games and art people can make using PolyJS. It lets you do this unique, simple, and interesting art style.
You can download the docs from here, and the latest build from here! Happy Polygoning!
(If you are interested in contributing or just want to poke around, my GitHub repo is here)
Here's a random demo. The shapes do not have to be triangles!
Code:
Please ignore the low code quality; that demo was made in less than 15 minutes without any planning... x.x
As a side note directly related to a change in mentality caused by PolyJS, I revised my website at https://legend-of-iphoenix.github.io/. What do you think?
PolyJS is a lightweight, fast, and easy to use JavaScript library for manipulating 2D polygons on the HTML5 Canvas.
It lets you create, modify and draw polygons. It also lets you attach points to other points (with or without an offset) so that you can potentially change everything on the screen just by adjusting one value.
I really want to see what kinds of games and art people can make using PolyJS. It lets you do this unique, simple, and interesting art style.
You can download the docs from here, and the latest build from here! Happy Polygoning!
(If you are interested in contributing or just want to poke around, my GitHub repo is here)
Here's a random demo. The shapes do not have to be triangles!
Code:
var pJS = new PolyJS(document.getElementById("canvas"));
pJS.canvas.width = 240;
pJS.canvas.height = 240;
function createTriMesh(width, height, triWidth, triHeight, skewFactor) {
var index = -1,
horizTris = width / triWidth;
var skewX = () => (Math.floor(Math.random() * 2) - 1) * Math.floor((triWidth * Math.random()) / skewFactor),
skewY = () => (Math.floor(Math.random() * 2) - 1) * Math.floor((triHeight * Math.random()) / skewFactor)
for (var j = 0; j < height; j += triHeight) {
for (var i = 0; i < width; i += triWidth) {
var a = i / triWidth,
b = j / triHeight;
index++;
var points = [
[i + skewX(), j + triHeight + skewY()]
];
if (i) {
points[0] = {
attached: [pJS.polygons[pJS.polygons.length - 1], 1]
};
}
if (j) {
points.push({
attached: [pJS.polygons[2 * ((b - 1) * horizTris + a)], 0]
});
points.push({
attached: [pJS.polygons[2 * ((b - 1) * horizTris + a) + 1], 1]
});
} else {
points.push([i, j]);
points.push([i + triWidth, j]);
}
var lastPolygon = new pJS.Polygon(points, color(), color());
new pJS.Polygon([{
attached: [lastPolygon, 2]
},
[i + triWidth + skewX(), j + triHeight + skewY()], {
attached: [lastPolygon, 0]
}
], color(), color());
}
}
pJS.draw()
}
function color() {
return "#" + Math.floor(256 * Math.random()).toString(16).padStart(2, 0) + Math.floor(256 * Math.random()).toString(16).padStart(2, 0) + Math.floor(256 * Math.random()).toString(16).padStart(2, 0)
}
createTriMesh(240, 240, 30, 30, 2.5);
Please ignore the low code quality; that demo was made in less than 15 minutes without any planning... x.x
As a side note directly related to a change in mentality caused by PolyJS, I revised my website at https://legend-of-iphoenix.github.io/. What do you think?