2c:null 2d:["$","title",null,{"children":"sky | Jared Flatow | Observable"}] 32:Td46,path = { let P = up(function path(cmd, ...args) { return cmd + args }, { M: (xy) => P('M', xy), L: (xy) => P('L', xy), join: (...args) => args.reduce((d, a) => d + P.apply(null, a), ''), line: (x1, y1, x2, y2, open = P.M) => open([x1, y1]) + P.L([x2, y2]), rect: (x, y, w, h, open = P.M) => { h = dfn(h, w) return open([x, y]) + P('H', x + w) + P('V', y + h) + P('H', x) + 'Z' }, border: (box, t, r, b, l, open = P.M) => { t = dfn(t, 0) r = dfn(r, t) b = dfn(b, t) l = dfn(l, r) let {x, y, w, h} = box; let ix = x + l, iy = y + t, iw = w - l - r, ih = h - t - b; return (P.line(x, y, x + w, y, open) + P('v', h) + P('h', -w) + P('v', -h) + P.line(ix, iy, ix, iy + ih) + P('h', iw) + P('v', -ih) + P('h', -iw)) }, corner: (x1, y1, x2, y2, rx, ry, vh, iv, open = P.M) => { rx = dfn(rx, 0) ry = dfn(ry, rx) iv = dfn(iv, 0) let sx = x1 < x2 ? 1 : -1, sy = y1 < y2 ? 1 : -1; let dx = sx * rx, dy = sy * ry; let sd = vh ^ iv ? +(sx * sy < 0) : +(sx * sy > 0) if (vh) { let cx = x1 + dx, cy = y2 - dy; return open([x1, y1]) + P('v', cy - y1) + P('a', rx, ry, 0, 0, sd, dx, dy) + P('h', x2 - cx) } else { let cx = x2 - dx, cy = y1 + dy; return open([x1, y1]) + P('h', cx - x1) + P('a', rx, ry, 0, 0, sd, dx, dy) + P('v', y2 - cy) } }, chevron: (cx, cy, w, h, t, open = P.M) => { h = dfn(h, 2 * w) t = dfn(t, w * Rt2 / 5) let g = h / 2; let o = t / Rt2; let z = t / abs(Math.sin(Math.atan2(g, w - o))) let x = cx - w / 2, y = cy - g + o; return open([x, y]) + P('l', o, -o) + P('l', w - o, g) + P('l', o - w, g) + P('l', -o, -o) + P('l', w - z, o - g) + 'z' }, triangle: (cx, cy, b, h, open = P.M) => { h = dfn(h, b) let x = cx - b / 2, y = cy - h / 2; return open([x, y]) + P('L', cx, y + h) + P('L', x + b, y) + 'Z' }, arc: (cx, cy, rx, ry, len, off, open = P.M) => { len = cut(dfn(len, 360)) off = off || 0; let ix = cx + rx * cos(off), iy = cy + ry * sin(off) let fx = cx + rx * cos(off + len), fy = cy + ry * sin(off + len) return (open([ix, iy]) + P('A', rx, ry, 0, abs(len) > 180 ? 1 : 0, len > 0 ? 1 : 0, fx, fy)) }, oval: (cx, cy, rx, ry, open = P.M) => { ry = dfn(ry, rx) return P.arc(cx, cy, rx, ry, 360, 0, open) }, arch: (cx, cy, rx, ry, t, len, off, open = P.M) => { len = cut(dfn(len, 360)) off = off || 0; t = dfn(t, 1) return (P.arc(cx, cy, rx, ry, len, off, open) + P.arc(cx, cy, rx + t, ry + t, -len, off + len, P.L) + 'Z') }, ring: (cx, cy, rx, ry, t, open = P.M) => { t = dfn(t, 1) return (P.arc(cx, cy, rx, ry, 360, 0, open) + P.arc(cx, cy, rx + t, ry + t, -360, 360)) }, wedge: (cx, cy, rx, ry, len, off, open = P.M) => { return open([cx, cy]) + P.arc(cx, cy, rx, ry, len, off, P.L) + 'Z'; }, snake: (x1, y1, x2, y2, vh) => { if (vh) { let my = (y1 + y2) / 2; return P('C', x1, my, x2, my, x2, y2) } else { let mx = (x1 + x2) / 2; return P('C', mx, y1, mx, y2, x2, y2) } } }) return P; }33:T455,units = { let Q = up(function units(o, u) { let t = {} for (var k in o) t[k] = Q.unify(k, o[k], u) return t; }, { defaults: { top: 'px', left: 'px', right: 'px', bottom: 'px', width: 'px', height: 'px', size: 'px', // NB: generalized magnitude translate: 'px', rotate: 'deg', skewX: 'deg', skewY: 'deg', borderRadius: 'px' }, unify: (k, v, u = Q.defaults) => { let d = u[k] || '' return each(v, (x) => isFinite(x) ? x + d : x) }, strip: (k, v, u = Q.defaults) => { let d = u[k], n = d && d.length; if (d) return each(v, (x) => x.substr(-n) == d ? parseFloat(x) : x) return v; }, each: (ks, o, u = Q.defaults) => each(ks, (k) => Q.unify(k, o[k], u)), map: (ks, vs, u = Q.defaults) => each(ks, (k, i) => Q.unify(k, vs[i], u)), rect: (b, u) => `rect(${Q.each(['top', 'right', 'bottom', 'left'], b, u)})`, calc: (a, o) => `calc(${[].concat(a).join(' ' + (o || '-') + ' ')})`, url: (a) => `url(${a})` }) return Q; } 34:T10d0,class Box { constructor(d = {}, e) { this.x = dfn(dfn(d.x, d.left), e ? -Inf : 0) this.y = dfn(dfn(d.y, d.top), e ? -Inf : 0) this.w = dfn(dfn(d.w, d.width), e ? Inf : 0) this.h = dfn(dfn(d.h, d.height), e ? Inf : 0) } get width() { return this.w } get height() { return this.h } get left() { return this.x } get top() { return this.y } get midX() { return add(this.x, this.w / 2) } get midY() { return add(this.y, this.h / 2) } get right() { return add(this.x, this.w) } get bottom() { return add(this.y, this.h) } grid(fun, acc, opts) { let o = up({rows: 1, cols: 1}, opts) let r = o.rows, c = o.cols; let x = this.x, y = this.y, w = this.w / c, h = this.h / r; let z = new Box({x: x, y: y, w: w, h: h}) for (let i = 0, n = 0; i < r; i++) for (let j = 0; j < c; j++, n++) acc = fun.call(this, acc, z.shift(w * j, h * i), i, j, n, z) return acc; } join(boxes = []) { let bnds = boxes.reduce((a, b) => { return {x: min(a.x, b.x), y: min(a.y, b.y), right: max(a.right, b.right), bottom: max(a.bottom, b.bottom)} }, this) return new Box({x: bnds.x, y: bnds.y, w: bnds.right - bnds.x, h: bnds.bottom - bnds.y}) } tile(fun, acc, opts) { return this.grid(fun, acc, this.shape(opts && opts.unit)) } shape(box) { let u = box || this; return {rows: this.h / u.h, cols: this.w / u.w} } stack(fun, acc, opts) { return this.times(opts).grid(fun, acc, opts) } times(shape) { let s = up({rows: 1, cols: 1}, shape) return this.copy({w: s.cols * this.w, h: s.rows * this.h}) } over(shape) { let s = up({rows: 1, cols: 1}, shape) return this.copy({w: this.w / s.cols, h: this.h / s.rows}) } split(opts) { return this.grid((acc, box) => (acc.push(box), acc), [], opts) } align(box, ax, ay) { let nx = (ax || 0) / 2, ny = (ay || 0) / 2, ox = nx + .5, oy = ny + .5; let x = box.midX + nx * box.w - ox * this.w; let y = box.midY + ny * box.h - oy * this.h; return this.copy({x, y}) } center(cx, cy) { return this.copy({x: (cx || 0) - this.w / 2, y: (cy || 0) - this.h / 2}) } xy(x, y) { return this.copy({x: x || 0, y: y || 0}) } scale(a, b) { let w = a * this.w, h = dfn(b, a) * this.h; return new Box({x: this.midX - w / 2, y: this.midY - h / 2, w: w, h: h}) } shift(dx, dy) { return this.copy({x: this.x + (dx || 0), y: this.y + (dy || 0)}) } square(big) { let o = big ? max : min, d = o(this.w, this.h) return this.copy({w: d, h: d}) } slice(ps, hzn) { let d = hzn ? this.w : this.h, ps_ = [].concat(ps) let f = 1 - ps_.reduce((s, p) => isFinite(p) ? s + p : s, 0) / d; return this.part(ps_.map((p) => { let pct = typeof(p) == 'string' && p[p.length - 1] == '%'; return pct ? f * parseFloat(p.slice(0, -1)) / 100 : p / d; }), hzn) } part(ps, hzn) { let b = this, ko = hzn ? 'x' : 'y', kd = hzn ? 'w' : 'h'; let o = b[ko], u = {}, s = 0, ps_ = [].concat(ps, undefined) return ps_.map((p) => { u[ko] = (o += u[kd] || 0) u[kd] = dfn(p, 1 - s) * b[kd] s += p; return b.copy(u) }) } pad(t, r, b, l) { return this.trim(-t, -r, -b, -l) } trim(t, r, b, l) { t = dfn(t, 0) r = dfn(r, t) b = dfn(b, t) l = dfn(l, r) return new Box({x: this.x + l, y: this.y + t, w: this.w - r - l, h: this.h - t - b}) } copy(o = {}) { let ow = dfn(o.w, o.width), oh = dfn(o.h, o.height) let {x, y, w, h} = this; return new Box({x: dfn(o.x, x), y: dfn(o.y, y), w: dfn(ow, w), h: dfn(oh, h)}) } equals(o = {}) { let ow = dfn(o.w, o.width), oh = dfn(o.h, o.height) let {x, y, w, h} = this; return x == dfn(o.x, 0) && y == dfn(o.y, 0) && w == dfn(ow, 0) && h == dfn(oh, 0) } toString() { let {x, y, w, h} = this; return `${x},${y},${w},${h}` } static solve (opts) { let o = up({}, opts) let b = o.bbox, s = o.shape, u = o.unit; if (b && s) return up(o, {shape: up({rows: 1, cols: 1}, s), unit: b.over(s)}) if (u && s) return up(o, {shape: up({rows: 1, cols: 1}, s), bbox: u.times(s)}) if (b && u) return up(o, {shape: b.shape(u), unit: u.copy({x: b.x, y: b.y})}) } }35:T4c3,class RGB { constructor(d) { up(this, d) } update(obj) { return up(this, obj) } alpha(a) { return a == undefined ? this : this.update({a: a}) } shift(x) { let w = (v) => clip(v + x, 0, 255) return (new RGB({r: w(this.r || 0), g: w(this.g || 0), b: w(this.b || 0)})).alpha(this.a) } toHex() { return `#${['r', 'g', 'b'].map(k => this[k].toString(16).padStart(2, '0')).join('')}` } toString() { if (this.a == undefined) return `rgb(${this.r || 0}, ${this.g || 0}, ${this.b || 0})` return `rgba(${this.r || 0}, ${this.g || 0}, ${this.b || 0}, ${this.a})` } static mix(x, opts) { let o = up({min: 0, max: 100, lo: {b: 100}, hi: {r: 100}}, opts) let m = o.min, M = o.max, lo = o.lo, hi = o.hi; let w = (a, b) => ((b || 0) * max(x - m, 0) + (a || 0) * max(M - x, 0)) / (M - m) let i = (a, b) => Math.round(w(a, b)) if (lo.a == undefined && hi.a == undefined) return new RGB({r: i(lo.r, hi.r), g: i(lo.g, hi.g), b: i(lo.b, hi.b)}) return new RGB({r: i(lo.r, hi.r), g: i(lo.g, hi.g), b: i(lo.b, hi.b), a: w(lo.a, hi.a)}) } static random() { return new RGB({r: randInt(0, 255), g: randInt(0, 255), b: randInt(0, 255)}) } }36:T4b2a,Sky = { const SVGTransform = window.SVGTransform; const Q = units, P = path; function $(q) { return new Elem(document).$(q) } function elem(...args) { return new Elem(...args) } function svg(...args) { return new SVGElem('svg', ...args) } function wrap(node) { if (node) switch (node.namespaceURI) { case SVGElem.xmlns: return new SVGElem(node) case Elem.xmlns: default: return new Elem(node) } } class Elem { static get xml() { return "http://www.w3.org/XML/1998/namespace" } static get xmlns() { return "http://www.w3.org/1999/xhtml" } constructor(elem, attrs, props, doc) { this.node = elem && elem.nodeType ? elem : (doc || document).createElementNS(this.constructor.xmlns, elem) this.attrs(attrs) this.props(props) } update(obj) { return up(this, obj) } addTo(parent) { return (parent.node || parent).appendChild(this.node), this; } append(child) { return child.addTo(this), this; } before(other) { if (other) other.node.parentNode.insertBefore(this.node, other.node) return this; } child(elem, attrs, props) { return new this.constructor(elem, attrs, props).addTo(this) } clear() { let n = this.node; while (n.firstChild) n.removeChild(n.firstChild) return this; } order(k) { let n = this.node, p = n.parentNode, C = p.childNodes.length; p.insertBefore(n, p.childNodes[clip(k < 0 ? C + k : k, 0, C)]) return this; } remove(b) { let n = this.node, p = n.parentNode; if (p && dfn(b, true)) p.removeChild(n) return this; } $(q) { return wrap(typeof(q) == 'string' ? this.node.querySelector(q) : q) } doc() { return this.node.ownerDocument ? new this.constructor(this.node.ownerDocument) : this; } each(sel, fun, acc) { for (let q = this.node.querySelectorAll(sel), i = 0; i < q.length; i++) acc = fun(q[i], acc, i, q) return acc; } fold(fun, acc) { for (let c = this.node.firstElementChild, i = 0; c; c = c.nextSibling) acc = fun(acc, c, i++) return acc; } nth(n) { let c = this.node.children, C = c.length; return wrap(c[n < 0 ? C + n : n]) } parent() { return wrap(this.node.parentNode) } root() { let n = this.node; while (n.parentNode) n = n.parentNode; return n; } attached(o) { return this.root() == (o ? o.root() : this.doc().node) } detached(o) { return !this.attached(o) } unique(q, fun) { return this.$(q) || fun(this) } hide(b) { return this.attrs({hidden: dfn(b, true) ? '' : null}) } show(b) { return this.attrs({hidden: dfn(b, true) ? null : ''}) } activate(b) { return this.instate(b, 'activated') } collapse(b) { return this.instate(b, 'collapsed') } validate(b) { let n = this.node, v; if (n.checkValidity) { if (v = !n.checkValidity()) b = false; this.instate(v, 'invalidated') } return this.fold((a, c) => elem(c).validate(a) && a, dfn(b, true)) } instate(b, c, d) { b = dfn(b, true) return this.toggleClass(c, b).fire(c, up({value: b}, d)) } attr(name, ns) { return this.node.getAttributeNS(ns || null, name) } attrs(attrs, ns) { for (let k in attrs) { let v = attrs[k] if (v == null) this.node.removeAttributeNS(ns || null, k) else this.node.setAttributeNS(ns || null, k, v) } return this; } props(props) { for (let k in props) this.node[k] = props[k] return this; } style(attrs) { for (let k in attrs) this.node.style[k] = attrs[k] return this; } href(href) { return this.attrs({href: href}) } space(space) { return this.attrs({space: space}, this.xml) } txt(text, order) { if (isFinite(order)) return elem(this.doc().node.createTextNode(text)).addTo(this).order(order), this; return this.props({textContent: text}) } uid() { let id = (new Date - 0) + Math.random() + '' return this.attrs({id: id}), id; } url() { return Q.url('#' + (this.attr('id') || this.uid())) } addClass(cls) { let node = this.node; map(cls, (c) => node.classList.add(c)) return this; } hasClass(cls) { return this.node.classList.contains(cls) } removeClass(cls) { let node = this.node; map(cls, (c) => node.classList.remove(c)) return this; } toggleClass(cls, b) { let node = this.node; map(cls, (c) => node.classList.toggle(c, b)) return this; } css(k) { let css = window.getComputedStyle(this.node) return k ? css[k] : css; } addRules(rules) { let i = 0, sheet = this.node.sheet; let rec = (sel, rule, str) => { str = str || '' for (let property in rule) { if (sel.match(/^@/)) str += `${property} { ${rec(property, rule[property])} }` else str += `${property}: ${rule[property]};` } return str; } for (let selector in rules) try { sheet.insertRule(`${selector} { ${rec(selector, rules[selector])} }`, i++) } catch (e) { console.error(e) } return i; } animate(fun, n) { let self = this, i = 0; let anim = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame; anim(function f() { if (fun.call(self, self.node, i++) || i < n) anim(f) }) return this; } apply(a) { if (a instanceof Function) return a(this) if (typeof(a) == 'string') return this.txt(a) return this[a[0]].apply(this, a.slice(1)) } bind(name, ...args) { let fun = this[name] return fun.bind.apply(fun, [this, ...args]) } map(l, f) { return map(f ? map(l, [].concat.bind([f])) : l, this.apply.bind(this)) } fire(type, data, opts) { this.node.dispatchEvent(new CustomEvent(type, up({detail: data}, opts))) return this; } on(types, fun, capture) { let node = this.node; types.split(/\s+/).map((type) => { node.addEventListener(type, fun, capture) }) return this; } off(types, fun, capture) { let node = this.node; types.split(/\s+/).map((type) => { node.removeEventListener(type, fun, capture) }) return this; } upon(types, fun, capture) { let f = (e) => fun.call(this, get(e.detail || {}, 'value'), e) return this.on(types, f, capture) } once(types, fun, capture) { let n = 0; return this.til(types, fun, () => n++, capture) } til(types, fun, dead, capture) { let self = this; return this.on(types, function f(...args) { if (dead()) self.off(types, f) else fun.apply(self, args) }, capture) } a(attrs, props) { return this.child('a', attrs, props) } p(attrs, props) { return this.child('p', attrs, props) } div(attrs, props) { return this.child('div', attrs, props) } span(attrs, props) { return this.child('span', attrs, props) } hl(text, level) { return this.child('h' + (level || 1)).txt(text) } li(text) { return this.child('li').txt(text) } link(href) { return this.a().href(href) } para(text) { return this.p().txt(text) } svg(attrs, props) { return svg(attrs, props).addTo(this) } g(attrs, props) { return this.div(attrs, props) } q(cls) { return this.unique('.' + cls, (p) => p.g({class: cls})) } icon(href, w, h, u) { return this.svg({class: 'icon'}).icon(href).parent().size(w, h, u) } image(href, w, h, u) { return this.child('img', {class: 'image'}).attrs({src: href}).size(w, h, u) } circle(cx, cy, r, u) { return this.div({class: 'circle'}).xywh(cx - r, cy - r, 2 * r, 2 * r, u).style(Q({borderRadius: r}, u)) } ellipse(cx, cy, rx, ry, u) { return this.div({class: 'ellipse'}).xywh(cx - rx, cy - ry, 2 * rx, 2 * ry, u).style({borderRadius: Q.unify('borderRadius', [rx, ry], u).join(' / ')}) } rect(x, y, w, h, u) { return this.div({class: 'rect'}).xywh(x, y, w, h, u) } text(text) { return this.span({class: 'text'}).txt(text) } svgX(box, u) { return this.svg({viewBox: box}).embox(box, u) } iconX(box, href, u) { let {x, y, w, h} = box || this.bbox() return this.icon(href, w, h, u).place(x, y, u) } imageX(box, href, u) { let {x, y, w, h} = box || this.bbox() return this.image(x, y, w, h, href, u) } circleX(box, p, big, u) { let o = big ? max : min; let {midX, midY, w, h} = box || this.bbox() return this.circle(midX, midY, dfn(p, 1) * o(w, h) / 2, u) } ellipseX(box, px, py, u) { let {midX, midY, w, h} = box || this.bbox() return this.ellipse(midX, midY, dfn(px, 1) * w / 2, dfn(py, 1) * h / 2, u) } rectX(box, u) { let {x, y, w, h} = box || this.bbox() return this.rect(x, y, w, h, u) } textX(box, text, ax, ay, u) { return this.text(text).align(box || this.bbox(), ax, ay, u).anchor(ax, ay) } flex(ps, hzn, u) { return (ps || []).reduce((r, p) => { let f, q; if (p == 'fit' || p == null) f = '0 0 auto' else if ((q = Q.unify('size', p, u)).substr(-1) == '%') f = '1 1 ' + q; else f = '0 0 ' + q; return r.g().style({flex: f}), r; }, this.style({display: 'flex', flexDirection: hzn ? 'row' : 'column'})) } row(ps, u) { return this.g({class: 'row'}).flex(ps, true, u) } col(ps, u) { return this.g({class: 'col'}).flex(ps, false, u) } bbox(fixed) { let box = new Box(this.node.getBoundingClientRect()) return fixed ? box : box.shift(window.pageXOffset, window.pageYOffset) } wh(w, h, u) { return this.style(Q({width: w, height: h}, u)) } xy(x, y, u) { return this.style(Q({left: x, top: y, position: 'absolute'}, u)) } xywh(x, y, w, h, u) { return this.style(Q({left: x, top: y, width: w, height: h, position: 'absolute'}, u)) } size(w, h, u) { return this.parent().wh.call(this, w, h, u) } place(x, y, u) { return this.parent().xy.call(this, x, y, u) } cover(x, y, w, h, u) { return this.parent().xywh.call(this, x, y, w, h, u) } align(box, ax, ay, u) { let {x, y} = new Box().align(box, ax, ay) return this.place(x, y, u) } embox(box, u) { let {x, y, w, h} = box; return this.cover(x, y, w, h, u) } anchor(i, j) { let a = -((i || 0) + 1) * 50; let b = -((j || 0) + 1) * 50; return this.transform({translate: [a + '%', b + '%']}) } hang(ax, ay, u) { return this.align(box(0, 0, 100, 100), ax, ay, up({top: '%', left: '%'}, u)).anchor(ax, ay) } screen(x, y) { return {x, y} } shift(dx, dy) { let x = this.transformation(), t = x.translate = x.translate || [0, 0] t[0] += dx || 0; t[1] += dy || 0; return this.transform(x) } transform(desc, u) { let xform = [] for (let k in desc) xform.push(k + '(' + Q.unify(k, [].concat(desc[k]), u).join(',') + ')') xform = xform.join(' ') return this.style({transform: xform}) } transformation(val, u) { val = val || this.node.style.transform || ''; let m, p = /(\w+)$([^$]*)\)/g, tx = {} while (m = p.exec(val)) { var k = m[1], v = m[2].split(',') tx[k] = Q.strip(k, v, u) } return tx; } load(json) { let n = this.node, t = n.type; json = n.name && json ? json[n.name] : json; if (json !== undefined) { if (t == 'button' || t == 'reset' || t == 'submit') return this; else if (t == 'select-one' || t == 'select-multiple') this.each('option', (o) => { if ([].some.call([].concat(json), (v) => v == o.value)) o.selected = true; }) else if (t == 'fieldset') this.each('input', (i) => { if ([].some.call([].concat(json), (v) => v == i.value)) i.checked = true; }) else if (t == 'checkbox' || t == 'radio') n.checked = isFinite(json) ? json : json == n.value; else if (n.value !== undefined) n.value = json || '' else if (n.childElementCount) this.fold((_, c) => { elem(c).load(c.name && json ? json[c.name] : json) }) } return this; } dump(json) { let n = this.node, t = n.type, p; if (t == 'button' || t == 'reset' || t == 'submit') return json; else if (t == 'select-one') p = this.each('option', (o, v) => { return (o.selected) ? o.value : v; }, null) else if (t == 'select-multiple') p = this.each('option', (o, l) => { return (o.selected && l.push(o.value)), l; }, []) else if (t == 'fieldset' && n.querySelector('[type="radio"]')) p = this.each('input', (i, v) => { return (i.checked) ? i.value : v; }, null) else if (t == 'fieldset') p = this.each('input', (i, l) => { return (i.checked && l.push(i.value)), l; }, []) else if (t == 'checkbox' || t == 'radio') p = n.checked; else if (t == 'number' || t == 'range') p = dfn(n.valueAsNumber, null) else p = n.value; if (p !== undefined) return n.name ? set(json, n.name, p) : p; if (n.childElementCount) this.fold((o, c) => { return elem(c).dump(o) }, n.name ? pre(json = json || {}, n.name, {}) : json) return json; } form(attrs, props) { return this.child('form', attrs, props) } label(text) { return this.child('label').txt(text) } button(desc, props) { desc = up({}, desc) let icon = pop(desc, 'icon') let label = pop(desc, 'label', '') let action = pop(desc, 'action', () => {}) let elem = this.child('button', desc, props) if (icon) elem.icon.apply(elem, [].concat(icon)) if (icon && label) elem.text(label); else if (label) elem.txt(label) return elem.on('click', action.bind(elem)) } input(desc, props) { desc = up({}, desc) let label = pop(desc, 'label') let elem = label ? this.label(label) : this; return elem.child('input', desc, props) } output(desc, props) { desc = up({}, desc) let label = pop(desc, 'label') let elem = label ? this.label(label) : this; return elem.child('output', desc, props) } fieldset(desc) { desc = up({}, desc) let options = pop(desc, 'options', []) return options.reduce((s, d) => { d = [].concat(d) return s.input(up(desc, {value: d[0], label: d[1] || d[0]})), s; }, this.child('fieldset', {name: desc.name})) } option(value, text) { return this.child('option', {value: value}).txt(text || value) } options(desc) { if (desc instanceof Array) this.map(desc, 'option') else if (desc instanceof Object) for (var k in desc) this.child('optgroup', {label: k}).map(desc[k], 'option') return this; } select(desc, props) { desc = up({}, desc) let label = pop(desc, 'label') let options = pop(desc, 'options') let elem = label ? this.label(label) : this; return elem.child('select', desc, props).options(options) } textarea(desc, props) { desc = up({}, desc) let label = pop(desc, 'label') let elem = label ? this.label(label) : this; return elem.child('textarea', desc, props) } views(value, opts) { return () => this.fire('input', this.node.value = value, opts) } } class SVGElem extends Elem { static get xmlns() { return "http://www.w3.org/2000/svg" } static get xlink() { return "http://www.w3.org/1999/xlink" } svg(attrs, props) { return this.child('svg', attrs, props) } circle(cx, cy, r) { return this.child('circle', {cx: cx, cy: cy, r: r}) } ellipse(cx, cy, rx, ry) { return this.child('ellipse', {cx: cx, cy: cy, rx: rx, ry: ry}) } line(x1, y1, x2, y2) { return this.child('line', {x1: x1, y1: y1, x2: x2, y2: y2}) } path(d) { return this.child('path', d && {d: d}) } polyline(points) { return this.child('polyline', {points: points}) } polygon(points) { return this.child('polygon', {points: points}) } rect(x, y, w, h) { return this.child('rect', {x: x, y: y, width: w, height: h}) } text(text) { return this.child('text', {}, {textContent: text}) } tspan(text) { return this.child('tspan', {}, {textContent: text}) } g(attrs, props) { return this.child('g', attrs, props) } icon(href, w, h) { return this.use(href).wh(w, h) } image(href, w, h) { return this.child('image').href(href).wh(w, h) } use(href) { return this.child('use').href(href) } mask(attrs, props) { return this.child('mask', attrs, props) } clipPath (attrs, props) { return this.child('clipPath', attrs, props) } symbol(attrs, props) { return this.child('symbol', attrs, props) } border(t, r, b, l, box) { return this.path(P.border(box || this.bbox(), t, r, b, l)) } anchor(i, j) { let a = i < 0 ? 'start' : (i > 0 ? 'end' : 'middle') let b = j < 0 ? 'hanging' : (j > 0 ? 'alphabetic' : 'central') return this.attrs({'text-anchor': a, 'dominant-baseline': b}) } bbox() { return new Box(this.node.getBBox()) } enc() { return this.node.tagName == 'svg' ? this : new SVGElem(this.node.ownerSVGElement) } fit() { return this.enc().attrs({viewBox: this.bbox()}) } href(href) { return this.attrs({href: href}, this.xlink) } wh(w, h) { return this.attrs({width: w, height: h}) } xy(x, y) { return this.attrs({x: x, y: y}) } xywh(x, y, w, h) { return this.attrs({x: x, y: y, width: w, height: h}) } point(x, y) { let p = this.enc().node.createSVGPoint() p.x = x; p.y = y; return p; } coords(x, y) { return this.point(x, y).matrixTransform(this.node.getScreenCTM().inverse()) } screen(x, y) { return this.point(x, y).matrixTransform(this.node.getScreenCTM()) } transform(desc) { let xform = [] for (let k in desc) xform.push(`${k}(${[].concat(desc[k]).join(',')})`) return this.attrs({transform: xform.join(' ')}) } transformation(list) { let tx = {} list = list || this.node.transform.baseVal; for (let i = 0; i < list.numberOfItems; i++) { let t = list.getItem(i), m = t.matrix; if (t.type == SVGTransform.SVG_TRANSFORM_MATRIX) tx.matrix = [m.a, m.b, m.c, m.d, m.e, m.f] else if (t.type == SVGTransform.SVG_TRANSFORM_TRANSLATE) tx.translate = [m.e, m.f] else if (t.type == SVGTransform.SVG_TRANSFORM_SCALE) tx.scale = [m.a, m.d] else if (t.type == SVGTransform.SVG_TRANSFORM_ROTATE) tx.rotate = [t.angle, (m.f / m.c + m.e) / m.a, (m.e / m.b - m.f) / m.a] else if (t.type == SVGTransform.SVG_TRANSFORM_SKEWX) tx.skewX = t.angle; else if (t.type == SVGTransform.SVG_TRANSFORM_SKEWY) tx.skewY = t.angle; } return tx; } } return { $, box, Box, rgb, RGB, elem, Elem, svg, SVGElem, path, units } }37:T54e,Sun = { // derive: copy the constructor with an extended prototype // extend: change the constructor prototype in-place // subcls: rebase the constructor prototype on another // type: create a subcls with a functional constructor var derive = function (cons, over) { var copy = function (...args) { return cons.apply(this, args) } return extend(cls(up(copy, {prototype: ext(cons.prototype)})), over) } var extend = function (cons, over) { return cat([], over).reduce(up, cons.prototype), cons; } var cls = up(function (cons, over) { return up(extend(cons, over), cls) }, { derive: function (over) { return derive(this, over) }, extend: function (over) { return extend(this, over) }, subcls: function (cons, over) { return up(up(cons, {prototype: up(ext(this.prototype, cons.prototype), over)}), this) }, type: function (cons, over) { var sub = this.subcls(cons, over) var fun = function (a, r, g, s) { return new sub(this, a, r, g, s) } return up(fun, {prototype: sub.prototype}) } }) const min = (x, y) => x < y ? x : y; const mod = (x, y) => { const r = x % y; return r < 0 ? r + y : r; } const clockDistance = (a, b, c) => { return min(mod(a - b, c || 24), mod(b - a, c || 24)) } return { cls, min, mod, clockDistance, } }38:T4f3a,Orb = { var Orb = Sun.cls(function Orb(obj) { up(this, obj) }, { bind: Sky.Elem.prototype.bind, does: function (k, f, a) { return Orb.do(this[k], f, a), this }, prop: function (f, a) { return Orb.do(this.jack, f, a) }, call: function (f, ...args) { return Orb.do(this, f, [].slice.call(args, 1)) }, grab: function (...args) { this.grip = (this.grip || 0) + 1; return this.prop('grab', args) }, free: function (...args) { this.grip = (this.grip || 0) - 1; return this.prop('free', args) }, move: function (...args) { return this.prop('move', args) }, push: function (...args) { return this.prop('move', args) }, sync: function (...args) { return this.prop('sync', args) }, drag: function (f, a) { return Orb.drag(this, f, a) }, thru: function (o, a) { return Orb.thru(this, o, a) }, walk: function (k, f, a) { for (var o = this; o[k]; o = o[k]); return f ? Orb.do(o, f, a) : o; }, find: function (f, a) { var kids = this.kids || [] for (var i = 0, v; i < kids.length; i++) if ((v = Orb.do(kids[i], f, a))) return v; }, load: function (json) { var path = this.path || [] var part = Sun.lookup(json, path) if (this.kids) this.kids.reduce(function (o, k) { return k.load(o), o }, part) else this.elem.load(part) return this; }, dump: function (json) { var path = this.path || [] var part = Sun.lookup(json, path) if (this.kids) part = this.kids.reduce(function (o, k) { return k.dump(o) }, part) else part = this.elem.dump(part) return Sun.modify(json, path, part) }, upon: function (t, f, c) { var self = this; return this.does('elem', 'upon', [t, (...args) => f.apply(self, args), c]) }, hide: function (...args) { return this.does('elem', 'hide', args) }, show: function (...args) { return this.does('elem', 'show', args) }, order: function (...args) { return this.does('elem', 'order', args) }, remove: function (...args) { return this.does('elem', 'remove', args) }, activate: function (b, r) { if (dfn(r, false)) this.does('kids', 'activate', [b, r]) return this.does('elem', 'activate', [b, r]) }, collapse: function (b, r) { if (dfn(r, true)) this.does('kids', 'collapse', [b, r]) return this.does('elem', 'collapse', [b, r]) }, validate: function (b) { if (this.kids) return this.kids.reduce((a, k) => k.validate(a) && a, dfn(b, true)) return this.elem && this.elem.validate(b) } }) up(Orb, { do: function (o, f, a, s) { if (o) { var v = o[f] if (v) return v instanceof Function ? v.apply(o, a) : v; if (o instanceof Array) return o.reduce(function (s, i) { return Orb.do(i, f, a) || s }, s) } }, grab: function (o, ...args) { return Orb.do(o, 'grab', args) }, free: function (o, ...args) { return Orb.do(o, 'free', args) }, move: function (o, dx, dy, a, r, g, s) { return Orb.do(o, 'move', [dx || 0, dy || 0, a, r, g, s]) }, drag: function (o, f, a) { return Orb.grab(o), Orb.do(o, f, a), Orb.free(o), o; }, thru: function (o, p, a) { if (a instanceof Array) return a.map(function (k) { Object.defineProperty(o, k, {get: function () { return p[k] }}) }) return Sun.fold(function (o, i) { var k = i[0], b = i[1] Object.defineProperty(o, k, { configurable: true, get: function () { return this[b] && this[b][k] }, set: function (v) { Object.defineProperty(this, k, {value: v, configurable: true, writable: true}) } }) return o; }, o, p) } }) Sky.Elem.prototype.update({ tap: function (fun, opts, jack) { var opts = up({gap: 250, mx: 1, my: 1}, opts) var open, Dx, Dy; return this.swipe(this.orb({ grab: function (e, ...args) { Dx = Dy = 0; open = true; setTimeout(function () { open = false }, opts.gap) if (opts.stop) e.stopImmediatePropagation() Orb.prototype.grab.apply(this, [e, ...args]) }, move: function (dx, dy) { Dx += abs(dx) Dy += abs(dy) this.push(dx, dy) }, free: function (e, ...args) { if (open && Dx <= opts.mx && Dy <= opts.my) fun && fun.apply(this, [e, ...args]) open = false; if (opts.stop) e.stopImmediatePropagation() Orb.prototype.free.apply(this, [e, ...args]) } }, jack), {stop: opts.stop}) }, dbltap: function (fun, opts) { var opts = up({gap: 250}, opts) var self = this, taps = 0; return this.on(pointerdown, function (e, ...args) { if (taps++) fun && fun.apply(self, [e, ...args]) setTimeout(function () { taps = 0 }, opts.gap) if (opts.prevent) e.preventDefault() }) }, tapout: function (fun, opts) { var self = this, dead; this.doc().til(pointerup, function (e, ...args) { if (!self.node.contains(e.target)) fun && fun.apply(self, [e, ...args]) dead = !self.parent() }, function () { return dead }, true) return this; }, press: function (o, opts) { var opts = up({gain: 1, every: 1}, opts) var i, doc = this.doc() return this.on(pointerdown, function (e) { Orb.grab(o, e) i = setInterval(function () { Orb.move(o, opts.gain) }, opts.every) if (opts.prevent) e.preventDefault() doc.once(pointerexit, function (e) { Orb.free(o, e) clearInterval(i) if (opts.prevent) e.preventDefault() }) }) }, swipe: function (o, opts) { var opts = up({glob: true}, opts) var lx, ly, move, doc = this.doc(), that = opts.glob ? doc : this; this.on(pointerdown, function (e) { var t = e.touches ? e.touches[0] : e; Orb.grab(o, e) lx = t.pageX; ly = t.pageY; if (opts.prevent) e.preventDefault() that.on(pointermove, move = function (e) { var t = e.touches ? e.touches[0] : e; Orb.move(o, t.pageX - lx, t.pageY - ly, lx, ly, e) lx = t.pageX; ly = t.pageY; if (opts.stop) e.stopImmediatePropagation() if (opts.prevent) e.preventDefault() }) doc.once(pointerexit, function (e) { that.off(pointermove, move) Orb.free(o, e) if (opts.prevent) e.preventDefault() }) }) return this; }, scroll: function (o, opts) { var opts = up({prevent: true}, opts) var lx, ly; return this.on('mousewheel', function (e) { Orb.move(o, e.wheelDeltaX, e.wheelDeltaY, lx, ly, e) lx = e.pageX; ly = e.pageY; if (opts.stop) e.stopImmediatePropagation() if (opts.prevent) e.preventDefault() }).swipe(o, opts) }, orb: function (obj, jack) { return new Orb(up({elem: this, jack: jack}, obj)) }, amp: Orb.type(function Amp(elem, jack, opts) { var ax, ay, kx, ky; var pow = Sun.pow; var opts = up({ax: 1, ay: 1, kx: 1, ky: 1}, opts) this.elem = elem; this.jack = jack; this.move = function (dx, dy, a, r, g, s) { this.push(kx * pow(dx, ax), ky * pow(dy, ay), a, r, g, s) } this.setOpts = function (o) { opts = up(opts, o) ax = opts.ax; ay = opts.ay; kx = opts.kx; ky = opts.ky; } this.setOpts(opts) }), spring: Orb.type(function Spring(elem, jack, opts) { var lock, kx, ky, lx, ly, tx, ty, restore, stretch, balance, perturb, anim; var opts = up({kx: 8, ky: 8, lx: 1, ly: 1, tx: 1, ty: 1}, opts) this.dx = 0; this.dy = 0; this.elem = elem; this.jack = jack; this.move = function (dx, dy) { var s = this; s.dx += lx * dx; s.dy += ly * dy; stretch && stretch.call(s) if (!anim) { perturb && perturb.call(s) anim = elem.animate(function () { var dx = s.dx, dy = s.dy, mx = abs(dx), my = abs(dy) var more = restore.call(s, dx, dy, mx, my) || s.dx || s.dy || s.grip; if (!more) { anim = null; balance && balance.call(s) } return more; }) } } this.setOpts = function (o) { opts = up(opts, o) lock = opts.lock; kx = opts.kx; ky = opts.ky; lx = opts.lx; ly = opts.ly; tx = opts.tx; ty = opts.ty; restore = opts.restore || function (dx, dy, mx, my) { if (lock && this.grip) return; if (mx > tx) dx /= kx * log(mx + 1) || 1; if (my > ty) dy /= ky * log(my + 1) || 1; this.dx -= dx; this.dy -= dy; return this.push(dx, dy, this) } stretch = opts.stretch; balance = opts.balance; perturb = opts.perturb; } this.setOpts(opts) }), guide: Orb.type(function Guide(elem, jack, opts) { var unit, bbox, w, h, px, py, mx, my, balance, settle, truncate; var dist = Sun.clockDistance; var opts = up({}, opts) var self = this; var spring = elem.spring(jack) this.elem = elem; this.jack = spring; this.move = function (dx, dy) { self.px = px += dx; self.py = py += dy; self.push(dx, dy) } this.goto = function (i, j) { var ox = px + spring.dx - (i || 0) * w, oy = py + spring.dy - (j || 0) * h; self.move(-ox, -oy) } this.slot = function () { return [rnd((px + spring.dx) / w), rnd((py + spring.dy) / h)] } this.setOpts = function (o) { opts = up(opts, o) unit = pop(opts, 'unit', unit || {}) bbox = opts.bbox || elem.bbox() w = dfn(unit.width, dfn(w, bbox.width)) h = dfn(unit.height, dfn(h, bbox.height)) px = self.px = opts.px || 0; py = self.py = opts.py || 0; mx = opts.mx || 1e-3; my = opts.my || 1e-3; balance = opts.balance; settle = pop(opts, 'settle', settle) truncate = pop(opts, 'truncate', truncate) spring.setOpts(ext(opts, { balance: function () { var ox = w && px % w, oy = h && py % h; var far = dist(ox, 0, w) > mx || dist(oy, 0, h) > my; if (far) Orb.move(self.hook || self, abs(ox) < w / 2 && !truncate ? -ox : sgn(ox) * w - ox, abs(oy) < h / 2 && !truncate ? -oy : sgn(oy) * h - oy) if (!far) settle && settle.call(this, rnd(px / (w || 1)), rnd(py / (h || 1))) balance && balance.call(this, ox, oy) } })) } this.setOpts(opts) }), tether: Orb.type(function Tether(elem, jack, opts) { var bbox, xmin, xmax, ymin, ymax, rx, ry, px, py; var opts = up({}, opts) var self = this; var plug = elem.orb({ move: function (dx, dy) { self.px = px += dx; self.py = py += dy; return this.push(dx, dy, px, py, bbox) } }, jack) var coil = elem.spring(plug, {kx: 1, ky: 1, lx: -1, ly: -1, lock: true}) this.elem = elem; this.jack = cat(plug, coil) this.move = function (dx, dy) { var cx = 0, cy = 0, ix = dx, iy = dy; var nx = px + dx + coil.dx, ny = py + dy + coil.dy; var ux = nx - xmin, uy = ny - ymin; var ox = nx - xmax, oy = ny - ymax; if (ux < 0 && dx < 0) { cx = (px < xmin ? dx : ux) / (rx * log(abs(coil.dx) + E)) ix = min(dx - ux, 0) } else if (ox > 0 && dx > 0) { cx = (px > xmax ? dx : ox) / (rx * log(abs(coil.dx) + E)) ix = max(dx - ox, 0) } if (uy < 0 && dy < 0) { cy = (py < ymin ? dy : uy) / (ry * log(abs(coil.dy) + E)) iy = min(dy - uy, 0) } else if (oy > 0 && dy > 0) { cy = (py > ymax ? dy : oy) / (ry * log(abs(coil.dy) + E)) iy = max(dy - oy, 0) } Orb.move(coil, cx, cy) return Orb.move(plug, cx + ix, cy + iy) } this.goto = function (x, y) { return Orb.move(this, (x || 0) - (px + coil.dx), (y || 0) - (py + coil.dy)) } this.setOpts = function (o) { opts = up(opts, o) bbox = new Sky.Box(opts.bbox || {}, true) xmin = bbox.x; xmax = bbox.right; ymin = bbox.y; ymax = bbox.bottom; rx = opts.rx || 1; ry = opts.ry || 1; px = self.px = dfn(opts.px, px || 0) py = self.py = dfn(opts.py, py || 0) if (px < xmin || px > xmax || py < ymin || py > ymax) self.goto(px < xmin ? xmin : (py > xmax ? xmax : px), py < ymin ? ymin : (py > ymax ? ymax : py)) } this.setOpts(opts) }), crank: Orb.type(function Crank(elem, jack, opts) { var cx, cy; var opts = up({}, opts) this.elem = elem; this.jack = jack; this.move = function (dx, dy, px, py) { var c = elem.screen(cx, cy) var rx = px - c.x, ry = py - c.y; if (rx > 0) dy = -dy; if (ry < 0) dx = -dx; return this.push(dx + dy, 0, this) } this.setOpts = function (o) { opts = up(opts, o) cx = opts.cx || 0; cy = opts.cy || 0; } this.setOpts(opts) }), wagon: Orb.type(function Wagon(elem, jack, opts) { var bbox, xmin, xmax, ymin, ymax, wide, high; var opts = up({}, opts) this.elem = elem; this.jack = jack; this.move = function (dx, dy) { var cur = elem.transformation(), off = cur.translate = cur.translate || [0, 0] if (wide) cur.translate[0] = clip(off[0] + dx, xmin, xmax) if (high) cur.translate[1] = clip(off[1] + dy, ymin, ymax) elem.transform(this.push(dx, dy, cur) || cur) } this.setOpts = function (o) { opts = up(opts, o) bbox = new Sky.Box(opts.bbox || {}, true) xmin = bbox.x; xmax = bbox.right; ymin = bbox.y; ymax = bbox.bottom; wide = bbox.width; high = bbox.height; } this.setOpts(opts) }), loop: Orb.type(function Loop(elem, jack, opts) { var bbox, xmin, xmax, ymin, ymax, wide, high, wrap; var opts = up({}, opts) this.elem = elem; this.jack = jack; this.move = function (dx, dy, cur) { var off = cur.translate || [0, 0] var ox = fnt(off[0], xmin), oy = fnt(off[1], ymin), lx = ox, ly = oy, over = true; while (over) { over = false; if (wide) { var wx = lx < xmin && 1 || lx > xmax && -1; if (wx) { over = true; lx += wx * wide; if (!wrap.call(this, wx, 0, ox, oy)) ox += wx * wide; } } if (high) { var wy = ly < ymin && 1 || ly > ymax && -1; if (wy) { over = true; ly += wy * high; if (!wrap.call(this, 0, wy, ox, oy)) oy += wy * high; } } } cur.translate = [ox, oy] return this.push(dx, dy, cur) || cur; } this.setOpts = function (o) { opts = up(opts, o) bbox = new Sky.Box(opts.bbox || {}, true) xmin = bbox.x; xmax = bbox.right; ymin = bbox.y; ymax = bbox.bottom; wide = bbox.width; high = bbox.height; wrap = opts.wrap || noop; } this.setOpts(opts) }), belt: Orb.type(function Belt(elem, jack, opts) { var wbox, bbox, draw; var opts = up({h: true, v: true}, opts) var self = this; var orbs = [].concat(jack), n = orbs.length; var mapk; this.elem = elem; this.jack = orbs.map(function (o, k) { var e = o.elem; o.k = k; return e.wagon(e.loop(o, { wrap: function (wx, wy) { var k_ = o.k; if (draw.call(self, o, mapk(o.k += n * (wx + wy)), wx, wy)) return o.k = k_, true; } })) }, []) this.sync = function () { orbs.map(function (o) { draw.call(self, o, mapk(o.k)) }) } this.setOpts = function (o) { opts = up(opts, o) wbox = up(opts.h ? {} : {width: 0}, opts.v ? {} : {height: 0}) bbox = opts.bbox || elem.bbox() draw = opts.draw || noop; mapk = opts.mapk || id; self.jack.map(function (w) { w.setOpts({bbox: wbox}) w.jack.setOpts({bbox: bbox}) }) } this.setOpts(opts) }), treadmill: Orb.type(function Treadmill(elem, jack, opts) { var init, dims, soln, bbox, unit, shape, rows, cols; var opts = up({h: true, v: true}, opts) var orbs = [] var self = this; this.elem = elem; this.setOpts = function (o) { opts = up(opts, o) init = opts.init || id; if (soln = Sky.Box.solve(up({bbox: opts.dims}, opts)) || soln) { dims = bbox = soln.bbox; unit = soln.unit; shape = soln.shape; shape = {rows: rows = shape.rows, cols: cols = shape.cols} } else { dims = bbox = unit = elem.bbox() shape = {rows: rows = 1, cols: cols = 1} } if (opts.h) { shape.cols = Math.ceil(cols + 1) bbox = Sky.Box.solve({unit: unit, shape: shape}).bbox.shift(1 - unit.w, 0) } if (opts.v) { shape.rows = Math.ceil(rows + 1) bbox = Sky.Box.solve({unit: unit, shape: shape}).bbox.shift(0, 1 - unit.h) } orbs.map(function (o) { o.elem.remove() }) orbs = unit.stack(function (a, b) { var o = elem.g().shift(b.x, b.y).orb({dims: b.xy()}) return a.push(init.call(self, o) || o), a; }, [], shape) self.dims = dims; self.bbox = bbox; self.unit = unit; self.rows = rows; self.cols = cols; self.jack = elem.belt(cat(orbs, jack), ext(opts, {bbox: bbox})) self.sync() } this.setOpts(opts) }), wheel: Orb.type(function Wheel(elem, jack, opts) { var kx, ky, rx, ry, gunit, settle, active, window, offset, range, zero, u, i; var opts = up({kx: 2, ky: 2, rx: 3, ry: 3}, opts) var self = this; var tmill = this.tmill = elem.treadmill(null) var guide = this.guide = elem.guide(tmill) var tether = guide.hook = elem.tether(cat(guide, jack)) this.thru(tmill, ['dims', 'bbox', 'unit', 'rows', 'cols']) this.elem = elem; this.jack = tether; this.getActive = function () { return guide.slot().map(function (v) { return -v }) } this.setActive = function (x, y) { return tether.goto(-x * u.w, -y * u.h) } this.setOpts = function (o) { opts = up(opts, o) kx = pop(opts, 'kx', kx) ky = pop(opts, 'ky', ky) rx = pop(opts, 'rx', rx) ry = pop(opts, 'ry', ry) gunit = pop(opts, 'gunit', gunit) settle = pop(opts, 'settle', settle) active = pop(opts, 'active', active) window = pop(opts, 'window', window) offset = pop(opts, 'offset', offset || [0, 0]) range = pop(opts, 'range', range) zero = pop(opts, 'zero', zero || [0, 0]) tmill.setOpts(ext(opts, {mapk: function (k) { return k - i }})) guide.setOpts({ kx: kx, ky: ky, unit: gunit || self.unit, settle: function (x, y) { settle && settle(-x, -y) } }) u = self.unit; i = zero[0] + zero[1] * self.cols; if (range) { var r = up({rows: 1, cols: 1}, range) var w = up({rows: self.rows, cols: self.cols}, window) var a = Sky.box(0, 0, offset[0] * u.w, offset[1] * u.h) var b = u.times({cols: max(r.cols - w.cols, 0), rows: max(r.rows - w.rows, 0)}).align(a, 1, 1) tether.setOpts({bbox: Sky.box().join(b), rx: rx, ry: ry, px: 0, py: 0}) } self.setActive.apply(this, active || []) self.sync() } this.setOpts(opts) }) }) Sky.SVGElem.prototype.update({ dolly: Orb.type(function Dolly(elem, jack, opts) { var vbox, bbox, xmin, xmax, ymin, ymax; var opts = up({}, opts) this.elem = elem; this.jack = jack; this.move = function (dx, dy) { var cur = elem.node.viewBox.baseVal; var dim = [clip(cur.x - dx, xmin, xmax), clip(cur.y - dy, ymin, ymax), cur.width, cur.height] elem.attrs({viewBox: this.push(dx, dy, dim) || dim}) } this.setOpts = function (o) { opts = up(opts, o) vbox = new Sky.Box(opts.vbox || elem.bbox()) bbox = new Sky.Box(opts.bbox || {}, true) bbox = bbox.trim(0, vbox.width, 0, vbox.height) xmin = bbox.x; xmax = bbox.right; ymin = bbox.y; ymax = bbox.bottom; elem.attrs({viewBox: vbox}) } this.setOpts(opts) }) }) return Orb; }39:[] 30:{"id":"1ac89389f061035a","slug":"sky","title":"sky","thumbnail":"82016b7f2cb03d53702a84ad23ca13cef95928ae6da3cb2ad45197ac05e32557","access_level":"public","create_time":"$D2018-06-08T05:34:45.267Z","update_time":"$D2022-03-22T04:22:54.959Z","view_time":null,"first_public_time":"$D2018-06-13T00:10:23.445Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4e6aa1eb2be00f34","login":"jflatow","name":"Jared Flatow","avatar_url":"https://avatars-next.observableusercontent.com/1aaa43b64ef2f86c4c6d791047505af1aab3f07d356467b701204e46b9cc3650","tier":"starter_2024"},"version":594,"publish_version":594,"role":null,"authored":false,"authors":[{"type":"individual","id":"73ce64867802ba8e","login":"jflatow","name":"Jared Flatow","avatar_url":"https://avatars-next.observableusercontent.com/1aaa43b64ef2f86c4c6d791047505af1aab3f07d356467b701204e46b9cc3650","tier":null}],"members":[{"type":"individual","id":"73ce64867802ba8e","login":"jflatow","name":"Jared Flatow","avatar_url":"https://avatars-next.observableusercontent.com/1aaa43b64ef2f86c4c6d791047505af1aab3f07d356467b701204e46b9cc3650","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"sky","cells":[{"id":0,"value":"md`# sky`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"md`## Notation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\n[sky](https://github.com/jflatow/sky) as an Observable notebook\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"E = Math.E","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Inf = Infinity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"Rt2 = sqrt(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"Phi = (sqrt(5) + 1) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"phi = (sqrt(5) - 1) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"abs = Math.abs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"log = Math.log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"min = Math.min","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"max = Math.max","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"rnd = Math.round","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"function sqr(x) { return x * x }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"sqrt = Math.sqrt","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"add = (p, d) => isFinite(d) ? p + d : d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"dfn = (x, d) => isNaN(x) ? d : x","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"fnt = (x, d) => isFinite(x) ? x : d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"get = (a, k, d) => { let v = a[k]; return v == undefined ? d : v }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"set = (a, k, v) => { let b = b || {}; b[k] = v; return b }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"pop = (a, k, d) => { let v = get(a, k, d); delete a[k]; return v }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"pre = (a, k, d) => { return a[k] = get(a, k, d) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"map = (a, f) => [].concat(a || []).map(f)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"each = (a, f) => a && a.map ? a.map(f) : f(a, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"up = Object.assign","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"copy = (b) => up({}, b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"clip = (x, m, M) => min(max(x, m), M)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"randInt = (m, M) => Math.round((M - m) * Math.random()) + m","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"rad = (a) => Math.PI / 180 * a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"sin = (a) => Math.sin(rad(a))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"cos = (a) => Math.cos(rad(a))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"tan = (a) => Math.tan(rad(a))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"cut = (x) => clip(x, -359.999, 359.999)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"polar = (r, a) => [r * cos(a), r * sin(a)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md`## Path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"md`## Units`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`## Box`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"function box(x, y, w, h) { return new Box({x, y, w, h}) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"md`## RGB`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"function rgb(r, g, b, a) { return new RGB({r, g, b, a}) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`### Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"{\n let elem = html``\n while (await Promises.delay(300, true)) {\n elem.value = RGB.random().toHex()\n yield elem;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"md`## Elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`\nThese are from [sun](https://github.com/jflatow/sky/blob/master/sun.js) and [orb](https://github.com/jflatow/sky/blob/master/ext/orb.js)\n\nThis should all get reworked now\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"md`## Sun/Orb`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"ext = (a, b) => up(Object.create(a), b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"cat = (a, b) => b ? [].concat(a, b) : a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"sgn = (x) => x < 0 ? -1 : 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"id = (o) => o","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"noop = () => null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"touch = typeof(window.ontouchstart) != 'undefined'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"pointerup = touch ? 'touchend' : 'mouseup'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"pointerdown = touch ? 'touchstart' : 'mousedown'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"pointermove = touch ? 'touchmove' : 'mousemove'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"pointerexit = [pointerup, touch ? 'touchcancel' : 'mouseleave'].join(' ')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`### Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"{\n await Orb;\n const box = Sky.box(0, 0, width, 100)\n const svg = Sky.svg(DOM.svg(box.w, box.h))\n const rect = svg.rect(0, 0, 10, 10).attrs({fill: RGB.random()})\n rect.swipe(rect.wagon())\n const circle = svg.circle(25, 25, 10).attrs({fill: RGB.random()})\n circle.swipe(circle.spring(circle.wagon()))\n return svg.node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 31:"$30:body"