rects and randomness

artworld/drawable.js

@@ -1,5 +1,7 @@
-import { Vector2 } from "./math.js";
 import { artworld } from "./world.js";
+import { Vector2 } from "./math.js";
+import { Color } from "./color.js";
+import { Random } from "./random.js";
 
 export class Drawable {
   constructor(parent) {
@@ -73,8 +75,24 @@ export class Drawable {
     this._posVec = this._posVec.add(byVec);
   }
 
-  // TODO random()
-  // TODO draw() abstract
+  random() {
+    this._posVec = new Vector2(
+      Random.under(artworld.width),
+      Random.under(artworld.height),
+    );
+    console.log(this._posVec);
+    this._stroke = new Color(
+      Random.under(360),
+      Random.between(30, 60),
+      Random.between(30, 60),
+    );
+    this._fill = new Color(
+      Random.under(360),
+      Random.between(30, 60),
+      Random.between(30, 60),
+    );
+    return this;
+  }
 
   // getters /////////////////////////////
 

artworld/index.js

@@ -1,7 +1,6 @@
 export { artworld } from "./world.js";
-export { Color } from "./color.js";
+export { Color, Pico8 } from "./color.js";
 export { Vector2, degToRad, radToDeg } from "./math.js";
-export { Line } from "./shapes.js";
+export { Line, Rect } from "./shapes.js";
 export { Group } from "./drawable.js";
 export { Random } from "./random.js";
-console.log("here");

artworld/math.js

@@ -1,4 +1,5 @@
 const PI_180 = Math.PI / 180;
+import { Random } from "./random.js";
 
 export function degToRad(degrees) {
   return degrees * PI_180;
@@ -27,7 +28,7 @@ export class Vector2 {
   }
 
   static random(x, y) {
-    let theta = random() * 2 * Math.PI;
+    let theta = Random.radians();
     // if neither specified, use (1, 1)
     if (x === undefined) {
       x = 1;
@@ -36,7 +37,7 @@ export class Vector2 {
     if (y === undefined) {
       y = x;
     }
-    return new Vector2(x * cos(theta), y * sin(theta));
+    return new Vector2(x * Math.cos(theta), y * Math.sin(theta));
   }
 
   static polar(mag, angle) {

artworld/random.js

@@ -2,4 +2,19 @@ export class Random {
   static chance(odds) {
     return Math.random() < odds;
   }
+
+  static under(num) {
+    let n = Math.random() * num;
+    console.log("under", num, n);
+    return n;
+  }
+
+  static between(lo, hi) {
+    let n = Math.random() * (hi - lo) + lo;
+    return n;
+  }
+
+  static radians() {
+    return Math.random() * Math.PI * 2;
+  }
 }

artworld/rect.js

@@ -1,17 +0,0 @@
-class Rectangle {
-  constructor(x, y, width, height) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-  }
-
-  contains(x, y) {
-    return (
-      x > this.x &&
-      x < this.x + this.width &&
-      y > this.y &&
-      y < this.y + this.height
-    );
-  }
-}

artworld/shapes.js

@@ -1,5 +1,6 @@
 import { Vector2 } from "./math.js";
 import { Drawable } from "./drawable.js";
+import { Random } from "./random.js";
 
 export class Line extends Drawable {
   constructor(parent) {
@@ -23,3 +24,99 @@ export class Line extends Drawable {
     return this.to(Vector2.polar(mag, angle));
   }
 }
+
+export class Arc extends Drawable {
+  constructor(parent) {
+    super(parent);
+    this._r = 25;
+    this._startAngle = 0;
+    this._endAngle = 180;
+  }
+
+  draw() {
+    artworld.setStrokeColor(this._stroke);
+    artworld.setStrokeWeight(this._strokeWeight);
+    artworld.setFillColor(this._fill);
+    artworld.drawArc(this.worldPos, this._r, this._startAngle, this._endAngle);
+  }
+
+  radius(scalar) {
+    this._r = scalar;
+    return this;
+  }
+  startAngle(rad) {
+    this._startAngle = rad;
+    return this;
+  }
+  endAngle(rad) {
+    this._endAngle = rad;
+    return this;
+  }
+}
+
+export class Circle extends Drawable {
+  constructor(parent) {
+    super(parent);
+    this._r = 25;
+  }
+
+  draw() {
+    artworld.setStrokeColor(this._stroke);
+    artworld.setStrokeWeight(this._strokeWeight);
+    artworld.setFillColor(this._fill);
+    artworld.drawArc(this.worldPos, this._r, 0, 360);
+  }
+
+  radius(scalar) {
+    this._r = scalar;
+    return this;
+  }
+}
+
+export class Rect extends Drawable {
+  constructor(parent) {
+    super(parent);
+    this._width = 50;
+    this._height = 50;
+  }
+
+  random(range) {
+    super.random();
+    this._width = Random.between(20, range);
+    this._height = Random.between(20, range);
+    return this;
+  }
+
+  draw() {
+    artworld.setStrokeColor(this._stroke);
+    artworld.setStrokeWeight(this._strokeWeight);
+    artworld.setFillColor(this._fill);
+    artworld.drawRect(this.worldPos, this._width, this._height);
+  }
+
+  size(w, h) {
+    this._width = w;
+    this._height = h;
+    return this;
+  }
+
+  width(scalar) {
+    this._width = scalar;
+    return this;
+  }
+
+  height(scalar) {
+    this._height = scalar;
+    return this;
+  }
+
+  // TODO
+  // contains(x, y) {
+  //   return (
+  //     x > this.x &&
+  //     x < this.x + this._width &&
+  //     y > this.y &&
+  //     y < this.pos.y + this._height
+  //   );
+  // }
+}

artworld/world.js

@@ -8,6 +8,14 @@ export class World {
     this.ctx = document.getElementById(id).getContext("2d");
   }
 
+  get width() {
+    return this.ctx.canvas.width;
+  }
+
+  get height() {
+    return this.ctx.canvas.height;
+  }
+
   register(drawable) {
     this.drawables.push(drawable);
   }
@@ -34,20 +42,26 @@ export class World {
     else this.ctx.fillStyle = color;
   }
 
-  fillRect(rect) {
-    this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  }
-
-  strokeRect(rect) {
-    this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  }
-
   drawLine(from, to) {
     this.ctx.beginPath();
     this.ctx.moveTo(from.x, from.y);
     this.ctx.lineTo(to.x, to.y);
     this.ctx.stroke();
   }
+
+  drawArc(center, radius, fromAngle, toAngle) {
+    this.ctx.beginPath();
+    this.ctx.arc(center.x, center.y, radius, fromAngle, toAngle);
+    this.ctx.stroke();
+    this.ctx.fill();
+  }
+
+  drawRect(center, width, height) {
+    this.ctx.beginPath();
+    this.ctx.rect(center.x - width / 2, center.y - height / 2, width, height);
+    this.ctx.fill();
+    this.ctx.stroke();
+  }
 }
 
 // singleton (for now)

examples/rects.html

@@ -0,0 +1,28 @@
+<html>
+  <head> </head>
+  <body>
+    <canvas id="mainCanvas" width="500" height="500"></canvas>
+    <script type="module">
+      import {
+        artworld,
+        Color,
+        Pico8,
+        Group,
+        Rect,
+        Random,
+        Vector2,
+        degToRad,
+      } from "../artworld/index.js";
+      artworld.bindCanvas("mainCanvas");
+      window.artworld = artworld;
+
+      for (let i = 0; i < 50; i++) {
+        new Rect().random(200).fill(Pico8.BLACK).z(10);
+        new Rect().random(150).fill(Pico8.DARK_BLUE).z(15);
+        new Rect().random(100).fill(Pico8.DARK_GREY).z(20);
+        new Rect().random(50).fill(Pico8.LIGHT_GREY).z(30);
+      }
+      artworld.draw();
+    </script>
+  </body>
+</html>