Studio
  • Why Studio?
  • Getting Started
  • Setting up Studio
    • Import from Tokens Studio for Figma
    • Import from Figma variables
  • Connect Studio to Figma
    • Using Tokens Studio for Figma
    • Using Companion by Tokens Studio
  • Connect Studio to Code
  • Platform
    • Features
      • Tokens
        • Token Sets
        • Token flow
      • Themes
        • Theme Groups and Theme Options
      • Configuration
      • Releases
    • Platform
      • Accounts
      • Organisation
      • Project
      • API keys
      • Inviting members
  • GRAPH ENGINE
    • Introduction
    • Editor
    • Creating a Graph Based Set
    • Nodes
    • Types
    • Editing
    • Available Nodes
      • Accessibility
        • Color Blindness
      • Array
        • Array Filter
        • Array Find
        • Arrify
        • Concat
        • Flatten
        • Index Array
        • Inject Item
        • Array Length
        • Array Push
        • Remove Item
        • Replace Item
        • Reverse Array
        • Slice Array
        • Sort Array
        • Array Map
      • Color
        • Color To String
        • Color Wheel
        • Contrast
        • Contrasting Alpha
        • Contrasting Color
        • Contrasting from Array
        • Convert Color
        • Create Color
        • Darken Color
        • Deconstruct Color
        • Delta E
        • Distance
        • Flatten Alpha
        • Lighten Color
        • Match Alpha
        • Mix Colors
        • Name Color
        • Poline
        • Range
        • Scale Colors
        • Sort Colors By Distance
        • String To Color
      • CSS
        • CSS Accessible Clamp
        • CSS Box
        • CSS Function
        • CSS Map
      • Curves
        • Bezier Curve
        • Construct Float Curve
        • Deconstruct Float Curve
        • Flip Float Curve
        • Preset Bezier Curves
        • Sample Array from Float Curve
        • Sample Curve
        • Sample Float Curve
      • Design Tokens
        • Array To Set
        • Create Border
        • Create Border Design Token
        • Create Box Shadow
        • Create Box Shadow Design Token
        • Create Design Token
        • Create Reference
        • Create Typography
        • Create Typography Design Token
        • Destruct Token
        • External Token Set
        • Extract Token
        • Flatten Token Sets
        • Group Tokens
        • Inline Tokens
        • Invert Token Set
        • Leonardo Color
        • Leonardo Theme
        • Name Tokens
        • Preview Typography
        • Resolve Tokens
        • Set To Array
        • Ungroup Tokens
        • Group Token Array
        • Ungroup Token Array
      • Figma
        • Code Syntax
        • Publish Varibales
        • Scope All
        • Scope by Type
        • Scope Color
        • Scope Number
        • Scope String
      • Generic
        • Constant
        • Delay
        • Input
        • Object Merge
        • Note
        • Object Path
        • Objectify
        • Output
        • Panic
        • Passthrough
        • Subgraph
        • Time
      • Gradient
        • Gradient Stop
      • Logic
        • And
        • Compare
        • If
        • Not
        • Or
        • Switch
      • Math
        • Absolute
        • Add
        • Add Variadic
        • Ceiling
        • Clamp
        • Closest Number
        • Cosine
        • Count
        • Difference
        • Divide
        • Divide Variadic
        • Evaluate Math
        • Exponentiation
        • Floor
        • Fluid
        • Lerp
        • Modulo
        • Multiply
        • Multiply Variadic
        • Power
        • Random
        • Range Mapping
        • Round
        • Sine
        • Snap
        • Square Root
        • Subtract
        • Subtract Variadic
        • Tangent
      • Preview
        • Color Compare
        • Color Scale
        • Color Swatch
        • Math Expression
        • Number
        • Preview Curve
      • Search
        • Find First Match
        • Linear Search
      • Series
        • Alternating Series
        • Arithmetic Series
        • Exponential Decay
        • Fibonacci Series
        • Geometric Series
        • Harmonic Series
        • Inverse Linear Mapping
        • Linear Space
        • Power Series
      • String
        • Case Convert
        • Interpolation
        • Join Array
        • Lowercase
        • Normalize
        • Pad
        • Regex
        • Replace
        • Split String
        • Stringify
        • Uppercase
      • Typography
        • Base Font Size
      • Typing
        • Assert Defined
        • Has Value
        • Parse Number
        • Parse Unit
        • Pass Unit
      • Vector2
        • Create
        • Destructure
      • Naming
        • Alphabetic Scale
        • Alphanumeric Scale
        • Greek Letter
        • Hierarchy Level
        • Numeric Scale
        • T-Shirt Size
  • PLUGINS
    • Tokens Studio for Figma Plugin
    • Companion by Tokens Studio
    • Tokens Studio for Framer Plugin
Powered by GitBook
On this page
  • What It Does
  • Inputs
  • Outputs
  • How to Use It
  • Tips
  • See Also
  • Use Cases
Edit on GitHub
  1. GRAPH ENGINE
  2. Available Nodes
  3. Series

Harmonic Series

PreviousGeometric SeriesNextInverse Linear Mapping

Last updated 26 days ago

What It Does

Generates a sequence based on harmonic proportions, where values follow a pattern related to musical harmonics. The node creates a progression where each value is calculated by raising a ratio to a fractional power determined by the index and number of notes.

Inputs

Name
Description
Type
Required

base

The central value of the series

Number

No

stepsDown

Number of steps to generate below the base value

Number

No

stepsUp

Number of steps to generate above the base value

Number

No

notes

Number of steps that make up a complete octave/cycle

Number

No

ratio

The harmonic ratio (typically 2 for musical octaves)

Number

No

precision

Number of decimal places to round to

Number

No

Outputs

Name
Description
Type

array

The sequence of values as a simple array

List

indexed

The values with their corresponding position indices

List

How to Use It

  1. Drag the Harmonic Series node into your graph.

  2. Set the "base" value (default is 16).

  3. Set how many steps you want below the base ("stepsDown", default is 0).

  4. Set how many steps you want above the base ("stepsUp", default is 5).

  5. Set the "notes" parameter to define the number of divisions in an octave (default is 5).

  6. Set the "ratio" (default is 2, which creates a standard octave relationship).

  7. Run the graph—with the default settings, your output will be a series that increases by harmonically related intervals.

Tips

  • With ratio=2 and notes=12, you'll get a chromatic musical scale (12 equal divisions of an octave).

  • For musical applications, the base is typically a frequency value.

  • The harmonic relationship creates a more natural-sounding progression than equal divisions.

See Also

  • Geometric Series: For sequences with constant multiplication between terms.

  • Arithmetic Series: For sequences with constant addition between terms.

  • Exponential Decay: For sequences that gradually decrease according to exponential decay.

Use Cases

  • Musical Scales: Generate frequencies for notes in various musical tuning systems.

  • Natural Proportions: Create sequences that follow ratios found in nature.

  • Harmonic Typography: Design type scales with proportional relationships between sizes.

  • Resonant Spacing: Generate spacing values that have harmonic relationships for UI design.

Harmonic Series Example