canvas-based-core 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/canvas/model/canvasArc2D.js +35 -18
  2. package/canvas/model/canvasCircle2D.js +23 -13
  3. package/canvas/model/canvasLine2D.js +16 -5
  4. package/canvas/model/canvasRect2D.js +78 -32
  5. package/canvas/module.js +17 -0
  6. package/{collisionDetection → geometry/2D/collisionDetection}/collisionDetection2D.js +28 -7
  7. package/geometry/2D/model/arc2D.js +45 -0
  8. package/geometry/2D/model/circle2D.js +23 -0
  9. package/{model → geometry/2D/model}/line2D.js +14 -8
  10. package/geometry/2D/model/object2D.js +51 -0
  11. package/geometry/2D/model/rect2D.js +83 -0
  12. package/{model/objectBase3D.js → geometry/3D/model/object3D.js} +4 -5
  13. package/geometry/{point3D.js → 3D/point3D.js} +1 -1
  14. package/geometry/module.js +23 -0
  15. package/module.js +11 -16
  16. package/package.json +1 -1
  17. package/test.js +25 -15
  18. package/canvas/canvas-module.js +0 -25
  19. package/canvas/collisionDetection/canvas-collisionDetection-module.js +0 -7
  20. package/canvas/model/canvas-model-module.js +0 -11
  21. package/collisionDetection/collisionDetection-module.js +0 -7
  22. package/geometry/geometry-module.js +0 -7
  23. package/model/arc2D.js +0 -33
  24. package/model/circle2D.js +0 -9
  25. package/model/model-module.js +0 -15
  26. package/model/objectBase2D.js +0 -48
  27. package/model/rect2D.js +0 -62
  28. /package/{control → controller}/keyCode.js +0 -0
  29. /package/{control → controller}/keyboardControlMapBase.js +0 -0
  30. /package/{control/control-module.js → controller/module.js} +0 -0
  31. /package/{collisionDetection → geometry/2D/collisionDetection}/collisionDetection.js +0 -0
  32. /package/geometry/{point2D.js → 2D/point2D.js} +0 -0
@@ -1,16 +1,33 @@
1
- import { Arc2D } from "../../model/arc2D.js";
1
+ import { Arc2D } from "../../geometry/module.js";
2
2
  import { StyleType } from "../styleType.js";
3
3
 
4
4
  export class CanvasArc2D extends Arc2D {
5
5
 
6
6
  //props
7
- ctx;
8
7
  styleType;
9
8
  style;
10
9
 
11
- constructor(ctx, x, y, radius = 0, startAngle = 0, endAngle = 0, style = "#000000", styleType = StyleType.FILL, xVelocity = 0.00, yVelocity = 0.00) {
12
- super(x, y, radius, startAngle, endAngle, xVelocity, yVelocity);
13
- this.ctx = ctx;
10
+ //ctor
11
+ constructor(
12
+ originX,
13
+ originY,
14
+ radius = 0,
15
+ startAngle = 0,
16
+ endAngle = 0,
17
+ style = "#000000",
18
+ styleType = StyleType.FILL,
19
+ xVelocity = 0.00,
20
+ yVelocity = 0.00
21
+ ) {
22
+ super(
23
+ originX,
24
+ originY,
25
+ radius,
26
+ startAngle,
27
+ endAngle,
28
+ xVelocity,
29
+ yVelocity
30
+ );
14
31
  this.styleType = styleType;
15
32
  this.style = style;
16
33
  }
@@ -30,29 +47,29 @@ export class CanvasArc2D extends Arc2D {
30
47
  return this;
31
48
  }
32
49
 
33
- draw(){
34
- this.#resolveDraw();
50
+ draw(ctx){
51
+ this.#resolveDraw(ctx);
35
52
  }
36
53
 
37
- #resolveDraw(){
54
+ #resolveDraw(ctx){
38
55
  switch(this.styleType){
39
56
  case StyleType.FILL:
40
- this.ctx.fillStyle = this.style;
41
- this.ctx.beginPath();
42
- this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
43
- this.ctx.fill();
57
+ ctx.fillStyle = style;
58
+ ctx.beginPath();
59
+ ctx.arc(this.originX, this.originY, this.radius, this.startAngle, this.endAngle);
60
+ ctx.fill();
44
61
  break;
45
62
  case StyleType.STROKE:
46
- this.ctx.strokeStyle = this.style;
47
- this.ctx.beginPath();
48
- this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
49
- this.ctx.stroke();
63
+ ctx.strokeStyle = this.style;
64
+ ctx.beginPath();
65
+ ctx.arc(this.originX, this.originY, this.radius, this.startAngle, this.endAngle);
66
+ ctx.stroke();
50
67
  }
51
68
  }
52
69
 
53
70
  clear(){
54
- const x = (this.x - this.radius);
55
- const y = (this.y - this.radius);
71
+ const x = (this.originX - this.radius);
72
+ const y = (this.originY - this.radius);
56
73
  const diameter = (this.radius * 2);
57
74
  this.ctx.clearRect(x, y, diameter, diameter);
58
75
  }
@@ -1,25 +1,35 @@
1
- import { Circle2D } from "../../model/circle2D.js";
1
+ import { Circle2D } from "../../geometry/module.js";
2
2
  import { StyleType } from "../styleType.js";
3
3
 
4
4
  export class CanvasCircle2D extends Circle2D {
5
5
 
6
6
  //props
7
- ctx;
8
7
  styleType;
9
8
  style;
10
9
 
11
- constructor(ctx, x, y, radius = 0, style = "#000000", styleType = StyleType.FILL, xVelocity = 0.00, yVelocity = 0.00) {
12
- super(x, y, radius, xVelocity, yVelocity);
10
+ //ctor
11
+ constructor(
12
+ ctx,
13
+ originX,
14
+ originY,
15
+ radius = 0,
16
+ style = "#000000",
17
+ styleType = StyleType.FILL,
18
+ xVelocity = 0.00,
19
+ yVelocity = 0.00
20
+ ) {
21
+ super(
22
+ originX,
23
+ originY,
24
+ radius,
25
+ xVelocity,
26
+ yVelocity
27
+ );
13
28
  this.ctx = ctx;
14
29
  this.styleType = styleType;
15
30
  this.style = style;
16
31
  }
17
32
 
18
- setCTX(val){
19
- this.ctx = val;
20
- return this;
21
- }
22
-
23
33
  setStyleType(val){
24
34
  this.styleType = val;
25
35
  return this;
@@ -39,20 +49,20 @@ export class CanvasCircle2D extends Circle2D {
39
49
  case StyleType.FILL:
40
50
  this.ctx.fillStyle = this.style;
41
51
  this.ctx.beginPath();
42
- this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
52
+ this.ctx.arc(this.originX, this.originY, this.radius, this.startAngle, this.endAngle);
43
53
  this.ctx.fill();
44
54
  break;
45
55
  case StyleType.STROKE:
46
56
  this.ctx.strokeStyle = this.style;
47
57
  this.ctx.beginPath();
48
- this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
58
+ this.ctx.arc(this.originX, this.originY, this.radius, this.startAngle, this.endAngle);
49
59
  this.ctx.stroke();
50
60
  }
51
61
  }
52
62
 
53
63
  clear(){
54
- const x = (this.x - this.radius);
55
- const y = (this.y - this.radius);
64
+ const x = (this.originX - this.radius);
65
+ const y = (this.originY - this.radius);
56
66
  const diameter = (this.radius * 2);
57
67
  this.ctx.clearRect(x, y, diameter, diameter);
58
68
  }
@@ -1,13 +1,24 @@
1
- import { Line2D } from "../../model/line2D.js";
1
+ import { Line2D } from "../../geometry/module.js";
2
2
 
3
3
  export class CanvasLine2D extends Line2D {
4
4
 
5
- ctx;
5
+ //props
6
6
  style;
7
7
 
8
- constructor(ctx, originX, originY, targetX, targetY, style = "#000000"){
9
- super(originX, originY, targetX, targetY);
10
- this.ctx = ctx;
8
+ //ctor
9
+ constructor(
10
+ originX,
11
+ originY,
12
+ targetX,
13
+ targetY,
14
+ style = "#000000"
15
+ ){
16
+ super(
17
+ originX,
18
+ originY,
19
+ targetX,
20
+ targetY
21
+ );
11
22
  this.style = style;
12
23
  }
13
24
 
@@ -1,23 +1,39 @@
1
- import { Rect2D } from "../../model/rect2D.js";
1
+ import { Rect2D } from "../../geometry/module.js";
2
2
  import { StyleType } from "../styleType.js";
3
3
 
4
4
  export class CanvasRect2D extends Rect2D {
5
5
 
6
6
  //props
7
- ctx;
8
7
  styleType;
9
8
  style;
9
+ rotation = 0.00;
10
+ rotationSpeed = 0.00;
10
11
 
11
- constructor(ctx, x, y, height, width, style = "#000000", styleType = StyleType.FILL, xVelocity = 0.00, yVelocity = 0.00) {
12
- super(x, y, height, width, xVelocity, yVelocity);
13
- this.ctx = ctx;
12
+ //ctor
13
+ constructor(
14
+ originX,
15
+ originY,
16
+ height,
17
+ width,
18
+ style = "#000000",
19
+ styleType = StyleType.FILL,
20
+ xVelocity = 0.00,
21
+ yVelocity = 0.00,
22
+ rotation = 0.00,
23
+ rotationSpeed = 0.00
24
+ ) {
25
+ super(
26
+ originX,
27
+ originY,
28
+ height,
29
+ width,
30
+ xVelocity,
31
+ yVelocity
32
+ );
14
33
  this.styleType = styleType;
15
34
  this.style = style;
16
- }
17
-
18
- setCTX(val){
19
- this.ctx = val;
20
- return this;
35
+ this.rotation = rotation;
36
+ this.rotationSpeed = rotationSpeed;
21
37
  }
22
38
 
23
39
  setStyleType(val){
@@ -30,35 +46,65 @@ export class CanvasRect2D extends Rect2D {
30
46
  return this;
31
47
  }
32
48
 
33
- draw(){
34
- this.#resolveDraw();
49
+ setRotation(val){
50
+ this.rotation = val;
51
+ return this;
52
+ }
53
+
54
+ setRotationSpeed(val){
55
+ this.rotationSpeed = val;
56
+ return this;
57
+ }
58
+
59
+ draw(ctx){
60
+ ctx.save();
61
+ ctx.translate(this.originX, this.originY);
62
+ this.#resolveDraw(ctx, this.originX, this.originY);
63
+ ctx.resetTransform();
64
+ ctx.restore();
65
+ }
66
+
67
+ rotate(ctx){
68
+ this.#resetRotation();
69
+ this.rotation += this.rotationSpeed;
70
+ ctx.save();
71
+ ctx.translate(this.originX, this.originY);
72
+ ctx.rotate(this.rotation);
73
+ this.#resolveDraw(ctx, (-this.originX / this.originX), (-this.originY / this.originY));
74
+ ctx.resetTransform();
75
+ ctx.restore();
76
+ }
77
+
78
+ spin(ctx){
79
+ this.#resetRotation();
80
+ this.rotation += this.rotationSpeed;
81
+ ctx.save();
82
+ ctx.translate(this.originX, this.originY);
83
+ ctx.rotate(this.rotation);
84
+ this.#resolveDraw(ctx, (-this.width / 2), (-this.height / 2));
85
+ ctx.resetTransform();
86
+ ctx.restore();
87
+ }
88
+
89
+ clear(ctx){
90
+ ctx.clearRect(this.originX, this.originY, this.width, this.height);
35
91
  }
36
92
 
37
- #resolveDraw(){
93
+ #resolveDraw(ctx, originX, originY){
38
94
  switch(this.styleType){
39
95
  case StyleType.FILL:
40
- this.ctx.fillStyle = this.style;
41
- this.ctx.fillRect(this.x, this.y, this.width, this.height);
96
+ ctx.fillStyle = this.style;
97
+ ctx.fillRect(originX, originY, this.width, this.height);
42
98
  break;
43
99
  case StyleType.STROKE:
44
- this.ctx.strokeStyle = this.style;
45
- this.ctx.strokeRect(this.x, this.y, this.width, this.height);
100
+ ctx.strokeStyle = this.style;
101
+ ctx.strokeRect(originX, originY, this.width, this.height);
46
102
  }
47
103
  }
48
-
49
- clear(){
50
- this.ctx.clearRect(this.x, this.y, this.width, this.height);
51
- }
52
-
53
- rotate(degree){
54
- this.ctx.save();
55
- this.degree = (this.degree + degree) % 360;
56
- const rad = this.degree * (Math.PI / 180);
57
- this.ctx.translate(this.x, this.y);
58
- this.ctx.rotate(rad);
59
- this.ctx.fillRect((-this.width / 2), (-this.height / 2), this.width, this.height);
60
- this.ctx.resetTransform();
61
- this.ctx.restore();
104
+
105
+ #resetRotation(){
106
+ if(this.rotation > (2 * Math.PI)){
107
+ this.rotation = 0;
108
+ }
62
109
  }
63
-
64
110
  }
@@ -0,0 +1,17 @@
1
+ import { CanvasCollisionDetection } from "./collisionDetection/canvasCollisionDetection.js";
2
+ import { CanvasCollisionDetection2D } from "./collisionDetection/canvasCollisionDetection2D.js";
3
+ import { CanvasArc2D } from "./model/canvasArc2D.js";
4
+ import { CanvasCircle2D } from "./model/canvasCircle2D.js";
5
+ import { CanvasLine2D } from "./model/canvasLine2D.js";
6
+ import { CanvasRect2D } from "./model/canvasRect2D.js";
7
+ import { StyleType } from "./styleType.js";
8
+
9
+ export {
10
+ CanvasCollisionDetection,
11
+ CanvasCollisionDetection2D,
12
+ StyleType,
13
+ CanvasArc2D,
14
+ CanvasCircle2D,
15
+ CanvasLine2D,
16
+ CanvasRect2D
17
+ }
@@ -1,5 +1,5 @@
1
1
  import { CollisionDetection } from "./collisionDetection.js";
2
- import { Point2D } from "../geometry/point2D.js";
2
+ import { Point2D } from "../point2D.js";
3
3
 
4
4
  export class CollisionDetection2D extends CollisionDetection {
5
5
 
@@ -30,6 +30,9 @@ export class CollisionDetection2D extends CollisionDetection {
30
30
  target: new Point2D(target.x, target.y)
31
31
  }
32
32
  }
33
+ else{
34
+ return null;
35
+ }
33
36
  }
34
37
 
35
38
  static getRightCollisionDetected(source, target){
@@ -39,6 +42,9 @@ export class CollisionDetection2D extends CollisionDetection {
39
42
  target: new Point2D(target.x, target.y)
40
43
  }
41
44
  }
45
+ else{
46
+ return null;
47
+ }
42
48
  }
43
49
 
44
50
  static getHorizontalCollisionDetected(source, target){
@@ -48,6 +54,9 @@ export class CollisionDetection2D extends CollisionDetection {
48
54
  target: new Point2D(target.x, target.y)
49
55
  }
50
56
  }
57
+ else{
58
+ return null;
59
+ }
51
60
  }
52
61
 
53
62
  static topCollisionDetected(source, target){
@@ -73,6 +82,9 @@ export class CollisionDetection2D extends CollisionDetection {
73
82
  target: new Point2D(target.x, target.y)
74
83
  }
75
84
  }
85
+ else{
86
+ return null;
87
+ }
76
88
  }
77
89
 
78
90
  static getBottomCollisionDetected(source, target){
@@ -82,6 +94,9 @@ export class CollisionDetection2D extends CollisionDetection {
82
94
  target: new Point2D(target.x, target.y)
83
95
  }
84
96
  }
97
+ else{
98
+ return null;
99
+ }
85
100
  }
86
101
 
87
102
  static getVerticalCollisionDetected(source, target){
@@ -91,6 +106,9 @@ export class CollisionDetection2D extends CollisionDetection {
91
106
  target: new Point2D(target.x, target.y)
92
107
  }
93
108
  }
109
+ else{
110
+ return null;
111
+ }
94
112
  }
95
113
 
96
114
  static collisionDetected(source, target){
@@ -104,15 +122,18 @@ export class CollisionDetection2D extends CollisionDetection {
104
122
  target: new Point2D(target.x, target.y)
105
123
  }
106
124
  }
125
+ else{
126
+ return null;
127
+ }
107
128
  }
108
129
 
109
- static #isWithinXRange(source, target){
110
- return (((source.x + source.width) >= target.x) && (source.x <= target.x)) ||
111
- ((source.x <= (target.x + target.width)) && (source.x >= target.x));
130
+ static #isWithinXRange(source, target) {
131
+ return ((source.x + source.width) >= target.x) ||
132
+ (source.x <= (target.x + target.width));
112
133
  }
113
134
 
114
- static #isWithinYRange(source, target){
115
- return (((source.y + source.height) >= target.y) && (source.y <= target.y)) ||
116
- ((source.y <= (target.y + target.height)) && (source.y >= target.y));
135
+ static #isWithinYRange(source, target) {
136
+ return ((source.y + source.height) >= target.y) ||
137
+ (source.y <= (target.y + target.height));
117
138
  }
118
139
  }
@@ -0,0 +1,45 @@
1
+ import { Object2D } from "./object2D.js";
2
+
3
+ export class Arc2D extends Object2D {
4
+
5
+ //props
6
+ radius = 0;
7
+ startAngle = 0;
8
+ endAngle = 0;
9
+
10
+ constructor(
11
+ originX,
12
+ originY,
13
+ radius = 0,
14
+ startAngle = 0,
15
+ endAngle = 0,
16
+ xVelocity = 0.00,
17
+ yVelocity = 0.00
18
+ ) {
19
+ super(
20
+ originX,
21
+ originY,
22
+ xVelocity,
23
+ yVelocity
24
+ );
25
+ this.radius = radius;
26
+ this.startAngle = startAngle;
27
+ this.endAngle = endAngle;
28
+ }
29
+
30
+ setRadius(val){
31
+ this.radius = val;
32
+ return this;
33
+ }
34
+
35
+ setStartAngle(val){
36
+ this.startAngle = val;
37
+ return this;
38
+ }
39
+
40
+ setEndAngle(val){
41
+ this.endAngle = val;
42
+ return this;
43
+ }
44
+
45
+ }
@@ -0,0 +1,23 @@
1
+ import { Arc2D } from "./arc2D.js";
2
+
3
+ export class Circle2D extends Arc2D {
4
+
5
+ //ctor
6
+ constructor(
7
+ originX,
8
+ originY,
9
+ radius = 0,
10
+ xVelocity = 0.00,
11
+ yVelocity = 0.00
12
+ ) {
13
+ super(
14
+ originX,
15
+ originY,
16
+ radius, 0,
17
+ (Math.PI * 2),
18
+ xVelocity,
19
+ yVelocity
20
+ );
21
+ }
22
+
23
+ }
@@ -1,13 +1,19 @@
1
- export class Line2D {
1
+ import { Object2D } from "./object2D.js";
2
2
 
3
- originX;
4
- originX;
5
- targetX;
6
- targetY;
3
+ export class Line2D extends Object2D {
7
4
 
8
- constructor(originX, originY, targetX, targetY){
9
- this.originX = originX;
10
- this.originY = originY;
5
+ //props
6
+ targetX = 0;
7
+ targetY = 0;
8
+
9
+ //ctor
10
+ constructor(
11
+ originX,
12
+ originY,
13
+ targetX,
14
+ targetY
15
+ ) {
16
+ super(originX, originY);
11
17
  this.targetX = targetX;
12
18
  this.targetY = targetY;
13
19
  }
@@ -0,0 +1,51 @@
1
+ export class Object2D {
2
+
3
+ //props
4
+ originX = 0;
5
+ originY = 0;
6
+ xVelocity = 0.00;
7
+ yVelocity = 0.00;
8
+
9
+ //ctor
10
+ constructor(
11
+ originX = 0,
12
+ originY = 0,
13
+ xVelocity = 0.00,
14
+ yVelocity = 0.00
15
+ ) {
16
+ this.originX = originX;
17
+ this.originY = originY;
18
+ this.xVelocity = xVelocity;
19
+ this.yVelocity = yVelocity;
20
+ }
21
+
22
+ //prop methods
23
+ setOriginX(val){
24
+ this.originX = val;
25
+ return this;
26
+ }
27
+
28
+ setOriginY(val){
29
+ this.originY = val;
30
+ return this;
31
+ }
32
+
33
+ setXVelocity(val){
34
+ this.xVelocity = val;
35
+ return this;
36
+ }
37
+
38
+ setYVelocity(val){
39
+ this.yVelocity = val;
40
+ return this;
41
+ }
42
+ //
43
+
44
+ moveOriginXByXVelocity(){
45
+ this.originX += this.xVelocity;
46
+ }
47
+
48
+ moveOriginYByYVelocity(){
49
+ this.originY += this.yVelocity;
50
+ }
51
+ }
@@ -0,0 +1,83 @@
1
+ import { Object2D } from "./object2D.js";
2
+ import { Point2D } from "../point2D.js";
3
+ import { Line2D } from "./line2D.js";
4
+
5
+ export class Rect2D extends Object2D {
6
+
7
+ //props
8
+ height = 0;
9
+ width = 0;
10
+
11
+ //ctor
12
+ constructor(
13
+ originX,
14
+ originY,
15
+ height,
16
+ width,
17
+ xVelocity = 0.00,
18
+ yVelocity = 0.00
19
+ ) {
20
+ super(
21
+ originX,
22
+ originY,
23
+ xVelocity,
24
+ yVelocity
25
+ );
26
+ this.height = height;
27
+ this.width = width;
28
+ }
29
+
30
+ setHeight(val){
31
+ this.height = val;
32
+ return this;
33
+ }
34
+
35
+ setWidth(val){
36
+ this.width = val;
37
+ return this;
38
+ }
39
+
40
+ getTopLeftCoord(){
41
+ const x = this.originX;
42
+ const y = this.originY;
43
+ return new Point2D(x, y);
44
+ }
45
+
46
+ getTopRightCoord(){
47
+ const x = (this.originX + this.width);
48
+ const y = this.originY;
49
+ return new Point2D(x, y);
50
+ }
51
+
52
+ getTop(){
53
+ return new Line2D(this.originX, this.originY, this.originX + this.width, this.originY);
54
+ }
55
+
56
+ getBottomRightCoord(){
57
+ const x = (this.originX + this.width);
58
+ const y = (this.originY + this.height);
59
+ return new Point2D(x, y);
60
+ }
61
+
62
+ getBottomLeftCoord(){
63
+ const x = this.originX;
64
+ const y = (this.originY + this.height);
65
+ return new Point2D(x, y);
66
+ }
67
+
68
+ getBottom(){
69
+ return new Line2D(this.originX, this.originY + this.height, this.originX + this.width, this.originY + this.height);
70
+ }
71
+
72
+ getCenterCoord(){
73
+ const x = ((this.originX + this.width) / 2);
74
+ const y = ((this.originY + this.height) / 2);
75
+ return new Point2D(x, y);
76
+ }
77
+
78
+ getCoordinates(){
79
+ //clockwise from origin x, y ie topleft
80
+ //[topleft, topright, bottomright, bottomleft, center]
81
+ return [this.getTopLeftCoord(), this.getTopRightCoord(), this.getBottomRightCoord(), this.getBottomLeftCoord(), this.getCenterCoord()];
82
+ }
83
+ }
@@ -1,13 +1,12 @@
1
- import { ObjectBase2D } from "./ObjectBase2D.js";
1
+ import { Object2D } from "../../2D/model/object2D.js";
2
2
 
3
- export class ObjectBase3D extends ObjectBase2D {
3
+ export class Object3D extends Object2D {
4
4
 
5
5
  //props
6
- //type int
7
6
  z;
8
- //type float
9
- zVelocity;
7
+ zVelocity = 0.00;
10
8
 
9
+ //ctor
11
10
  constructor(x, y, z, xVelocity = 0.00, yVelocity = 0.00, zVelocity = 0.00) {
12
11
  super(x, y, xVelocity, yVelocity);
13
12
  this.z = z;
@@ -1,4 +1,4 @@
1
- import { Point2D } from "./point2D.js";
1
+ import { Point2D } from "../2D/point2D.js";
2
2
 
3
3
  export class Point3D extends Point2D {
4
4
 
@@ -0,0 +1,23 @@
1
+ import { CollisionDetection } from "./2D/collisionDetection/collisionDetection.js";
2
+ import { CollisionDetection2D } from "./2D/collisionDetection/collisionDetection2D.js";
3
+ import { Point2D } from "./2D/point2D.js";
4
+ import { Point3D } from "./3D/point3D.js";
5
+ import { Object2D } from "./2D/model/object2D.js";
6
+ import { Object3D } from "./3D/model/object3D.js";
7
+ import { Arc2D } from "./2D/model/arc2D.js";
8
+ import { Circle2D } from "./2D/model/circle2D.js";
9
+ import { Line2D } from "./2D/model/line2D.js";
10
+ import { Rect2D } from "./2D/model/rect2D.js";
11
+
12
+ export {
13
+ CollisionDetection,
14
+ CollisionDetection2D,
15
+ Point2D,
16
+ Point3D,
17
+ Object2D,
18
+ Object3D,
19
+ Arc2D,
20
+ Circle2D,
21
+ Line2D,
22
+ Rect2D
23
+ }
package/module.js CHANGED
@@ -2,26 +2,21 @@
2
2
  import {
3
3
  KeyCode,
4
4
  KeyboardControlMapBase
5
- } from "./control/control-module.js";
6
-
7
- import {
8
- Point2D,
9
- Point3D
10
- } from "./geometry/geometry-module.js";
5
+ } from "./controller/module.js";
11
6
 
12
7
  import {
13
8
  CollisionDetection,
14
- CollisionDetection2D
15
- } from "./collisionDetection/collisionDetection-module.js";
16
-
17
- import {
18
- ObjectBase2D,
19
- ObjectBase3D,
9
+ CollisionDetection2D,
10
+ Point2D,
11
+ Point3D,
12
+ Object2D,
13
+ Object3D,
20
14
  Arc2D,
21
15
  Circle2D,
22
16
  Line2D,
23
17
  Rect2D
24
- } from "./model/model-module.js";
18
+ } from "./geometry/module.js";
19
+
25
20
 
26
21
  import {
27
22
  StyleType,
@@ -31,7 +26,7 @@ import {
31
26
  CanvasCircle2D,
32
27
  CanvasLine2D,
33
28
  CanvasRect2D
34
- } from "./canvas/canvas-module.js";
29
+ } from "./canvas/module.js";
35
30
 
36
31
 
37
32
  export {
@@ -42,8 +37,8 @@ export {
42
37
  CollisionDetection,
43
38
  CollisionDetection2D,
44
39
  StyleType,
45
- ObjectBase2D,
46
- ObjectBase3D,
40
+ Object2D,
41
+ Object3D,
47
42
  Arc2D,
48
43
  Circle2D,
49
44
  Line2D,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canvas-based-core",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "canvas-based-core",
5
5
  "homepage": "https://github.com/pr1v4te4cc0unt/canvas-based-core#readme",
6
6
  "bugs": {
package/test.js CHANGED
@@ -1,27 +1,37 @@
1
- import * as Core from "./moduleExport.js";
1
+ import * as Core from "./module.js";
2
2
 
3
3
  var canvas = document.querySelector("canvas");
4
4
  var ctx = canvas.getContext("2d");
5
5
 
6
- var circle = new Core.CanvasCircle2D(ctx, 50, 50, 10);
7
- console.log(circle);
6
+ // var circle = new Core.CanvasCircle2D(50, 50, 10);
7
+ // console.log(circle);
8
8
 
9
- setInterval(() => circle.draw(), 1000);
10
- setInterval(() => circle.clear(), 2000);
9
+ // setInterval(() => circle.draw(ctx), 1000);
10
+ // setInterval(() => circle.clear(), 2000);
11
11
 
12
- var rectOne = new Core.CanvasRect2D(ctx, 100, 50, 10, 10).setStyle("black");
13
- rectOne.draw();
12
+ var rectOne = new Core.CanvasRect2D(100, 50, 30, 30);
13
+ rectOne.setRotationSpeed(0.05).draw(ctx);
14
14
  // console.log(rectOne);
15
15
 
16
- var rectTwo = new Core.CanvasRect2D(ctx, 120, 50, 10, 10).setStyle("green");
17
- rectTwo.draw();
16
+ var rectTwo = new Core.CanvasRect2D(130, 50, 10, 10).setStyle("green");
17
+ rectTwo.draw(ctx);
18
18
  // console.log(rectTwo);
19
19
 
20
- var rectThree = new Core.CanvasRect2D(ctx, 140, 50, 10, 10).setStyle("blue");
21
- rectThree.draw();
22
-
23
- rectOne.draw();
24
- rectTwo.draw();
25
- rectThree.draw();
20
+ var rectThree = new Core.CanvasRect2D(150, 50, 10, 10).setStyle("blue");
21
+ rectThree.setRotationSpeed(-0.05).draw(ctx);
26
22
  // console.log(rectOne);
27
23
 
24
+ function animate(){
25
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
26
+
27
+ rectOne.spin(ctx);
28
+
29
+ rectTwo.draw(ctx);
30
+
31
+ rectThree.draw(ctx);
32
+
33
+ requestAnimationFrame(animate);
34
+ }
35
+
36
+ animate();
37
+
@@ -1,25 +0,0 @@
1
- import {
2
- CanvasCollisionDetection,
3
- CanvasCollisionDetection2D
4
- } from "./collisionDetection/canvas-collisionDetection-module.js";
5
-
6
- import {
7
- CanvasArc2D,
8
- CanvasCircle2D,
9
- CanvasLine2D,
10
- CanvasRect2D
11
- } from "./model/canvas-model-module.js";
12
-
13
- import {
14
- StyleType
15
- } from "./styleType.js";
16
-
17
- export {
18
- CanvasCollisionDetection,
19
- CanvasCollisionDetection2D,
20
- StyleType,
21
- CanvasArc2D,
22
- CanvasCircle2D,
23
- CanvasLine2D,
24
- CanvasRect2D
25
- }
@@ -1,7 +0,0 @@
1
- import { CanvasCollisionDetection } from "./canvasCollisionDetection.js";
2
- import { CanvasCollisionDetection2D } from "./canvasCollisionDetection2D.js";
3
-
4
- export {
5
- CanvasCollisionDetection,
6
- CanvasCollisionDetection2D
7
- }
@@ -1,11 +0,0 @@
1
- import { CanvasArc2D } from "./canvasArc2D.js";
2
- import { CanvasCircle2D } from "./canvasCircle2D.js";
3
- import { CanvasLine2D } from "./canvasLine2D.js";
4
- import { CanvasRect2D } from "./canvasRect2D.js";
5
-
6
- export {
7
- CanvasArc2D,
8
- CanvasCircle2D,
9
- CanvasLine2D,
10
- CanvasRect2D
11
- }
@@ -1,7 +0,0 @@
1
- import { CollisionDetection } from "./collisionDetection.js";
2
- import { CollisionDetection2D } from "./collisionDetection2D.js";
3
-
4
- export {
5
- CollisionDetection,
6
- CollisionDetection2D
7
- }
@@ -1,7 +0,0 @@
1
- import { Point2D } from "./point2D.js";
2
- import { Point3D } from "./point3D.js";
3
-
4
- export {
5
- Point2D,
6
- Point3D
7
- }
package/model/arc2D.js DELETED
@@ -1,33 +0,0 @@
1
- import { ObjectBase2D } from "./ObjectBase2D.js";
2
-
3
- export class Arc2D extends ObjectBase2D {
4
-
5
- //props
6
- //type int
7
- radius = 0;
8
- startAngle = 0;
9
- endAngle = 0;
10
-
11
- constructor(x, y, radius = 0, startAngle = 0, endAngle = 0, xVelocity = 0.00, yVelocity = 0.00) {
12
- super(x, y, xVelocity, yVelocity);
13
- this.radius = radius;
14
- this.startAngle = startAngle;
15
- this.endAngle = endAngle;
16
- }
17
-
18
- setRadius(val){
19
- this.radius = val;
20
- return this;
21
- }
22
-
23
- setStartAngle(val){
24
- this.startAngle = val;
25
- return this;
26
- }
27
-
28
- setEndAngle(val){
29
- this.endAngle = val;
30
- return this;
31
- }
32
-
33
- }
package/model/circle2D.js DELETED
@@ -1,9 +0,0 @@
1
- import { Arc2D } from "./arc2D.js";
2
-
3
- export class Circle2D extends Arc2D {
4
-
5
- constructor(x, y, radius = 0, xVelocity = 0.00, yVelocity = 0.00) {
6
- super(x, y, radius, 0, (Math.PI * 2), xVelocity, yVelocity);
7
- }
8
-
9
- }
@@ -1,15 +0,0 @@
1
- import { Arc2D } from "./arc2D.js";
2
- import { Circle2D } from "./circle2D.js";
3
- import { Line2D } from "./line2D.js";
4
- import { Rect2D } from "./rect2D.js";
5
- import { ObjectBase2D } from "./ObjectBase2D.js";
6
- import { ObjectBase3D } from "./ObjectBase3D.js";
7
-
8
- export {
9
- ObjectBase2D,
10
- ObjectBase3D,
11
- Arc2D,
12
- Circle2D,
13
- Line2D,
14
- Rect2D
15
- }
@@ -1,48 +0,0 @@
1
- export class ObjectBase2D {
2
-
3
- //props
4
- //type int
5
- x;
6
- y;
7
- //type float
8
- xVelocity;
9
- yVelocity;
10
-
11
- //ctor
12
- constructor(x, y, xVelocity = 0.00, yVelocity = 0.00) {
13
- this.x = x;
14
- this.y = y;
15
- this.xVelocity = xVelocity;
16
- this.yVelocity = yVelocity;
17
- }
18
-
19
- //prop methods
20
- setX(val){
21
- this.x = val;
22
- return this;
23
- }
24
-
25
- setY(val){
26
- this.y = val;
27
- return this;
28
- }
29
-
30
- setXVelocity(val){
31
- this.xVelocity = val;
32
- return this;
33
- }
34
-
35
- setYVelocity(val){
36
- this.yVelocity = val;
37
- return this;
38
- }
39
- //
40
-
41
- moveXByXVelocity(){
42
- this.x += this.xVelocity;
43
- }
44
-
45
- moveYByYVelocity(){
46
- this.y += this.yVelocity;
47
- }
48
- }
package/model/rect2D.js DELETED
@@ -1,62 +0,0 @@
1
- import { ObjectBase2D } from "./ObjectBase2D.js";
2
-
3
- export class Rect2D extends ObjectBase2D {
4
-
5
- //props
6
- //type int
7
- height;
8
- width;
9
-
10
- constructor(x, y, height, width, xVelocity = 0.00, yVelocity = 0.00) {
11
- super(x, y, xVelocity, yVelocity);
12
- this.height = height;
13
- this.width = width;
14
- }
15
-
16
- setHeight(val){
17
- this.height = val;
18
- return this;
19
- }
20
-
21
- setWidth(val){
22
- this.width = val;
23
- return this;
24
- }
25
-
26
- getTopLeftCoord(){
27
- const x = this.x;
28
- const y = this.y;
29
- return new Point2D(x, y);
30
- }
31
-
32
- getTopRightCoord(){
33
- const x = (this.x + this.width);
34
- const y = this.y;
35
- return new Point2D(x, y);
36
- }
37
-
38
- getBottomRightCoord(){
39
- const x = (this.x + this.width);
40
- const y = (this.y + this.height);
41
- return new Point2D(x, y);
42
- }
43
-
44
- getBottomLeftCoord(){
45
- const x = this.x;
46
- const y = (this.y + this.height);
47
- return new Point2D(x, y);
48
- }
49
-
50
- getCenterCoord(){
51
- const x = ((this.x + this.width) / 2);
52
- const y = ((this.y + this.height) / 2);
53
- return new Point2D(x, y);
54
- }
55
-
56
- getCoordinates(){
57
- //clockwise from origin x, y ie topleft
58
- //[topleft, topright, bottomright, bottomleft, center]
59
- return [this.getTopLeftCoord(), this.getTopRightCoord(), this.getBottomRightCoord(), this.getBottomLeftCoord(), this.getCenterCoord()];
60
- }
61
-
62
- }
File without changes
File without changes