Begin drawing proper stars. It doesn't work yet (more bug spray needed :P).
This commit is contained in:
parent
fa9dea3bd4
commit
e804d9cd02
2 changed files with 38 additions and 2 deletions
38
Star.js
38
Star.js
|
@ -9,9 +9,38 @@ class Star
|
||||||
this.canvas = inCanvas;
|
this.canvas = inCanvas;
|
||||||
|
|
||||||
this.position = inPosition;
|
this.position = inPosition;
|
||||||
|
this.points = 5;
|
||||||
|
|
||||||
this.size = inSize;
|
this.size = inSize;
|
||||||
|
this.innerRingSize = this.size * 0.6;
|
||||||
|
|
||||||
this.colour = "white";
|
this.colour = "white";
|
||||||
|
|
||||||
|
this.recalculatePoints();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The step around a circle (in radians) between each point (both inner and
|
||||||
|
* outer) on the star.
|
||||||
|
* Used by recalculatePoints().
|
||||||
|
* @return {number} The step around a circle between each point on the star.
|
||||||
|
*/
|
||||||
|
get pointStep()
|
||||||
|
{
|
||||||
|
return (Math.PI * 2) / (this.points * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
recalculatePoints()
|
||||||
|
{
|
||||||
|
this.points = [];
|
||||||
|
for (let n = 0, i = 0; n < Math.PI * 2; n += this.pointStep, i++)
|
||||||
|
{
|
||||||
|
let currentSize = i % 2 == 0 ? this.size : this.innerRingSize;
|
||||||
|
this.points.push(new Vector(
|
||||||
|
currentSize * Math.cos(Math.PI * 2 * (n / this.points * 2) + this.rotation - Math.PI / 2),
|
||||||
|
currentSize * Math.sin(Math.PI * 2 * (n / this.points * 2) + this.rotation - Math.PI / 2)
|
||||||
|
));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
update(dt)
|
update(dt)
|
||||||
|
@ -23,9 +52,16 @@ class Star
|
||||||
{
|
{
|
||||||
context.save();
|
context.save();
|
||||||
context.translate(this.position.x, this.position.y);
|
context.translate(this.position.x, this.position.y);
|
||||||
|
// TODO: Debug this
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(this.points[0].x, this.points[0].y);
|
||||||
|
for (let point of this.points) {
|
||||||
|
context.lineTo(point.x, point.y);
|
||||||
|
}
|
||||||
|
context.closePath();
|
||||||
|
|
||||||
context.fillStyle = this.colour;
|
context.fillStyle = this.colour;
|
||||||
context.fillRect(-5, -5, 10, 10);
|
context.fill();
|
||||||
|
|
||||||
context.restore();
|
context.restore();
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"env": "env",
|
"env": "env",
|
||||||
"test": "echo (There aren't any tests yet!)",
|
"test": "echo (There aren't any tests yet!)",
|
||||||
"start": "wzrd $npm_package_main:$npm_package_config_browserify_bundle & sensible-browser http://localhost:9966/",
|
"start": "wzrd $npm_package_main:$npm_package_config_browserify_bundle & sleep 1; sensible-browser http://localhost:9966/",
|
||||||
"stop": "kill $(pgrep --full wzrd)",
|
"stop": "kill $(pgrep --full wzrd)",
|
||||||
"build": "browserify $npm_package_main -t rollupify -o $npm_package_config_browserify_bundle",
|
"build": "browserify $npm_package_main -t rollupify -o $npm_package_config_browserify_bundle",
|
||||||
"build.dev": "browserify $npm_package_main -t rollupify -o $npm_package_config_browserify_bundle --debug",
|
"build.dev": "browserify $npm_package_main -t rollupify -o $npm_package_config_browserify_bundle --debug",
|
||||||
|
|
Loading…
Reference in a new issue