Reusing logic with Helpers

As a designer or developer, you are used to facing the challenge of abstracting building blocks. Abstraction is a very powerful tool, that among many other benefits allows you to reuse these building blocks without having to manually repeat them.

Haiku gives you many ways to abstract building blocks at different levels, like for example States and Components. Today we'd like to introduce you to Helpers.

Helpers allow you to define a function that can be later used in an Expression or an Action. If you are familiar with Summonables, you can think of them as custom-made Summonables.

Using helpers

Helpers are defined directly in the code of your Haiku project, which you can access by switching to "Code Mode", using the button at the top.

You can think of "Code Mode" as the programmatic definition of your project. Everything about it is defined here: what it looks like, the animations, the actions, etc. This code is what our open source Core renderer interprets in order to render your Haiku.

In this definition, we can also add a special object named helpers where you can define key-value pairs by specifying:

1. The name of your helper as the key.
2. A function that implements what you want to accomplish as the value.

helpers: {
  myHelper: function() {
    // do something interesting here!
  }
}

It's that easy. Now, you can use the helper anywhere!

Expressions

You can access the helpers you created by typing the $helpers injectable in an expression, as you normally would with any Summonable:

= $helpers.myHelper()

Tip: Don't forget that your helper is a function! It must be called, so remember to put the parentheses at the end.

Actions

You can also access your helper inside Actions very easily through this.helpers:

this.helpers.myHelper();

Example

Theory is great, but examples are better! Let's say you've instantiated a triangle on stage (if you don't know how to instantiate elements, check out this guide), and you've defined the following expression in the rotation.Z property to make the triangle rotate in the direction of the user cursor:

const pointX = $user.mouse.x - $element.translation.x
const pointY = $user.mouse.y - $element.translation.y
return Math.atan2(pointY, pointX) + Math.PI / 2

So far so good. Now, let's say you want other elements to behave similarly without having to copy and paste the same expression every time.

Here's where helpers come to the rescue. The first thing you need to do is define your helper:

Here's the code, in case you want to use it:

helpers: {
  angleFromElementToMouse: function(mouse, offset) {
    const pointX = mouse.x - offset.x;
    const pointY = mouse.y - offset.y;
    return Math.atan2(pointY, pointX) + Math.PI / 2;
  }
},

Tip: We are providing the mouse and the offset values as parameters from our expression.

That's it! You can use your newly defined function in an expression, like so:

Once again, here's the code if you need it:

= $helpers.angleFromElementToMouse($user.mouse, $element.translation)

That's a wrap!

Give it a try! Here is the project used in this example so you can fork it and play around with it: https://share.haiku.ai/u/robertodip/arrowz

If you have any ideas for tutorials you'd like to see, please shoot us a quick email to contact@haiku.ai

See you soon!

Keep up to date with the latest on:

• Twitter
• Facebook
• Instagram