constructor(options={}) {
super(options);
...
this.lineSegment1 = new hamonengine.geometry.lineSegment(0, 0, 80, 50);
this.lineSegment2 = new hamonengine.geometry.lineSegment(260, 100, 260, 180);
this.lineSegment3 = new hamonengine.geometry.lineSegment(0, 0, 80, 0);
...
}
renderBasics1(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
screen.drawShape(this.lineSegment1, 100, 100, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('lineSegment1', 100, 160);
screen.drawShape(this.lineSegment2, 0, 0, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('lineSegment2', 260, 190);
screen.drawShape(this.lineSegment3, 400, 150, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('lineSegment3', 400, 160);
screen.endPainting();
}
constructor(options={}) {
super(options);
...
this.lineSegment1 = new hamonengine.geometry.lineSegment(0, 0, 80, 50);
...
this.polygon = new hamonengine.geometry.polygon();
this.polygon.addLine(this.lineSegment1);
this.polygon.addVertex(0, 50);
this._polygonObject = new hamonengine.entities.shapeObject({
shape: this.polygon,
position: new hamonengine.math.vector2(250, 100),
isMovable: false
});
...
}
renderAppendingToPolygon(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
screen.drawShape(this.lineSegment1, 100, 100, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('lineSegment1', 100, 160);
this._polygonObject.render(screen, elapsedTimeInMilliseconds, { color: 'red', drawNormals: true });
screen.drawText('transformed segment into polygon', 250, 200);
screen.endPainting();
}
constructor(options={}) {
super(options);
...
this.lineSegment1 = new hamonengine.geometry.lineSegment(0, 0, 80, 50);
...
}
renderRotatingLine(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
screen.drawShape(this.lineSegment1, 100, 100, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('red lineSegment1', 150, 160);
screen.drawShape(this.lineSegment1.rotate(Math.PI/2), 100, 100, { color: 'yellow', drawNormals: true, lineWidth: 2 });
screen.drawText('yellow rotated 90 degrees', 35, 200);
screen.drawShape(this.lineSegment1, 350, 100, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('red lineSegment1', 350, 180);
screen.drawShape(this.lineSegment1.rotateAtCenter(Math.PI/2), 350, 100, { color: 'yellow', drawNormals: true, lineWidth: 2 });
screen.drawText('yellow rotated 90 degrees around the center', 350, 200);
screen.endPainting();
}
constructor(options={}) {
super(options);
...
this.lineSegment1 = new hamonengine.geometry.lineSegment(0, 0, 80, 50);
...
}
renderScalingLine(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
//Shrink the green polygon by half.
screen.drawShape(this.lineSegment1, 50, 50, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('red lineSegment1', 50, 110);
screen.drawShape(this.lineSegment1.scale(new hamonengine.math.vector2(0.5, 0.5)), 50, 180, { color: 'yellow', drawNormals: true, lineWidth: 2 });
screen.drawText('yellow scaled down (0.5, 0.5)', 50, 210);
screen.drawShape(this.lineSegment1, 250, 50, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('red lineSegment1', 250, 110);
screen.drawShape(this.lineSegment1.scale(new hamonengine.math.vector2(1.5, 1.5)), 250, 160, { color: 'yellow', drawNormals: true, lineWidth: 2 });
screen.drawText('yellow scaled up (1.5, 1.5)', 250, 250);
screen.drawShape(this.lineSegment1, 450, 50, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('red lineSegment1', 450, 110);
screen.drawShape(this.lineSegment1.scaleAtCenter(new hamonengine.math.vector2(-1.0, 1.0)), 450, 160, { color: 'yellow', drawNormals: true, lineWidth: 2 });
screen.drawText('mirrored at center (-1,1)', 450, 250);
screen.drawShape(this.lineSegment1, 620, 50, { color: 'red', drawNormals: true, lineWidth: 2 });
screen.drawText('red lineSegment1', 620, 110);
screen.drawShape(this.lineSegment1.scaleAtCenter(new hamonengine.math.vector2(1.0, -1.0)), 620, 160, { color: 'yellow', drawNormals: true, lineWidth: 2 });
screen.drawText('flipped at center (1,-1)', 620, 250);
screen.endPainting();
}
Collision Detection Logic
The shape can be moved by using the arrow keys below. Each line segment is collidable and will reject the shape in the direction of the normal.
- ArrowKeys - Moves the shape.
- C - Resets the shape's location.
- D - Toggles the shape between polygon and rect.
- Q - Rotates the polygon
- R - Increases the polygon size
- F - Decreases the polygon size
constructor(options={}) {
super(options);
...
this.rect = new hamonengine.geometry.rect(0, 0,50, 50);
this.polygon = new hamonengine.geometry.polygon();
this.polygon.addLine(this.lineSegment1);
this.polygon.addVertex(0, 50);
this._polygonObject = new hamonengine.entities.shapeObject({
shape: this.polygon,
position: new hamonengine.math.vector2(250, 100),
isMovable: false
});
this._polygonObjectActor = new hamonengine.entities.shapeObject({
//The movement rate is the number of pixels * the number of seconds that have elapsed between frames.
movementRate: 0.15,
width: this.lineSegment1.length,
height: this.lineSegment1.length,
shape: this.polygon,
position: new hamonengine.math.vector2(80, 120),
direction: new hamonengine.math.vector2(0, 0),
isMovable: true,
isSolid: true,
faceAxisOnMove: OBJECT_FACE_DIRECTION.NONE
});
const lineSegmentObject = new hamonengine.entities.shapeObject({
shape: new hamonengine.geometry.lineSegment(0, 80, 0, 0),
position: new hamonengine.math.vector2(200, 120),
isMovable: false,
isSolid: true
});
const lineSegmentObject2 = new hamonengine.entities.shapeObject({
shape: new hamonengine.geometry.lineSegment(0, 0, 0, 80),
position: new hamonengine.math.vector2(400, 120),
isMovable: false,
isSolid: true
});
const lineSegmentObject3 = new hamonengine.entities.shapeObject({
shape: new hamonengine.geometry.lineSegment(0, 0, 50, 80),
position: new hamonengine.math.vector2(600, 120),
isMovable: false,
isSolid: true
});
this.objects = [];
this.objects.push(lineSegmentObject);
this.objects.push(lineSegmentObject2);
this.objects.push(lineSegmentObject3);
...
}
get polygonObjectActor() {
return this._polygonObjectActor;
}
renderCollisionDetection(screen, elapsedTimeInMilliseconds) {
screen.beginPainting();
this.objects.forEach(object => object && object.render && object.render(screen, elapsedTimeInMilliseconds, { color: 'red', drawNormals: true }));
//Move the shape and if there is a collision then correct the movement.
//This prevents bouncing.
this.polygonObjectActor.move(elapsedTimeInMilliseconds);
//Handle collisions detection with otherShapes.
const correctionMTV = new hamonengine.math.vector2();
for (let i = 0; i < this.objects.length; i++) {
//Determine if this shape has collided with another.
let mtv = this.lineObjectActor.isCollision(this.objects[i]);
if (mtv.length > 0) {
//Adjust the position of the moving object.
correctionMTV = correctionMTV.add(mtv);
}
}
//Move the object if any corrections were made due to collisions.
this.polygonObjectActor.move(elapsedTimeInMilliseconds, correctionMTV);
this.polygonObjectActor.render(screen, elapsedTimeInMilliseconds, { color: 'red', drawNormals: true, lineWidth: '1px' });
screen.endPainting();
}