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>
|
||||
|
||||
<body>
|
||||
<div id="main">Nopes<div>
|
||||
<div id="main">Loading...<div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
17
main.js
17
main.js
|
|
@ -1,10 +1,21 @@
|
|||
import factory from "./painting/factory.js";
|
||||
import Canvas from "./painting/canvas.js";
|
||||
import Shape from "./painting/shape.js";
|
||||
|
||||
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);
|
||||
|
||||
let shape = factory.createRandomShape();
|
||||
canvas.draw(shape);
|
||||
let amount = Math.floor(Math.random() * 100 + 50);
|
||||
|
||||
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";
|
||||
|
||||
class Canvas {
|
||||
constructor() {
|
||||
constructor(width, height) {
|
||||
this.element = document.createElement("canvas");
|
||||
this.element.width = 1000;
|
||||
this.element.height = 1000;
|
||||
this.element.width = width;
|
||||
this.element.height = height;
|
||||
this._ctx = this.element.getContext("2d");
|
||||
}
|
||||
setFillColor(color) {
|
||||
|
|
@ -18,6 +18,10 @@ class Canvas {
|
|||
shape.draw(this._ctx);
|
||||
this.resetStyle();
|
||||
}
|
||||
resize(width, height) {
|
||||
this.element.width = width;
|
||||
this.element.height = height;
|
||||
}
|
||||
}
|
||||
|
||||
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 Circle from "./circle.js";
|
||||
|
||||
const options = [
|
||||
Rectangle
|
||||
]
|
||||
Rectangle,
|
||||
Circle
|
||||
];
|
||||
|
||||
export default {
|
||||
createRandomShape: function() {
|
||||
let Shape = options[Math.floor(Math.random() * options.length)];
|
||||
|
||||
let opts = Shape.randomOptions();
|
||||
let shape = Shape.fromOptions(opts);
|
||||
|
||||
return shape;
|
||||
|
||||
return Shape.fromOptions(Shape.randomOptions());
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ class Rectangle extends Shape {
|
|||
static randomOptions() {
|
||||
let opts = super.randomOptions();
|
||||
|
||||
opts.width = Math.floor(Math.random() * maxWidth);
|
||||
opts.height = Math.floor(Math.random() * maxHeight);
|
||||
opts.width = Math.floor(Math.random() * (this.maxX - opts.x));
|
||||
opts.height = Math.floor(Math.random() * (this.maxY - opts.y));
|
||||
|
||||
return opts;
|
||||
}
|
||||
|
|
@ -24,7 +24,4 @@ class Rectangle extends Shape {
|
|||
}
|
||||
}
|
||||
|
||||
const maxWidth = 1000;
|
||||
const maxHeight = 1000;
|
||||
|
||||
export default Rectangle;
|
||||
|
|
|
|||
|
|
@ -9,20 +9,31 @@ class Shape {
|
|||
draw(context) {
|
||||
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() {
|
||||
return {
|
||||
x: Math.floor(Math.random() * maxX),
|
||||
y: Math.floor(Math.random() * maxY),
|
||||
x: Math.floor(Math.random() * this.maxX),
|
||||
y: Math.floor(Math.random() * this.maxY),
|
||||
color: Color.random()
|
||||
}
|
||||
}
|
||||
static fromOptions(o) {
|
||||
return new Shape(o.x, o.y, o.color);
|
||||
}
|
||||
static setBounding(w, h) {
|
||||
maxX = w;
|
||||
maxY = h;
|
||||
}
|
||||
}
|
||||
|
||||
const maxX = 1000;
|
||||
const maxY = 1000;
|
||||
let maxX = 1000;
|
||||
let maxY = 1000;
|
||||
|
||||
export default Shape;
|
||||
|
|
|
|||
Loading…
Reference in New Issue