font fix, blur, coloring controls

This commit is contained in:
Blue 2018-11-20 17:30:01 +03:00
parent 8511d8d2ec
commit 34c3030e13
5 changed files with 26 additions and 3 deletions

View File

@ -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,

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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;