In the weeds with flywriting

Share this post:

In the weeds with flywriting

Episode 2 is coming together, but I realized I had a problem when I saw this:

(There are several problems on display there, like the keyboard was supposed to have been removed, the lime green text is garish, why is George crying, etc. but I'm focusing on what I think is the most important problem.)

It's the system I created for "Flywriting", which renders text in truetype fonts into a set of points that my engine uses to trace Flyman's path and generate the letters. (See previous dev logs for more on that.) The text goes off the right edge of the screen. And it's generating the whole outlines of letters, like you would only use when drawing showy bubble letters, not when taking notes or trying to communicate at a reasonable speed. So this message, "Just woke up this way", takes forever to present to the viewer, and also, imagine that you're hearing a fly buzz the whole time.

Anyone forced to express themselves through Flywriting would realize that you need to make the quickest version of every letter in your message. The system rendering points from the truetype fonts, just doesn't understand that. Not only is it double-outlining every letter, it doesn't really care which order it hits each point. So sometimes Flyman crosses back over a whole letter to start a stroke that could have started from the other side, etc.

So the order of the points matters, and the strokes need to be kept simple. In my data files, the paths are serialized like this:

"assets/fonts/CedarvilleCursive-Regular.ttf 128 10 Just woke up this way": "117|223|118|213|121|204|127|195|132|187|138|179|135|175|125|175|117|170|111|162|107|153|105|143|104|133|105|123|108|113|112|105|120|98|130|97|137|103|140|112|141|122|142|132|143|142|144|152|151|155|160|154|163|157|158|165|151|172|150|181|152|191|154|201|154|211|154|221|151|231|145|239|137|244|127|243|120|236|117|226|124|230|130|237|140|236|145|227|147|218|147|208|146|198|144|188|140|186|134|195|129|203|125|212|123|222|111|140|112|150|116|159|122|167|131|169|139|166|138|156|137|146|136|136|135|126|134|116|131|107|123|104|115|110|112|119|110|129|147|166|150|159|145|159$159|164|161|154|165|145|170|136|176|128|183|129|179|138|174|146|169|155|167|164|171|171|180|166|188|160|195|153|201|145|205|136|210|129|211|138|208|148|207|158|209|167|219|165|228|161|236|156|244|156|237|163|228|167|219|171|209|173|201|170|199|160|192|165|184|171|175|176|166|177|160|170|159|165$246|160|236|161|238|155|244|150|253|148|260|142|268|135|276|136|274|145|272|155|272|165|281|163|290|158|298|152|301|158|293|163|284|168|275|172|267|177|258|174|251|167|254|156|260|165|264|160|266|150|263|147|256|154|268|144$301|144|297|140|287|141|277|141|281|136|290|134|300|133|308|129|313|121|320|114|321|122|317|132|324|135|318|140|309|143|306|153|305|162|308|171|318|169|327|165|334|158|337|164|329|171|320|175|311|177|301|176|298|167|298|157|300|147|300|145$-2147483648|-2147483648$392|170|393|160|396|151|399|142|405|134|409|140|405|149|401|159|399|168|407|167|415|161|422|154|429|147|434|138|441|138|438|148|436|157|436|167|445|167|452|160|457|151|459|142|460|132|468|135|478|136|487|132|489|138|479|142|470|143|465|150|461|159|455|167|447|173|437|176|430|171|428|161|423|163|415|169|407|174|397|177|392|171$486|168|488|158|491|149|497|140|504|134|514|131|523|134|532|137|542|135|549|137|540|141|530|143|528|152|523|161|517|169|509|174|499|177|489|176|495|171|504|169|513|164|519|156|523|147|516|144|506|145|499|152|495|160|494|169$547|177|548|167|552|158|556|149|559|139|562|130|564|120|568|111|575|105|577|114|575|124|571|133|574|136|583|136|588|143|585|153|578|160|569|165|576|170|586|170|595|166|602|159|608|158|604|167|597|173|587|176|577|177|568|175|562|167|557|168|552|177|566|157|574|155|580|147|576|142|568|148|564|152$605|158|608|148|610|139|614|130|623|124|629|129|628|139|625|149|618|156|612|163|617|171|627|171|636|168|644|162|652|158|649|167|641|173|632|176|622|178|612|176|605|169|605|159|617|140|614|149|620|144|623|135|623|134$-2147483648|-2147483648$708|164|709|154|713|145|718|136|724|128|731|129|727|138|722|146|717|155|715|164|720|171|728|166|736|160|743|153|749|145|753|136|759|129|760|138|757|148|755|158|757|167|767|165|776|161|784|156|792|156|785|163|776|167|767|171|757|173|749|170|747|160|740|165|732|171|724|176|714|177|708|170|708|165$783|204|784|194|786|184|788|175|790|165|794|156|799|147|807|141|816|138|824|144|824|154|823|164|830|162|840|158|841|164|832|168|822|171|814|176|804|178|797|177|795|186|792|196|790|206|783|208|806|168|815|165|818|156|816|146|810|150|804|159|800|166$-2147483648|-2147483648$901|144|897|140|887|141|877|141|880|136|890|134|900|133|908|129|913|121|920|114|921|122|917|132|924|135|918|140|909|143|906|153|905|162|908|171|917|169|926|165|934|158|937|164|929|171|920|175|910|177|901|176|898|167|898|157|900|147|900|145$961|149|953|150|946|158|943|167|940|176|935|172|937|162|939|152|940|142|942|133|943|123|944|113|946|103|949|93|955|86|964|88|965|98|964|108|961|117|957|126|952|135|948|144|954|141|964|141|968|150|967|160|969|169|978|170|987|166|993|158|999|154|998|164|991|171|982|175|972|177|963|175|962|165|961|155|950|123|955|118|958|108|959|99|956|95|952|104|950|114|950|118$998|151|1001|142|1008|137|1008|147|1005|156|1003|166|1009|170|1018|166|1026|161|1034|155|1036|161|1028|167|1020|173|1011|177|1001|177|996|169|997|159|1004|116|1011|118|1004|119$1047|160|1037|161|1039|155|1045|150|1053|148|1061|142|1069|135|1077|136|1075|145|1073|155|1073|165|1082|163|1091|158|1099|152|1102|158|1094|163|1085|168|1075|172|1068|177|1059|174|1052|167|1055|156|1061|165|1065|160|1067|150|1064|147|1056|154|1069|144$-2147483648|-2147483648$1157|170|1158|160|1162|151|1165|142|1171|134|1175|140|1171|149|1167|159|1165|168|1172|167|1180|161|1188|154|1194|147|1200|138|1207|138|1204|148|1201|157|1202|167|1210|167|1218|160|1223|151|1225|142|1225|132|1234|135|1244|136|1253|132|1254|138|1245|142|1235|143|1231|150|1227|159|1220|167|1212|173|1203|176|1195|171|1194|161|1188|163|1181|169|1172|174|1163|177|1157|171$1253|174|1252|164|1252|154|1256|145|1262|137|1270|131|1280|128|1289|129|1293|138|1293|148|1290|158|1289|167|1298|169|1307|165|1316|160|1325|160|1318|166|1309|171|1300|174|1290|176|1283|171|1280|167|1272|173|1263|177|1253|175|1267|169|1276|163|1282|156|1285|146|1283|138|1274|140|1267|148|1262|156|1260|166|1260|170$1314|209|1315|199|1320|190|1326|182|1333|176|1342|170|1350|165|1355|157|1352|156|1345|163|1337|169|1328|174|1321|169|1322|159|1325|150|1330|141|1335|133|1338|141|1333|150|1330|159|1331|166|1339|160|1346|154|1353|146|1359|138|1365|143|1363|153|1364|159|1374|156|1383|152|1389|155|1380|159|1370|163|1361|167|1357|175|1354|184|1352|194|1349|204|1346|213|1340|221|1332|227|1322|226|1316|219|1314|209|1323|218|1332|220|1339|212|1343|203|1345|194|1347|184|1350|174|1343|176|1335|182|1328|189|1323|198|1321|208|1321|208",

x|y|x2|y2|x...|y...$

A pipe (|) separates coordinates, and a $ separates strokes. Say I wanted to re-order the strokes and points in that really long line in the example above. It would be a ****ing nightmare. And I would have to re-run the animation in the engine to see if it worked at all.

So I turned to my custom Lisp toolkit, which includes a really nifty (if I do say so myself) API for making Visual Studio Code extensions.

I coded up a new extension which renders the highlighted sequence of flywriting as an SVG. So now I can edit flywriting paths and see the changes in realtime. If I want to visualize the animation of the letters appearing, I move my cursor through the points from left to right and watch the text render out as if a fly were writing it (lol).

At this point, I could clean up some of the problems in the example, such as how the J draws strokes across itself which should actually not get lines in them:

But even if I did that, Flyman would still be working way too hard to make an overly fancy cursive J. So what if I just draw the paths myself?

So I made the SVG rendering respond to clicks by adding points, and printing them out in coordinate form so I can splice them into the string representation.

This is still a stupidly laborious process, and I have to do it for every piece of flywriting dialogue. But I think it serves well enough, at least for getting through episode 2. Past releasing the first 2 episodes, I'll either keep iterating on this editor, or look for a better pre-made tool.

Quick and to the point. Might need thicker lines, though. And definitely garish in green. And I must have made a mistake because the "s" is drawn last. Easily fixable, though Tears of Joy