Code

Throughout this section, you will discover the power of code in Hologram to create more advance scene by adding interactions, as well as a few cool tips to help get you started.

Hologram was engineered so that you do not need to have previous coding knowledge to start. And if you never coded before, you will see that coding with Hologram is really easy and fun. Hologram use real world shapes and objects, allowing you to picture the code - for instance Box or Text - with ease.

Honestly, 2D coding might be a bit boring for some people but wait until you discover the power of coding in 3D! It is a totally different world! And you are about to take on this new adventure! Remember, you do need to know everything, it does not work like that.. Simply grab what you need and come back whenever you need more information. Without realizing it, you will soon become expert!

Already familiar with the basics? No problem, check out the programming guide to explore cooler concepts like conditions, variables and loops.


Scene to Code

We are about to discover the relationship between Scene and Code, how both tabs interact with each other. We will even go further to create entities directly using code.

Create an entity (like a box) in the Scene tab, and you will see that it goes into the Code tab. Targeted entity will appear in the item list panel on sidebar. This will allow you to access those entities from the code and therefore make setting up interactions or more advance features easier than ever.

Learn about Targeting in Scene


Entities

The building blocks of Hologram are called Entities, in fact all the elements that makes your scene are entities: Boxes, Spheres, Images, 3D Models - all entities. Moreover, they all have a hierarchy, meaning entities can go inside other entities for instance a sphere can be placed inside an box and will therefore have a position relative to his parent: the box.

Not that an entity can be empty if its type is just Entity (and not Box, Sphere, etc), but can still contain any other entities.

Learn about Entities in Scene

Creating & Targeting

In the Scene tab, once you have created the entities you need and made the entities you want to use in Code targetable by clicking on the blue dot, you are ready to start coding. Targeted entity will appear in the item list panel on sidebar. To use a targeted entity click on the right dot and choose the kind of interaction you desire - Animation or Event.

As soon as you click Animation, a piece of code will be generated in the editor:

#  Target and animate an entity from your scene
myBox.animate
  rotationY: 180
  time: 2
  repeat: Infinity

Properties

The entities you create in Hologram have lots of different properties. Some to define its position, rotation and scale, others for its appearance. If you decide to add them in code. all of these properties can be overridden. For example, you can define a box of color purple in the Scene* tab, but override this with yellow using code.

# Override box color
myBox.color = "#FFFC00"

You can use properties to transform, scale, hide and do a lot more changes on entities. After having created an entity, in the Scene tab, you can override these properties using code at any time.

myBox.x = 4
myBox.rotationY = 45
myBox.opacity = 0.5
myBox.scale = 0.5

You will find all entities properties available to you in the Docs.

Positioning

An entity can be positioned with its x, y and z properties. These values define the distance from the center of the 3D scene in meter.

# Position myBox
myBox.x = 2
myBox.y = 1
myBox.z = -10

You will find all positioning properties in the Docs.

Hierarchy

Aside from grouping entities in the Scene tab entities can also be grouped directly in code. An entity placed within another entity is called a child entity. The container entity is called the parent entity. Entities inherit properties from their parent entities, like their position, rotation, scale or opacity.

# Set the parent of mySphere: myBox
mySphere.parent = myBox

Entities Types

Entities can be almost anything. Think Box, Image, Cylinder, Text, Cone and more.. way more. In the Scene tab you can add all of the standard entities. Code allows us to create interactive or even custom elements into our scene.

# Cone
myCone = new Cone
  color: Color.red

Text Entity

Of course, we need some text at one point. Hologram offers the possibility to create text directly in your scene. The text translated into code can be manipulated with properties like animate. To make the text interactive, for example, change the text itself or its color, you can create a Text Entity from the Code tab. Text entities have unique text styling properties. The width and height is automatically calculated and set, depending on the text and its style.

# Create text entity
helloWorld = new Text
  text: "Hello everyone!!"

You can find all of these properties and more in the Docs.

# Create text entity
helloWorld = new Text
  text: "Hello everyone!!"
  scale: 4
  y: -10

Note that Text does not use font size, instead you just have to scale the entity.


Animate

Almost all the basic entity properties can be animated like the position or rotation of an entity. Multiple properties can be animated at once. You can then continue to define the curve, time, delay and many more custom animation options.

Get Started

Let’s start by animating the opacity of an entity. You can start animations by using the animate keyword, and then defining a set of properties.

myBox.animate
  rotationX: 90

Options

You can completely customize the feel of your animation, by changing options like time, curve and delay. Below is a list of the available options:

  • time (in seconds)
  • curve
  • delay (in seconds)
  • repeat (amount of times)

Note that durations in Hologram are defined in seconds.

# Animate with an easing curve
myBox.animate
  rotationY: 180
  z: -2
  curve: Curve.ease
  time: 1

Easing Curves

Animations optionally take a curve that describe the type of animation. You can use pre-defined curves like Curve.linear or Curve.ease. But Hologram has tons of preset to choose from like Curve.easeInBounce, check them out in the docs.

  • Curve.ease
  • Curve.easeIn
  • Curve.easeOut
  • Curve.easeInOut
# Animate with an easing curve
myBox.animate
  scale: 2
  curve: Curve.ease
  repeat: Infinity
  time: 1

Events

Events are things that can happen to entity, usually triggered by user interaction like looking at an 3D object or clicking on it with the cursor. With events, you can animate entities based on these interactions.

myBox.onClick ->
  myBox.color = "red"

Live Preview

One interesting feature of Hologram is Live Preview, that allow you gives you a real-time preview of any change you make to your project.

Since running 3D is really power intensive, we recommend only using this feature if you have a good graphics card. Not that the preview will be refreshed every time the editor has been defocused, it is also by choice to keep good performances.