Create trippy loop in UrpflanzeJS - Tutorial #1 
Tags: javascript, creativecoding, beginners, tutorial
Published: 2021-09-08 12:38:50

Urpflanze is a library to create images or animations using code. You can find the [documentation here](https://docs.urpflanze.org/urpflanze/)

Start writing code from the template on [CodePen](https://codepen.io/pen/?template=GRErJJy&editors=0010)


[![btn.png](https://i.postimg.cc/v8jCsZ7g/btn.png)](https://codepen.io/pen/?template=GRErJJy&editors=0010)

Here's what we're going to talk about today:
- [Create a Scene](#create-a-scene)
- [Repetitions and transformations](#repetitions-and-transformations)
- [Encapsulation of a shape](#encapsulation-of-a-shape)
- [Animations](#animations)
- [Result](#result)
- [Conclusion](#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](https://docs.urpflanze.org/core/), [Drawer](https://docs.urpflanze.org/drawer-canvas/)

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.

```javascript
const scene = new Urpflanze.Scene()

const triangle = new Urpflanze.Triangle()

scene.add(triangle)

const drawer = new Urpflanze.DrawerCanvas(scene, document.body)

drawer.startAnimation()
```

Output:

![urpflanze-trippy-loop-1.png](https://i.postimg.cc/gk8hMxtY/urpflanze-trippy-loop-1.png)

## Repetitions and transformations

First we repeat the triangle (one row and eight columns), scaling it at each [repetition](https://docs.urpflanze.org/urpflanze/#/en/Manage-repetitions).

> 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

```javascript
const triangle = new Urpflanze.Triangle({
  repetitions: [1, 8],
  scale: ({ repetition }) => repetition.offset * 0.9 + 0.1, // trick for one row instead of repetition.col.offset
  sideLength: [50, 58],
})
```

Output:

![urpflanze-trippy-loop-2.png](https://i.postimg.cc/KYC9sLqv/urpflanze-trippy-loop-2.png)

## Encapsulation of a shape

In Urpflanze it is possible to encapsulate any shape or group of shapes ([more details here](https://docs.urpflanze.org/urpflanze/#/en/Creating-a-scene)) with the `Shape` class.

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


```javascript
const triangle = new Urpflanze.Triangle({ /* */ })

const shape = new Urpflanze.Shape({
  shape: triangle, // <-- Set shape
  
  repetitions: 6,
  distance: 80,
  rotateZ: Urpflanze.toRadians(180),
})

// scene.add(triangle)
scene.add(shape)
```

Output:

![urpflanze-trippy-loop-3.png](https://i.postimg.cc/Vv8KzwPx/urpflanze-trippy-loop-3.png)

## Animations

We can animate all properties by passing a function instead of a static value ([📃](https://docs.urpflanze.org/urpflanze/#/en/Drawer-and-animations))

For animations we will use the built-in [@urpflanze/animation](https://docs.urpflanze.org/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

```javascript
const triangle = new Urpflanze.Triangle({
  repetitions: [1, 8],
  scale: ({ repetition }) => repetition.offset * 0.9 + 0.1,
  sideLength: [50, 58],

  transformOrigin: () => [
    Urpflanze.Animation.cosp(scene.currentTime, 3000, Urpflanze.toRadians(-60), 1) * -0.8,
    Urpflanze.Animation.sinp(scene.currentTime, 3000, Urpflanze.toRadians(-60), 1) * -0.6 
  ]
})
```

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

```javascript
const shape = new Urpflanze.Shape({
  /* ... */
  distance: Urpflanze.Animation.Loop({ from: 80, to: 50, duration: 3000 }),
  displace: Urpflanze.Animation.UncontrolledLoop({
    from: 0,
    to: Urpflanze.toRadians(-180),
    duration: 8000
  })
  /* ... */
})
```

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

```javascript
const shape = new Urpflanze.Shape({
  /* ... */
  rotateZ: () => Urpflanze.Animation.sinp(scene.currentTime, 3000) * Urpflanze.toRadians(10) + Urpflanze.toRadians(180)
  /* ... */
})
```

Output of each separate stage: transformOrigin | distance + displace | rotateZ
![urpflanze-trippy-loop-4-5-6.gif](https://i.postimg.cc/Zqnq3bfS/urpflanze-trippy-loop-4-5-6.gif)

## Result

Combining everything together the result will be this

{% codepen https://codepen.io/UrpflanzeJS/pen/GRENeBg default-tab=result %}


## 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](https://www.facebook.com/urpflanzejs/)
[Instagram](https://www.instagram.com/urpflanzejs/)
[Twitter](https://twitter.com/urpflanzejs)

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](https://github.com/urpflanze-org))

{% github urpflanze-org/core no-readme %}
{% github urpflanze-org/drawer-canvas no-readme %}


- Donate to these links

[![Paypal](https://img.shields.io/badge/donate-paypal-003087.svg?logo=paypal)](https://www.paypal.me/genbs) [![Kofi](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/urpflanze) [![Bitcoin](https://img.shields.io/badge/bitcoin-1CSQq4aMmsA71twvyZHZCjmeB2AmQGCPNq-f7931a.svg?logo=bitcoin)](https://explorer.btc.com/btc/address/1CSQq4aMmsA71twvyZHZCjmeB2AmQGCPNq) [![Ethereum](https://img.shields.io/badge/ethereum-0x9086c4bb7015c1d6dc79162d02e7e1239c982c01-ecf0f1.svg?logo=ethereum)](https://etherscan.io/address/0x9086c4bb7015c1d6dc79162d02e7e1239c982c01)