rl-king / elm-modular-scale / ModularScale

Generating numerical values derived from musical intervals. Use this to generate proportionally related font-sizes, line-height, element dimensions, ect.

Based on the idea found at http://www.modularscale.com/.

Configuration


type Config

Stores the base(s) and Interval

config : List Basics.Float -> Interval -> Config

Create the Config for your scale. It's recommended to not use more than two base values, and often one is enough. Using more values dilutes the scale too much and the range of generated values might get too narrow.

config : Config
config =
    ModularScale.config [ 1, 1.2 ] ModularScale.PerfectFifth

Get a value

get : Config -> Basics.Int -> Basics.Float

Return the value at an index of the scale based on the provided base(s).

config : Config
config =
    ModularScale.config [ 1 ] ModularScale.PerfectFifth

get config 5

--> 7.59375

You'll probably want to create a helper function like this.

ms : Int -> String
ms x =
    String.fromFloat (get config x) ++ "em"

Which you'll use like this.

h1 [ style [ ( "font-size", ms 4 ) ] ] [ text "Foo" ]

Or, if you're using elm-css

ms : Int -> Css.Rem
ms index =
    rem (get config index)

style : List Style
style =
    [ fontSize (ms 4) ]

Interval or custom ratio


type Interval
    = MinorSecond
    | MajorSecond
    | MinorThird
    | MajorThird
    | PerfectFourth
    | AugFourth
    | PerfectFifth
    | MinorSixth
    | GoldenSection
    | MajorSixth
    | MinorSeventh
    | MajorSeventh
    | Octave
    | MajorTenth
    | MajorEleventh
    | MajorTwelfth
    | DoubleOctave
    | Ratio Basics.Float