Last active
March 22, 2023 02:45
-
-
Save tuanchauict/304bc45e749c37dff7606f64f83074a5 to your computer and use it in GitHub Desktop.
MonoSketch presentation. (Download monosketch-presentation.mono and open with https://app.monosketch.io/ for interaction version)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
__ __ _ __ | |
/ / ___ / /_( ) ___ ____ ____ ___ ___ _ / /_ ___ | |
/ / / -_)/ __/|/ (_-< / __/ / __// -_)/ _ `// __// -_) | |
/_/ \__/ \__/ /___/ \__/ /_/ \__/ \_,_/ \__/ \__/ | |
___ ____ _____ ____ ____ | |
___ _ ___ / _ | / __/ / ___/ / _/ / _/ | |
/ _ `/ / _ \ / __ | _\ \ / /__ _/ / _/ / | |
\_,_/ /_//_/ /_/ |_|/___/ \___/ /___/ /___/ | |
__ _ __ __ | |
___/ / ____ ___ _ _ __ (_) ___ ___ _ / /_ ___ ___ / / | |
/ _ / / __// _ `/| |/|/ / / / / _ \ / _ `/ / __// _ \/ _ \ / / | |
\_,_/ /_/ \_,_/ |__,__/ /_/ /_//_/ \_, / \__/ \___/\___//_/ | |
/___/ | |
╦ ╦┬ ┬┬ ┬ ╦ ┌┬┐┌─┐┌┬┐┌─┐ ┌┬┐┬ ┬┬┌─┐┌─┐ | |
║║║├─┤└┬┘ ║ │││├─┤ ││├┤ │ ├─┤│└─┐ ┌┘ | |
╚╩╝┴ ┴ ┴ ╩ ┴ ┴┴ ┴─┴┘└─┘ ┴ ┴ ┴┴└─┘ 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