We are excited to release Code Notes. A new feature in Codea that lets you draw on your code

Code Notes is the most natural way to get ideas out of your head and into your code. When I write code, I often switch to a drawing app to do my thinking, because having visuals helps me. Right now, for example, my iPad lies flat on my desk with random sketches of my thoughts

So when Apple introduced hover support for Apple Pencil. (That is, detecting when the pencil is not touching the screen, but merely close to it.) I immediately wanted to build something in Codea that made use of it. It took two years to find the time to prototype it, but it’s here now: Code Notes

How does it work?

• Lower your pencil to the screen
• Grid paper fades in from the right
• Draw
• Take your pencil off to continue coding

This turned out to be simpler to implement than expected. Apple provides PencilKit, a framework for drawing. We used that, and with some careful massaging, managed to embed a PencilKit canvas into Codea’s Lua code editor

If you never use this feature, you don’t see it. There is no ornamentation to indicate state. The state is whether you are holding the pencil or not

Once you have drawings in your code they continue to live with your project. They scroll when your code scrolls, other people will see them when they load your project. They are visual comments

We made some hard decisions for version one:

• Should the drawings resize when you rotate your device? No. They stay pinned to where you put them relative to your code
• What if you change font size? The drawings stay where you put them, you’ll need to erase and re-draw if they are relevant to particular section of code
• Limited colours and tools. We have one pen, and one colour that adapts to light and dark mode
• On iPhone? You don’t see Code Notes

This set of limitations gave us a very clear goal for the first version of this feature, and it works well

Then we went back and annotated the example projects that ship with Codea. Because these are projects people open to learn Codea, they will see the sketches. This gave us an easy way for new users to discover the feature, and it makes our example projects more personal — more like opening someone’s physical notebook

What if you have an Apple Pencil and iPad that does not support hover? We have a simple interaction there, too: tap the screen with your pencil to enable Code Notes. Touch the screen with your fingers to go back to editing code

Code Notes is available now, starting in Codea 3.13