diff --git a/main.js b/main.js index ce4f935..04da06b 100644 --- a/main.js +++ b/main.js @@ -13,9 +13,6 @@ document.body.innerHTML = ""; const maxPanelWidth = 300; const panelPaddingTop = 90; -let random = true; -let amountOfShapes = 100; - Shape.setBounding(window.innerWidth, window.innerHeight); let canvas = new Canvas(window.innerWidth, window.innerHeight); @@ -37,12 +34,18 @@ clear.addHandler(canvas.clear.bind(canvas)); window.addEventListener("resize", onWindowResize, false); let form = new Form(panelWidth, panelHeight - panelPaddingTop); -let randomBox = new SwitchBox(random, 40, 60); +let randomBox = new SwitchBox(true, 40, 20); let amountBox = new NumericBox(100, 30); -amountBox.setValue(amountOfShapes); +amountBox.setValue(100); +let circlesBox = new SwitchBox(this, 40, 20); +let rectanglesBox = new SwitchBox(this, 40, 20); +let trianglesBox = new SwitchBox(this, 40, 20); form.addLine("random", "Random amount of shapes",randomBox); form.addLine("amount", "Amount of shapes", amountBox); +form.addLine("circles", "Probability of circles", circlesBox); +form.addLine("rectangles", "Probability of rectangles", rectanglesBox); +form.addLine("triangles", "Probability of triangles", trianglesBox); panel.add(form); @@ -65,11 +68,16 @@ function onWindowResize(e) { } function paint() { + factory.setCollection({ + rectangle: rectanglesBox.value, + circle: circlesBox.value, + triangle: trianglesBox.value + }); let amount; - if (random) { - amount = Math.floor(Math.random() * amountOfShapes); + if (randomBox.value) { + amount = Math.floor(Math.random() * amountBox.value); } else { - amount = amountOfShapes; + amount = amountBox.value; } for (let i = 0; i < amount; ++i) { @@ -79,7 +87,7 @@ function paint() { } function adjustButtons(width) { - paintButton.setPosition(width / 4 - Button.width, 25); - settings.setPosition(width / 2 - Button.width / 2, 25); - clear.setPosition(width * 0.75, 25); + paintButton.setPosition(width / 4 - Button.width + 10, 25); + settings.setPosition(width / 2 - Button.width / 2 + 10, 25); + clear.setPosition(width * 0.75 + 10, 25); } \ No newline at end of file diff --git a/painting/factory.js b/painting/factory.js index af25bc4..00eef4f 100644 --- a/painting/factory.js +++ b/painting/factory.js @@ -1,15 +1,31 @@ import Rectangle from "./rectangle.js"; import Circle from "./circle.js"; +import Triangle from "./triangle.js"; -const options = [ - Rectangle, - Circle +const options = { + rectangle: Rectangle, + circle : Circle, + triangle : Triangle +}; + +let collection = [ + Circle, Rectangle, Triangle ]; export default { createRandomShape: function() { - let Shape = options[Math.floor(Math.random() * options.length)]; + let Shape = collection[Math.floor(Math.random() * collection.length)]; return Shape.fromOptions(Shape.randomOptions()); + }, + setCollection(obj) { + collection = []; + let keys = Object.keys(obj); + for (let i = 0; i < keys.length; ++i) { + let key = keys[i]; + if (obj[key]) { + collection.push(options[key]); + } + } } }; diff --git a/painting/triangle.js b/painting/triangle.js new file mode 100644 index 0000000..0e1e0e0 --- /dev/null +++ b/painting/triangle.js @@ -0,0 +1,37 @@ +import Shape from "./shape.js"; + +class Triangle extends Shape { + constructor(x, y, color, x1, y1, x2, y2) { + super(x, y, color); + + this._x1 = x1; + this._y1 = y1; + this._x2 = x2; + this._y2 = y2; + } + draw(ctx) { + ctx.beginPath(); + ctx.moveTo(this._x, this._y); + ctx.lineTo(this._x1, this._y1); + ctx.lineTo(this._x2, this._y2); + ctx.fill(); + } + + static randomOptions() { + let opts = super.randomOptions(); + let opts1 = super.randomOptions(); + let opts2 = super.randomOptions(); + + opts.x1 = opts1.x; + opts.y1 = opts1.y; + opts.x2 = opts2.x; + opts.y2 = opts2.y; + + return opts; + } + static fromOptions(o) { + return new Triangle(o.x, o.y, o.color, o.x1, o.y1, o.x2, o.y2); + } +} + +export default Triangle; \ No newline at end of file diff --git a/style.css b/style.css index b21f314..cbd9f93 100644 --- a/style.css +++ b/style.css @@ -88,6 +88,8 @@ button:hover { width: 100%; outline: none; color: #555555; + font-size: 16px; + text-align: center; -webkit-box-shadow: inset 0px 0px 0 #555555; -moz-box-shadow: inset 0px 0px 0 #555555; box-shadow: inset 0px 0px 0 #555555; @@ -128,7 +130,7 @@ button:hover { } .form > table td { - vertical-align: center; + vertical-align: middle; } .form > table td:nth-child(1) { @@ -137,4 +139,8 @@ button:hover { .form > table td:nth-child(2) { width: 40%; +} + +.form > table td:nth-child(2) > * { + float: right; } \ No newline at end of file