erin sparlingSo close.
Works on iPhone too (barely). #PencilKit #LetterSet
Oh you thought I was done pushing this into the realm of absurdity? Nope! How about repurposing a page curl metal shader to emulate translucent vellum?
As an aside: can I just say how annoying it is to have a single surface that needs to move, rotate, curl and accept pencil input?
#PencilKit #LetterSet
Almost all of the pieces are together for the MVP. Letter color is now selectable and ignores dark mode, pen size has two options, the gesture system has been completely redone (as a single UIRepresentable that handles both rotate and move). Major next step is a moveable canvas, and an eraser.
The eraser is the challenging one, as I’m rendering pixel data from a PKDrawing, and so the eraser has to manipulate pixels (luckily already separate from the background).
The iPhone version is still not something I’ve looked at in the least, but the app itself is starting to look SO GOOD.
@stroughtonsmith I’m not ready to use the showcase 25 hashtag yet, but I’m very close.
Ok I got it working on the iPhone too! It’s … hilarious. #LetterSet #PencilKit
I tried to explain to my kids yesterday how the my new app works and … what’s it called when you use one outdated metaphor to explain another?
Maybe this needs a new term?
- Deuterskeuomorphism: using an outdated object or interface to explain another outdated object or interface.
Test views are the best views. #LetterSet #PencilKit
Okay #typography fans, I've created a TestFlight sign-up form. If you want to play around with the existing version, please sign-up here: https://letterSet.app.
New day new feature. Today we have sheet selection, for adjustable weights and sizes! #typography #pencilkit #LetterSet
Sometimes you have to rip everything out to make new functionality. Enough people in the beta said “but in this one circumstance, letters don’t align” (e.g. of you rotate your device, or start in landscape mode, or are using a smaller screen, or …) so I’m ripping out the entire canvas mechanism.
Good news though: the next version will support an infinite canvas, and arbitrary device size and rotation! So glad I already redid the sheet mechanism.
New ebay purchase: an ad pamphlet on Letraset lettering. I primarily purchased it to get high res of these “how to” illustrations. #Letraset #LetterSet
New day new feature: “Infinite canvas” & “hard mode.”
This video shows disabling reusable letters, and accommodate all screen sizes.
- “Infinite canvas” now acts like a design app should: you can pan around & use flexible canvas sizes. As a bonus, you can now more easily use larger letter sheets, even if you’re on a small screen.
- “Hard mode” makes it so letters cannot be re-used. It is still possible if you switch font sheets, but is less obvious.
Sheet selection has been an afterthought in terms of the UX in #LetterSet but lately I’ve been working to change that. This is a demo of my current thoughts, but it could be better. I like the #SwiftUI matchedGeometryEffect here, but at the same time the final sheet size needs to be different. We’ll see where this goes.
The transitioning in of the “real sheet” will take a lot more work than what I had time to do before my day job this morning, but I at least got the switcher in to replace the existing one.
The app is now totally usable from the desktop (as of build 212), with key commands and manual controls for multi-finger gestures! #LetterSet #BuildInPublic #swiftui
How it started vs how it’s going. Apple’s #iconcomposer is pretty interesting.
And a few more tweaks, now that I'm a bit more comfortable with #iconcomposer.
I lied: this was the original sketch that I filed the bug with. You get the idea. This is an actual "how it started" vs "how it's going" now. #LetterSet #iconcomposer
Ok huge release today:
- Files, and a new .letterset document format!
- Tap to place (as an option)
- Sharper document output
This is now a real app that manages documents, can edit files and ipad that were made on an iPhone, and generally behaves as one would expect an app to do. Only downside of this release is that I’ve purposefully broken macOS support while I refactor the launch experience just for desktops.
I can’t wait to see your new art with this!
#LetterSet #typography #swiftui
I think my favorite feature is the “custom image as sheet” experience. Any image, as in this screenshot with Chromium via Letraslut, immediately becomes a new usable tool. https://letraslut.com/wiki/index.php?title=File:Chromium_One_72.jpg
Thumbnail support on iOS was very straightforward to add, but now #XcodeCloud dies every time I’ve attempted to distribute this version. I’ve verified that it is exclusively an Xcode Cloud env problem too, as I was able to archive and upload for distribution manually. I bet this is one of those annoying things like how to get package support working therein.
The top feature request at this point is more flexibility around available font sheets. I loved the “real” sheet selection UI but it isn’t scalable to the number of sheets people want. I can’t just have sliders as each size should allow for a distinct configuration, but this is directionally consistent with where I’m going.
New font selection UI is now live in the latest TestFlight release!
The first release candidate is going out to testers right now! There is so much more I’d like to do, but everything “works” right now so… what better way to get more feedback than to make it real?
v1.0.0-rc3 submitted for review, just under two years from the day I started it. #LetterSet #BuildInPublic
My sophomore effort, LetterSet - A Typography Tool, is live! Neither a text editor, nor a drawing tool, but a secret third thing.
In this unusual experience, you can relive what it meant to design in the era of pre-Desktop Publishing. Revel in the joy of:
-Rudimentary font selection
-Mistakes that are hard to undo
-Creative expression through limitations
-An unusual photo collage experience
I can’t wait to see what you do with it.
https://letterset.app
In an effort to be forward-compliant with font requests and copyright/licensing, I’m having to make an insane pipeline:
1. library to host custom fonts, not used by the app
2. library to download the above and parse fonts into svg for a set of characters, and build a catalog of character-to-svg file mappings
3. library to convert a catalog of character-to-svg mappings to a swift representation
4. swap character rendering
Currently on step 3.
#swiftui
#BuildInPublic
#LetterSet
I finished #3, but in an unexpected way. I’m still using my swift package that wraps fontforge scripts to do font exporting, but am using a custom svg->path implementation because every library didnt do it thoroughly.
So now I have:
- an “air gapped” repo to hold and process fonts, which makes an output format, containing the converted data, in a known location for a host app to consume
- a reference implementation of a renderer for said output format.
The availability of the Logitech Muse (ships to me in a week) means I have to actually make the version of this app for #VisionPro now. I think this can officially be 3rd in my roadmap:
1. Support arbitrary fonts via the SVG conversion pipeline.
2. Improve the renderer via a fixed coordinate system (aka “quasi-infinite canvas, as opposed to the existing “actual infinite”, which is unmanageable).
3. AR with stylus.
Last night I completed the font-license-complaint workflow, and got it working in Xcode Cloud.
Packages:
- glyph-preprocessor uses fontforge to convert fonts to paths commands stored in json
- LetterSet-sheet only knows about finding catalog json files, how to render path data as a sheet, and the process state changes (touch events)
- Distributed host iOS app only includes LetterSet-sheet for glyph rendering, doesn’t know about fonts or svg files
✅🤦🔡✍️
This video shows the end result: embedded New UI test mode swaps the glyph renderer for the new one, and has new fonts available without them being embedded in the app (I.e. Zapfino). #swiftui #BuildInPublic #LetterSet
I've been updating my catalog and sheet format to accommodate the new flexibility granted by the Font -> SVG -> Path pipeline, but I needed a new tool for previewing and managing the configurations. I've found that the various ai-related code tools are pretty decent at doing things like this, e.g. spinning up examples using a well-documented library. So... now I have a Mac app that authors configurations for my main app!
So much non-obvious new work in this latest video:
- Font->SVG->Path-based glyph pipeline now allows the use of the full set of font variations (as seen in Futura).
- Glyph rendering is sharp, no longer using GraphicContext for display.
- Zoom out finally “just works”.
- When in “hard mode” (aka character re-use disabled) one can now partially scribble over a letter; subsequent stamping only stamps the remainder!
Almost ready for testing…
Hey #typography community, what font(s) would you like to see in #LetterSet next? My tooling to handle most arbitrary fonts is ready to expand my existing sheet selection, so I’d love to hear from you as to what would be the most fun or satisfying to see.
Currently I have Helvetica Neue and Futura PT configured, and Zapfino is in my test builds just to test literal edge cases.
I really get such immense pleasure even just having fun in the new version of this app.
New feature is almost done: paper generation. This tool is so funny collage with.
And here’s the prototype in action.
And (at long last) undo/redo is reflected in the sheet mask correctly! This works for tapping and drawn masks.
Halftone and screentone patterns, powered by metal shaders, in the latest TestFlight.
Undo/redo now works properly even across canvas resizing. Note the hilarious complexity: the letter sheet does not change size, nor does the mask associated with each state, but the canvas does. Many things in sync makes me sad but works well... famous last words.
App Store status: waiting for review… #LetterSet
Rejected. Forgot to describe how to test the in-app purchase. On the positive side: this means my feature-gating is not insanely overbearing?
Resubmitted.
But at least I got to build a ruler tool in my free time? #LetterSet
I pulled the original build and re-submitted with the ruler. Hopefully this one makes it through!
At this point though, I feel like "season 1" features are at least real:
- Lined paper
- Graph paper
- Construction paper
- Halftone
- Screentone
- Custom ruler
I said at the beginning of the public beta that all of the actually core features in #LetterSet would remain free, and that only consider it for subsequent features. I feel like I'm making good on that promise.
Rejected again because of section 3.1.1, the very section I presented on at @SwiftLeeds this year!
In Apple’s defense, I did not follow the guidelines to have a “restore purchases” button; an honest mistake on my part as this is the first time that I’ve used non-consumable in-app purchases. They also offered to let me submit it as a bug fix without further review, but I declined so I could add the polish I had done since the last build.
New build submitted now…
I’m very happy to say that LetterSet v1.1.0 is now live in the App Store.
This is a huge release that includes:
- New, more flexible letter set sheets, that look more realistic, behave more predictably and have a greater selection of weights and variants
- The start of the Season 1 featureset, including 5 custom paper types, and very fun ruler (for constraining the angle of letter sheets on mobile devices) Please try it, and spread the word! https://letterSet.app/download
#LetterSet #typography
- New, more flexible letter set sheets, that look more realistic, behave more predictably and have a greater selection of weights and variants
- The start of the Season 1 featureset, including 5 custom paper types, and very fun ruler (for constraining the angle of letter sheets on mobile devices) Please try it, and spread the word! https://letterSet.app/download
#LetterSet #typography
From a technical perspective, the improvements are so numerous. Most interesting I think is a reenvisioned zoom (that can handle zooming out!), a new canvas display system, completely reengineered sheet mechanics, and a font->glyph->svg->patched drawing command pipeline, totally automated.
I also built three standalone utilities, not including packages. Notably, my sheet author configuration utility act as a complete test tested for all of the type pipeline features.
The paper generation uses #metalshaders, a first in production for me, and masking has evolved into an art. I now have a MaskManager in the sheet library, that handles three types of masks:
- current, a mask of the active stroke
- cumulative, a combined mask of all strokes
- transient, as temporary mask of views that impact transfer
Transient impact of the ruler is not yet implemented in the app, but the library supports it now.
Image handling is also greatly improved. You can crop after placing an image, resize behaves more reasonably, and masking parts of the image transfer perfectly, for the most bizarre #collage experience ever since Khoi Vinh’s Mixel. This crop/mask experience also works on the new paper types!
Also, I’ve stuck to my goal of keeping all core features free, and will likely grant Season 1 entitlements to all omce Season 2 exists… whenever rhat is.
In the meantime, there’s a menu option to hide premium features because I hate when features I use in tools advertise things I haven’t bought. Since all paid-for features are truly optional from the core experience, you can hide all mentions of them (except the preference to show/hide them) if you also hate this.
Meanwhile, the ruler is a really fun tool as it stands. When in use, it becomes the only way to rotate a sheet. This lets you more accurately line up a word’s baseline as you zoom, so you can be more consistent with positioning… if you want!
@stroughtonsmith I took a page (literally) out of your book and added paper generation to the newly released version of https://letterset.app, which adds even more fun and questionable utility. It’s metal-based, so it does update instantly, but I have it throttled re: high-res UIImage output.
In truth though, I’ve always wanted a halftone and screentone generator like this, and never understood why so few apps implement something like this. It’s so fun!
Steve Troughton-Smith@everyplace that does look fun! Love the halftone
I’ve spent my free time over the last week isolating my masking into a Mask Manager package, that exposed both mask and masking utilities: mask operations for manipulating various union and intersection strategies; masking operations for applying said strategies on actual images. This is the culmination of this work, a Mask Playground that shows mask buildup over time, with transient blockers.
Now I have a third state within masking. Throughout the app, I have to track:
-the current #PencilKit stroke
-the sum of all strokes
-the boundary of letters that have been tapped
I track these in two ways, as the shape of the above as it applies to the sheet is different vs its orientation to the canvas. Then add undo history across both.
Now: the idea of a transient object that blocks transfer to the canvas, but doesn’t impact the cumulative sheet mask.
@emorydunn
I mean, it isn’t anywhere nearly as complex as a “roll my own TIFF implementation,” but wow is this stuff silly.
Emory Dunn 
@everyplace I don't know about that, all of those boolean operations and masking look pretty tricky to get right
Ruler now incorporates this secret third state. Transient masks are used to block pencil strokes from impacting the sheet and the underlying canvas. In English: a pencil can no longer draw under the ruler. The ruler behaves like an object in the real world!
Ruler is now a ruler!
Ruler has evolved into Rulers!
Now that the sheet is rendered with metal, I can experiment more…. But not all experiments are good ones. I implemented pressure sensitivity, but it is really distracting. Posting this for posterity, but I’ll either remove it or tone it WAY down.
Hooked up the gyroscope properly this time. You can also see the parallax I built into the internal zoom mechanism, slightly offsetting the textures as the device rotates. I also made the zoom center point adjust relative to the window position…
kcǃ
bentendo@everyplace very cool, working with real screen tone is so much fun and this looks like it captures that!
@benbrown yeah. You can either stamp the whole sheet, or draw parts. Make it transparent or opaque. Radial or linear gradation of size, spacing. I did it all! Only thing one could possibly want I think would be an adjustable midpoint, but the real sheets didn’t have that. You can make real messed-up registration now though!
@everyplace beautiful
Christian Tietze@everyplace This looks really fun!
Also, "Untitled 192" -- shows your dedication to manual testing :)