From 34c3030e131a02bf4f75d5a9593df500518589b6 Mon Sep 17 00:00:00 2001
From: blue <blue@macaw.me>
Date: Tue, 20 Nov 2018 17:30:01 +0300
Subject: [PATCH] font fix, blur, coloring controls

---
 main.js           | 9 ++++++++-
 painting/color.js | 4 ++++
 painting/shape.js | 6 +++++-
 style.css         | 2 +-
 ui/canvas.js      | 8 ++++++++
 5 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/main.js b/main.js
index dcc8d32..efa7c33 100644
--- a/main.js
+++ b/main.js
@@ -34,18 +34,23 @@ clear.addHandler(canvas.clear.bind(canvas));
 window.addEventListener("resize", onWindowResize, false);
 
 let form = new Form(panelWidth, panelHeight - panelPaddingTop);
+let coloringBox = new SwitchBox(true, 40, 20);
 let randomBox = new SwitchBox(true, 40, 20);
 let amountBox = new NumericBox(100, 30);
 amountBox.setValue(100);
 let circlesBox = new SwitchBox(true, 40, 20);
 let rectanglesBox = new SwitchBox(true, 40, 20);
 let trianglesBox = new SwitchBox(true, 40, 20);
+let blurBox = new NumericBox(100, 30);
+blurBox.setValue(0);
 
-form.addLine("random", "Random amount of shapes",randomBox);
+form.addLine("coloring", "Colored shapes", coloringBox);
+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);
+form.addLine("blur", "Blur strength", blurBox);
 
 panel.add(form);
 
@@ -68,6 +73,8 @@ function onWindowResize(e) {
 }
 
 function paint() {
+    canvas.setBlurStrength(blurBox.value);
+    Shape.setColoring(coloringBox.value);
     factory.setCollection({
         rectangle: rectanglesBox.value,
         circle: circlesBox.value,
diff --git a/painting/color.js b/painting/color.js
index 3a040b0..085296e 100644
--- a/painting/color.js
+++ b/painting/color.js
@@ -35,6 +35,10 @@ class Color {
     static random() {
         return new Color(Math.random(), Math.random(), Math.random(), Math.random());
     }
+    static randomGray() {
+        let intensiviry = Math.random();
+        return new Color(intensiviry, intensiviry, intensiviry, Math.random());
+    }
 }
 
 export default Color;
diff --git a/painting/shape.js b/painting/shape.js
index 671a17c..d1bc20f 100644
--- a/painting/shape.js
+++ b/painting/shape.js
@@ -21,7 +21,7 @@ class Shape {
         return {
             x: Math.floor(Math.random() * this.maxX),
             y: Math.floor(Math.random() * this.maxY),
-            color: Color.random()
+            color: coloring ? Color.random() : Color.randomGray()
         }
     }
     static fromOptions(o) {
@@ -31,9 +31,13 @@ class Shape {
         maxX = w;
         maxY = h;
     }
+    static setColoring(bool) {
+        coloring = bool !== true;
+    }
 }
 
 let maxX = 1000;
 let maxY = 1000;
+let coloring = true;
 
 export default Shape;
diff --git a/style.css b/style.css
index cbd9f93..57bfa9a 100644
--- a/style.css
+++ b/style.css
@@ -2,7 +2,7 @@ body {
     margin: 0;
     overflow: hidden;
     color: #555555;
-    font-family: "sans-serif";
+    font-family: sans-serif;
 }
 
 * {
diff --git a/ui/canvas.js b/ui/canvas.js
index 65a4510..f88742d 100644
--- a/ui/canvas.js
+++ b/ui/canvas.js
@@ -3,7 +3,10 @@ import UI from "./ui.js";
 class Canvas extends UI {
     constructor(width, height) {
         super(document.createElement("canvas"), width, height);
+
+        this._blurStrength = 0;
         this._ctx = this.element.getContext("2d");
+        this._ctx.filter = "blur(" + this._blurStrength + "px)";
     }
     clear() {
         this.resetStyle();
@@ -14,6 +17,7 @@ class Canvas extends UI {
     }
     resetStyle() {
         this._ctx.fillStyle = "";
+        this._ctx.filter = "blur(" + this._blurStrength + "px)";
     }
     draw(shape) {
         this._ctx.fillStyle = shape.color.rgba();
@@ -26,6 +30,10 @@ class Canvas extends UI {
         this.element.width = width;
         this.element.height = height;
     }
+    setBlurStrength(num) {
+        this._blurStrength = parseInt(num) || 0;
+        this._ctx.filter = "blur(" + this._blurStrength + "px)";
+    }
 }
 
 export default Canvas;