Languages Features Calendar CSV Lists Blog About Sponsor Add Language
GitHub icon



idyll is a pl created in 2017.

#151on PLDB 5Years Old 2.2kUsers
0Books 0Papers

Idyll is a markup language and toolkit for writing interactive articles. Idyll's reactive document model and standard component library decrease the amount of code needed to create high quality multimedia narratives. Idyll uses web standards to produce output that will load quickly in any web browser and is fully extensible. Idyll enables collaboration between programmers and journalists, researchers and designers. Those familiar with JavaScript can write custom components using tools like D3 or React.

Example from the web:
[meta title:"How To: Tune a Guitar" description:"An interactive audio guide with guitars and a little music theory." twitterHandle:"mathisonian" shareImageUrl:"" shareImageWidth:"1940" shareImageHeight:"970" /] [Header title:"Tune a Guitar" authors:`[{ name: "Matthew Conlen", link: "" }, { name: "Alex Kale", link: "" }]` /] [var name:"currentFrequency" value:108 /] [var name:"guitarState" value:"default" /] [var name:"fft" value:` null ` /] [var name:"waveform" value:` null ` /] [var name:"isInTune" value:false /] [var name:"clean" value:false /] [var name:"playRiff" value:false /] [var name:"playReference" value:false /] [var name:"detuneGuitar" value:false /] [var name:"autotuneGuitar" value:false /] [var name:"playNotes" value:false /] [var name:"playBeats" value:false /] [var name:"playScale" value:false /] [var name:"beatDiff" value:5 /] [var name:"tunerVisualization" value:true /] [var name:"targetNote" value:"E2" /] [derived name:"targetString" value:`{ E2: 0, A2: 1, D3: 2, G3: 3, B3: 4, E4: 5 }[targetNote]` /] [Fixed] [Guitar src:"images/svg/guitar.svg" currentFrequency:currentFrequency state:guitarState targetNote:targetNote fft:fft waveform:waveform playRiff:playRiff isInTune:isInTune clean:clean detuneGuitar:detuneGuitar autotuneGuitar:autotuneGuitar playReference:playReference tunerVisualization:tunerVisualization playNotes:playNotes playScale:playScale playBeats:playBeats beatDiff:beatDiff /] [/Fixed] [section] # A Sad Guitar. Take a second and strum the guitar. It doesn't sound so good, does it? We've just taken it out of storage and *it's all out of tune...* [/section] [section onEnterViewFully:`guitarState = 'headstock'; playScale = false;`] # Electric Tuner to the Rescue. Tune the guitar using the tuner. Click and drag the tuning knobs on the right to tighten and loosen the strings. // Need a reward state to let them know when a string is in tune [Tuner selectedString:targetString currFreq:currentFrequency /] [conditional if:isInTune] Great work, scroll on. [/conditional] [/section] [section onEnterViewFully:`guitarState = null; playScale = false; `] [conditional if:isInTune] # A Sigh of Relief. That sounds so much better! What a difference a few hertz make. Go ahead and play a little something. // audio clip of guitar shredding [div className:"centered"] [button onClick:`playRiff = true `] Play a lick. [/button] [/div] [/conditional] [conditional if:`!isInTune `] # Keep at it. // the text in this section should depend on whether or not the guitar is in tune This doesn't sound in tune quite yet. Scroll back up and try to get all of the tuning knobs to turn green. [/conditional] [/section] [section onEnterViewFully:`guitarState = 'pickups'; playScale = true; `] # How does this thing work? Guitars generate noise through the vibration of their strings. On an electric guitar such as this one, magnetic "pick-ups" convert those vibrations into an electrical signal which can then be sent to a tuner or an amplifier. [var name:"waveInView" value:false /] [WaveVisualizer waveform:waveform inView:waveInView onEnterView:`waveInView = true ` onExitViewFully:`waveInView = false ` /] This signal can be [visualized as a raw waveform](, but often we want to visualize the frequency instead. The [fourier transform]( is a mathematical function that reveals the audio frequencies hidden in that wave. [var name:"freqInView" value:false /] [FreqViz fft:fft inView:freqInView onEnterView:`freqInView = true ` onExitViewFully:`freqInView = false ` /] Strum the guitar to see the frequency visualized. [/section] [section onEnterViewFully:`guitarState = null; playReference = false; `] # Tuning by Ear. Now that we've tuned the guitar using a tuner, let's try to tune the guitar by ear. This is more challenging, and it may take you time to master. [/section] [notification onEnterViewFully:` detuneGuitar = true; `] The guitar is out of tune again! [/notification] [section onEnterViewFully:`guitarState = 'headstock'; playReference = true; tunerVisualization = false; `] # Match the Reference. We'll start by tuning to a reference note. When you manipulate the tuners on the right the current note will be played, as will a reference note. [div className:"centered"] [button onClick:` clean = !clean `] [Display value:`clean ? "Turn distortion on." : "Turn distortion off." ` /] [/button] [/div] This will be easier with a cleaner sound. Match the two sounds to get the guitar in tune. [/section] [section onEnterView:`playReference = false; autotuneGuitar = true; ` ] # Tuning Techniques. ## Harmonic Intervals. // audio clip in text to illustrate intervals // guitar in tune here Most of the strings on a guitar are separated by an interval known as a *perfect fourth*. [div className:"centered"] [button className:"interval" onClick:` playNotes = 'E2:A2' `] ♬ E2-A2 [/button] [button className:"interval" onClick:` playNotes = 'A2:D3' `] ♬ A2-D3 [/button] [button className:"interval" onClick:` playNotes = 'D3:G3' `] ♬ D3-G3 [/button] [button className:"interval" onClick:` playNotes = 'B3:E4' `] ♬ B3-E4 [/button] [/div] The perfect fourth is beautifully resonant, but there's one pair of strings on a guitar which are not separated by a perfect fourth. The interval between the [equation]G[/equation] and [equation]B[/equation] strings is a *major third*. The major third sounds happy and uplifting. [div className:"centered"] [button className:"interval" onClick:` playNotes = 'G3:B3' `] ♬ G3-B4 [/button] [/div] These intervals show up all the time in music, for example, the major third can be found the first two notes of [The Saints]( When_the_Saints_Go_Marching_In). The first two notes of [Amazing Grace]( form a perfect fourth. Learning to hear these intervals will help you tune your guitar without a tuner. ## Find the beat. [p onEnterViewFully:` clean = true ` ] When two strings are played together, they produce a third higher frequency known as an overtone. [/p] // This overtune frequency is the least common multiple of the two component frequencies, which is amplified by the confluence of the two sound waves. // For the purpose of tuning a guitar by ear, you just need to recognize that when two strings are played together they result in a higher frequency. We can see this amplified overtone on the righthand side of the frequency visualizer. // show frequency visualizer here? trigger example? // However, when the two strings are not perfectly in tune, the overtone is amplified inconsistently over time. // This produces a rhythmic pulsing or "beats" in the overtone which you can hear if you listen carefully. When the two strings are not perfectly in tune, the overtone is inconsistent over time. This produces a wobbling, *a beat*, in the overtone which you can hear if you listen carefully. Play notes with a [Dynamic value:beatDiff min:0 max:20 step:0.05 /] Hz difference: [div className:"centered"] [button onClick:` playBeats = true; ` ] Listen for the beats! [/button] [button onClick:` clean = !clean `] [Display value:`clean ? "Turn distortion on." : "Turn distortion off." ` /] [/button] [/div] // These beats also show up in the frequency visualizer. // here, an illustrative example of beats changing with intonation would be nice // will find audio file [var name:"freq3InView" value:false /] [FreqViz fft:fft inView:freq3InView showBeats:false onEnterView:`freq3InView = true ` onExitViewFully:`freq3InView = false ` /] As you get a pair of strings closer in tune, the beats will slow down until the overtone is perfectly amplified. Listening for the slowing of these beats is a helpful cue for tuning. [/section] [section] # Practice makes perfect. Try tuning the guitar by listening for the relationships between adjacent strings and the beats in the resultant overtone. [var name:"vizMode" value:0 /] [div className:"centered"] [button onClick:` vizMode = (vizMode + 1) % 3 `] [Display value:`["Show tuner", "Show wave", "Show frequencies"][vizMode] ` /] [/button] [button onClick:` clean = !clean `] [Display value:`clean ? "Add distortion" : "Remove distortion" ` /] [/button] [button className:"tune-action" onClick:` autotuneGuitar = true `] Tune Guitar [/button] [button className:"tune-action" onClick:` detuneGuitar = true `] Detune Guitar [/button] [/div] [div className:"centered"] [/div] [var name:"freq2InView" value:false /] [div style:`{display: vizMode === 0 ? 'block' : 'none'}`] [FreqViz fft:fft inView:freq2InView onEnterView:`freq2InView = true ` onExitViewFully:`freq2InView = false ` /] [/div] [div style:`{display: vizMode === 1 ? 'block' : 'none'}`] [Tuner selectedString:targetString currFreq:currentFrequency /] [/div] [div style:`{display: vizMode === 2 ? 'block' : 'none'}`] [WaveVisualizer waveform:waveform inView:`vizMode === 2` /] [/div] [/section] [section] # About this. This page was built using [Idyll](, a markup language for interactive documents. The guitar was created using [Sketch Interactive Export](, [D3](, and a modified version of [Tone.js]( Audio samples were provided by [ user SpeedY]( This project is from the [Interactive Data Lab]( at the [University of Washington]( [/section] [analytics google:"UA-108267630-1" /]

Language features

Feature Supported Example Token
Booleans true false
// A comment
Line Comments
// A comment
Semantic Indentation ϴ

HackerNews discussions of idyll

title date score comments
Idyll: Interactive Document Language 09/08/2017 195 18
nearley.html · idyll.html · mime.html

View source

PLDB - Build the next great programming language · v2022 · Day 32 · Docs · Build · Acknowledgements · Traffic Today · Traffic Trends · Mirrors · GitHub ·