# yyz

> Experimental generative art toolkit based on JSX and esbuild. *Currently just a proof of concept*! Don't rely on this for anything, but feel free to poke around and check out the code locally to test it.

Latest version **1.0.2** (published 2021-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install yyz
pnpm add yyz
yarn add yyz
bun add yyz
```

Provides the command `yyz`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-01-25 |
| First published | 2020-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 23 |
| Unpacked size | 195.8 KB |
| Known vulnerabilities | 0 (+8 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 187 |
| Author | Matt DesLauriers |
| Maintainers | mattdesl |

## Links

- npm: https://www.npmjs.com/package/yyz
- Repository: https://github.com/mattdesl/yyz
- Issues: https://github.com/mattdesl/yyz/issues
- npm.io page: https://npm.io/package/yyz

## Dependencies (23)

- [ws](https://npm.io/package/ws.md) ^7.4.0
- [sirv](https://npm.io/package/sirv.md) ^1.0.7
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [svelte](https://npm.io/package/svelte.md) ^3.30.0
- [dat.gui](https://npm.io/package/dat.gui.md) ^0.7.7
- [defined](https://npm.io/package/defined.md) ^1.0.0
- [esbuild](https://npm.io/package/esbuild.md) ^0.8.17
- [express](https://npm.io/package/express.md) ^4.17.1
- [chokidar](https://npm.io/package/chokidar.md) ^3.4.3
- [get-port](https://npm.io/package/get-port.md) ^5.1.1
- [is-class](https://npm.io/package/is-class.md) 0.0.9
- [minimist](https://npm.io/package/minimist.md) ^1.2.5
- [url-join](https://npm.io/package/url-join.md) ^4.0.1
- [gl-matrix](https://npm.io/package/gl-matrix.md) ^3.3.0
- [maxstache](https://npm.io/package/maxstache.md) ^1.0.7
- [pretty-ms](https://npm.io/package/pretty-ms.md) ^7.0.1
- [reload-css](https://npm.io/package/reload-css.md) ^1.0.2
- [load-script](https://npm.io/package/load-script.md) ^1.0.0
- [esbuild-wasm](https://npm.io/package/esbuild-wasm.md) ^0.8.12
- [canvas-sketch](https://npm.io/package/canvas-sketch.md) ^0.7.4
- [jsx-transpiler](https://npm.io/package/jsx-transpiler.md) ^0.1.4
- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1
- [canvas-sketch-util](https://npm.io/package/canvas-sketch-util.md) ^1.10.0

## Recent versions

- 1.0.2 (latest) — 2021-01-25
- 1.0.1 — 2021-01-25
- 1.0.0 — 2020-11-12

## README

# yyz

Experimental generative art toolkit based on JSX and esbuild. *Currently just a proof of concept*! Don't rely on this for anything, but feel free to poke around and check out the code locally to test it.

```sh
git clone https://github.com/mattdesl/yyz.git

cd yyz
npm install

# now run one of the sketches
node . sketches/DotSin.js

# or...
node . sketches/RadialCircle.js

# or...
node . sketches/Rings.js

# or...
node . sketches/Random.js
```

Once it's running, open [http://localhost:9966/](http://localhost:9966/), then you can edit the code in the selected `sketches/*.js` file to see it re-render. Hit `Cmd/Ctrl + S` to download a higher resolution output (saved to your Downloads folder).

See [canvas-sketch](https://github.com/mattdesl/canvas-sketch) for a similar toolkit (without JSX/esbuild) that is much more complete.

## Sketches

Sketches are defined with JSX, like the following:

```js
import { math, random } from "yyz";

export const settings = {
  dimensions: [1280, 1280],
  animate: true,
};

export default (props, { width, height, playhead }) => {
  const count = 20;
  const radius = 10;
  const margin = min(width, height) * 0.1;
  return math.range(count).map((i) => {
    const x = math.map(i, 0, count - 1, margin, width - margin);
    const offset = (sin((i / count) * 4 + playhead * PI * 2) * height) / 4;
    return <arc x={x} y={height / 2 + offset} radius={radius} />;
  });
};
```

Currently only a few basic builtins are included: `arc`, `rect`, `background` (full-screen fill), `g` (group), `point`, `arcpath`, and `segment`. These will likely change.

## Components

You can define components just like in React et al, except the second argument is the "app state" i.e. width/height, current time in seconds, etc.

```js
const CenteredArc = (props, { width, height }) => {
  // render something
  return <arc {...props} x={width/2} y={height/2} />
};

export default () => {
  return <CenteredArc fill='red' radius={5} />
}
```

## Randomness

Each time you reload the page, you will get a fixed seeded randomness for the `yyz` random utility. See the `Random.js` sketch:

```js
import { math, random } from "yyz";
import paperColors from "paper-colors";
import palettes from "nice-color-palettes";

export const settings = {
  dimensions: [1280, 1280],
};

export default (props, { width, height, playhead }) => {
  const count = 10;
  const points = [];
  const dim = Math.min(width, height);
  const margin = dim * 0.2;
  const background = random.pick(paperColors).hex;
  const palette = random.shuffle(random.pick(palettes)).slice(0, 3);
  for (let y = 0; y < count; y++) {
    for (let x = 0; x < count; x++) {
      const color = random.pick(palette);
      const px = math.mapRange(x, 0, count - 1, margin, width - margin);
      const py = math.mapRange(y, 0, count - 1, margin, height - margin);
      const radius = Math.abs(random.gaussian(0, dim * 0.02));
      const p = <arc x={px} y={py} fill={color} radius={radius} />;
      points.push(p);
    }
  }
  return <background fill={background}>{points}</background>;
};
```

## Print Resolution Exports

Check the `settings` defined below. Then all your units will be in the units you specify, here it's `in` for inches:

```js
import { math, random } from "yyz";

export const settings = {
  units: "in",
  dimensions: [12, 12],
  pixelsPerInch: 300,
};

export default (props, { width, height, playhead }) => {
  const count = 10;
  const arcs = math.linspace(count).map((t) => {
    const x = math.mapRange(t, 0, 1, 0.25, 0.75 - 0.25 / 2) * width;
    const y = height / 2;
    const radius = math.mapRange(t, 0, 1, 0.05, 0.25) * width;
    const lineWidth = 0.005 * width;
    return (
      <arcpath
        steps={9}
        lineJoin="round"
        lineWidth={lineWidth}
        x={x}
        y={y}
        radius={radius}
        fill={false}
        stroke="black"
      />
    );
  });
  return <background fill="hsl(0, 0%, 95%)">{arcs}</background>;
};
```

## More

This is very early stages, and might not go anywhere, or it might go somewhere. The main motivation here is modularization of generative art code, fast iterative development, agnostic render outputs (SVG, Canvas, WebGL, JSON, GLTF, etc), and eventual GUI and "no-code" wrappers with color pickers, sliders, component wiring, etc.

## License

MIT, see [LICENSE.md](http://github.com/mattdesl/yyz/blob/master/LICENSE.md) for details.

---
_Source: https://npm.io/package/yyz · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._