@tegan/create-modular-scale

Install

npm install @tegan/create-modular-scale

Usage

Signature

/**
 * @param {number} base.
 * @param {number|string} ratio
 * @returns {function} scale function that accepts a modifier (i.e., number of
 * steps to go up or down the scale)
 */
function createModularScale(base = 1, ratio = "golden")

If ratio is a string, it must be one of the keys in the following object. If a string is used that does not match any of the available ratios, the default "golden" will be used.

const ratios = {
  minorSecond: 0.9375, //..................15 / 16
  majorSecond: 0.888888888888889, //........8 / 9
  minorThird: 0.833333333333333, //.........5 / 6
  majorThird: 0.8, //.......................4 / 5
  perfectFourth: 0.75, //...................3 / 4
  augmentedFourth: 0.707106781186548, //....1 / Math.sqrt(2)
  perfectFifth: 0.666666666666667, //.......2 / 3
  minorSixth: 0.625, //.....................5 / 8
  golden: 0.618046971569839, //.............1 / 1.618
  majorSixth: 0.6, //.......................3 / 5
  minorSeventh: 0.5625, //..................9 / 16
  majorSeventh: 0.533333333333333, //.......8 / 15
  octave: 0.5, //...........................1 / 2
  majorTenth: 0.4, //.......................2 / 5
  majorEleventh: 0.375, //..................3 / 8
  majorTwelfth: 0.333333333333333, //.......1 / 3
  doubleOctave: 0.25 //.....................1 / 4
};

Example

import createModularScale from "@tegan/create-modular-scale";

// Scale relative to 16 (e.g., px)
const pixelScale = createModularScale(16, "golden");
pixelScale(-1); //=> 15.38195302843016
pixelScale(0); //=>  16
pixelScale(1); //=>  16.61804697156984
pixelScale(2); //=>  17.23609394313968

// Scale relative to 1 (e.g., rem)
const remScale = createModuleScale(1, "golden");
remScale(-1); //=> 0.381953028430161
remScale(0); //=>  1
remScale(1); //=>  1.618046971569839
remScale(2); //=>  2.236093943139678