font fix, blur, coloring controls

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("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,

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;

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;

style.css

@@ -2,7 +2,7 @@ body {
     margin: 0;
     overflow: hidden;
     color: #555555;
-    font-family: "sans-serif";
+    font-family: sans-serif;
 }
 
 * {

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;