diff --git a/example/still_shapes.js b/example/still_shapes.js index f7ffa1b..5d0e8ba 100755 --- a/example/still_shapes.js +++ b/example/still_shapes.js @@ -56,7 +56,7 @@ const d = 50; for (let r = 0; r < sketch.width / d; r++) { for (let c = 0; c < sketch.height / d; c++) { if ((r + c) % 2 === 0) { - sketch.shape(null, rectangle(BC.Point(r * d, c * d), d, d)); + sketch.shape(rectangle(BC.Point(r * d, c * d), d, d)); } } } diff --git a/lib/BasicCanvas.js b/lib/BasicCanvas.js index 0c1638a..eb7e1b9 100755 --- a/lib/BasicCanvas.js +++ b/lib/BasicCanvas.js @@ -1,7 +1,20 @@ export const clone = obj => Object.assign(Object.create(Object.getPrototypeOf(obj)), console); -const use = (namespace, global=window) => Object.assign(global, namespace); -window.use = use; +export const type = element => { + ({}).toString.call(element).match(/\s([a-zA-Z]+)/)[1].toLowerCase(); +}; + +let _use; +if (typeof window === 'undefined') { + _use = (namespace, global) => Object.assign(global, namespace); +} else { + _use = (namespace, global = window) => Object.assign(global, namespace); + + window.use = _use; + window.type = type; +} + +export const use = _use; export const load_font = (name, path, description) => { const font = new FontFace(name, path, description); @@ -211,11 +224,13 @@ class HEXobj { } export const Point = (x, y) => new PointObj(x, y); -export const polar = (r, theta, origin = Point(0, 0)) => Point( +export const Polar = (r, theta, origin = Point(0, 0)) => Point( r * Math.cos(theta) + origin.x, r * Math.sin(theta) + origin.y ); +export const [P, point, polar] = [Point, Point, Polar]; + export const Color = (r, g = -1, b = -1, a = 255) => { if (typeof r === 'string') { return new NamedColorObj(r); @@ -311,7 +326,8 @@ class Shape { // TODO: Either redraw all vertices and use built-in fill function, // or, implement own fill function (see: https://stackoverflow.com/questions/31799038/filling-a-polygon) - // Redraws all vertices, SLOW and BAD, SAD! (tbh, prolly faster than whatever I'd write) + // Secretly redraws all vertices, + // SLOW and BAD, SAD! (tbh, prolly faster than whatever I'd write) const c = this.canvas.context; c.moveTo(...this.vertices[0]); for (const vertex of this.vertices.slice(1)) { @@ -469,18 +485,27 @@ class Canvas { return this.color(point, color); } - shape(name, construction) { - if (!name) { - name = `ImplicitShape${Object.keys(this.shapes).length}`; + shape(name, construction = null) { + let [_name, _construction] = [null, null]; + if (construction === null && typeof name === 'function') { + _construction = name; + } else { + _construction = construction; + } + if (name === null || name === undefined || construction === null) { + _name = `ImplicitName${Object.keys(this.shapes).length}`; + } else { + _name = name; } - this.shapes[name] = { - construction, - shape: new Shape(name, this) + + this.shapes[_name] = { + draw: _construction, + shape: new Shape(_name, this) }; this.context.beginPath(); - construction(this.shapes[name].shape); + _construction(this.shapes[_name].shape); this.context.closePath(); - return this.shapes[name].shape; + return this.shapes[_name].shape; } text(string, point, font = this.font, fill = this.fill, storke = this.stroke) { @@ -526,12 +551,18 @@ class Canvas { } } -export const canvas = elem => { - return new Canvas(elem); -}; +export const canvas = elem => ( + new Canvas(elem) +); -export const canvas_id = id => { - return canvas(document.getElementById(id)); -}; +export const canvas_id = id => ( + canvas(document.getElementById(id)) +); + +export const canvas_new = (id, parent_selector = 'body') => { + created = document.createElement('canvas'); + created.id = id; -// new canvas thing... + document.querySelector(parent_selector).appendChild(created); + return canvas_id(id); +};