Dev notebook: Converting scale & position of circular NSSlider for degrees

The standard Cocoa control NSSlider comes in a circular variety that resembles a rotating knob with an indicator point. Among the ideal applications for such a control is representing a circular angle.

In the application I'm developing I wanted to use this to control the angle of the brush image used for drawing. I began by setting the range of the control from 100 and using the value as a percentage (a pretty common approach for sliders), converting to the angle (which I'm using in radians in my drawing code)

Functionally it was okay, but there were some user-feedback issues. For one, the circular slider by default increases in the clockwise direction, but in my mathematics-centered application I felt it made much more sense for angle to be treated as it is on the unit circle, increasing in the counter-clockwise direction. (Since my drawing code was written this way, it also meant that the position of the knob did not visually follow the rotation of the brush image). A related issue: the unit circle typically puts the angle zero at "3 o'clock", whereas the NSSlider defaults to position 0 at noon.

One other usability issue involved precise setting, which is somewhat a limitation of the size of the control. A text field displaying the control setting could help the user a bit; however displaying values in radians would require a lot of decimal spaces and perhaps not be as intuitive, so I decided at this point to convert the control to work with degrees, and display this value in a text field.

To sum up, the needs are: 1) make the control increase counter-clockwise instead of clockwise, 2) make the control set 0 to the 3 o'clock knob position instead of noon; 3) map the range from 0 to 360 degrees and display that value in a text field.

Painting with Trigonometry

I'm excited to share today's image generated from the application under development:

It's a pretty organic background-pattern sort of texture, but it highlights a few cool things about the app, which is focused on creating beautiful images with mathematical techniques.

Dev notebook: brush-like drawing in Swift, without CGPattern

I'm spending a lot of time in Cocoa drawing and Core Graphics lately, working in Swift.

The API around the Core Graphics CGPattern object in Swift is a little challenging - it requires C callbacks and unsafe pointers for basic pattern-creation and drawing functionality. It also doesn't work exactly as I'd like it to; I want to have more of a 'brush' metaphor where I can vary the 'paint' flow of the pattern being used to draw a line or a curve. But I definitely want a pattern-like construct that I can apply different stroke and fill colors to in order to draw.

My solution is to use NSImage, which is really convenient because it's a high-level object in Swift that can easily be created in memory or loaded from a .png resource in the app bundle.

The approach: given an NSImage that represents your brush pattern, create a copy NSImage that is rendered in the desired stroke color, then use that copy to draw your desired lines and curves, or tile it along with clipping to fill an area. I'll include an example of drawing a line with varying density, and of filling an area with clipping and offset adjustment.