Urpflanze is a library to create images or animations using code. You can find the documentation here

Start writing code from the template on CodePen

Here's what we're going to talk about today:

- Create a Scene

- Repetitions and transformations

- Encapsulation of a shape

- Animations

- Result

- Conclusion

Learn Urpflanze your way, try experimenting by changing values and don't forget to have fun 😜

Create a Scene

Urpflanze is based on point manipulation, so all transformations are done through the CPU.

It will be up to the Drawer to render the scene.

> For more informations: Core

In this part we create a Scene with a triangle inside

and we instantiate the drawer by connecting it to the body of the page.

Output:

Repetitions and transformations

First we repeat the triangle (one row and eight columns), scaling it at each repetition.

> the value of scale will be 1 for the last repetition when repetition.offset will be 1 and 0.1 for firt repetition when repetition.offset will be 0

Output:

Encapsulation of a shape

In Urpflanze it is possible to encapsulate any shape or group of shapes (more details here) with the `Shape` class.

The properties will be set on each repetition of the shape passed to the `shape` property

Output:

Animations

We can animate all properties by passing a function instead of a static value (📃)

For animations we will use the built-in @urpflanze/animation library

Let's go back to the triangle and give movement to the position from where the scale starts.

If you are familiar with CSS you will know the `transform-origin` property.

> `Urpflanze.Animation[cosp|sinp](<time>, <period duration>, <phase>, <normalize>)` return value between 0 and 1 in <period duration> milliseconds

Now we can add a spacing movement of the triangles and the rotation of the whole shape

Finally we can give a small deviation to the rotation of the triangles

Output of each separate stage: transformOrigin | distance + displace | rotateZ

Result

Combining everything together the result will be this

See on CodePen

Conclusion

This is my first tutorial and I would like to premise that *I am not an artist*, I would like to see how you would use this library.

You can send me your experiments by tagging on various social networks:

- Facebook

- Instagram

- Twitter

For the next video I was thinking of showing how to export the Scene (video, gif, zip, SVG, GCODE)

If you like the project and want to support me, you can:

- Leave feedback in the comments

- Contribute with a PR (Github)

- Donate (Github support)