It is available here: drawcast.app
And here is a (brief and bad!) example of what you can create: scast
(Click inside the frame to start it).
This project is not finished. There are still many bugs and you should not rely on it! Also, please do not try to save long recordings. All recording may be deleted at this stage - due to limited space!
Still, I would like to share. Both to demonstrate the power of Anvil and to get some feedback at this stage.
Background and lessons.
I wanted to be able to make screencasts for my students.
Starting with the signature app by @meredydd, I first build an app that recorded all events the user made on the canvas in a list.
For instance: (“line”, 100, 100, 150, 150, 0.1), (“draw”, ((100,100,102,103, 0.05), (100,100,102,103, 0.12)
The first element is the type of action, the second is the data needed to recreate the action, and the last data point is the time to sleep between or after an action.
The whole drawing could then saved and recreated as an animation by the player which just read from the list and did every action on the canvas.
At this point I should have stopped, but …
- Smoothing: There are several algorithms to smooth curves and to make drawn words look nicer, this was useful.
- Animations: I got overly ambitious and tried to allow the user to move objects around on the screen after they had been drawn. You can draw a circle and click on it and drag it around. This part is still far from perfect. It requires the user to click at a specific point (end of a curve, or middle of a circle). It also introduced lots and lots (and lots) of complexity. But it was a cool feature! I am working on an improved algorithm that allows the user to click anywhere close to an object (not just a specific point). It required an ugly change to the list of events that describes the animation. Each event had to get a unique id. Only then was it possible to click on an event drawn ten steps ago, move it, and redraw the whole thing.
- Conversion to a video: Initially, the aim was simply to allow the user to record and play back the animation (and the sound) by accessing the app (with a unique hash for each animation). In this way, the animation could be deployed and shared right away. The user would get a link like drawcast.app#draw_id and going there they would see and hear the animation. Anvils ability to extract the name after the hash is perfect for this. The initial file would just look for the hash, extract the name, get it the list of event (and the audio) from a datatable and play it.
Also, at this point I got close to throwing the computer out of the window, since the video introduced a black background and flickers. It took way too much effort - that introduced other bugs - to reduce this. In short, you have to fill the canvas with a white rectangle (at several points) to reduce flickers and the black background.
Feel tree to try, but - again - please ignore all bugs, do not rely on it, but I am happy to take feedback.
Because of some external time constraints, I may not be able to help explain all details, but I will try to answer questions.