111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
import factory from "./painting/factory.js";
|
|
import Shape from "./painting/shape.js";
|
|
|
|
import Canvas from "./ui/canvas.js";
|
|
import Button from "./ui/button.js";
|
|
import Panel from "./ui/panel.js";
|
|
|
|
import Form from "./ui/editors/form.js";
|
|
import NumericBox from "./ui/editors/numericBox.js";
|
|
import SwitchBox from "./ui/editors/switchBox.js";
|
|
|
|
document.body.innerHTML = "";
|
|
const maxPanelWidth = 300;
|
|
const panelPaddingTop = 90;
|
|
|
|
Shape.setBounding(window.innerWidth, window.innerHeight);
|
|
let canvas = new Canvas(window.innerWidth, window.innerHeight);
|
|
|
|
let paintButton = new Button("paint");
|
|
paintButton.addHandler(paint);
|
|
|
|
let panelWidth = Math.min(maxPanelWidth ,window.innerWidth - 20);
|
|
let panelHeight = window.innerHeight - 20;
|
|
let panel = new Panel(panelWidth, panelHeight);
|
|
panel.element.style.paddingTop = panelPaddingTop + "px";
|
|
panel.setPosition(10, 10);
|
|
|
|
let settings = new Button("gear");
|
|
settings.addHandler(panel.toggle.bind(panel));
|
|
|
|
let clear = new Button("blank");
|
|
clear.addHandler(canvas.clear.bind(canvas));
|
|
|
|
let downloadButton = new Button("download", true);
|
|
downloadButton.element.download = "fantasy.png";
|
|
|
|
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);
|
|
|
|
document.body.appendChild(canvas.element);
|
|
document.body.appendChild(panel.element);
|
|
document.body.appendChild(paintButton.element);
|
|
document.body.appendChild(settings.element);
|
|
document.body.appendChild(clear.element);
|
|
document.body.appendChild(downloadButton.element);
|
|
|
|
adjustButtons(panelWidth);
|
|
paint();
|
|
|
|
function onWindowResize(e) {
|
|
Shape.setBounding(window.innerWidth, window.innerHeight);
|
|
canvas.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
let panelWidth = Math.min(maxPanelWidth ,window.innerWidth - 20);
|
|
panel.setSize(panelWidth, window.innerHeight - 20);
|
|
adjustButtons(panelWidth);
|
|
}
|
|
|
|
function paint() {
|
|
canvas.setBlurStrength(blurBox.value);
|
|
Shape.setColoring(coloringBox.value);
|
|
factory.setCollection({
|
|
rectangle: rectanglesBox.value,
|
|
circle: circlesBox.value,
|
|
triangle: trianglesBox.value
|
|
});
|
|
let amount;
|
|
if (randomBox.value) {
|
|
amount = Math.floor(Math.random() * amountBox.value);
|
|
} else {
|
|
amount = amountBox.value;
|
|
}
|
|
|
|
for (let i = 0; i < amount; ++i) {
|
|
let shape = factory.createRandomShape();
|
|
canvas.draw(shape);
|
|
}
|
|
|
|
downloadButton.element.href = canvas.getData();
|
|
}
|
|
|
|
function adjustButtons(width) {
|
|
let hc = width / 8;
|
|
let c = width / 4;
|
|
let ws = -Button.width / 2 + 10;
|
|
|
|
paintButton.setPosition(hc + ws, 25);
|
|
settings.setPosition(c + hc + ws, 25);
|
|
clear.setPosition(2 * c + hc + ws, 25);
|
|
downloadButton.setPosition(3 * c + hc + ws, 25);
|
|
} |