Create trippy loop in UrpflanzeJS - Tutorial #1
Urpflanze is an open-source JavaScript library focused on the concepts of encapsulation and repetition of geometric shapes. It's made for developers who want to approach creative coding, artists who want to approach coding and for those who find it fun to play with math.
Gennaro Bosone
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

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:
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)
Upvote
Gennaro Bosone
Web developer, creative coder. Creator of Urpflanze.js

Related Articles