jpt/artworld.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polygons

Browse Source
This commit is contained in:
James Turk 2024-07-09 02:17:52 -05:00
parent ff593dcd92
commit 2356cf43d7
5 changed files with 111 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
artworld/index.js
View File

@ -1,6 +1,6 @@
export { artworld } from "./world.js";
export { Color, Pico8 } from "./color.js";
export { Vector2, degToRad, radToDeg } from "./math.js";
export { Line, Rect, Circle, Arc } from "./shapes.js";
export { Line, Rect, Circle, Arc, Polygon } from "./shapes.js";
export { Group } from "./drawable.js";
export { Random } from "./random.js";

6
artworld/math.js
View File

@ -27,6 +27,12 @@ export class Vector2 {
return new Vector2(s * this.x, s * this.y);
}
distance(other) {
return Math.sqrt(
Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2),
);
}
static random(x, y) {
let theta = Random.radians();
// if neither specified, use (1, 1)

64
artworld/shapes.js
View File

@ -158,3 +158,67 @@ export class Rect extends Drawable {
// );
// }
}
export class Polygon extends Drawable {
constructor(parent) {
super(parent);
this._points = [];
}
random(n = 7) {
super.random();
let points = [];
let i;
// generate points
for (i = 0; i < n; i++) {
points.push(
new Vector2(Random.between(50, 200), Random.between(50, 200)),
);
}
// sort points by distance for mostly convex (but not always) polygons
this._points.push(points.shift()); // take first element
while (points.length) {
let closestIdx = 0;
let closestDist = 999999999;
let dist;
for (let j = 0; j < points.length; j++) {
dist = this._points[this._points.length - 1].distance(points[j]);
if (dist < closestDist) {
closestDist = dist;
closestIdx = j;
}
}
this._points.push(points[closestIdx]);
points.splice(closestIdx, 1);
}
return this;
}
copy(overrides) {
return makeCopy(Polygon, this, overrides);
}
draw() {
artworld.prepareDraw(this);
artworld.drawPolygon(this.worldPos, this._points);
}
point(vector, to_modify = null) {
if (to_modify !== null) {
self._points[to_modify] = vector;
} else {
self._points.push(point);
}
return self;
}
// TODO
// contains(x, y) {
// return (
// x > this.x &&
// x < this.x + this._width &&
// y > this.y &&
// y < this.pos.y + this._height
// );
// }
}

11
artworld/world.js
View File

@ -95,6 +95,17 @@ export class World {
if (this._stroke) this.ctx.stroke();
if (this._fill) this.ctx.fill();
}
drawPolygon(center, points) {
this.ctx.beginPath();
this.ctx.moveTo(center.x + points[0].x, center.y + points[0].y);
for (let i = 1; i < points.length; i++) {
this.ctx.lineTo(center.x + points[i].x, center.y + points[i].y);
}
this.ctx.lineTo(center.x + points[0].x, center.y + points[0].y);
if (this._stroke) this.ctx.stroke();
if (this._fill) this.ctx.fill();
}
}
// singleton (for now)

29
examples/polygons.html Normal file
View File

@ -0,0 +1,29 @@
<html>
<head> </head>
<body>
<canvas id="mainCanvas" width="500" height="500"></canvas>
<script type="module">
import {
artworld,
Color,
Pico8,
Group,
Rect,
Random,
Vector2,
Polygon,
degToRad,
} from "../artworld/index.js";
artworld.bindCanvas("mainCanvas");
window.artworld = artworld;
for (let i = 1; i < 8; i++) {
let p = new Polygon().random(3 + i);
let p2 = new Polygon().random(i * 10);
// p.animate("point", new_point, to_modify=e)
}
artworld.draw();
</script>
</body>
</html>