blue/fantasy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

window bounding, resizing with window resizing, new shape: circle, margins removed, random amount of objects to be painted

Browse Source
This commit is contained in:
Blue 2018-11-19 10:59:20 +03:00
parent 2f21b26c64
commit c1bea776b2
8 changed files with 75 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -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
View File

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

10
painting/canvas.js
View File

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

25
painting/circle.js Normal file
View File

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

11
painting/factory.js
View File

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

7
painting/rectangle.js
View File

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

19
painting/shape.js
View File

@ -10,19 +10,30 @@ class Shape {
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;

5
style.css
View File

@ -1 +1,4 @@
body {
margin: 0;
overflow: hidden;
}