Browse Source

Improve key offsets

Refer to URL in comment for details.
master
TheoryOfNekomata 4 years ago
parent
commit
fd3733e835
3 changed files with 27 additions and 9 deletions
  1. +5
    -3
      src/components/Keyboard.stories.tsx
  2. +1
    -1
      src/components/Keyboard.tsx
  3. +21
    -5
      src/services/constants/keyOffsets.ts

+ 5
- 3
src/components/Keyboard.stories.tsx View File

@@ -48,8 +48,8 @@ const Base = styled('div')({
width: '100%',
height: '100%',
position: 'relative',
'--natural-key-color': '#eee',
'--accidental-key-color': '#333',
'--natural-key-color': '#e3e3e5',
'--accidental-key-color': '#35313b',
})

const N1 = styled('div')`width: 100%; height: 100%; position: relative;`
@@ -206,6 +206,8 @@ const N18 = styled('div')`
position: relative;
width: 100%;
height: 100%;
border-radius: 0 0 1px 1px;
overflow: hidden;
`

const B1 = styled('div')`
@@ -300,7 +302,7 @@ width: 100%;
const B12 = styled('div')`
width: 100%;
height: 100%;
padding: 3px 3px 7px 3px;
padding: 3px 3px 7px 2px;
box-sizing: border-box;
position: absolute;
top: 0;


+ 1
- 1
src/components/Keyboard.tsx View File

@@ -97,7 +97,7 @@ const Keyboard: React.FC<Props> = ({
natural: NaturalKey = DefaultNaturalKey,
accidental: AccidentalKey = DefaultAccidentalKey,
} = {},
height = 64,
height = 80,
}) => {
const [keys, setKeys, ] = React.useState<number[]>([])



+ 21
- 5
src/services/constants/keyOffsets.ts View File

@@ -20,17 +20,33 @@

*/

// export default [
// 0, // C
// 3 / 7 / 5, // C#
// 1 / 7, // D
// 3 / 7 / 5 * 3, // D#
// 2 / 7, // E
// 3 / 7, // F
// (3 / 7) + (4 / 7 / 7), // F#
// 4 / 7, // G
// (3 / 7) + (4 / 7 / 7 * 3), // G#
// 5 / 7, // A
// (3 / 7) + (4 / 7 / 7 * 5), // A#
// 6 / 7, // B
// ]

// http://datagenetics.com/blog/may32016/index.html
export default [
0, // C
3 / 7 / 5, // C#
525 / 5880, // C#
1 / 7, // D
3 / 7 / 5 * 3, // D#
(525 + 490 * 2) / 5880, // D#
2 / 7, // E
3 / 7, // F
(3 / 7) + (4 / 7 / 7), // F#
(525 + 490 * 3 + 525 + 455) / 5880, // F#
4 / 7, // G
(3 / 7) + (4 / 7 / 7 * 3), // G#
(525 + 490 * 5 + 525 + 455) / 5880, // G#
5 / 7, // A
(3 / 7) + (4 / 7 / 7 * 5), // A#
(525 + 490 * 7 + 525 + 455) / 5880, // A#
6 / 7, // B
]

Loading…
Cancel
Save