Skip to content

Instantly share code, notes, and snippets.

@tuanchauict

tuanchauict/monosketch-presentation.mono

Last active March 22, 2023 02:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tuanchauict/304bc45e749c37dff7606f64f83074a5 to your computer and use it in GitHub Desktop.
Save tuanchauict/304bc45e749c37dff7606f64f83074a5 to your computer and use it in GitHub Desktop.
Download ZIP
MonoSketch presentation. (Download monosketch-presentation.mono and open with https://app.monosketch.io/ for interaction version)
Raw
monosketch-presentation.mono
{"type":"G","i":"lineandroid-studysession","v":1946641214,"ss":[{"type":"T","i":"01-AAJMj5q9y5mOEplaxEp31p58LhV","v":1272397638,"b":"3|328|71|4","t":"","e":{"be":{"fe":true,"fu":"F3","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAqVafqKeFtLGk+a3q6VqqYcyTl","v":-2021500222,"b":"12|224|12|9","t":"","e":{"be":{"fe":true,"fu":"F4","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1}},{"type":"T","i":"01-AAUbUfqvPsIPnvpCC2MqZUlAVbo","v":1348027652,"b":"5|224|7|5","t":"","e":{"be":{"fe":true,"fu":"F4","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1}},{"type":"T","i":"01-AALQp5q31iA3cKeveDqpD7ztPpZ","v":1026161957,"b":"56|331|18|16","t":"GitHub","e":{"be":{"fe":true,"fu":"F4","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":2}},{"type":"T","i":"01-AATm04oC=YtfjV8MM4J3+wq9Mfl","v":-449682756,"b":"3|41|41|5","t":"\n╦ ╦┬ ┬┬ ┬  ╦  ┌┬┐┌─┐┌┬┐┌─┐  ┌┬┐┬ ┬┬┌─┐┌─┐\n║║║├─┤└┬┘  ║  │││├─┤ ││├┤    │ ├─┤│└─┐ ┌┘\n╚╩╝┴ ┴ ┴   ╩  ┴ ┴┴ ┴─┴┘└─┘   ┴ ┴ ┴┴└─┘ o \n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA9d44oVMgmnOnWky6qGdR5ztU3","v":1381117362,"b":"3|46|81|12","t":"I love drawing charts with ASCII.\nIshikawa san introduced me MonoDraw and helped me to request the license purchase\nfrom the company.\nUnfortunately, I didn't know the WF was approved and there was a license for me.\n\nI didn't want to pay $10 for the license myself\n(because I thought it was simple software.)\n\nI decided to code it myself.\nIt ends up spending almost 1 year to finish the first version\n\n(and I also realized my MonoDraw license was purchased, 1 year ago (;_;)","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA1q36o2PRWhGR8FeTRB+XwUTH5","v":1210980822,"b":"3|81|18|5","t":"\n╔═╗┌─┐┌─┐┌┐┌┌┬┐┌─┐\n╠═╣│ ┬├┤ │││ ││├─┤\n╩ ╩└─┘└─┘┘└┘─┴┘┴ ┴\n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAgF66oUqgmXZbLQORFnTabi426","v":2049368682,"b":"3|86|43|6","t":"1. How to draw\n   How to draw with ASCII\n\n2. How to connect canvas, mouse, and others\n\n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAcOe9oeGfeQ=9LsVcQV7nyjWW3","v":-1425537669,"b":"6|3|65|5","t":"\n   __       __  _                                   __           \n  / / ___  / /_( )  ___      ____  ____ ___  ___ _ / /_ ___      \n / / / -_)/ __/|/  (_-<     / __/ / __// -_)/ _ `// __// -_)     \n/_/  \\__/ \\__/    /___/     \\__/ /_/   \\__/ \\_,_/ \\__/ \\__/      \n                                                                 \n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAzqu9oww9yrgOzHHPi9Ahh7pTW","v":947337772,"b":"6|7|57|5","t":"\n                    ___    ____  _____   ____   ____     \n ___ _  ___        / _ |  / __/ / ___/  /  _/  /  _/     \n/ _ `/ / _ \\      / __ | _\\ \\  / /__   _/ /   _/ /       \n\\_,_/ /_//_/     /_/ |_|/___/  \\___/  /___/  /___/       \n                                                         \n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAEAz9ooNxct02nZCEIUTo9TcnA","v":-406869438,"b":"6|11|70|7","t":"\n     __                       _                     __              __\n ___/ /  ____ ___ _ _    __  (_)  ___   ___ _      / /_ ___  ___   / /\n/ _  /  / __// _ `/| |/|/ / / /  / _ \\ / _ `/     / __// _ \\/ _ \\ / / \n\\_,_/  /_/   \\_,_/ |__,__/ /_/  /_//_/ \\_, /      \\__/ \\___/\\___//_/  \n                                      /___/                           \n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAWWb+opqVPtHuFyxZEbIWI05A1","v":-1313730653,"b":"3|120|31|5","t":"\n╦ ╦┌─┐┬ ┬  ┌┬┐┌─┐  ┌┬┐┬─┐┌─┐┬ ┬\n╠═╣│ ││││   │ │ │   ││├┬┘├─┤│││\n╩ ╩└─┘└┴┘   ┴ └─┘  ─┴┘┴└─┴ ┴└┴┘\n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAGmh+oL=9z210zXkIJny4NlJKr","v":444435669,"b":"4|129|47|13","t":"Canvas WxH","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S2","du":"1|0|0"},"tha":1,"tva":1}},{"type":"T","i":"01-AAL1x+oAFpBQxc8RdFfWNzVdACb","v":-9637175,"b":"4|127|28|1","t":"1. We have a canvas size WxH","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAYrs=oYOcbzfhgNtwT5IU3oDvC","v":-485243432,"b":"12|138|30|1","t":"280 x 100 = 28,000 characters","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AADSHBpEqFRMsviyDQD70+ljxaK","v":-1996271586,"b":"17|139|22|2","t":"(4K 27 inch monitor)","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAezhEp+dL=BqQiZLfupPF+ph0h","v":879019818,"b":"5|143|62|2","t":"It's slow to generate and draw 28k characters for every frame","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AATU8EpA39m1vJljCNpx40pHDeD","v":-1042107916,"b":"4|146|47|1","t":"2. The actual working size is bigger (infinity)","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAuqEFpkD2zVP+ILgG7fUSBGCz5","v":1819891307,"b":"0|148|73|22","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|1|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AA90LFp5ubwvI7WxJ4Bpmq4Rs9h","v":-178785905,"b":"4|151|47|13","t":"WxH","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S2","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAaxUFpM+sb9PYxiuVoEsqKTf=F","v":-1236187891,"b":"5|185|47|13","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S2","du":"1|0|0"},"tha":1,"tva":1}},{"type":"L","i":"01-AAaxUFpI15ZRiuDgXOi2yiI4GW6","v":-17526063,"ps":"H|11|186","pe":"V|11|196","jps":["11|186","11|196"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"T","i":"01-AAaxUFpHt3JL4oX8T6B5lkhbYWg","v":1467178496,"b":"6|186|3|1","t":"wxh","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAbxUFpaIRmts7r1E85VtYGm9VT","v":-359415418,"b":"5|184|37|1","t":"Solution: Break into small rectangles","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AAbxUFp8oaeHxgLfb2qHGIsLXKR","v":-2018761383,"ps":"H|17|186","pe":"V|17|196","jps":["17|186","17|196"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAbxUFpqUdeXpkfCucbCnjfb8zD","v":974709911,"ps":"H|23|186","pe":"V|23|196","jps":["23|186","23|196"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAbxUFpbO6G5zj6p4wzRkoZklcY","v":-1640770630,"ps":"H|29|186","pe":"V|29|196","jps":["29|186","29|196"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAbxUFpTjwWy0ZIS=gIhxxZBppZ","v":-318730859,"ps":"H|35|186","pe":"V|35|196","jps":["35|186","35|196"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAbxUFpnVAHkZCTVMr9pWsUOGgY","v":2063806549,"ps":"H|41|186","pe":"V|41|196","jps":["41|186","41|196"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAbxUFp3qX4dD+YPUAIJWZ8znRR","v":-309504215,"ps":"H|47|186","pe":"V|47|196","jps":["47|186","47|196"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAbxUFpAwfH8TLrvaViIJIkOObu","v":-1777513980,"ps":"H|6|189","pe":"H|50|189","jps":["6|189","50|189"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAbxUFpCPyWtKduopZOEjjIVxLn","v":-255181281,"ps":"H|6|193","pe":"H|50|193","jps":["6|193","50|193"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"T","i":"01-AAbxUFpAtIMMn=i2wxyRhl2ZxeC","v":-342583291,"b":"6|199|65|2","t":"MonoSketch uses 16x16 unit matrix, and \na HashMap<position, matrix> for storing infinity working space","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA7l5Fpzh1NuOhihfQsLzcv9gNq","v":-561392991,"b":"5|171|57|2","t":"It's impossible to create a matrix matching the size of the working space","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA4ziGpw6=yZRIzQrmABWxQETjI","v":696214635,"b":"12|154|11|4","t":"Hello world!","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S3","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAohoGpj2AO1rt4AbvSUtEeVfko","v":-1072849425,"b":"13|188|11|4","t":"Hello world!","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S3","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAygxGptZEPZvko5aq1+GrzNR9K","v":-1535443457,"b":"0|181|73|22","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|1|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AA++THpwWgfR9O7HkXLQeGsG90s","v":265372237,"b":"2|204|14|6","t":"Add/Update shape","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAGkYHpTZSnVMXkQUUaAovTvnoF","v":1220232681,"b":"22|204|15|6","t":"Generate shape's ASCII Bitmap","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAHNhHpbbULbN3VeCn95pTU49Pb","v":-1497736376,"b":"43|204|28|6","t":"Calculate position of all \"pixel\" and distribute to corespondent matrices","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"L","i":"01-AAMq5HpaBdyqepi4huV56HNnYWR","v":808194827,"ps":"H|15|206","pe":"V|21|206","jps":["15|206","21|206"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AAeX7HpoNObJRtlYaDIbBfvGd+V","v":-1528322815,"ps":"H|36|206","pe":"V|42|206","jps":["36|206","42|206"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AA5OGIpnTQLLY0St9VEJW0UqH+7","v":-1401184323,"b":"49|213|16|6","t":"Update matrix","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AAbqPIpsGzCxS1uDgbj+K=YviAJ","v":-961184571,"ps":"V|56|209","pe":"V|56|212","jps":["56|209","56|212"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAgu8IpYZKnQmwZBVPGx56i82wV","v":-407278662,"b":"4|243|41|5","t":"Static kinds of stuff like rulers, grid, and selection indicators are separated from the main canvas for shapes","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAf0MfqWLtbd9hDLfhcau6oEsxj","v":1246861178,"b":"5|224|47|13","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S2","du":"1|0|0"},"tha":1,"tva":1}},{"type":"L","i":"01-AAf0Mfqjz+FzA9kow70jAXto3y=","v":758219155,"ps":"H|11|225","pe":"V|11|235","jps":["11|225","11|235"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"T","i":"01-AAf0MfqsLvtpPbUfEol6+JooFCQ","v":-1178074308,"b":"6|225|3|1","t":"wxh","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAf0MfqKq85azdOCKlI=FETHF5Z","v":-189715351,"b":"5|223|37|1","t":"Actual allocated matrices","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AAf0Mfqw44UiOzd+kgYX8E83=vy","v":-1035668706,"ps":"H|6|228","pe":"H|50|228","jps":["6|228","50|228"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"T","i":"01-AAf0Mfq9RxtBd55xBI31xxpp9dB","v":1014620176,"b":"0|220|73|22","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|1|0"},"tha":1,"tva":1},"te":false},{"type":"L","i":"01-AAf0Mfq98h4IiRDqXW6aLASaFXB","v":907069600,"ps":"H|17|225","pe":"V|17|235","jps":["17|225","17|235"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAf0MfqIMA7Zx1sD1rYgbJJMztr","v":607698110,"ps":"H|23|225","pe":"V|23|235","jps":["23|225","23|235"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAf0MfqJZFAfH8OTbQKyW4AIaWk","v":1495540777,"ps":"H|29|225","pe":"V|29|235","jps":["29|225","29|235"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAf0MfqHxyluZJxBSZ+eTH3fB51","v":562181826,"ps":"H|35|225","pe":"V|35|235","jps":["35|225","35|235"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAf0MfqCM9jSSl0bnz3j7uP5HdU","v":-667548306,"ps":"H|41|225","pe":"V|41|235","jps":["41|225","41|235"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAf0Mfq4leZ5oE=o7CxIIIQEceP","v":429418455,"ps":"H|47|225","pe":"V|47|235","jps":["47|225","47|235"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"L","i":"01-AAf0MfqI8tc8BSyf0DV=HSjToxD","v":-2066005486,"ps":"H|6|232","pe":"H|50|232","jps":["6|232","50|232"],"e":{"su":"S1","asu":"A1","aeu":"A1","du":"1|1|0"},"em":false},{"type":"T","i":"01-AAf0MfqBjEKUc=z0Okf7wdO27mJ","v":541787650,"b":"13|227|11|4","t":"Hello world!","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S3","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAYsVyqURAn+w1Ex+xvcS25czjF","v":-892865451,"b":"4|253|20|1","t":"3. How to draw ASCII","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAkmoyqGbrP903XlC7ewJ3wHcn3","v":261909460,"b":"6|255|12|4","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAkepyq=OVtvwN6An8oWCNpfPTN","v":749126131,"b":"19|255|12|4","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S2","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAQ2syqlrvdQk4b4j=KPMScQHim","v":2125241725,"b":"32|255|12|4","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S3","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"L","i":"01-AAFkvyqHzJ8t8VkM3YN2GEu40zF","v":650358592,"ps":"H|6|260","pe":"V|42|260","jps":["6|260","42|260"],"e":{"su":"S1","ase":true,"asu":"A2","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AAWH3yq7cpg0uRUmwmvse9EF=9m","v":833872599,"ps":"H|6|261","pe":"V|42|261","jps":["6|261","42|261"],"e":{"su":"S2","ase":true,"asu":"A3","aee":true,"aeu":"A4","du":"1|1|0"},"em":false},{"type":"T","i":"01-AATLBzq6hX7G5r9KwAkVYU1LSOV","v":2063269736,"b":"34|274|12|5","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AACMCzq5iLqyclhiHtM05GeEDaA","v":478803995,"b":"20|272|12|5","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAJFP0q6TpBceRnZZjNFD068nAj","v":-613278508,"b":"6|264|71|3","t":"It's quite straightforward when drawing ASCII characters on canvas with\ncanvas.drawText(...). With the above structure, we can convert a shape\ninto a \"bitmap\" and then apply the bitmap to the matrices","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA5wy0qCaQ2=ecjP0sasRCE7MQ=","v":1613311573,"b":"6|269|36|1","t":"However, when the shapes collide,...","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAPrN1qbvJ8+dHF9hfq2m1r=v9X","v":1406270441,"b":"31|270|12|5","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAo8q1q2FqUHtpY3ojc22OyOcVu","v":624901175,"b":"0|244|3|1","t":"(*) ","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAEyt1qLqW63x2ehIJQSWWM8Rkc","v":-1664572769,"b":"4|303|47|4","t":"I don't have a good solution for this question yet. MonoSketch resolves this by adding a database of pairs and how it will be when a collision happens","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAEyt1qYRndrlPF4rb9yf1W8brq","v":842285638,"b":"0|303|3|1","t":"(*) ","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAxQm2q4udgivLWJugKZDiZIobd","v":914969721,"b":"3|320|62|5","t":"\n╦ ╦┌─┐┬ ┬  ┌┬┐┌─┐  ┌─┐┌─┐┌┐┌┌┐┌┌─┐┌─┐┌┬┐  ╔═╗┌─┐┌┐┌┬  ┬┌─┐┌─┐ \n╠═╣│ ││││   │ │ │  │  │ │││││││├┤ │   │   ║  ├─┤│││└┐┌┘├─┤└─┐ \n╩ ╩└─┘└┴┘   ┴ └─┘  └─┘└─┘┘└┘┘└┘└─┘└─┘ ┴   ╚═╝┴ ┴┘└┘ └┘ ┴ ┴└─┘┘\n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAvDw2qUSGx8lDiKKYcqd1MLJ7h","v":-1123905631,"b":"3|324|49|3","t":"╔╦╗┌─┐┬ ┬┌─┐┌─┐   ┌─┐┌┐┌┌┬┐  ╔═╗┌┬┐┬ ┬┌─┐┬─┐┌─┐  \n║║║│ ││ │└─┐├┤    ├─┤│││ ││  ║ ║ │ ├─┤├┤ ├┬┘└─┐  \n╩ ╩└─┘└─┘└─┘└─┘┘  ┴ ┴┘└┘─┴┘  ╚═╝ ┴ ┴ ┴└─┘┴└─└─┘  \n","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAFEK3qw6fwWY=afsWOb3tV8a7e","v":-1013191630,"b":"4|312|47|2","t":"Diagonal lines are not supported yet","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAFEK3qHCqxN02zFp5IDB+Hmp==","v":831222067,"b":"0|312|3|1","t":"(*) ","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAPQG4qMB=702y5Ev2QHRGW9upP","v":204477569,"b":"2|282|14|6","t":"Add/Update shape","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AASQG4q3Nzu8oz5QKdUAeNrUzdt","v":-1810528920,"ps":"H|15|284","pe":"V|21|284","jps":["15|284","21|284"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AASQG4qQO67DFEwLaLixTIKIsnY","v":1247720905,"b":"22|282|15|6","t":"Generate shape's ASCII Bitmap","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AASQG4qHmJjsSOyqkJbR1irHiUM","v":725407204,"b":"43|282|28|6","t":"Calculate position of all \"pixel\" and distribute to corespondent matrices","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"L","i":"01-AASQG4qDY5QFnkRWhoSgYr8bFMM","v":-2130976735,"ps":"H|36|284","pe":"V|42|284","jps":["36|284","42|284"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AASQG4qaN0Kz7JYEDjNiZaB7+LY","v":-913146299,"ps":"V|65|287","pe":"V|65|290","jps":["65|287","65|290"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAnyY4qZqPR3Ij5XxzE=buDvU4Y","v":331695817,"b":"59|291|13|6","t":"Handle \"pixel\" collision","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAy4u4qXdx8mBeC2dDJ5066xYhx","v":1887729455,"b":"16|213|26|6","t":"Draw visible matrices onto canvas","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AAGk14qaCWkacup5nlb6ajY8vMw","v":-722536622,"ps":"H|49|215","pe":"V|42|215","jps":["49|215","42|215"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAfb94qpTpWOkDi7uOWJ+0S+M=R","v":-1056320929,"b":"2|291|26|6","t":"Draw visible matrices onto canvas","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AAfb94q7h9jzNmG=81TavNoQqzj","v":316672368,"ps":"H|35|293","pe":"V|28|293","jps":["35|293","28|293"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAfb94qFVME0h1kEi7pwf8oDFIz","v":-1093680049,"b":"35|291|16|6","t":"Update matrix","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AAxBE5qdCJm2qGTSEeWzBwYeF7k","v":-25973945,"ps":"H|59|293","pe":"V|52|293","jps":["59|293","52|293"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAVMv5qmClmE5u7p=Hg3NMupTKt","v":745357522,"b":"3|331|53|16","t":"","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAIBX6qQ7090meLTZe5kUIvBOu6","v":-851267987,"b":"8|335|11|4","t":"   _       \n (( )_ (   \n <;___)_)  \n   \" \"   ","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AAabf6qbFLr2eKl+iyuzD9DrtqM","v":-1015447344,"ps":"H|13|339","pe":"V|13|340","jps":["13|339","13|340"],"e":{"su":"S1","ase":true,"asu":"A1","aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAj+g6qaFb8VhBci8MJRQLCE=HX","v":1249450376,"b":"11|341|5|1","t":"mouse","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAHM36qYcvyb5DURDSQAQNKpI56","v":-1724201535,"b":"3|352|71|2","t":"Similar to other editor tools, MonoSketch uses the Command pattern for User Actions","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AATmZ7q+hr80YuU2YlKYpjvcfcb","v":1061600604,"b":"5|359|9|6","t":"Mouse down","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1}},{"type":"T","i":"01-AANua7qT6KzvgNXl8cnZ6ahS7Kw","v":-197183635,"b":"3|356|7|1","t":"Example","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAXzd7qsx=pabEE3qtdBkOzJ6cf","v":-1315705089,"b":"23|359|14|6","t":"Detect mouse action","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1}},{"type":"T","i":"01-AAdak7qGHC2iWURchcB04w54iWO","v":-1670264907,"b":"46|359|14|6","t":"Create mouse command","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1}},{"type":"L","i":"01-AAPbp7qi=aE6yR+ytnOiYWPYIKt","v":225664588,"ps":"H|13|361","pe":"V|22|361","jps":["13|361","22|361"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AAj3q7qYVJml6QVIZDVWRG38pUq","v":-1782672915,"ps":"H|36|361","pe":"V|45|361","jps":["36|361","45|361"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AArS97q5DphIKyef2dSE=4sz1r3","v":137631668,"b":"21|366|37|4","t":"- Select shape\n- Start drawing a Rectangle/Text/Line\n- Mark \"done\" a command\n- etc.","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA7ot8q81Fg1KIMeQx99GXdQDVL","v":284257515,"b":"3|373|41|2","t":"The command will be sent to a... LiveData to notify to mouse event handler","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AATYI9qM6wFVaPwSGSnjxk=G64r","v":1211846776,"b":"4|378|51|4","t":"When I started developing this feature, coroutine Flow was not well supported on Kotlin/JS","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AATYI9qeGhaY77=P74lmm+ZfzLY","v":345492629,"b":"0|378|3|1","t":"(*) ","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAq6a+qybZlqjaXF18suvLFAvlg","v":181922574,"b":"3|384|51|3","t":"The same structure is used for Shapes, each shape has a \"version\" flag","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA3We+qg6VMZHUVNYqU+nSlicjy","v":1675814102,"b":"2|390|11|5","t":"Update shape","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAGYh+qY7s4Wg49kGublnzjGWtT","v":-313560765,"b":"18|390|15|5","t":"Change the shape's version","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAp6n+qlTMOz56tJqJQe6mD6Kxk","v":-309560521,"b":"38|390|15|5","t":"Repeat update the parent shape version","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AASZx+qHN3S1gI8S0bWnLS32OYF","v":-206963258,"b":"15|397|18|5","t":"Update Shapes' bitmap","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AA2B2+qGNeLSHanaV6RVeRFYokp","v":635999276,"b":"38|397|15|5","t":"Collect all affected shapes","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAUAV=q=o4Fr4wMrJv42qYErzwG","v":544720775,"b":"38|404|15|5","t":"Notify root's version changed","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"T","i":"01-AAY6a=qFab8yU=ZoisExjlgUiq5","v":191388333,"b":"3|404|15|5","t":"Draw","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":1}},{"type":"L","i":"01-AAani=qWJiDfvSb8yxhXGIFwD5N","v":-246775246,"ps":"H|12|392","pe":"V|17|392","jps":["12|392","17|392"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AA=hj=qYOoxha8CW30riCjMwsdr","v":1465203960,"ps":"H|32|392","pe":"V|37|392","jps":["32|392","37|392"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AA6Jn=qQ7bSzIn+dIkSn4FwyjCS","v":-2078088171,"ps":"H|33|399","pe":"V|38|399","jps":["33|399","38|399"],"e":{"su":"S1","ase":true,"asu":"A1","aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AANAq=qEmhs=Veu70flQjhcxSsC","v":788229341,"ps":"H|18|406","pe":"V|38|406","jps":["18|406","38|406"],"e":{"su":"S1","ase":true,"asu":"A1","aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AAxbt=qejkw4FxArV4epI5a0maV","v":1074384254,"ps":"V|45|394","pe":"V|45|396","jps":["45|394","45|396"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"L","i":"01-AAktv=qhOJsXXWx8Jpe+iJCXPeD","v":-1498210020,"ps":"V|45|401","pe":"V|45|403","jps":["45|401","45|403"],"e":{"su":"S1","asu":"A1","aee":true,"aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAOlKArcD2ZEhSZeKiJh4F8oPW3","v":657944963,"b":"40|409|8|1","t":"LiveData","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"L","i":"01-AANXEBrbWd3lPYt6DJ4bgL3b0VP","v":-797597968,"ps":"H|55|388","pe":"V|55|411","jps":["55|388","55|411"],"e":{"su":"S3","asu":"A1","aeu":"A1","du":"1|0|0"},"em":false},{"type":"T","i":"01-AAN3FBrJklMapbvcPWNQ2BxAx9W","v":-925456230,"b":"58|391|23|13","t":"Group","e":{"be":{"fe":false,"fu":"F1","be":true,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AAm2JBrfSd4v+rcnJiP5YZbGBwY","v":175479812,"b":"61|395|5|3","t":"","e":{"be":{"fe":true,"fu":"F3","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAPELBrDzm+LB3AAwcHe8GCx0g=","v":1932014790,"b":"70|395|5|3","t":"","e":{"be":{"fe":true,"fu":"F2","be":true,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAmI=CrVOo7vYLdc4PDkFWfxQGE","v":-514436563,"b":"57|333|17|4","t":"Select a shape ...","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":0}},{"type":"T","i":"01-AAyH0D5gJJIIGvkx5qlrDz7boSk","v":844863126,"b":"4|329|10|1","t":"MonoSketch","e":{"be":{"fe":false,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":0,"tva":0}},{"type":"T","i":"01-AA0i2D5alXHdYvgnObo+ibriKkl","v":322397861,"b":"29|329|4|1","t":"","e":{"be":{"fe":true,"fu":"F2","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AALx9D5H=N5=Dwtz2YjonbOAuaY","v":1279664290,"b":"34|329|4|1","t":"","e":{"be":{"fe":true,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAUn+D56=118yEFU2lMBLXVsWvN","v":-490443761,"b":"39|329|4|1","t":"","e":{"be":{"fe":true,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AA1L=D5rzETRRHUoWL=PDqsXBGW","v":357135486,"b":"44|329|4|1","t":"","e":{"be":{"fe":true,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false},{"type":"T","i":"01-AAzXAE5ZjnN07hbTl7K7uq=hvEJ","v":2092577892,"b":"72|329|1|1","t":"","e":{"be":{"fe":true,"fu":"F1","be":false,"bu":"S1","du":"1|0|0"},"tha":1,"tva":1},"te":false}]}
Raw
monosketch-presentation.txt
   __       __  _                                   __           
  / / ___  / /_( )  ___      ____  ____ ___  ___ _ / /_ ___      
 / / / -_)/ __/|/  (_-<     / __/ / __// -_)/ _ `// __// -_)     
/_/  \__/ \__/    /___/     \__/ /_/   \__/ \_,_/ \__/ \__/      
                    ___    ____  _____   ____   ____     
 ___ _  ___        / _ |  / __/ / ___/  /  _/  /  _/     
/ _ `/ / _ \      / __ | _\ \  / /__   _/ /   _/ /       
\_,_/ /_//_/     /_/ |_|/___/  \___/  /___/  /___/       
     __                       _                     __              __
 ___/ /  ____ ___ _ _    __  (_)  ___   ___ _      / /_ ___  ___   / /
/ _  /  / __// _ `/| |/|/ / / /  / _ \ / _ `/     / __// _ \/ _ \ / / 
\_,_/  /_/   \_,_/ |__,__/ /_/  /_//_/ \_, /      \__/ \___/\___//_/  
                                      /___/                           
╦ ╦┬ ┬┬ ┬  ╦  ┌┬┐┌─┐┌┬┐┌─┐  ┌┬┐┬ ┬┬┌─┐┌─┐
║║║├─┤└┬┘  ║  │││├─┤ ││├┤    │ ├─┤│└─┐ ┌┘
╚╩╝┴ ┴ ┴   ╩  ┴ ┴┴ ┴─┴┘└─┘   ┴ ┴ ┴┴└─┘ o 
I love drawing charts with ASCII.
Ishikawa san introduced me MonoDraw and helped me to request the license purchase
from the company.
Unfortunately, I didn't know the WF was approved and there was a license for me.
I didn't want to pay $10 for the license myself
(because I thought it was simple software.)
I decided to code it myself.
It ends up spending almost 1 year to finish the first version
(and I also realized my MonoDraw license was purchased, 1 year ago (;_;)
╔═╗┌─┐┌─┐┌┐┌┌┬┐┌─┐
╠═╣│ ┬├┤ │││ ││├─┤
╩ ╩└─┘└─┘┘└┘─┴┘┴ ┴
1. How to draw
   How to draw with ASCII
2. How to connect canvas, mouse, and others
╦ ╦┌─┐┬ ┬  ┌┬┐┌─┐  ┌┬┐┬─┐┌─┐┬ ┬
╠═╣│ ││││   │ │ │   ││├┬┘├─┤│││
╩ ╩└─┘└┴┘   ┴ └─┘  ─┴┘┴└─┴ ┴└┴┘
1. We have a canvas size WxH
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┃
┃ ┃
┃ ┃
┃ ┃
┃ ┃
┃ Canvas WxH ┃
┃ ┃
┃ ┃
┃ 280 x 100 = 28,000 characters ┃
┃ (4K 27 inch monitor) ┃
┃ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
It's slow to generate and draw 28k characters for every frame
2. The actual working size is bigger (infinity)
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│ │
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
│ ┃WxH ┃ │
┃ ┃
│ ┃ ╔═════════╗ ┃ │
┃ ║Hello ║ ┃
│ ┃ ║world! ║ ┃ │
┃ ╚═════════╝ ┃
│ ┃ ┃ │
┃ ┃
│ ┃ ┃ │
┃ ┃
│ ┃ ┃ │
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
│ │
│ │
│ │
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
It's impossible to create a matrix matching the size of
the working space
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│ │
Solution: Break into small rectangles
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
┃wxh │ │ │ │ │ │ │ ┃
│ ┃ ┃ │
┃ │ ╔═════════╗ │ │ │ │ ┃
│ ┃─ ─ ─ ─║Hello ─ ─║─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┃ │
┃ │ ║world! ║ │ │ │ │ ┃
│ ┃ ╚═════════╝ ┃ │
┃ │ │ │ │ │ │ │ ┃
│ ┃─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┃ │
┃ │ │ │ │ │ │ │ ┃
│ ┃ ┃ │
┃ │ │ │ │ │ │ │ ┃
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ MonoSketch uses 16x16 unit matrix, and  │
a HashMap<position, matrix> for storing infinity working space
│ │
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
┌────────────┐ ┌─────────────┐ ┌──────────────────────────┐
│Add/Update │ │Generate │ │Calculate position of all │
│shape ├─────▶│shape's ASCII├─────▶│"pixel" and distribute to │
│ │ │Bitmap │ │corespondent matrices │
│ │ │ │ │ │
└────────────┘ └─────────────┘ └────────────┬─────────────┘
│
│
▼
┌────────────────────────┐ ┌──────────────┐
│Draw visible matrices │ │Update matrix │
│onto canvas │◀──────┤ │
│ │ │ │
│ │ │ │
└────────────────────────┘ └──────────────┘
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│ │
Actual allocated matrices
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
┃wxh░░│░░░░░│░░░░░│ │ │ │ │ ┃
│ ┃░░░░░ ░░░░░ ░░░░░ ┃ │
┃░░░░░│░╔═════════╗ │ │ │ │ ┃
│ ┃─ ─ ─ ─║Hello ─ ─║─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┃ │
┃ │░║world!░░░║ │ │ │ │ ┃
│ ┃ ░╚═════════╝ ┃ │
┃ │░░░░░│░░░░░│ │ │ │ │ ┃
│ ┃─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┃ │
┃ │ │ │ │ │ │ │ ┃
│ ┃ ┃ │
┃ │ │ │ │ │ │ │ ┃
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
│ │
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
Static kinds of stuff like rulers, grid,
(*) and selection indicators are
separated from the main canvas for shapes
3. How to draw ASCII
┌──────────┐ ┏━━━━━━━━━━┓ ╔══════════╗
│ │ ┃ ┃ ║ ║
│ │ ┃ ┃ ║ ║
└──────────┘ ┗━━━━━━━━━━┛ ╚══════════╝
■───────────────────────────────────▶
○ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ◎
It's quite straightforward when drawing ASCII characters on canvas with
canvas.drawText(...). With the above structure, we can convert a shape
into a "bitmap" and then apply the bitmap to the matrices
However, when the shapes collide,...
┌──────────┐
│ │
┌──────────┤ │
│ │ │
│ ├──┬───────┴──┐
│ │ │ │
└──────────┘ │ │
│ │
└──────────┘
┌────────────┐ ┌─────────────┐ ┌──────────────────────────┐
│Add/Update │ │Generate │ │Calculate position of all │
│shape ├─────▶│shape's ASCII├─────▶│"pixel" and distribute to │
│ │ │Bitmap │ │corespondent matrices │
│ │ │ │ │ │
└────────────┘ └─────────────┘ └─────────────────────┬────┘
│
│
▼
┌────────────────────────┐ ┌──────────────┐ ┌───────────┐
│Draw visible matrices │ │Update matrix │ │Handle │
│onto canvas │◀──────┤ │ ◀──────┤"pixel" │
│ │ │ │ │collision │
│ │ │ │ │ │
└────────────────────────┘ └──────────────┘ └───────────┘
(*) I don't have a good solution for this question
yet. MonoSketch resolves this by adding a
database of pairs and how it will be when a
collision happens
(*) Diagonal lines are not supported yet
╦ ╦┌─┐┬ ┬  ┌┬┐┌─┐  ┌─┐┌─┐┌┐┌┌┐┌┌─┐┌─┐┌┬┐  ╔═╗┌─┐┌┐┌┬  ┬┌─┐┌─┐ 
╠═╣│ ││││   │ │ │  │  │ │││││││├┤ │   │   ║  ├─┤│││└┐┌┘├─┤└─┐ 
╩ ╩└─┘└┴┘   ┴ └─┘  └─┘└─┘┘└┘┘└┘└─┘└─┘ ┴   ╚═╝┴ ┴┘└┘ └┘ ┴ ┴└─┘┘
╔╦╗┌─┐┬ ┬┌─┐┌─┐   ┌─┐┌┐┌┌┬┐  ╔═╗┌┬┐┬ ┬┌─┐┬─┐┌─┐  
║║║│ ││ │└─┐├┤    ├─┤│││ ││  ║ ║ │ ├─┤├┤ ├┬┘└─┐  
╩ ╩└─┘└─┘└─┘└─┘┘  ┴ ┴┘└┘─┴┘  ╚═╝ ┴ ┴ ┴└─┘┴└─└─┘  
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒MonoSketch▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒████▒ ▒ ▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
┌───────────────────────────────────────────────────┐░░░░░░░░░░░░░░░░░░
│ │░░░░░░░░░░░░░░░░░░
│ │░░Select░a░shape░░
│ │░░░░░░░░...░░░░░░░
│    _        │░░░░░░░░░░░░░░░░░░
│  (( )_ (    │░░░░░░░░░░░░░░░░░░
│  <;___)_)   │░░░░░░░░░░░░░░░░░░
│    " "    │░░░░░░░░░░░░░░░░░░
│ ▲ │░░░░░░░░░░░░░░░░░░
│ │ │░░░░░░░░░░░░░░░░░░
│ mouse │░░░░░░░░░░░░░░░░░░
│ │░░░░░░░░░░░░░░░░░░
│ │░░░░░░░░░░░░░░░░░░
│ │░░░░░░░░░░░░░░░░░░
│ │░░░░░░░░░░░░░░░░░░
└───────────────────────────────────────────────────┘░░░░░░GitHub░░░░░░
Similar to other editor tools, MonoSketch uses the Command pattern for
User Actions
Example
┌───────┐ ┌────────────┐ ┌────────────┐
│ │ │ │ │ │
│ Mouse ├────────▶│Detect mouse├────────▶│Create mouse│
│ down │ │ action │ │ command │
│ │ │ │ │ │
└───────┘ └────────────┘ └────────────┘
- Select shape
- Start drawing a Rectangle/Text/Line
- Mark "done" a command
- etc.
The command will be sent to a... LiveData
to notify to mouse event handler
(*) When I started developing this feature, coroutine
Flow was not well supported on Kotlin/JS
The same structure is used for Shapes, each shape
has a "version" flag
║
║
┌─────────┐ ┌─────────────┐ ┌─────────────┐ ║
│Update │ │Change the │ │Repeat update│ ║ ┌─────────────────────┐
│shape ├────▶│shape's ├────▶│the parent │ ║ │Group │
│ │ │version │ │shape version│ ║ │ │
└─────────┘ └─────────────┘ └──────┬──────┘ ║ │ │
│ ║ │ ┌───┐ ┌───┐ │
▼ ║ │ │▒▒▒│ │███│ │
┌────────────────┐ ┌─────────────┐ ║ │ └───┘ └───┘ │
│Update Shapes' │ │Collect all │ ║ │ │
│bitmap │◀────┤affected │ ║ │ │
│ │ │shapes │ ║ │ │
└────────────────┘ └──────┬──────┘ ║ │ │
│ ║ │ │
▼ ║ └─────────────────────┘
┌─────────────┐ ┌─────────────┐ ║
│ │ │Notify root's│ ║
│Draw │◀───────────────────┤version │ ║
│ │ │changed │ ║
└─────────────┘ └─────────────┘ ║
LiveData ║
║
║
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment