gum-jsx 1.6.1 → 1.6.2

package/docs/code/Arc.jsx

@@ -1,5 +1,5 @@
 // elliptical and circular arcs using start and end angles
 <Group>
-  <Arc pos={[0.32, 0.5]} size={[0.44, 0.32]} start={-45} end={210} stroke={blue} stroke-width={2} />
-  <Arc pos={[0.72, 0.5]} size={0.32} start={90} end={-150} stroke={red} stroke-width={2} />
-</Group>
+  <Arc pos={[0.3, 0.5]} size={[0.4, 0.3]} start={-45} end={210} stroke={blue} stroke-width={2} />
+  <Arc pos={[0.7, 0.5]} size={0.3} start={90} end={-150} stroke={red} stroke-width={2} />
+</Group>

package/docs/code/Axis.jsx

@@ -2,5 +2,5 @@
 const emoji = ['🗻', '🚀', '🐳', '🍉', '🍩']
 const ticks = zip(linspace(0, 1, emoji.length), emoji)
 return <Box padding={[0.5, 1]}>
-  <HAxis aspect={10} ticks={ticks} tick-side="outer" label-size={1} />
+  <HAxis aspect={10} ticks={ticks} tick-side="outer" label-size={1} label-offset={0.25} />
 </Box>

package/docs/code/Element.jsx

@@ -1,3 +1,5 @@
-// create a custom triangle element called `Tri` and use it to create a triangle with a gray fill
-const Tri = ({ pos0, pos1, pos2, ...attr }) => <Shape {...attr} points={[pos0, pos1, pos2]} />
-return <Tri pos0={[0.5, 0.1]} pos1={[0.9, 0.9]} pos2={[0.1, 0.9]} fill={gray} />
+// draw a 2x1 rectangle in red with a blue square embedded within it
+<Group aspect={2}>
+  <Rect stroke={red} />
+  <Square stroke={blue} />
+</Group>

package/docs/code/Line.jsx

@@ -1,13 +1,8 @@
-// draw a diagonal line in blue and a cup shaped line in red
-<Group>
-  <Line stroke={blue} points={[
-    [0.2, 0.2],
-    [0.8, 0.8],
-  ]} />
-  <Line stroke={red} points={[
-    [0.3, 0.3],
-    [0.3, 0.7],
-    [0.7, 0.7],
-    [0.7, 0.3],
-  ]} />
-</Group>
+// draw a piecewise line spiraling outwards (with dots at vertices)
+const spiral = linspace(0, 5, 25).map(t => polar(360 * t, t/5))
+return <Box margin>
+  <Graph coord={[-1, -1, 1, 1]}>
+    <Line points={spiral} />
+    <Points points={spiral} point-size={0.03} />
+  </Graph>
+</Box>

package/docs/code/Math.jsx

@@ -1,14 +1,10 @@
-// use polar to place points around a circle
-const center = [0.5, 0.5]
-const ring = range(10).map(i => {
-  const radius = i % 2 == 0 ? 0.32 : 0.16
-  return polar([radius, -90 + 36 * i], center)
+// embed a five point star in a circle. place red dots at its vertices.
+const verts = linspace(0, 360, 10, false).map((t, i) => {
+  const radius = i % 2 == 0 ? 1 : 0.5
+  return polar(90 + t, radius)
 })
-const spokes = range(5).map(i => polar([0.32, -90 + 72 * i], center))
-
-return <Group aspect={1}>
-  <Circle pos={center} size={0.64} stroke={darkgray} />
-  <Shape points={ring} stroke={blue} stroke-width={2} />
-  {spokes.map(pos => <Line points={[center, pos]} stroke={red} stroke-width={1.5} />)}
-  {ring.map(pos => <Dot pos={pos} size={0.03} fill={blue} />)}
-</Group>
+return <Graph aspect coord={[-1, -1, 1, 1]}>
+  <Circle pos={[0, 0]} size={2} stroke={darkgray} />
+  <Shape points={verts} stroke={blue} stroke-width={2} />
+  {verts.map(pos => <Dot pos={pos} size={0.05} fill={red} />)}
+</Graph>

package/docs/code/RoundedLine.jsx

@@ -1,15 +1,11 @@
 // a city-block route in blue with rounded corners, with the underlying
 // vertices marked as black dots to show how the corners are rounded
 const points = [
-  [0.10, 0.20],
-  [0.40, 0.20],
-  [0.40, 0.80],
-  [0.70, 0.80],
-  [0.70, 0.50],
-  [0.90, 0.50],
+  [-0.8,  0.6], [-0.2,  0.6], [-0.2, -0.6],
+  [ 0.4, -0.6], [ 0.4,  0.0], [ 0.8,  0.0],
 ]
-return <Frame margin>
-  <Line opacity={0.3} points={points} />
-  <RoundedLine stroke={blue} stroke-width={2} radius={0.08} points={points} />
-  <Points point-size={0.015} points={points} />
-</Frame>
+return <Graph aspect padding>
+  <Line points={points} opacity={0.3} />
+  <RoundedLine points={points} stroke={blue} stroke-width={2} radius={0.1} />
+  <Points points={points} point-size={0.03} />
+</Graph>

package/docs/code/Shape.jsx

@@ -1,14 +1,8 @@
-// draw a blue triangle with a semi-transparent green square overlaid on top
-<Group>
-  <Shape fill={blue} stroke={none} points={[
-    [0.5, 0.2],
-    [0.8, 0.8],
-    [0.2, 0.8]
-  ]} />
-  <Shape fill={green} stroke={none} opacity={0.5} points={[
-    [0.3, 0.3],
-    [0.7, 0.3],
-    [0.7, 0.7],
-    [0.3, 0.7]
-  ]} />
-</Group>
+// draw a stop sign
+const hexagon = linspace(0, 360, 8, false).map(t => polar(t))
+return <Box fill="#bbb" rounded padding margin>
+  <Graph xlim={[-1, 1]} ylim={[-1, 1]} aspect={1}>
+    <Shape points={hexagon} fill="#CC0202" stroke={white} stroke_width={20} spin={180/8} />
+    <Text pos={[0, 0]} xsize={1.5} color={white} font-weight={bold}>STOP</Text>
+  </Graph>
+</Box>

package/docs/code/Spline.jsx

@@ -7,7 +7,9 @@ const points = [
   [0.50, 0.50],
 ]
 return <Frame rounded margin>
-  <Spline closed stroke={blue} fill={gray} points={points} />
-  <Shape stroke={red} points={points} />
-  <Points point-size={0.02} points={points} />
+  <Group>
+    <Spline closed stroke={blue} fill={gray} points={points} />
+    <Shape stroke={red} points={points} />
+    <Points point-size={0.02} points={points} />
+  </Group>
 </Frame>

package/docs/text/Arrays.md

@@ -16,7 +16,7 @@ There are a number of functions designed to make working with arrays easier. The
 - `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`
+- `linspace(x0, x1, n, end=false)` — generate an array of `n` evenly spaced values between `x0` and `x1` (including `x1` if `end` is true)
 - `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`

package/docs/text/Math.md

@@ -27,6 +27,6 @@ Here we collect a variety of global mathematical functions and constants. You ca
 - `round(x)` — the rounding function
 - `clamp(x, lim=[0, 1])` — clamp `x` to the range `lim`
 - `rescale(x, lim=[0, 1])` — linearly rescale `x` to the range `lim`
-- `polar([radius, angle], center=[0, 0])` — convert polar coordinates to a 2D point
+- `polar(angle, radius=1, center=[0, 0])` — convert polar coordinates (`angle` in degrees, `radius` scalar or size vector) to a 2D point around `center`
 
 Angles use gum's usual screen-space convention: `0` points right and `90` points down.

package/gala/code/pendulum_physics.jsx

@@ -18,9 +18,9 @@ const arcRad = 0.25
 // Computed positions
 const rodRot = 90 - rodAng
 const eqnY = pivotY + rodLen
-const [ bobX, bobY ] = polar([rodLen, rodRot], [pivotX, pivotY])
-const [ midX, midY ] = polar([0.50 * rodLen, rodRot], [pivotX, pivotY])
-const [ tenX, tenY ] = polar([0.75 * rodLen, rodRot], [pivotX, pivotY])
+const [ bobX, bobY ] = polar(rodRot, rodLen, [pivotX, pivotY])
+const [ midX, midY ] = polar(rodRot, 0.50 * rodLen, [pivotX, pivotY])
+const [ tenX, tenY ] = polar(rodRot, 0.75 * rodLen, [pivotX, pivotY])
 
 return <Box margin={0.06}>
   <VStack spacing={0.05}>

package/gala/code/spline_star.jsx

@@ -8,8 +8,8 @@ const theta0 = linspace(0, 2 * pi, n, false).map(t => t - pi / 2)
 const theta1 = theta0.map(t => t + pi / n)
 
 // get inner/outer point positions
-const points0 = theta0.map(t => polar([1, t * r2d]))
-const points1 = theta1.map(t => polar([R, t * r2d]))
+const points0 = theta0.map(t => polar(t * r2d))
+const points1 = theta1.map(t => polar(t * r2d, R))
 const points = zip(points0, points1).flat()
 
 // return full spline

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gum-jsx",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Language for vector graphics generation.",
   "type": "module",
   "author": "Douglas Hanley",

package/prompt/intro.md

@@ -115,11 +115,10 @@ Without specifying `stack-size`, the `Text` element would be quite large (it has
 Here are the handy array functions provided by the library. All of these mimic the behavior of their counterparts in Python and `numpy`. This can be useful for generating `Element` objects from arrays:
 ```typescript
 function zip(...arrs: any[]): any[]
-function range(start: number, end: number, step: number): number[]
-function linspace(start: number, end: number, num: number): number[]
+function range(ia: number, ib?: number, step?: number = 1): number[]
+function linspace(x0: number, x1: number, num: number, end?: boolean = false): number[]
 function enumerate(x: any[]): any[]
 function repeat(x: any, n: number): any[]
-function lingrid(xlim: range, ylim: range, N: number): number[][]
 ```
 
 Some of the most commonly used mathematical constants are pre-defined in the global scope:

package/skills/gum-jsx/SKILL.md

@@ -120,11 +120,10 @@ Without specifying `stack-size`, the `Text` element would be quite large (it has
 Here are the handy array functions provided by the library. All of these mimic the behavior of their counterparts in Python and `numpy`. This can be useful for generating `Element` objects from arrays:
 ```typescript
 function zip(...arrs: any[]): any[]
-function range(start: number, end: number, step: number): number[]
-function linspace(start: number, end: number, num: number): number[]
+function range(ia: number, ib?: number, step?: number = 1): number[]
+function linspace(x0: number, x1: number, num: number, end?: boolean = false): number[]
 function enumerate(x: any[]): any[]
 function repeat(x: any, n: number): any[]
-function lingrid(xlim: range, ylim: range, N: number): number[][]
 ```
 
 Some of the most commonly used mathematical constants are pre-defined in the global scope:
@@ -188,12 +187,14 @@ Methods:
 
 **Example**
 
-Prompt: create a custom triangle element called `Tri` and use it to create a triangle with a gray fill
+Prompt: draw a 2x1 rectangle in red with a blue square embedded within it
 
 Generated code:
 ```jsx
-const Tri = ({ pos0, pos1, pos2, ...attr }) => <Shape {...attr} points={[pos0, pos1, pos2]} />
-return <Tri pos0={[0.5, 0.1]} pos1={[0.9, 0.9]} pos2={[0.1, 0.9]} fill={gray} />
+<Group aspect={2}>
+  <Rect stroke={red} />
+  <Square stroke={blue} />
+</Group>
 ```
 
 ## Group

package/skills/gum-jsx/references/gala/pendulum_physics.md

@@ -29,9 +29,9 @@ const arcRad = 0.25
 // Computed positions
 const rodRot = 90 - rodAng
 const eqnY = pivotY + rodLen
-const [ bobX, bobY ] = polar([rodLen, rodRot], [pivotX, pivotY])
-const [ midX, midY ] = polar([0.50 * rodLen, rodRot], [pivotX, pivotY])
-const [ tenX, tenY ] = polar([0.75 * rodLen, rodRot], [pivotX, pivotY])
+const [ bobX, bobY ] = polar(rodRot, rodLen, [pivotX, pivotY])
+const [ midX, midY ] = polar(rodRot, 0.50 * rodLen, [pivotX, pivotY])
+const [ tenX, tenY ] = polar(rodRot, 0.75 * rodLen, [pivotX, pivotY])
 
 return <Box margin={0.06}>
   <VStack spacing={0.05}>

package/skills/gum-jsx/references/gala/spline_star.md

@@ -19,8 +19,8 @@ const theta0 = linspace(0, 2 * pi, n, false).map(t => t - pi / 2)
 const theta1 = theta0.map(t => t + pi / n)
 
 // get inner/outer point positions
-const points0 = theta0.map(t => polar([1, t * r2d]))
-const points1 = theta1.map(t => polar([R, t * r2d]))
+const points0 = theta0.map(t => polar(t * r2d))
+const points1 = theta1.map(t => polar(t * r2d, R))
 const points = zip(points0, points1).flat()
 
 // return full spline

package/skills/gum-jsx/references/geometry.md

@@ -57,8 +57,8 @@ Prompt: elliptical and circular arcs using start and end angles
 Generated code:
 ```jsx
 <Group>
-  <Arc pos={[0.32, 0.5]} size={[0.44, 0.32]} start={-45} end={210} stroke={blue} stroke-width={2} />
-  <Arc pos={[0.72, 0.5]} size={0.32} start={90} end={-150} stroke={red} stroke-width={2} />
+  <Arc pos={[0.3, 0.5]} size={[0.4, 0.3]} start={-45} end={210} stroke={blue} stroke-width={2} />
+  <Arc pos={[0.7, 0.5]} size={0.3} start={90} end={-150} stroke={red} stroke-width={2} />
 </Group>
 ```
 
@@ -77,22 +77,17 @@ Parameters:
 
 **Example**
 
-Prompt: draw a diagonal line in blue and a cup shaped line in red
+Prompt: draw a piecewise line spiraling outwards (with dots at vertices)
 
 Generated code:
 ```jsx
-<Group>
-  <Line stroke={blue} points={[
-    [0.2, 0.2],
-    [0.8, 0.8],
-  ]} />
-  <Line stroke={red} points={[
-    [0.3, 0.3],
-    [0.3, 0.7],
-    [0.7, 0.7],
-    [0.7, 0.3],
-  ]} />
-</Group>
+const spiral = linspace(0, 5, 25).map(t => polar(360 * t, t/5))
+return <Box margin>
+  <Graph coord={[-1, -1, 1, 1]}>
+    <Line points={spiral} />
+    <Points points={spiral} point-size={0.03} />
+  </Graph>
+</Box>
 ```
 
 ## Shape
@@ -108,23 +103,17 @@ Parameters:
 
 **Example**
 
-Prompt: draw a blue triangle with a semi-transparent green square overlaid on top
+Prompt: draw a stop sign
 
 Generated code:
 ```jsx
-<Group>
-  <Shape fill={blue} stroke={none} points={[
-    [0.5, 0.2],
-    [0.8, 0.8],
-    [0.2, 0.8]
-  ]} />
-  <Shape fill={green} stroke={none} opacity={0.5} points={[
-    [0.3, 0.3],
-    [0.7, 0.3],
-    [0.7, 0.7],
-    [0.3, 0.7]
-  ]} />
-</Group>
+const hexagon = linspace(0, 360, 8, false).map(t => polar(t))
+return <Box fill="#bbb" rounded padding margin>
+  <Graph xlim={[-1, 1]} ylim={[-1, 1]} aspect={1}>
+    <Shape points={hexagon} fill="#CC0202" stroke={white} stroke_width={20} spin={180/8} />
+    <Text pos={[0, 0]} xsize={1.5} color={white} font-weight={bold}>STOP</Text>
+  </Graph>
+</Box>
 ```
 
 ## Fill
@@ -187,9 +176,11 @@ const points = [
   [0.50, 0.50],
 ]
 return <Frame rounded margin>
-  <Spline closed stroke={blue} fill={gray} points={points} />
-  <Shape stroke={red} points={points} />
-  <Points point-size={0.02} points={points} />
+  <Group>
+    <Spline closed stroke={blue} fill={gray} points={points} />
+    <Shape stroke={red} points={points} />
+    <Points point-size={0.02} points={points} />
+  </Group>
 </Frame>
 ```
 
@@ -253,16 +244,12 @@ Generated code:
 ```jsx
 // vertices marked as black dots to show how the corners are rounded
 const points = [
-  [0.10, 0.20],
-  [0.40, 0.20],
-  [0.40, 0.80],
-  [0.70, 0.80],
-  [0.70, 0.50],
-  [0.90, 0.50],
+  [-0.8,  0.6], [-0.2,  0.6], [-0.2, -0.6],
+  [ 0.4, -0.6], [ 0.4,  0.0], [ 0.8,  0.0],
 ]
-return <Frame margin>
-  <Line opacity={0.3} points={points} />
-  <RoundedLine stroke={blue} stroke-width={2} radius={0.08} points={points} />
-  <Points point-size={0.015} points={points} />
-</Frame>
+return <Graph aspect padding>
+  <Line points={points} opacity={0.3} />
+  <RoundedLine points={points} stroke={blue} stroke-width={2} radius={0.1} />
+  <Points points={points} point-size={0.03} />
+</Graph>
 ```

package/skills/gum-jsx/references/plotting.md

@@ -115,7 +115,7 @@ Generated code:
 const emoji = ['🗻', '🚀', '🐳', '🍉', '🍩']
 const ticks = zip(linspace(0, 1, emoji.length), emoji)
 return <Box padding={[0.5, 1]}>
-  <HAxis aspect={10} ticks={ticks} tick-side="outer" label-size={1} />
+  <HAxis aspect={10} ticks={ticks} tick-side="outer" label-size={1} label-offset={0.25} />
 </Box>
 ```
 

package/skills/gum-jsx/references/utilities.md

@@ -29,29 +29,25 @@ Here we collect a variety of global mathematical functions and constants. You ca
 - `round(x)` — the rounding function
 - `clamp(x, lim=[0, 1])` — clamp `x` to the range `lim`
 - `rescale(x, lim=[0, 1])` — linearly rescale `x` to the range `lim`
-- `polar([radius, angle], center=[0, 0])` — convert polar coordinates to a 2D point
+- `polar(angle, radius=1, center=[0, 0])` — convert polar coordinates (`angle` in degrees, `radius` scalar or size vector) to a 2D point around `center`
 
 Angles use gum's usual screen-space convention: `0` points right and `90` points down.
 
 **Example**
 
-Prompt: use polar to place points around a circle
+Prompt: embed a five point star in a circle. place red dots at its vertices.
 
 Generated code:
 ```jsx
-const center = [0.5, 0.5]
-const ring = range(10).map(i => {
-  const radius = i % 2 == 0 ? 0.32 : 0.16
-  return polar([radius, -90 + 36 * i], center)
+const verts = linspace(0, 360, 10, false).map((t, i) => {
+  const radius = i % 2 == 0 ? 1 : 0.5
+  return polar(90 + t, radius)
 })
-const spokes = range(5).map(i => polar([0.32, -90 + 72 * i], center))
-
-return <Group aspect={1}>
-  <Circle pos={center} size={0.64} stroke={darkgray} />
-  <Shape points={ring} stroke={blue} stroke-width={2} />
-  {spokes.map(pos => <Line points={[center, pos]} stroke={red} stroke-width={1.5} />)}
-  {ring.map(pos => <Dot pos={pos} size={0.03} fill={blue} />)}
-</Group>
+return <Graph aspect coord={[-1, -1, 1, 1]}>
+  <Circle pos={[0, 0]} size={2} stroke={darkgray} />
+  <Shape points={verts} stroke={blue} stroke-width={2} />
+  {verts.map(pos => <Dot pos={pos} size={0.05} fill={red} />)}
+</Graph>
 ```
 
 ## Arrays
@@ -72,7 +68,7 @@ There are a number of functions designed to make working with arrays easier. The
 - `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`
+- `linspace(x0, x1, n, end=false)` — generate an array of `n` evenly spaced values between `x0` and `x1` (including `x1` if `end` is true)
 - `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`

package/src/elems/core.ts

@@ -118,7 +118,7 @@ function adjust_rotate(rotate: number, prect: Rect, coord: Rect): number {
     const csize = rect_size(coord)
     const psize = rect_size(prect)
     const proj = div2(psize, csize)
-    const vec = polar([ proj, rotate ])
+    const vec = polar(rotate, proj)
     return vector_angle(vec)
 }
 

package/src/elems/geometry.ts

@@ -191,7 +191,7 @@ class Ray extends Line {
         const [ rx, ry ] = ensure_vector(size, 2)
         const points: Point[] = [
             [ x, y ],
-            polar([ [ rx, ry ], theta ], [ x, y ])
+            polar(theta, [ rx, ry ], [ x, y ])
         ]
         super({ points, ...attr })
         this.args = args
@@ -719,7 +719,7 @@ class Arc extends Path {
         if (start == null || end == null) throw new Error('Must provide `start` and `end` angles')
         const [ theta0, theta1 ] = upright_limits([ start, end ])
         const large = (theta1 - theta0) > 180
-        const [ point0, point1 ] = [ theta0, theta1 ].map(t => polar([0.5, t], [0.5, 0.5]))
+        const [ point0, point1 ] = [ theta0, theta1 ].map(t => polar(t, 0.5, [0.5, 0.5]))
         const children = [ new MoveCmd(point0), new ArcCmd(point1, 0.5, true, large) ]
         super({ children, upright, ...attr })
         this.args = args

package/src/lib/utils.ts

@@ -223,11 +223,11 @@ function range(ia: number, ib?: number, step: number = 1): number[] {
     return [...Array(n).keys()].map(i => i0 + step * i)
 }
 
-function linspace(x0: number, x1: number, n: number, end: boolean = true): number[] {
-    if (end && n == 1) return [ 0.5 * (x0 + x1) ]
-    const n1 = end ? n : n + 1
-    const step = (x1 - x0) / (n1 - 1)
-    const values = [...Array(n1).keys()].map(i => x0 + step * i)
+function linspace(x0: number, x1: number, num: number, end: boolean = true): number[] {
+    if (end && num == 1) return [ 0.5 * (x0 + x1) ]
+    const num1 = end ? num : num + 1
+    const step = (x1 - x0) / (num1 - 1)
+    const values = [...Array(num1).keys()].map(i => x0 + step * i)
     return end ? values : values.slice(0, -1)
 }
 
@@ -799,7 +799,7 @@ function angle_direc(angle: Angle): Point {
     return [ cos(d2r * angle), sin(d2r * angle) ]
 }
 
-function polar([radius, angle]: Polar, center?: Point): Point {
+function polar(angle: number, radius: number | Size = 1, center?: Point): Point {
     const offset = mul2(radius, angle_direc(angle))
     return center ? add2(center, offset) : offset
 }