This is an interactive diagram of a guitar fretboard. It’s inspired by Robert Johnston’s Hello Guitar Method of teaching, but doesn’t necessarily do it justice. You might also be interested in relating this to the ‘CAGED guitar system’.
The diagram shows a guitar (or violin or ukulele) with the head on the left. The root note of any chord is shown in white wherever it appears on the fretboard, and the other notes that appear in any chord are highlighted with colours depending on their relation to the root. A chord is made up of three or more different notes, each of which might be played on one or more string, so that there is always a range of different ways of playing any chord on a stringed instrument. Usually the root note is the deepest string played, but not always.
Use the drop-down menus to choose your chord, or else click on the applet to give it focus and then use the keyboard to select chords:
- a-g choose the root note of the chord.
- A-G are sharp chords, so press shift and a to get A#
- The number keys select the type of chord.
- is your basic major chord, like C. This consists of the first, third and fifth notes of the major scale: C E G
- is a sus2 chord, like Csus2. This has the first, second and fifth notes: C D G.
- is a minor chord, like Cm. This uses the first, third and fifth notes of the minor scale: C D# G
- is a sus4 chord, like Csus4. This has the first, fourth and fifth notes of the major scale: C F G. These are also the major chords in the key you’re looking at. Notice that if you go from Csus2 to Cm to C to Csus4, the first and fifth notes are static while the middle note increases by one semitone between each.
- is a ‘power chord’, like C5. This loses the middle note entirely, being made only of firsts and fifths: C G. Usually played with only three strings.
- is a ’6′ chord, like C6 (which is also Am7). The first, third, fifth and sixth notes of the major scale: C E G A
- is a seventh chord, like C7. The first, third, fifth notes of the major scale, plus the seventh note of the minor scale: C E G A#
- is a major seventh chord, like C7maj. This uses the first, third, fifth and seventh notes of the major scale, giving a noticeably more dissonant chord than C7: C E G B
- is an ‘add 9′ chord, like Cadd9. That’s the first, second, third and fifth notes of the major scale (or, by convention, first, third, fifth and ninth): C D E G
- The space bar switches between different tunings.
I’ll be writing a version of this for Android smart phones, and also adding a few more chord types and integrating the menus into the applet itself – at the moment, because they’re part of the web site rather than the applet, they don’t change when you use the keyboard to change the applet’s settings.
Source code: Fretboard
Built with Processing
Everything we see and hear is made of waves, and the interactions of different frequencies – interference, resonance and harmony – account for many of the most interesting things there are. They are also a lot of fun to visualise, so I have put together a collection of animations – applets – which are all different visualisations of the interactions of waves, or their close cousins the circles. These are designed for display in public places, with a control box for people to experiment with and supporting literature.
(more…)
The pattern traced out by Trochor is what you’d get if you took a pencil moving in ellipses, and used it to draw on a sheet of paper that’s also moving in ellipses. It’s a bit like a spirograph, but not constrained in quite the same ways. It’s more like a harmonograph; more on that later.
Have fun, play around with the settings, especially ‘ratio’; that’s probably the best way of figuring out what’s going on. ‘Eccentricity’, by the way, is a measure of how flattened an ellipse is – an ellipse with 0 eccentricity is a circle, one with 1 is a line.
(more…)
Processing is a language created by Ben Fry and Casey Reas of MIT, designed to make computer programming accessible to people who might imagine it will always be beyond their grasp. Processing makes it easy to create beautiful, interactive graphics.
The principles of computer programming are surprisingly simple and powerful. They also provide an easy way in to understanding some very important concepts in mathematics and science, by making them into things you can play around with. Messing about with stuff is one of the ways that humans learn best, as well as being hugely enjoyable!
(more…)
For those who might be interested in where all these pretty pictures and animations come from, I have recently written a piece about Processing, the open-source programming language that most of them are made in.
Processing is designed to be easy to learn and quick for knocking up simple programs which explore particular graphical and mathematical ideas. It is one of my favourite things ever, and I would encourage anybody to have a play around with it some time.
Algorithmically distorting images is fun! Shimmia re-uses most of the maths and the code from Zoobie – both programs run through a grid of points, and for each one they pick a second point, displaced from the first by the interactions of waves.
Zoobie then draws a semi-transparent triangle at the second point, whereas Shimmia draws a pixel at the first point which gets its colour from second point in an image. The relation between them is quite a lot like the one between caustics and refracted images, though the mathematical analogy is not exact.
Click and drag inside the applet with either mouse button (or, if you only have one, with and with the closest thing you have to a Ctrl button) to change the frequency and amplitude of the waves. Drag with shift held down to change their speed.
For now the image is just this one I took of some leaves, but I figure I’ll see if I can pull pictures from Flickr later.
Snake Charmer is an applet closely based on Paul Friedlander’s light sculptures, which use hanging ropes spun at varying speeds, combined with ‘Chromastrobic’ lights’ (changing colour very quickly), to produce stunning visual effects. I recommend seeing the full-sized, physical ones if you ever get the chance, but I think there’s a lot of fun to be had with this interactive simulation, too.
Resonata Squared is based on a stack of chains, each transmitting waves at a different speed, but all driven by the same driving frequency.
The original Resonata is considerably more sophisticated in various ways, but really almost completely different.
Having finally looked up how to produce big images in processing, I’ve been having great fun digging up code I originally wrote more than a decade ago in POCO (the Autodesk Animator Pro variant of C), translating it into Processing and whipping up stills which are potentially big enough to print at about two feet across (I’m settling for 2400×2400 for now – nothing seriously vast). Here’s a sampling that you can view at 1024×1024, or here’s a full-size version of the first…
I might make t-shirts of some of these (etc.) available in my Cafepress Trigonometry shop (already selling some related designs), although I’ve never really made enough sales there to justify the effort.
Curlicor is a very simple toy. You basically control the steering wheel of the triangle. If you keep turning it you produce curlicue fractals. Click on the applet to toggle between mouse and keyboard control. Unlike most of my interactive animations, this one really requires interaction in order to do anything interesting.
