From 40bca2ec34c02a5b52250bd99e55450fa735ee2b Mon Sep 17 00:00:00 2001 From: Victor Rodriguez Date: Tue, 9 Jun 2020 22:20:46 +0200 Subject: [PATCH 1/2] Triangles! --- dev/src/sketch.js | 2 +- src/app.js | 2 + src/drawer/objects/Triangle.js | 68 ++++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 src/drawer/objects/Triangle.js diff --git a/dev/src/sketch.js b/dev/src/sketch.js index 747046a..5405855 100644 --- a/dev/src/sketch.js +++ b/dev/src/sketch.js @@ -10,6 +10,6 @@ function runSimulator(simulator) { .setCustomConfig((customConf) => { customConf.drawSizeMultiplier = 10; }) - .addObjects(Plot, 1) + .addObjects(Plot, 1, new Vector(1, 2), new Vector(25, 34), new Vector(12, 25), [255, 255, 255]) ; } diff --git a/src/app.js b/src/app.js index bece735..4c7a98e 100644 --- a/src/app.js +++ b/src/app.js @@ -6,6 +6,7 @@ import pSimulator from './core/Simulator'; // Objects import pSPoint from './drawer/objects/Point'; import pSText from './drawer/objects/Text'; +import pSTriangle from './drawer/objects/Triangle'; // Root import Animation from './drawer/Animation'; @@ -21,6 +22,7 @@ import Vector from './utilities/Vector'; // Objects global.pSPoint = pSPoint; global.pSText = pSText; +global.pSTriangle = pSTriangle; // Root global.pSAnimation = Animation; diff --git a/src/drawer/objects/Triangle.js b/src/drawer/objects/Triangle.js new file mode 100644 index 0000000..954b807 --- /dev/null +++ b/src/drawer/objects/Triangle.js @@ -0,0 +1,68 @@ +import './../../utilities/Vector'; +import './../Animation'; +import './Text'; + +class pSTriangle { + /** + * Creates a new Triangle + * @param p0 Vector to the first point of the triangle + * @param p1 Vector to the second point of the triangle + * @param p2 Vector to the third point of the triangle + * @param color The triangle color + */ + constructor(p0, p1, p2, color) { + this.p0 = new Vector(p0.x, p0.y); + this.p1 = new Vector(p1.x, p1.y); + this.p2 = new Vector(p2.x, p2.y); + + //The barycenter, or center of mass. This is the + // point around which the triangle will rotate. + this.pG = Vector.div(Vector.add(Vector.add(this.p0, this.p1), this.p2), 3); + + //The vectors pointing from the barycenter to P0, P1 + // and P2. They are useful when rotating the triangle. + this.v0 = Vector.sub(this.p0, this.pG); + this.v1 = Vector.sub(this.p1, this.pG); + this.v2 = Vector.sub(this.p2, this.pG); + + this.color = color; + } + + /** + * Rotates the triangle by the specified angle, around + * its center of mass. + * @param angle Angle of rotation + */ + rotate(angle) + { + this.v0.rotate(angle); + this.v1.rotate(angle); + this.v2.rotate(angle); + + this.p0 = Vector.add(this.v0, this.pG); + this.p1 = Vector.add(this.v1, this.pG); + this.p2 = Vector.add(this.v2, this.pG); + } + + /** + * Updates the triangle + * @param dt Delta time since last update + */ + update(dt) { + } + + /** + * Draws the triangle on the screen. + */ + draw() { + let drawer = _pSimulationInstance.plotter.drawer; + + drawer + .stroke(...this.color) + .line(this.p0.x, this.p0.y, this.p1.x, this.p1.y) + .line(this.p1.x, this.p1.y, this.p2.x, this.p2.y) + .line(this.p2.x, this.p2.y, this.p0.x, this.p0.y); + } +} + +export default pSTriangle; From 372e105713c18f74c3c6dd0e2d3f520d5a31a022 Mon Sep 17 00:00:00 2001 From: Victor Rodriguez Date: Tue, 9 Jun 2020 22:51:11 +0200 Subject: [PATCH 2/2] Changes requested by @xam4lor --- src/drawer/objects/Triangle.js | 46 ++++++++++++++++------------------ 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/src/drawer/objects/Triangle.js b/src/drawer/objects/Triangle.js index 954b807..7ccf278 100644 --- a/src/drawer/objects/Triangle.js +++ b/src/drawer/objects/Triangle.js @@ -11,21 +11,21 @@ class pSTriangle { * @param color The triangle color */ constructor(p0, p1, p2, color) { - this.p0 = new Vector(p0.x, p0.y); - this.p1 = new Vector(p1.x, p1.y); - this.p2 = new Vector(p2.x, p2.y); + this.p0 = new Vector(p0.x, p0.y); + this.p1 = new Vector(p1.x, p1.y); + this.p2 = new Vector(p2.x, p2.y); //The barycenter, or center of mass. This is the // point around which the triangle will rotate. - this.pG = Vector.div(Vector.add(Vector.add(this.p0, this.p1), this.p2), 3); + this.pG = Vector.div(Vector.add(Vector.add(this.p0, this.p1), this.p2), 3); //The vectors pointing from the barycenter to P0, P1 // and P2. They are useful when rotating the triangle. - this.v0 = Vector.sub(this.p0, this.pG); - this.v1 = Vector.sub(this.p1, this.pG); - this.v2 = Vector.sub(this.p2, this.pG); + this.v0 = Vector.sub(this.p0, this.pG); + this.v1 = Vector.sub(this.p1, this.pG); + this.v2 = Vector.sub(this.p2, this.pG); - this.color = color; + this.color = color; } /** @@ -33,35 +33,31 @@ class pSTriangle { * its center of mass. * @param angle Angle of rotation */ - rotate(angle) - { - this.v0.rotate(angle); - this.v1.rotate(angle); - this.v2.rotate(angle); + rotate(angle) { + this.v0.rotate(angle); + this.v1.rotate(angle); + this.v2.rotate(angle); - this.p0 = Vector.add(this.v0, this.pG); - this.p1 = Vector.add(this.v1, this.pG); - this.p2 = Vector.add(this.v2, this.pG); + this.p0 = Vector.add(this.v0, this.pG); + this.p1 = Vector.add(this.v1, this.pG); + this.p2 = Vector.add(this.v2, this.pG); } /** * Updates the triangle * @param dt Delta time since last update */ - update(dt) { - } + update(dt) {} /** * Draws the triangle on the screen. */ draw() { - let drawer = _pSimulationInstance.plotter.drawer; - - drawer - .stroke(...this.color) - .line(this.p0.x, this.p0.y, this.p1.x, this.p1.y) - .line(this.p1.x, this.p1.y, this.p2.x, this.p2.y) - .line(this.p2.x, this.p2.y, this.p0.x, this.p0.y); + _pSimulationInstance.plotter.drawer + .stroke(...this.color) + .line(this.p0.x, this.p0.y, this.p1.x, this.p1.y) + .line(this.p1.x, this.p1.y, this.p2.x, this.p2.y) + .line(this.p2.x, this.p2.y, this.p0.x, this.p0.y); } }