real generation working with oneping

dist/js/gum.js

@@ -235,7 +235,7 @@ function lingrid(xlim, ylim, N) {
     let [Nx, Ny] = ensure_vector(N, 2);
     let xgrid = linspace(...xlim, Nx);
     let ygrid = linspace(...ylim, Ny);
-    return grid(xgrid, ygrid);
+    return meshgrid(xgrid, ygrid);
 }
 
 function ensure_vector(x, n) {
@@ -319,6 +319,7 @@ function max(...vals) {
 }
 
 // constants
+let e = new NamedNumber('e', Math.E);
 let pi = new NamedNumber('pi', Math.PI);
 let phi = new NamedNumber('phi', (1+sqrt(5))/2);
 let r2d = new NamedNumber('r2d', 180/Math.PI);
@@ -665,7 +666,7 @@ class Context {
         rect = rect ?? coord_base;
         rotate = rotate ?? 0;
         expand = expand ?? false;
-        invar = invar ?? false;
+        invar = invar ?? true;
         align = align ?? 'center';
         pivot = pivot ?? 'center';
 
@@ -922,7 +923,7 @@ class Group extends Container {
 class Frame extends Container {
     constructor(child, args) {
         let {
-            padding, margin, border, aspect, adjust, flex, rotate, align, shrink, shape, ...attr0
+            padding, margin, border, aspect, adjust, flex, rotate, invar, align, shrink, shape, ...attr0
         } = args ?? {};
         let [border_attr, attr] = prefix_split(['border'], attr0);
         border = border ?? 0;
@@ -953,7 +954,7 @@ class Frame extends Container {
         let rect = new shape(rargs);
 
         // gather children
-        let children = [[child, {rect: crect, rotate, align, shrink}]];
+        let children = [[child, {rect: crect, rotate, invar, align, shrink}]];
         children.unshift([rect, brect]);
 
         // pass to Container
@@ -1956,7 +1957,7 @@ class Arrowhead extends Container {
         let rect = rad_rect(pos, rad2);
 
         // pass to group for rotate
-        let child = [shape, {rect, rotate: -direc, invar: true}];
+        let child = [shape, {rect, rotate: -direc}];
         super([child]);
     }
 }
@@ -2531,7 +2532,7 @@ class XLabel extends Frame {
 class YLabel extends Frame {
     constructor(text, attr) {
         let label = is_element(text) ? text : new Text(text, attr);
-        super(label, {rotate: -90});
+        super(label, {rotate: -90, invar: false});
     }
 }
 
@@ -2716,7 +2717,6 @@ class Plot extends Container {
             xaxis = null;
         }
 
-
         // default yaxis generation
         if (yaxis === true) {
             yaxis = new VAxis(yticks, {
@@ -3160,7 +3160,7 @@ class Animation {
  **/
 
 let Gum = [
-    Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, Interactive, Variable, Slider, Toggle, List, Animation, Continuous, Discrete, range, linspace, enumerate, repeat, meshgrid, lingrid, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, gzip, zip, reshape, split, pos_rect, pad_rect, rad_rect, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, pi, phi, r2d, rounder, make_ticklabel, aspect_invariant, random, random_uniform, random_gaussian, cumsum, blue, red, green, Filter, Effect, DropShadow
+    Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, Interactive, Variable, Slider, Toggle, List, Animation, Continuous, Discrete, range, linspace, enumerate, repeat, meshgrid, lingrid, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, gzip, zip, reshape, split, pos_rect, pad_rect, rad_rect, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, e, pi, phi, r2d, rounder, make_ticklabel, aspect_invariant, random, random_uniform, random_gaussian, cumsum, blue, red, green, Filter, Effect, DropShadow
 ];
 
 // detect object types
@@ -3268,4 +3268,4 @@ function injectImages(elem) {
     });
 }
 
-export { Anchor, Animation, ArcDel, ArcTo, Arrow, Arrowhead, Axis, Bar, BarPlot, Bars, Bezier2, Bezier2Line, Bezier2Path, Bezier3, Bezier3Line, Circle, ClosePath, Container, Context, Continuous, Discrete, Dot, DropShadow, Edge, Effect, Element, Ellipse, Field, Filter, Frame, Graph, Grid, Group, Gum, HAxis, HBars, HLabels, HLine, HMultiBar, HScale, HStack, HorizontalDel, HorizontalTo, Interactive, Labels, Legend, Line, LineTo, List, MoveTo, Network, Node, Note, Path, Place, Plot, Polygon, Polyline, Ray, Rect, Rotate, SVG, Scale, Scatter, Slider, Spacer, Square, SymField, SymFill, SymPath, SymPoints, SymPoly, Tex, Text, Toggle, VAxis, VBars, VLabels, VLine, VMultiBar, VScale, VStack, Variable, VerticalDel, VerticalTo, abs, add, aspect_invariant, ceil, cos, cumsum, demangle, enumerate, exp, floor, gums, gzip, hex2rgb, injectImage, injectImages, injectScripts, interpolateHex, interpolateVectors, interpolateVectorsPallet, lingrid, linspace, log, make_ticklabel, mako, max, meshgrid, min, mul, norm, pad_rect, parseGum, phi, pi, pos_rect, pow, props_repr, r2d, rad_rect, random, random_gaussian, random_uniform, range, renderElem, renderGum, repeat, reshape, rgb2hex, rgb2hsl, round, rounder, setTextSizer, sin, split, sqrt, zip };
+export { Anchor, Animation, ArcDel, ArcTo, Arrow, Arrowhead, Axis, Bar, BarPlot, Bars, Bezier2, Bezier2Line, Bezier2Path, Bezier3, Bezier3Line, Circle, ClosePath, Container, Context, Continuous, Discrete, Dot, DropShadow, Edge, Effect, Element, Ellipse, Field, Filter, Frame, Graph, Grid, Group, Gum, HAxis, HBars, HLabels, HLine, HMultiBar, HScale, HStack, HorizontalDel, HorizontalTo, Interactive, Labels, Legend, Line, LineTo, List, MoveTo, Network, Node, Note, Path, Place, Plot, Polygon, Polyline, Ray, Rect, Rotate, SVG, Scale, Scatter, Slider, Spacer, Square, SymField, SymFill, SymPath, SymPoints, SymPoly, Tex, Text, Toggle, VAxis, VBars, VLabels, VLine, VMultiBar, VScale, VStack, Variable, VerticalDel, VerticalTo, abs, add, aspect_invariant, ceil, cos, cumsum, demangle, e, enumerate, exp, floor, gums, gzip, hex2rgb, injectImage, injectImages, injectScripts, interpolateHex, interpolateVectors, interpolateVectorsPallet, lingrid, linspace, log, make_ticklabel, mako, max, meshgrid, min, mul, norm, pad_rect, parseGum, phi, pi, pos_rect, pow, props_repr, r2d, rad_rect, random, random_gaussian, random_uniform, range, renderElem, renderGum, repeat, reshape, rgb2hex, rgb2hsl, round, rounder, setTextSizer, sin, split, sqrt, zip };

docs/code/arrays.js

@@ -0,0 +1,6 @@
+// array example
+let emoji = zip(range(1, 6), ['🗻', '🚀', '🐋', '🍉', '🍩']);
+let scatter = Scatter(emoji.map(([i, e]) => [Text(e), [i, i]]), {size: 0.4});
+let plot = Plot(scatter, {xlim: [0, 6], ylim: [0, 6]});
+let frame = Frame(plot, {margin: 0.15});
+return frame;

docs/code/colors.js

@@ -0,0 +1,17 @@
+// fancy plot
+let xlim = [0, 2*pi], ylim = [-1, 1];
+let func = x => -sin(x);
+let pal = x => interpolateHex(blue, red, x);
+let xticks = linspace(0, 2, 6).slice(1).map(x => [x*pi, `${rounder(x, 1)} π`]);
+let line = SymPath({fy: func, xlim});
+let points = SymPoints({
+  fy: func, xlim, N: 21, size: 0.04,
+  fs: (x, y) => Circle({fill: pal((1+y)/2), rad: (1+abs(y))/2})
+});
+let plot = Plot([line, points], {
+  xlim, ylim, xanchor: 0, aspect: 1.5, xaxis_tick_pos: 'both',
+  xticks, yticks: 5, xgrid: true, ygrid: true, xlabel_offset: 0.1,
+  xlabel: 'phase', ylabel: 'amplitude', title: 'Inverted Sine Wave',
+  xgrid_stroke_dasharray: 3, ygrid_stroke_dasharray: 3
+});
+return Frame(plot, {margin: 0.25});

docs/code/graph.js

@@ -1,5 +1,5 @@
 // ride the snake
-let sqr = x => Rotate(Square(), r2d*x, {invar: true});
+let sqr = x => Rotate(Square(), r2d*x);
 let boxes = SymPoints({
   fy: sin, fs: sqr, size: 0.4, xlim: [0, 2*pi], N: 150
 });

docs/code/math.js

@@ -0,0 +1,5 @@
+// example of using math in a plot
+func = x => exp(sin(x));
+path = SymPath({fy: func, xlim: [0, 2*pi]});
+plot = Plot(path, {aspect: phi, ylim: [0, 3]});
+return Frame(plot, {margin: 0.15});

docs/code/place.js

@@ -1,6 +1,6 @@
 // plop down a rectangle
 let rect = Rect();
 let place = Place(rect, {
-  pos: [0.6, 0.4], rad: [0.2, 0.1], rotate: 20, invar: true
+  pos: [0.6, 0.4], rad: [0.2, 0.1], rotate: 20
 });
 return place;

docs/code/text.js

@@ -0,0 +1,2 @@
+// text greeting
+return Text('Hello World!', {font_weight: 'bold'});

docs/meta.json

@@ -28,8 +28,14 @@
         "Note"
     ],
     "networks": [
+        "Text",
         "Node",
         "Edge",
         "Network"
+    ],
+    "functions": [
+        "Math",
+        "Arrays",
+        "Colors"
     ]
 }

docs/text/arrays.md

@@ -0,0 +1,23 @@
+# Arrays
+
+There are a number of functions designed to make working with arrays easier. They largely mimic similar functions found in core Python or the `numpy` library.
+
+## Functions
+
+- `zip(...arrs)` — combine arrays `arrs` element-wise
+- `reshape(arr, shape)` — reshape array `arr` to given dimensions `shape`
+- `split(arr, len)` — split array `arr` into subarrays of length `len`
+- `sum(arr)` — sum the elements of array `arr`
+- `all(arr)` — check if all elements of array `arr` are true
+- `any(arr)` — check if any element of array `arr` is true
+- `add(arr1, arr2)` — add arrays `arr1` and `arr2` element-wise
+- `mul(arr1, arr2)` — multiply arrays `arr1` and `arr2` element-wise
+- `cumsum(arr, first=true)` — compute the cumulative sum of array `arr` with the option to start at zero
+- `norm(arr, degree=1)` — compute the `degree`-norm of array `arr`
+- `normalize(arr, degree=1)` — normalize array `arr` to have `degree`-norm one
+- `range(i0, i1, step=1)` — generate an array of evenly spaced values from `i0` to `i1` with spacing `step`
+- `linspace(x0, x1, n=50)` — generate an array of `n` evenly spaced values between `x0` and `x1`
+- `enumerate(arr)` — pair each element of array `arr` with its index
+- `repeat(x, n)` — repeat array `x` a total of `n` times
+- `meshgrid(x, y)` — create a mesh grid from arrays `x` and `y`
+- `lingrid(xlim, ylim, N)` — create a 2D grid of `N = [Nx, Ny]` points over the ranges `xlim` and `ylim`

docs/text/colors.md

@@ -0,0 +1,16 @@
+# Colors
+
+There are a few functions designed to manipulate colors in HEX, RGB, and HSL formats.
+
+## Constants
+
+- `blue`= `'#1e88e5'` — a neon blue color
+- `red`= `'#ff0d57'` — a neon red color
+- `green`= `'#4caf50'` — a neon green color
+
+## Functions
+
+- `hex2rgb(hex)` — convert a HEX color string to an RGB array
+- `rgb2hex(rgb)` — convert an RGB array to a HEX color string
+- `rgb2hsl(rgb)` — convert an RGB array to an HSL array
+- `interpolateHex(hex1, hex2, alpha)` — interpolate between two HEX colors with weight `alpha` and return the result in RGB format. This is useful for creating continuous color palettes.

docs/text/gum.md

@@ -4,7 +4,7 @@ Welcome to the gum.js docs! Click on an item in the list on the left to get more
 
 Each entry has a description of the operation and arguments of the item and an associated example code snippet. You can edit the code snippet, but note that these will get clobbered if you navigate to another entry! Go to the <a href="/">main editor</a> for non-ephemeral work.
 
-### Common Patterns
+## Common Patterns
 
 *Keyword arguments*: all subclasses of [Element](#Element) take a dictionary called `args` as their final argument. If not used directly by the element, they are passed down to the `Element` constructor and included as properties of the SVG element. Using this, one can directly set SVG properties. For instance, you could specify `stroke` or `fill` colors directly. Note that you must use `_` in place of `-`, so something like `stroke-width` would be specified as `stroke_width` and automatically converted.
 

docs/text/math.md

@@ -0,0 +1,26 @@
+# Math
+
+Here we collect a variety of global mathematical functions and constants. You can still use the core JavaScript `Math` library as well.
+
+## Constants
+
+- `e` — the base of the natural logarithm (e)
+- `pi` — the geometric constant (π)
+- `phi` — the golden ratio (φ)
+- `r2d` — the conversion factor between radians and degrees (180/π)
+- `d2r` — the conversion factor between degrees and radians (π/180)
+
+## Functions
+
+- `exp(x)` — the exponential function
+- `log(x)` — the natural logarithm
+- `sin(x)` — the sine function
+- `cos(x)` — the cosine function
+- `tan(x)` — the tangent function
+- `abs(x)` — the absolute value
+- `pow(x, y)` — the power function
+- `sqrt(x)` — the square root function
+- `sign(x)` — the sign function
+- `floor(x)` — the floor function
+- `ceil(x)` — the ceiling function
+- `round(x)` — the rounding function

docs/text/place.md

@@ -16,4 +16,4 @@ Keyword arguments:
 - `align` = `center` — how to align the child when it doesn't fit exactly within `rect`, options are `left`, `right`, `center`, or a fractional position (can set vertical and horizontal separately with a pair)
 - `rotate` = `0` — how much to rotate the child by (degrees counterclockwise)
 - `pivot` = `center` — the point around which to do the rotation (can set vertical and horizontal separately with a pair)
-- `invar` = `false` — whether to ignore rotation when sizing child element
+- `invar` = `true` — whether to ignore rotation when sizing child element

docs/text/text.md

@@ -0,0 +1,19 @@
+# Text
+
+<span class="inherit">[Element](#Element)</span>
+
+Creates a new `Text` element. Uses built-in browser facilities when available to calculate font size and aspect ratio.
+
+Positional arguments:
+
+- `text`: a string to be used as the content
+
+Keyword arguments:
+
+- `size` = `12`: the font size (preferred over direct `font_size` property)
+- `actual` = `false`: whether to use actual size calculations
+- `hshift` = `0.0`: horizontal shift of the text
+- `vshift` = `-0.13`: vertical shift of the text
+- `calc_family`: the font family to use for size calculations
+- `calc_weight`: the font weight to use for size calculations
+- `calc_size`: the font size to use for size calculations