From c1bea776b29a38d24850e6255ae4ddf63168ae5b Mon Sep 17 00:00:00 2001 From: blue Date: Mon, 19 Nov 2018 10:59:20 +0300 Subject: [PATCH] window bounding, resizing with window resizing, new shape: circle, margins removed, random amount of objects to be painted --- index.html | 2 +- main.js | 17 ++++++++++++++--- painting/canvas.js | 10 +++++++--- painting/circle.js | 25 +++++++++++++++++++++++++ painting/factory.js | 13 ++++++------- painting/rectangle.js | 7 ++----- painting/shape.js | 21 ++++++++++++++++----- style.css | 5 ++++- 8 files changed, 75 insertions(+), 25 deletions(-) create mode 100644 painting/circle.js diff --git a/index.html b/index.html index 9a3fc39..203fad1 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,6 @@ -
Nopes
+
Loading...
diff --git a/main.js b/main.js index 901e546..e9f709d 100644 --- a/main.js +++ b/main.js @@ -1,10 +1,21 @@ import factory from "./painting/factory.js"; import Canvas from "./painting/canvas.js"; +import Shape from "./painting/shape.js"; document.body.innerHTML = ""; -let canvas = new Canvas(); +Shape.setBounding(window.innerWidth, window.innerHeight); +let canvas = new Canvas(window.innerWidth, window.innerHeight); document.body.appendChild(canvas.element); -let shape = factory.createRandomShape(); -canvas.draw(shape); +let amount = Math.floor(Math.random() * 100 + 50); + +for (let i = 0; i < amount; ++i) { + let shape = factory.createRandomShape(); + canvas.draw(shape); +} + +window.addEventListener("resize", function(e) { + Shape.setBounding(window.innerWidth, window.innerHeight); + canvas.resize(window.innerWidth, window.innerHeight); +}, false); \ No newline at end of file diff --git a/painting/canvas.js b/painting/canvas.js index 7007732..e42317f 100644 --- a/painting/canvas.js +++ b/painting/canvas.js @@ -1,10 +1,10 @@ import Color from "./color.js"; class Canvas { - constructor() { + constructor(width, height) { this.element = document.createElement("canvas"); - this.element.width = 1000; - this.element.height = 1000; + this.element.width = width; + this.element.height = height; this._ctx = this.element.getContext("2d"); } setFillColor(color) { @@ -18,6 +18,10 @@ class Canvas { shape.draw(this._ctx); this.resetStyle(); } + resize(width, height) { + this.element.width = width; + this.element.height = height; + } } export default Canvas; diff --git a/painting/circle.js b/painting/circle.js new file mode 100644 index 0000000..85ff14d --- /dev/null +++ b/painting/circle.js @@ -0,0 +1,25 @@ +import Shape from "./shape.js"; + +class Circle extends Shape { + constructor(x, y, color, r) { + super(x, y, color); + + this._r = r; + } + draw(ctx) { + ctx.arc(this._x, this._y, this._r, 0, Math.PI * 2); + } + + static randomOptions() { + let opts = super.randomOptions(); + + opts.r = Math.floor(Math.random() * (this.maxY / 2 - opts.x)); + + return opts; + } + static fromOptions(o) { + return new Circle(o.x, o.y, o.color, o.r); + } +} + +export default Circle; \ No newline at end of file diff --git a/painting/factory.js b/painting/factory.js index 4b95c29..af25bc4 100644 --- a/painting/factory.js +++ b/painting/factory.js @@ -1,16 +1,15 @@ import Rectangle from "./rectangle.js"; +import Circle from "./circle.js"; const options = [ - Rectangle -] + Rectangle, + Circle +]; export default { createRandomShape: function() { let Shape = options[Math.floor(Math.random() * options.length)]; - - let opts = Shape.randomOptions(); - let shape = Shape.fromOptions(opts); - - return shape; + + return Shape.fromOptions(Shape.randomOptions()); } }; diff --git a/painting/rectangle.js b/painting/rectangle.js index 9144606..d83ff36 100644 --- a/painting/rectangle.js +++ b/painting/rectangle.js @@ -14,8 +14,8 @@ class Rectangle extends Shape { static randomOptions() { let opts = super.randomOptions(); - opts.width = Math.floor(Math.random() * maxWidth); - opts.height = Math.floor(Math.random() * maxHeight); + opts.width = Math.floor(Math.random() * (this.maxX - opts.x)); + opts.height = Math.floor(Math.random() * (this.maxY - opts.y)); return opts; } @@ -24,7 +24,4 @@ class Rectangle extends Shape { } } -const maxWidth = 1000; -const maxHeight = 1000; - export default Rectangle; diff --git a/painting/shape.js b/painting/shape.js index a4d4d24..671a17c 100644 --- a/painting/shape.js +++ b/painting/shape.js @@ -9,20 +9,31 @@ class Shape { draw(context) { throw new Error("A pure virtual method call of a shape " + this.constructor.name); } - + + static get maxX() { + return maxX; + } + static get maxY() { + return maxY; + } + static randomOptions() { return { - x: Math.floor(Math.random() * maxX), - y: Math.floor(Math.random() * maxY), + x: Math.floor(Math.random() * this.maxX), + y: Math.floor(Math.random() * this.maxY), color: Color.random() } } static fromOptions(o) { return new Shape(o.x, o.y, o.color); } + static setBounding(w, h) { + maxX = w; + maxY = h; + } } -const maxX = 1000; -const maxY = 1000; +let maxX = 1000; +let maxY = 1000; export default Shape; diff --git a/style.css b/style.css index 8b13789..d6954bb 100644 --- a/style.css +++ b/style.css @@ -1 +1,4 @@ - +body { + margin: 0; + overflow: hidden; +} \ No newline at end of file