grid studies: add TOC's

grid/studies/max/index.md

@@ -5,11 +5,21 @@ redirect_from: /grid-studies-max/
 ---
 
 # Grid Studies: Max
+{: .no_toc }
 
 Max is a full kit of creative tools for sound, graphics, music and interactivity in a visual environment. Patching together *objects* the user can create complex interactions between software and hardware devices. The rapid and immediate nature of graphical programming lends itself well to developing for grids, making it the longtime tool of choice for monome grid-based software.
 
 This tutorial will show the basics of interfacing with the grid including how a simple, yet immediate sequencer platform can be made with a small amount of code.
 
+<details open markdown="block">
+  <summary>
+    sections
+  </summary>
+  {: .text-delta }
+- TOC
+{:toc}
+</details>
+
 ## Prerequisites
 
 This lesson assumes a basic understanding of the Max patching interface. If you're absolutely new to Max it may be helpful to first go through some of the most excellent Max tutorials in-app `Help > Max Documentation`.
@@ -26,7 +36,7 @@ Throughout this text, we'll use the following formatting styles:
 - `(message text)`: refers to a Max message object
 - `[objectname @args val]`: refers to a non-message Max object and the arguments needed
 
-## 1. Connect
+## 1. Connect {#connect}
 
 *See grid-studies-1-1.maxpat for this section.*
 
@@ -42,14 +52,14 @@ Create a new object (press <kbd>N</kbd>) and type `bpatcher monome-device` and t
 
 Plug in your grid and it will appear in the box. If you connect more than one grid, you can choose which device to communicate with via the dropdown.
 
-## 2. Basics
+## 2. Basics {#basics}
 
 Messages are sent to `[monome-device]` through the top left inlet, and device interaction messages are transmitted through the bottom left outlet.
 
 *See grid-studies-2-1.maxpat for this section.*
 
 
-### 2.1 Key input
+### 2.1 Key input {#key-input}
 
 ![](images/grid-studies-2-1.png)
 
@@ -76,7 +86,7 @@ rows -> (rows $1)
 
 To show your grid's key states, connect the output of the `route` to this `matrixctrl`.
 
-### 2.2 LED output
+### 2.2 LED output {#led-output}
 
 ![](images/grid-studies-2-2.png)
 
@@ -104,15 +114,15 @@ To clear the entire grid, use the following message:
 /monome/grid/led/all 0
 ```
 
-### 2.3 Coupled interaction
+### 2.3 Coupled interaction {#coupled-interaction}
 
 To change the LEDs on our grid with each physical press, we'll connect the output of our `matrixctrl` into our `/monome/grid/led/set $1 $2 $3` message, which then feeds into `[monome-device]`'s left inlet (see the red cable in the image below).
 
 ![](images/grid-studies-2-3.png)
 
 You now have a coupled interface, where the key state is reflected by the the LEDs.
 
-### 2.4 Decoupled interaction
+### 2.4 Decoupled interaction {#decoupled-interaction}
 
 The grid can also display information beyond the current physical interaction. Throughout this doc, we'll refer to this quality of LED independence as being *decoupled*. The most fundamental decoupled interface is an array of toggles. So, let's ignore the key up state, switching the LED state *only* on key down.
 
@@ -134,7 +144,7 @@ By moving the key state (`z`, here as `$3`) to the front, `[route 1]` will only
 
 Connect this to the input of the `matrixctrl` and we have a toggle bank!
 
-## 3.0 Further
+## 3.0 Further {#further}
 
 Now we'll show how basic grid applications are developed by creating a step sequencer for a 128 grid. We will add features incrementally:
 
@@ -147,7 +157,7 @@ Now we'll show how basic grid applications are developed by creating a step sequ
 - Adjust playback loop with two-key gesture in position row.
 
 
-### 3.1 Toggles
+### 3.1 Toggles {#toggles}
 
 *See grid-studies-3-1.maxpat for this step.*
 
@@ -161,7 +171,7 @@ By switching the first and second elements and then putting them into `[route 6
 
 Also, instead of wrapping a bunch of cords around the patch, we use `[s osc_out]` to send our `led` messages to `[r osc_out]` and into `[monome-device]`.
 
-### 3.2 Play
+### 3.2 Play {#play}
 
 *See grid-studies-3-2.maxpat for this step.*
 
@@ -194,7 +204,7 @@ After we clear the row, we turn on the corresponding LED by passing the playhead
 Now when you turn on the clock, you'll see the playhead moving along the bottom row.
 
 
-### 3.3 Triggers
+### 3.3 Triggers {#triggers}
 
 *See grid-studies-3-3.maxpat for this step.*
 
@@ -231,7 +241,7 @@ The "triggered" LEDs will be full brightness, drawn on top of this dim row.
 Lastly, there's a tiny sound engine so you can actually hear something. Turn on the DAC and turn up the gain slider. Change the note values by opening up the `trigs` subpatcher.
 
 
-### 3.4 Cutting and Looping
+### 3.4 Cutting and Looping {#cutting-and-looping}
 
 *See grid-studies-3-4.maxpat for this step.*
 
@@ -272,6 +282,6 @@ See `grid-studies-3-5.maxpat` for a JavaScript implementation of this patch.
 
 *Max* was originally designed by Miller Puckette and is actively developed by [Cycling '74](http://cycling74.com).
 
-This tutorial was created by [Brian Crabtree](https://nnnnnnnn.org) and maintained by [Dan Derks](https://dndrks.com) for [monome.org](https://monome.org).
+This tutorial was created by [Brian Crabtree](https://nnnnnnnn.org) and is maintained by [Dan/i Derks](https://dndrks.com) for [monome.org](https://monome.org).
 
 Contributions welcome. Submit a pull request to [github.com/monome/docs](https://github.com/monome/docs) or e-mail `[email protected]`.

grid/studies/pd/index.md

@@ -42,7 +42,7 @@ Once both are installed, navigate to `Pd > Preferences > Edit Preferences` (macO
 Then, place the `monome-device` folder that's included in the zip file above into your Pd externals folder. We don't need to explicitly add it to the search path.
 
 
-## 1. Connect
+## 1. Connect {#connect}
 
 *See grid-studies-1-1.pd for this section.*
 
@@ -59,13 +59,13 @@ Attach your grid and you can now communicate with it through this object.
 
 Note: this object you've embedded isn't serialosc itself, which is an invisible daemon on your computer that you should have installed [via these steps](/docs/serialosc/setup). The `[monome-device]` object is an 'abstraction', which is actually the patch `monome-device.pd` *inside* of an object, to simplify communicating with serialosc from Pd.
 
-## 2. Basics
+## 2. Basics {#basics}
 
 Messages are sent to `[monome-device]` through the top left inlet, and received out the bottom left outlet.
 
 *See grid-studies-2-1.pd for this section.*
 
-### 2.1 Key input
+### 2.1 Key input {#key-input}
 
 To see what is coming from the grid, create a `[print]` and connect the left outlet of `[monome-device]` to it. Open the Pd window (Window -> Pd Window) and press some keys on the grid. OSC data will be displayed in the console.
 
@@ -83,7 +83,7 @@ We now have a list of 3 numbers according to each key action. Use an `unpack` to
 
 ![](images/grid-studies-2-1-1.png)
 
-### 2.2 LED output
+### 2.2 LED output {#led-output}
 
 Above the `[monome-device]` create a message box (<kbd>control</kbd>/<kbd>command</kbd> + <kbd>2</kbd>) and type:
 
@@ -106,7 +106,7 @@ To clear the entire grid, use the following message:
 ![](images/grid-studies-2-2-1.png)
 
 
-### 2.3 Coupled interaction
+### 2.3 Coupled interaction {#coupled-interaction}
 
 Connect the output of
 
@@ -118,7 +118,7 @@ You now have a coupled interface, where the key state is reflected by the the LE
 
 ![](images/grid-studies-2-3-1.png)
 
-### 2.4 Decoupled interaction
+### 2.4 Decoupled interaction {#decoupled-interaction}
 
 The most fundamental decoupled interface is an array of toggles. We can accomplish this by ignoring the key up state, switching the LED state only on key down.
 
@@ -141,7 +141,7 @@ To complete the cycle we can then drive the corresponding LED with a message box
 ![](images/grid-studies-2-4-1.png)
 
 
-## 3.0 Further
+## 3.0 Further {#further}
 
 Now we'll show how basic grid applications are developed by creating a step sequencer, adding features incrementally:
 
@@ -154,7 +154,7 @@ Now we'll show how basic grid applications are developed by creating a step sequ
 - Adjust playback loop with two-key gesture in position row.
 
 
-### 3.1 Toggles
+### 3.1 Toggles {#toggles}
 
 *See grid-studies-3-1.pd for this step.*
 
@@ -199,7 +199,7 @@ This index value is then used to set two values before toggling that state. The
 Finally we use the index to find the current state of the table, then invert that state with '== 0'. This works because our state is always a 0 or 1. This value is then sent to update the grid LED and is stored back in the table.
 
 
-### 3.2 Play
+### 3.2 Play {#play}
 
 *See grid-studies-3-2.pd for this step.*
 
@@ -223,7 +223,7 @@ After we clear the row, we turn on the corresponding LED with a normal single-LE
 
 Now when you turn on the clock, you'll see the playhead moving along the bottom row.
 
-### 3.3 Triggers
+### 3.3 Triggers {#triggers}
 
 *See grid-studies-3-3.pd for this step.*
 
@@ -257,7 +257,7 @@ The "triggered" LEDs will be full brightness on top of this dim row.
 
 There's a tiny sound engine so you can actually hear something. Turn on the DAC and turn up the gain slider.
 
-### 3.4 Cutting and Looping
+### 3.4 Cutting and Looping {#cutting-and-looping}
 
 *See grid-studies-3-4.pd for this step.*
 
@@ -290,6 +290,6 @@ We've created a minimal yet intuitive interface for rapidly exploring sequences.
 
 *Pure Data* was designed by Miller Puckette and is actively developed as an open source project. [puredata.info](http://puredata.info).
 
-This tutorial was created by [Trent Gill](http://whimsicalraps.com) for [monome.org](https://monome.org), with updates in 2023 by David Niemi and [Dan Derks](https://dndrks.com).
+This tutorial was created by [Trent Gill](http://whimsicalraps.com) for [monome.org](https://monome.org), with updates in 2023 by David Niemi and [Dan/i Derks](https://dndrks.com).
 
 Contributions welcome. Submit a pull request to [github.com/monome/docs](https://github.com/monome/docs) or e-mail [[email protected]](mailto:[email protected]).

grid/studies/processing/index.md

@@ -5,9 +5,19 @@ redirect_from: /grid-studies-processing/
 ---
 
 # Grid Studies: Processing
+{: .no_toc }
 
 Processing is a programming language, development environment, and online community. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing has evolved into a development tool for multi-media performance, including interaction with hardware devices and libraries for sound manipulation. Highly accessible and with a wealth of tutorial information, Processing is a great choice for coding with the monome grid and is fully cross-platform making it highly useful when sharing projects.
 
+<details open markdown="block">
+  <summary>
+    sections
+  </summary>
+  {: .text-delta }
+- TOC
+{:toc}
+</details>
+
 ## Prerequisites
 
 If you're very new to Processing or Java, it will be very beneficial to work through the 'getting started' tutorial available directly from Processing.org: [processing.org/tutorials](https://processing.org/tutorials/gettingstarted/)
@@ -36,7 +46,7 @@ For example, proper installation of `oscP5` on macOS would look like:
 
 You'll need to restart Processing if it's running while you installed these libraries.
 
-## 1. Connect
+## 1. Connect {#connect}
 
 The monome-processing library facilitates easy connection and communication with grids. Connect to a grid with the following code:
 
@@ -59,15 +69,15 @@ m = new Monome(this, "m1000011");
 
 The library communicates with *serialosc* to discover attached devices using OSC. For a detailed description of how the mechanism and protocol work, see [monome.org/docs/tech:osc](http://monome.org/docs/tech:osc).
 
-## 2. Basics
+## 2. Basics {#basics}
 
 In this section, we'll cover how to:
 
 - interpret key presses
 - draw LEDs coupled to key presses
 - draw LEDs decoupled from key presses
 
-### 2.1 Key Input
+### 2.1 Key Input {#key-input}
 
 *See `grid_studies_2_1.pde` for this section.*
 
@@ -89,7 +99,7 @@ public void key(int x, int y, int s) {
 
 We will, of course, do more interesting things with this function in the future.
 
-### 2.2 Drawing LEDs
+### 2.2 Drawing LEDs {#drawing-leds}
 
 *See `grid_studies_2_2.pde` for this section.*
 
@@ -121,7 +131,7 @@ As seen in `grid_studies_2_2.pde` we place this code inside the `draw()` functio
 
 ![](images/grid-studies-processing-seen.png)
 
-### 2.3 Coupled LED Interaction
+### 2.3 Coupled LED Interaction {#coupled-led-interaction}
 
 *See `grid_studies_2_3.pde` for this section.*
 
@@ -167,7 +177,7 @@ Once we've refreshed the grid, we set the `dirty` flag to `false` so we're not n
 
 The `draw()` function is called at 60 frames per second unless you specify a different rate in `setup()` such as `frameRate(10);`.
 
-### 2.4 Decoupled LED Interaction
+### 2.4 Decoupled LED Interaction {#decoupled-led-interaction}
 
 The most basic decoupled interaction is a toggle. Turn the grid into a huge bank of toggles simply by changing line 22, in the `key` function:
 
@@ -177,7 +187,7 @@ if(s == 1) led[y][x] ^= 15;
 
 Now, only key presses (s = 1) do something, whereas releases are ignored. Each key press uses an XOR operator to toggle the LED value between 0 and 15, depending on the previous state of the LED.
 
-## 3. Further
+## 3. Further {#further}
 
 Now we'll show how basic grid applications are developed by creating a step sequencer. We will add features incrementally:
 
@@ -190,7 +200,7 @@ Now we'll show how basic grid applications are developed by creating a step sequ
 - Adjust playback loop with two-key gesture in position row.
 
 
-### 3.1 Toggles
+### 3.1 Toggles {#toggles}
 
 *See `grid_studies_3_1.pde` for this step.*
 
@@ -225,7 +235,7 @@ if(dirty) {
 
 That'll get us started.
 
-### 3.2 Play
+### 3.2 Play {#play}
 
 *See `grid_studies_3_2.pde` for this step.*
 
@@ -273,7 +283,7 @@ for(int x=0;x<16;x++) {
 
 During this loop which copies steps to the grid, we check if we're updating a column that is the play position. If so, we increase the highlight value. By adding this value during the copy we'll get a nice effect of an overlaid translucent bar.
 
-### 3.3 Triggers
+### 3.3 Triggers {#triggers}
 
 *See `grid_studies_3_3.pde` for this step.*
 
@@ -313,7 +323,7 @@ public void trigger(int i) {
 
 Some code is added throughout the file to set up drawing and gently fade everything on each redraw.
 
-### 3.4 Cutting
+### 3.4 Cutting {#cutting}
 
 *See `grid_studies_3_4.pde` for this step.*
 
@@ -359,7 +369,7 @@ if(timer == STEP_TIME) {
 
 Now, when pressing keys on the bottom row it will cue the next position to be played. Note that we set `cutting = false` after each cycle so that each press only affects the timer once.
 
-### 3.5 Loop
+### 3.5 Loop {#loop}
 
 Lastly, we'll implement setting the loop start and end points with a two-press gesture: pressing and holding the start point, and pressing an end point while still holding the first key. We'll need to add a variable to count keys held, one to track the last key pressed, and variables to store the loop positions.
 
@@ -423,9 +433,9 @@ if(timer == STEP_TIME) {
 
 Done!
 
-## Closing
+## Closing {#closing}
 
-### Suggested Exercises
+### Suggested Exercises {#suggested-exercises}
 
 - "Record" keypresses in the "trigger" row to the toggle matrix.
 - Display the loop range on the bottom row of the grid.
@@ -434,7 +444,7 @@ Done!
 	- If "alt" is held while pressing the play row, reverse the direction of play.
 
 
-## Credits
+## Credits {#credits}
 
 *Processing* was designed by Ben Fry and Casey Reas and is maintained by the [Processing Foundation](processing).
 

grid/studies/python/index.md

@@ -495,6 +495,6 @@ Python was designed by Guido van Rossum and is maintained by the [Python Softwar
 
 *pymonome* was written and is maintained by [Artem Popov](https://github.com/artfwo/pymonome).
 
-This tutorial was created by [Brian Crabtree](http://nnnnnnnn.org) and [Dan Derks](https://dndrks.com) for [monome.org](https://monome.org).
+This tutorial was created by [Brian Crabtree](http://nnnnnnnn.org) and [Dan/i Derks](https://dndrks.com) for [monome.org](https://monome.org).
 
 Contributions welcome. Submit a pull request to [github.com/monome/docs](https://github.com/monome/docs) or e-mail [[email protected]](mailto:[email protected]).