first shape

painting/canvas.js

@@ -0,0 +1,23 @@
+import Color from "./color.js";
+
+class Canvas {
+    constructor() {
+        this.element = document.createElement("canvas");
+        this.element.width = 1000;
+        this.element.height = 1000;
+        this._ctx = this.element.getContext("2d");
+    },
+    setFillColor(color) {
+        this._ctx.fillStyle = color.rgba();
+    },
+    resetStyle() {
+        this._ctx.fillStyle = "";
+    },
+    draw(shape) {
+        this._ctx.fillStyle = shape._color.rgba();
+        shape.draw(this._ctx);
+        this.resetStyle();
+    }
+}
+
+export default Canvas;

painting/color.js

@@ -0,0 +1,38 @@
+class Color {
+    constructor(r, g, b, a) {
+        r = Math.max(0, r);
+        r = Math.min(1, r);
+        g = Math.max(0, g);
+        g = Math.min(1, g);
+        b = Math.max(0, b);
+        b = Math.min(1, b);
+        
+        if (a !== 0) {
+            a = a || 1;
+        }
+        a = Math.max(0, a);
+        a = Math.min(1, a);
+        
+        this._r = r;
+        this._g = g;
+        this._b = b;
+        this._a = a;
+    },
+    rgba() {
+        let out = "rgba(";
+        out += Math.floor(this._r * 255);
+        out += ", ";
+        out += Math.floor(this._g * 255);
+        out += ", ";
+        out += Math.floor(this._b * 255);
+        out += ", ";
+        out += this._a;
+        out += ")";
+        
+        return out;
+    },
+    static random() {
+        return new Color(Math.random(), Math.random(), Math.random(), Math.random());
+    }
+}
+

painting/factory.js

@@ -0,0 +1,14 @@
+import Rectangle from "./rectangle.js";
+
+const options = [
+    Rectangle
+]
+
+export default {
+    createRandomShape: function() {
+        let Shape = options[Math.floor(Math.random() * options.length)];
+        
+        let opts = Shape.randomOptions();
+        let shape = Shape.fromOptions(opts);
+    }
+};

painting/rectangle.js

@@ -0,0 +1,30 @@
+import Shape from "./shape.js";
+
+class Rectangle extends Shape {
+    className: "Rectangle",
+    constructor(x, y, color, width, height) {
+        super(x, y, color);
+        
+        this._width = width;
+        this._height = height;
+    },
+    static randomOptions() {
+        opts = super.randomOptions();
+        
+        opts.width = Math.floor(Math.random() * maxWidth);
+        opts.height = Math.floor(Math.random() * maxHeight);
+        
+        return opts;
+    },
+    static fromOptions(o) {
+        return new Rectangle(o.x, o.y, o.color, o.width, o.height);
+    },
+    draw(context) {
+        context.fillRect(this._x, this._y, this._x + this._width, this._y + this._height);
+    }
+}
+
+const maxWidth = 1000;
+const maxHeight = 1000;
+
+export default Rectangle;

painting/shape.js

@@ -1,7 +1,28 @@
+import Color from "./color.js";
+
 class Shape {
-    constructor() {
-        window.document.getElementById("main").innerHTML = "Works";
+    className: "Shape",
+    constructor(x, y, color) {
+        this._x = x;
+        this._y = y;
+        this.color = color;
+    },
+    draw(context) {
+        throw new Error("A pure virtual method call of a shape " + this.className);
+    },
+    static randomOptions() {
+        return {
+            x: Math.floor(Math.random() * maxX),
+            y: Math.floor(Math.random() * maxY),
+            color: Color.random()
+        }
+    },
+    static fromOptions(o) {
+        return new Shape(o.x, o.y, o.color);
     }
 }
 
+const maxX = 1000;
+const maxY = 1000;
+
 export default Shape;