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>
<body>
<div id="main">Nopes<div>
<div id="main">Loading...<div>
</body>
</html>

17
main.js
View File

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

10
painting/canvas.js
View File

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

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;

13
painting/factory.js
View File

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

7
painting/rectangle.js
View File

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

21
painting/shape.js
View File

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

5
style.css
View File

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