Tutorial

Ayva Stroker Lite

Ayva Stroker Lite is a small web based random stroker app that uses the Web Serial API to connect to and control an OSR2 or SR6 device.

Features:

  • Create, import, and export your own custom multiaxis strokes with variations.
  • Run any TempestStroke in Ayva's library.
  • Change the speed (bpm) of the currently running stroke.
  • Enter Free Play mode where strokes are randomly selected according to user preferences.
  • Set the duration range for random strokes.
  • Smooth transitions between strokes.
  • Set the duration range for transitions.
  • Set the bpm range.
  • Set the bpm to change continuously or only on transitions to the next stroke.
  • Enable default twist movements.
  • Choose what strokes to include in Free Play mode.
  • Set device output limits.
  • Connect to device via Web Serial API.
  • Emulator to see 3D simulation of movements on screen (with or without hardware device connected).

A video guide is available here.

Supported browsers: Chrome, Edge, Safari

Note: The app will run in Firefox, but Firefox does not support the Web Serial API yet so connecting to an actual device in Firefox is currently not possible.

Guide

Contents

  1. Emulator
  2. Output Range and Device Connection
  3. Controls
  4. Parameters
  5. Strokes
  6. Mode
  7. Current BPM
  8. Stroke Designer
  9. Import / Export
  10. Stroke File Format

1. Emulator

The emulator provides a 3D simulation of the movements of the device. The current version is of an OSR2+. It does not have a forward or left axis (as available on the SR6), however, movements on those axes are still supported by the application and will be sent to an actual device when connected. Strokes can be played on the emulator alone (a physical device does not have to be connected).

Controls:

  • Click+Drag to rotate the camera.
  • Mousewheel to zoom in and out.
  • Shift+Click+Drag to pan.

2. Output Range and Device Connection


This section allows you to set the output range for all linear and rotational axes. The details on how Ayva scales output can be found in the Configuration documentation under the Axis Limits section.

The button in the top right gives the device connection status. Clicking it will open the built-in Web Serial API window of the browser that allows you to select a device to connect to. For safety reasons, connections can only be made when in Stopped mode. You will not be able to connect to a device if a stroke is currently playing.

3. Controls

  • Eye Icon: Hide/show the UI.
  • Home Device: Stops the current behavior and moves the device to the home position.
  • Free Play: Commands Ayva to start playing strokes randomly according to the current parameters.
  • Stop (Esc): Immediately stops the current behavior and ceases to send any output to the device. Pressing the Escape key will also trigger this action.

4. Parameters


This section allows you to set the parameters that are used during free play mode (and some for manually triggered strokes). Most parameters in this section take effect on the next stroke played.

  • Change BPM: Select when to change the BPM. The options are:
    • On Transition - changes the BPM when a new stroke is selected.
    • Continuously - continuously changes the BPM.
  • BPM Range: The speed range of strokes in beats per minute. When a stroke is randomly selected, it will pick a random speed within this range.
  • Acceleration (bpm/s): How fast to change the BPM in units of BPM per second. This is only enabled when in Continuous BPM change mode.
  • Pattern Duration: The duration range of strokes in seconds. When a stroke is randomly selected, it will last for a random amount of seconds within this range.
  • Transition Duration: The duration range for smooth transitions in seconds. When a new stroke is starting, the transition into the new stroke will take a random amount of seconds within this range.
  • Default Twist: This option allows you to add custom motion to the twist axis for any stroke that doesn't have it (i.e. the twist motion specified here only takes effect if the current stroke playing does not have its own twist).
  • Twist Range: When twist is enabled, this allows you to specify the range of the twist motion.
  • Twist Phase: When twist is enabled, this allows you to specify the phase of the twist motion.
  • Twist Eccentricity: When twist is enabled, this allows you to specify the eccentricity of the twist motion.

Default twist motion is a sinusoidal shaped movement. See the TempestStroke documentation for additional details on parameters such as phase and eccentricity.

5. Strokes


This section allows you to manage strokes.

  1. Select what strokes to include in free play mode. The top most checkbox can be used to select or deselect all strokes.
  2. Manually trigger a stroke. Manually triggering a stroke transitions out of free play mode. In manual mode, the current stroke will play continuously until another stroke is selected or free play mode is triggered.
  3. Hover over the eye icon to quickly view a preview of the corresponding stroke.
  4. Access create, import, and export strokes functionality. These features are covered in the Stroke Designer section. This menu can only be accessed in Stopped mode. When a stroke is playing this area will instead show the current stroke, as well as when a transition is occurring.

6. Mode


This label displays the current mode. It will be either Stopped, Free Play, or Manual.

7. Current BPM


This slider shows the current speed. In both Free Play and Manual mode the speed of the current stroke can be changed in real time. However, while you can set the speed in Free Play mode, Ayva can (and likely will) choose a new speed when it decides to play a new stroke. But Ayva will never changes strokes while you are dragging the slider. This means that if you are in Free Play mode and you would like to stay on the current pattern without leaving Free Play, you could keep the bpm slider engaged until you are ready to switch.

Manually updating the bpm is not allowed during a transition (the widget will be disabled), as Ayva has full control of the speed during that time.

8. Stroke Designer


The stroke designer can be accessed by clicking the gear icon in the top right of the Strokes section, then clicking Create.



  1. Clicking the axes button allows you to select which axes to include in your stroke. All axes of an SR6 device are available.
  2. Motion can be specified for each axis with an interactive graph widget. The parameters available are:
    • Range: The left slider sets the range. This is a dual slider specifying the from and to values for the motion. The knobs can be slid past each other to change the shape of the motion, as well as be set to the same value if you want the axis to hold a value for the duration of the motion.
    • Phase: The bottom left slider sets the phase of the motion.
    • Eccentricity: The bottom right slider sets the eccentricity of the motion.
    • Noise: The two knobs on the bottom right set the noise (amount of variation) for either end of the range of motion.
    • Function: The bottom right icon (fx) allows you to change the mathematical function. The options are Sinusoidal, Parabolic, or Linear
    Use the middle mouse over a graph to quickly expand or contract the range.
    Double click a slider knob to reset to default value(s).
    The progress dot on the graph will move along with the current motion in real time.



    Note that when there are more axes than available space you can scroll to view the additional axes.

  3. The current motion will automatically preview on the emulator. The BPM can be adjusted to preview at higher or lower speeds.
  4. If a device is connected, you can optionally send the preview of the stroke to the actual device. This option is disabled by default, and will be unavailable if there is no device connected.
  5. Clicking the preset button will open a dropdown allowing you to select a stroke from the library (custom or default) as a starting point. You may also cycle through the presets by clicking the arrows.
  6. You can give your stroke a name and add it to the library. Names are restricted to lowercase alphanumeric characters and dashes, and must be unique. When a stroke is added to the library, it will be made available on the main screen for use in Free Play or Manual modes. It will also be available as a preset if you return to the stroke designer later.

Strokes can be editted by clicking the gear icon next to them on the main screen.

Note that all strokes are saved in the local storage of the browser, so they will remain between sessions. However, if you clear your browser storage then you will lose your strokes. To make a backup of your stroke(s) (or to share your strokes with others) you can use the import/export functionality as detailed in the next section.

9. Import / Export


Import or Export can be accessed by clicking the gear icon in the top right of the Strokes section. These will open the browser file dialogs and allow you to import or export a stroke file. When exporting this way, all custom strokes will be exported. The option to export an individual stroke can be found by clicking the gear icon next to the desired stroke:


Note that this is also how you access the Edit and Delete functionality.

10. Stroke File Format

Stroke files are JSON files. The top level object is an array containing all the strokes. Each stroke has the following properties:

  • name: alphanumeric, dash separated name of the stroke.
  • type: currently the only supported type is tempest-stroke
  • data: an object containing the stroke parameters, keyed by axis name or alias.

Example

[
  {
    "name": "my-orbit-grind",
    "type": "tempest-stroke",
    "data": {
      "L0": {
        "from": 0,
        "to": 0.6,
        "phase": 0,
        "ecc": 0.3
      },
      "R1": {
        "from": 0.1,
        "to": 0.9,
        "phase": 1,
        "ecc": -0.3
      },
      "R2": {
        "from": 0.9,
        "to": 0.1,
        "phase": 0,
        "ecc": -0.3
      }
    }
  }
]