Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nylki/aframe-lsystem-component
L-System/LSystem component for A-Frame to draw 3D turtle graphics. Using Lindenmayer as backend.
https://github.com/nylki/aframe-lsystem-component
aframe fractal lindenmayer lsystem procedural-generation turtle-graphics
Last synced: 13 days ago
JSON representation
L-System/LSystem component for A-Frame to draw 3D turtle graphics. Using Lindenmayer as backend.
- Host: GitHub
- URL: https://github.com/nylki/aframe-lsystem-component
- Owner: nylki
- License: mit
- Created: 2016-06-15T09:43:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-03T10:21:44.000Z (over 6 years ago)
- Last Synced: 2024-04-23T18:15:29.086Z (7 months ago)
- Topics: aframe, fractal, lindenmayer, lsystem, procedural-generation, turtle-graphics
- Language: JavaScript
- Homepage: http://nylki.github.io/aframe-lsystem-component
- Size: 1.82 MB
- Stars: 37
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## aframe-lsystem-component
A L-System component for [A-Frame](https://aframe.io) which use the L-System library [lindenmayer](https://github.com/nylki/lindenmayer) as backend.
It renders L-Systems via the *turtle graphic* technique to create procedurally generated geometry.
[
](http://nylki.github.io/aframe-lsystem-component/)
### Properties
| Property | Description | Default Value |
| ---------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
| axiom | (string) Initiator/initial string/axiom. | `'F'` |
| productions | (string) Productions `from`:`to`. Separate by acomma. eg: `productions: F:FF, X:F+X+F` | `'F:F'` |
| iterations | (int) How many times the productions should be applied | `1` |
| angle | (number) Degree change to apply for rotation symbols like, `+`, `-`, `>`, `<` etc. | `45.0` |
| segmentMixins | (list) For any symbol you want to be rendered, you need to assign them [mixins](https://aframe.io/docs/0.3.0/core/mixins.html) here. Let's say you want F and X to be rendered, then you could write `segmentMixins: F:blue line X:big sphere`. You may define multiple mixins per symbol if you plan to use `!` and `'` in your L-System to increment/decrement the mixin index, which directly relates to your *segmentMixins*. Eg. `F: red line,blue line,green line` with an Axiom `F!F!F` will produce exactly three lines with those colors. Be sure though to actually define mixins you want to use in you assets. Take a look at some of the examples to get a better idea how this works, eg. the [multi-mixin example](https://github.com/nylki/aframe-lsystem-component/blob/master/examples/multiple%20mixins/index.html). | |
| scaleFactor | (number) If you use `!` and `'` in your L-System (see also `segmentMixins` above), this factor controls the size decrease/increase of subsequent segments. | `1.0` |
#### advanced properties
Usually you don't need to touch the following, but in some situations, you might need or want to.
| Property | Description | Default Value |
| ---------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
| translateAxis | (string) `'x'`, `'y'` or `'z'`, defines the axis on which to translate along when adding a segment (or moving the *turtle* via lowercase symbols of segments). Changing this to `'x'` is often necessary if you 1:1 copy examples from a textbook. | `'y'` |
| mergeGeometries | (boolean) Set false if you want an Object3D per segment. Degrades rendering performance when `false`! | `true` |
### Usage
A very basic L-System entity could look like:
```.html
```
Please refer to the examples for some practical usage examples.
If you want to learn more about L-Systems in general, I recommend the [overview article at wikipedia](https://en.wikipedia.org/wiki/L-system).
And if you want to dive deep in, you can read the [Algorithmic Beauty of Plants](http://algorithmicbotany.org/papers/#abop), the classic by Aristid Lindenmayer and Przemyslaw Prusinkiewicz.
In case you are already familiar with L-Systems or turtle graphics,
here is a list of all supported symbols and their interpretation in this component:
- `+` rotates Y around defined angles
- `-` rotates Y around defined -angles
- `&` rotates Z around defined angles
- `^` rotates Z around defined -angles
- `\` rotates X around defined -angles
- `<` rotates X around defined -angles
- `/` rotates X around defined angles
- `>` rotates X around defined angles
- `|` rotates Y around defined 180 degree
- `!` increments segment index (next `segmentMixin` per symbol if defined). Also applies `scaleFactor` to next segments.
- `'` decrements segment index (previous `segmentMixin` per symbol if defined). Also applies 1.0 / `scaleFactor` to next segments.
- `[` starts branch
- `]` ends branch
Besides those *turtle graphic* symbols, you define your own symbols like `F` for drawing actual geometry like lines or flowers.
However if you want your symbol to be rendered, you need to define an entry in `segmentMixins`, like so:
```.html
```
Be sure that you define your [mixins](https://aframe.io/docs/0.3.0/core/mixins.html) in your `` at the beginning of your scene.
A fallback geometry and material if you don't define your segmentMixins is not yet implemented, but will be soon :)
It's also possible to use context sensitive productions like:
```.html
```
Parametric and stochastic productions are not yet implemented in the component.
Native JS function parsing for productions, as the backend library allows, might added to this
component, but is not yet done.
Please take a look at the examples to get an idea how to use the component. PRs are welcome! :)
#### Browser Installation
Install and use by directly including the [browser files](dist):
```.html
My A-Frame Scene
```
#### NPM Installation
Install via NPM:
```bash
npm install aframe-lsystem-component
```
Then register and use.
```js
require('aframe');
require('aframe-lsystem-component');
```