window bounding, resizing with window resizing, new shape: circle, margins removed, random amount of objects to be painted
This commit is contained in:
parent
2f21b26c64
commit
c1bea776b2
|
|
@ -14,6 +14,6 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="main">Nopes<div>
|
<div id="main">Loading...<div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
17
main.js
17
main.js
|
|
@ -1,10 +1,21 @@
|
||||||
import factory from "./painting/factory.js";
|
import factory from "./painting/factory.js";
|
||||||
import Canvas from "./painting/canvas.js";
|
import Canvas from "./painting/canvas.js";
|
||||||
|
import Shape from "./painting/shape.js";
|
||||||
|
|
||||||
document.body.innerHTML = "";
|
document.body.innerHTML = "";
|
||||||
|
|
||||||
let canvas = new Canvas();
|
Shape.setBounding(window.innerWidth, window.innerHeight);
|
||||||
|
let canvas = new Canvas(window.innerWidth, window.innerHeight);
|
||||||
document.body.appendChild(canvas.element);
|
document.body.appendChild(canvas.element);
|
||||||
|
|
||||||
let shape = factory.createRandomShape();
|
let amount = Math.floor(Math.random() * 100 + 50);
|
||||||
canvas.draw(shape);
|
|
||||||
|
for (let i = 0; i < amount; ++i) {
|
||||||
|
let shape = factory.createRandomShape();
|
||||||
|
canvas.draw(shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("resize", function(e) {
|
||||||
|
Shape.setBounding(window.innerWidth, window.innerHeight);
|
||||||
|
canvas.resize(window.innerWidth, window.innerHeight);
|
||||||
|
}, false);
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import Color from "./color.js";
|
import Color from "./color.js";
|
||||||
|
|
||||||
class Canvas {
|
class Canvas {
|
||||||
constructor() {
|
constructor(width, height) {
|
||||||
this.element = document.createElement("canvas");
|
this.element = document.createElement("canvas");
|
||||||
this.element.width = 1000;
|
this.element.width = width;
|
||||||
this.element.height = 1000;
|
this.element.height = height;
|
||||||
this._ctx = this.element.getContext("2d");
|
this._ctx = this.element.getContext("2d");
|
||||||
}
|
}
|
||||||
setFillColor(color) {
|
setFillColor(color) {
|
||||||
|
|
@ -18,6 +18,10 @@ class Canvas {
|
||||||
shape.draw(this._ctx);
|
shape.draw(this._ctx);
|
||||||
this.resetStyle();
|
this.resetStyle();
|
||||||
}
|
}
|
||||||
|
resize(width, height) {
|
||||||
|
this.element.width = width;
|
||||||
|
this.element.height = height;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Canvas;
|
export default Canvas;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Shape from "./shape.js";
|
||||||
|
|
||||||
|
class Circle extends Shape {
|
||||||
|
constructor(x, y, color, r) {
|
||||||
|
super(x, y, color);
|
||||||
|
|
||||||
|
this._r = r;
|
||||||
|
}
|
||||||
|
draw(ctx) {
|
||||||
|
ctx.arc(this._x, this._y, this._r, 0, Math.PI * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
static randomOptions() {
|
||||||
|
let opts = super.randomOptions();
|
||||||
|
|
||||||
|
opts.r = Math.floor(Math.random() * (this.maxY / 2 - opts.x));
|
||||||
|
|
||||||
|
return opts;
|
||||||
|
}
|
||||||
|
static fromOptions(o) {
|
||||||
|
return new Circle(o.x, o.y, o.color, o.r);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Circle;
|
||||||
|
|
@ -1,16 +1,15 @@
|
||||||
import Rectangle from "./rectangle.js";
|
import Rectangle from "./rectangle.js";
|
||||||
|
import Circle from "./circle.js";
|
||||||
|
|
||||||
const options = [
|
const options = [
|
||||||
Rectangle
|
Rectangle,
|
||||||
]
|
Circle
|
||||||
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
createRandomShape: function() {
|
createRandomShape: function() {
|
||||||
let Shape = options[Math.floor(Math.random() * options.length)];
|
let Shape = options[Math.floor(Math.random() * options.length)];
|
||||||
|
|
||||||
let opts = Shape.randomOptions();
|
return Shape.fromOptions(Shape.randomOptions());
|
||||||
let shape = Shape.fromOptions(opts);
|
|
||||||
|
|
||||||
return shape;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,8 @@ class Rectangle extends Shape {
|
||||||
static randomOptions() {
|
static randomOptions() {
|
||||||
let opts = super.randomOptions();
|
let opts = super.randomOptions();
|
||||||
|
|
||||||
opts.width = Math.floor(Math.random() * maxWidth);
|
opts.width = Math.floor(Math.random() * (this.maxX - opts.x));
|
||||||
opts.height = Math.floor(Math.random() * maxHeight);
|
opts.height = Math.floor(Math.random() * (this.maxY - opts.y));
|
||||||
|
|
||||||
return opts;
|
return opts;
|
||||||
}
|
}
|
||||||
|
|
@ -24,7 +24,4 @@ class Rectangle extends Shape {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const maxWidth = 1000;
|
|
||||||
const maxHeight = 1000;
|
|
||||||
|
|
||||||
export default Rectangle;
|
export default Rectangle;
|
||||||
|
|
|
||||||
|
|
@ -9,20 +9,31 @@ class Shape {
|
||||||
draw(context) {
|
draw(context) {
|
||||||
throw new Error("A pure virtual method call of a shape " + this.constructor.name);
|
throw new Error("A pure virtual method call of a shape " + this.constructor.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get maxX() {
|
||||||
|
return maxX;
|
||||||
|
}
|
||||||
|
static get maxY() {
|
||||||
|
return maxY;
|
||||||
|
}
|
||||||
|
|
||||||
static randomOptions() {
|
static randomOptions() {
|
||||||
return {
|
return {
|
||||||
x: Math.floor(Math.random() * maxX),
|
x: Math.floor(Math.random() * this.maxX),
|
||||||
y: Math.floor(Math.random() * maxY),
|
y: Math.floor(Math.random() * this.maxY),
|
||||||
color: Color.random()
|
color: Color.random()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
static fromOptions(o) {
|
static fromOptions(o) {
|
||||||
return new Shape(o.x, o.y, o.color);
|
return new Shape(o.x, o.y, o.color);
|
||||||
}
|
}
|
||||||
|
static setBounding(w, h) {
|
||||||
|
maxX = w;
|
||||||
|
maxY = h;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const maxX = 1000;
|
let maxX = 1000;
|
||||||
const maxY = 1000;
|
let maxY = 1000;
|
||||||
|
|
||||||
export default Shape;
|
export default Shape;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue