Skip to main content

Vector Span and Easing for Point Generation

Vector category icon

This tutorial demonstrates how to use the vector.span() and vector.spanEaseItems() methods in Bitbybit to generate sequences of numbers. We'll then combine these sequences to create 3D vectors (points) and visualize them in the 3D canvas. This is a common technique for creating controlled distributions of objects or defining paths.

We will explore how to achieve this using three different programming environments available in Bitbybit: Rete (a visual node-based editor), Blockly (a visual block-based editor), and TypeScript (a text-based programming language).

The Goal:

Our goal is to generate a series of points where:

  • The X-coordinates are linearly spaced.
  • The Y-coordinates are spaced according to an "Ease In Sine" easing function.
  • The Z-coordinates are all zero.

This will result in a curve that starts moving slowly in the Y direction and then accelerates.

Core Concepts Used​

Before diving into the examples, let's briefly review the key Bitbybit vector functions we'll be using:

  1. vector.span():

    • Creates an array of numbers linearly spaced between a min and max value, with a defined step.
    • We'll use this to generate our X-coordinates.

  2. vector.spanEaseItems():

    • Creates an array of numbers between a min and max value, but the spacing is determined by an ease function (e.g., "easeInSine", "easeOutQuad", etc.) and a specified nrItems (number of items).
    • We'll use this to generate our Y-coordinates. The number of items will be matched to the length of the array produced by vpan().

  3. vector.vectorXYZ() (or direct array creation in TypeScript/Blockly):

    • Takes X, Y, and Z numbers and combines them into a 3D vector [x, y, z].

  4. draw.drawAnyAsync() (or equivalent draw blocks):

    • Takes an entity or an array of entities (like our generated vectors/points) and draws them in the 3D scene.

  5. draw.drawGridMesh():

    • Draws a helper grid in the scene for better visualization.

Live Examples​

Click through the tabs below to see the implementation in Rete, Blockly, and TypeScript. Each example will produce the same visual output: a series of points forming a curve.

Bitbybit Platform

Vector Span & Ease In Combination

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "5cf30d5c6639e560": {
      "id": "5cf30d5c6639e560",
      "name": "bitbybit.draw.drawGridMesh",
      "customName": "draw grid mesh",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "width": 400,
        "height": 400,
        "subdivisions": 10,
        "majorUnitFrequency": 10,
        "minorUnitVisibility": 0.45,
        "gridRatio": 0.5,
        "opacity": 0.5,
        "backFaceCulling": false,
        "mainColor": "#ffffff",
        "secondaryColor": "#ffffff"
      },
      "inputs": {},
      "position": [
        89.89453125,
        489.30859375
      ]
    },
    "eff3bc8c20fd6b9a": {
      "id": "eff3bc8c20fd6b9a",
      "name": "bitbybit.vector.spanEaseItems",
      "customName": "span ease items",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "nrItems": 100,
        "min": 0,
        "max": 5,
        "ease": "easeInSine",
        "intervals": false
      },
      "inputs": {
        "nrItems": {
          "connections": [
            {
              "node": "f2ba08af3b1f45f1",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1533.593984254042,
        709.12875163347
      ]
    },
    "27acc4680c49de73": {
      "id": "27acc4680c49de73",
      "name": "bitbybit.vector.span",
      "customName": "span",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "step": 0.2,
        "min": 0,
        "max": 5
      },
      "inputs": {},
      "position": [
        778.3558295885927,
        715.2367833946255
      ]
    },
    "f2ba08af3b1f45f1": {
      "id": "f2ba08af3b1f45f1",
      "name": "bitbybit.lists.listLength",
      "customName": "list length",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "clone": true
      },
      "inputs": {
        "list": {
          "connections": [
            {
              "node": "27acc4680c49de73",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1153.7941860253327,
        711.8268257314983
      ]
    },
    "6cc8c45bc1986c14": {
      "id": "6cc8c45bc1986c14",
      "name": "bitbybit.vector.vectorXYZ",
      "customName": "vector xyz",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": true,
          "flatten": 0,
          "forceExecution": false
        },
        "x": 0,
        "y": 0,
        "z": 0
      },
      "inputs": {
        "x": {
          "connections": [
            {
              "node": "5a7a5529ef111031",
              "output": "result",
              "data": {}
            }
          ]
        },
        "y": {
          "connections": [
            {
              "node": "02c82e567f3db188",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        2394.3717567099125,
        396.3733706201353
      ]
    },
    "5a7a5529ef111031": {
      "id": "5a7a5529ef111031",
      "name": "bitbybit.lists.flatten",
      "customName": "flatten",
      "data": {
        "nrLevels": 1
      },
      "inputs": {
        "list": {
          "connections": [
            {
              "node": "27acc4680c49de73",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1171.6411654089534,
        431.16608922053126
      ]
    },
    "02c82e567f3db188": {
      "id": "02c82e567f3db188",
      "name": "bitbybit.lists.flatten",
      "customName": "flatten",
      "data": {
        "nrLevels": 1
      },
      "inputs": {
        "list": {
          "connections": [
            {
              "node": "eff3bc8c20fd6b9a",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1940.93943737965,
        735.4822641570163
      ]
    }
  }
}

Conclusion​

As you can see, all three approaches achieve the same visual result.

  • Rete provides a visual, flow-based way to connect data and operations. It's great for understanding data flow at a glance.
  • Blockly offers a more structured, yet still visual, way to program, resembling traditional code structures like loops and variables.
  • TypeScript provides the most flexibility and power through text-based coding, allowing for complex logic and direct use of JavaScript features like .map().

Understanding how to generate and manipulate lists of vectors using functions like span and spanEaseItems is a fundamental skill for creating procedural geometry, animations, and simulations in Bitbybit. Experiment with different easing functions and parameters to see how they affect the distribution of points!