dsDraw is an interactive tool for creating videos with flowcharts and data structures, with an emphasis on programmatic drawing. The web application consists of a canvas, some toolbar buttons, and a console. The user can interact with the canvas by point-and-click or by entering commands via the console. These interactions produce animations that can be recorded along with audio from the user's microphone to create dynamic content.
The canvas can be edited before and during recording, so the user may 'set the scene' with some objects or text before recording begins.
Different independent clips can be created either from the current contents of the canvas or from a blank canvas. The user can switch between these clips, editing and recording over them.
Once video has been recorded for a clip, it is no longer editable. Recorded videos may be merged with other clips and exported as .webm files.
To move an existing object, hold control and drag the object.
To clone an existing object, hold alt and drag the object.
To delete any object, click on it to bring up the options and click the red X.
To change the settings of an existing object, click on it
and select new options or configure it from the console.
The currently selected object(s) will have a bright blue border.
R: Start/Stop recording
P: Pause/play
Control-Z: Undo
Control-Y: Redo
T: Show console
Escape: Hide console
See the wiki for more details.
Convex hull animation:
The above animation is created by executing the code in test-scripts/hull/hull.ds in the dsDraw console.
Convex hull construction:
Convex hull completed:
Constructing a BST and accessing its nodes:
Create a graph and have the nodes arranged automatically by dsDraw's graph layout algorithm:
Editing the properties of linked list nodes using a menu:
Highlight nodes of a BST and add extra edges to illustrate BST layout algorithm:
Use the program trace feature to run code line-by-line:
