Hacker News new | ask | show | jobs
by 4lejandrito 2154 days ago
I really like fretty!

In fact react-guitar is the end result of a very similar project that I never finished.

I needed to reuse the guitar component for another project I am working on now so I decided to make it open source.
2 comments
uhoh-itsmaciek 2154 days ago
These are both great! I also have a similar project: https://fretboard.cool
link
delvinj 2154 days ago
Seems like fretboard apps are a favorite pastime.

Here's mine http://firemeinterns.com/fretter/

link
tzs 2154 days ago
Mine is downright primitive compared to all of the ones the rest of you are posting, being a command line program in C that I originally wrote around 1986, probably for THINK C on my Mac Plus.

Here is the source code [1], only updated to compile cleanly with a modern C compiler and not to depend on any libraries or functions that were specific to THINK C, plus one bug fix and some reformatting.

Here are some usage examples:

  $ ./chord
  c
  C:  C E G
  <3>|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|
     |-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-----|
  <5>|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|
     |-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|
     |-----|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|
  <3>|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|
  c7
  C7:  C E G A#
  <3>|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|
     |-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-<7>-|-----|
  <5>|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|
     |-----|-<3>-|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|
     |-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|
  <3>|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|
  c#m
  C#m:  C# E G#
  <3>|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|
     |-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|-<5>-|-----|-----|-----|
     |-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|
     |-----|-<3>-|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|
     |-----|-----|-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|-<5>-|-----|
  <3>|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|
You simply type chord names, and it shows you what notes are in the chord and where you can find them on the guitar fretboard. The first example is a C chord. It tells you the notes you want are C E G. In the diagram a <1> means that is a place you can play the root of the chord, a <3> is the third, a <5> is the fifth. For the C chord, then, we see that on open first string would give us <3>, the third fret <5>, the root is on the 8th fret, and the <3> is also on the 12th fret.

Chord names are the root note (with # for sharp or b for flat), and modifiers 'm' for minor, '6', '7', or '9' for a 6th, 7th, or 9th chord. (I have no idea why I did not include diminished chords).

If a line starts with '-' it is a command to change settings. Commands are "-cN" to set a capo on the Nth fret

Here are the commands. "-cN" for a capo on the Nth fret. "-t<notes>" to set the tuning for each string, where <notes> is a list of 6 note names (which can each be followed by # or b). "-Td" or "-TD" for D tuning. "-sN" to transpose by N half-steps (N can be negative). "-n" to switch to a narrower display and "-w" to switch back to normal. Narrow display looks like this:

  C:  C E G
   3 |---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|
     |-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|-1-|---|---|---|
   5 |---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|
     |---|-3-|---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|
     |---|---|-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|-1-|---|
   3 |---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|
It's always amusing to look at one's old code. Much of it seems like it was written by someone else. For instance, I see a lot more spaces around punctuation than I would use today. I think that is probably because the editor I used back then did not have syntax highlighting, so extra space was needed to make sure you didn't confuse consecutive tokens.

[1] https://pastebin.com/0rZnaVgu

link
4lejandrito 2154 days ago
Thanks for sharing this, I really like how simple it is.

You should properly release it and possibly publish it in the main package managers.

link
vthommeret 2154 days ago
Since we're sharing... I started a project a while ago whose goal was to show how intervals could be visualized horizontally or vertically and then "stacked" or composed in different ways to create scales and chord shapes up and down the fretboard.

I didn't end up finishing the project but created some fun visuals...

https://user-images.githubusercontent.com/42359/88242522-6bb...

https://user-images.githubusercontent.com/42359/88242530-724...

I got a basic page up that lets you draw Freboard shapes (and play sounds using Tone.js) declaratively:

  <div class="pattern" data-notes="1, b3,  4^, 5,  b7^, 8"></div>
Where the notes represent scale degrees and the caret is a string skip:

https://intuitivemusic.com/fretboard.js/

Using a similar framework I also created a page where I attempted to make sense of saxophone fingerings (you can hold down on shapes to hear sounds):

https://intuitivemusic.com/saxophone.js/

link
graphpapa 2154 days ago
This is nice, it’s more like how I see the fret board in my head
link