Live Drawing is a unique actor you can use to create interactive visuals in real-time.
This tutorial will introduce you to the basic steps needed to start creating a sketch with the Live Drawing actor using mouse pointer input in real-time. Many beautiful and compelling visual effects are made possible by combining Isadora's calculation and video effects actors with both Live Drawing’s inputs and outputs, such as animated flowing text, sketch-style drawings, or colourful spreading paint.
An example file is included in this tutorial for you to try out the final result, or you can build it yourself step by step!
- Start a new Isadora project. You won't need to import any media yet
- Since we’ll be developing visuals, we’ll want to be able to preview the results as we create them. Let’s pull up Stage Preview now. Output > Force Stage Preview (or Show Stages if you’re working with a connected display)
- Let's add a Live Drawing actor to the scene editor. Let’s take a look at it...
- Live Drawing has lots of inputs properties but only one output: 'video out’! Let’s connect this to a Projector actor now so we can see what’s being created by the live drawing actor.
- We still don’t see anything in our video output, yet. This is because the Live Drawing actor is entirely interactive and real time. We need to act on several inputs at the same time to get the actor to do something useful.
These are: the 'add point' input, the 'horz pos’ input, and the and the ‘vert pos’ input. In addition, the 'capture' input must be set to “ON”, otherwise the actor will not draw points. Keep this in mind, as we’ll discuss more about he ‘capture’ input shortly.
Here’s how it works. Each time a trigger is received at the 'add point' input, Isadora draws pixels at the horizontal and vertical positions received by the corresponding inputs. While the ‘capture' input is set to “ON” Isadora draws connecting points from one coordinate to the next, forming a continuous line called a stroke.
- This simplest way to see this in action is to add a mouse watcher actor to the scene.
- Next connect the three output of the mouse watcher to these corresponding inputs on the Live Drawing actor: connect the ‘horz pos’ input and output, the ‘vert pos’ input and output, and finally the ’trigger’ output of the Mouse Watcher to the ‘add point’ input of the Live Drawing actor.
- Now, notice that as your move your mouse pointer, the Live drawing actor beings creating a white line.
- As is often the case, the ‘vert pos’ of the Mouse Watcher is sending an inverted input to the Live Drawing actor, causing the line to draw upward when the mouse pointer moves down, and vice-versa.
- We can change this by reversing the Value Scaling on the output of the Mouse Watcher.
- Start by clicking on the ‘vert pos’ input text to pull up the settings for the output property.
- Change the 'limit min’ value to ‘100’ and the 'limit max' value to ‘0’.
- Now let's have some fun scribbling!
You'll notice that we don’t have a way to stop, pause, or clear the input. Eventually, everything on the stage output will become a mess! Let’s add a quick way to clear or reset out drawing. This is done by sending a trigger to the ‘reset’ input on the Live Drawing actor. Here’s one method you can use to do this:
- Add keyboard watcher actor to the scene editor
- If you’d like, change the ‘key range’ input to something you’ll remember easier, such as ‘c’ (for “clear”) or ‘r’ (for “reset”). Whatever letter you choose, we'll call this out “clear key” for the rest of the tutorial.
- Connect the ‘key’ output of the keyboard watcher to the ‘reset’ input on the Live Drawing actor.
Next, while a continuous line is useful, we’d like to be able to create separate strokes, as if we were lifting a pencil off the page then starting a new line.
- Try using the ‘modifiers' input on the mouse watcher to halt the output from the pointer by holding a modifier key. Click the ‘modifier’ input and type ‘ctl’. Now, the Mouse Watcher only sends data while you hold the ‘control’ key on your keyboard.
This works in a pinch, but the live drawing still draws connecting points between the lines we create. We’d rather create an entirely separate stroke!
- Start by zeroing out the ‘modifier’ input on the Mouse Watcher.
- Add another Keyboard watcher to your scene editor.
- Just like before, change the ‘key range’ input to something you’ll remember easier, such as ‘d’ (for “draw”). Whatever letter you choose, we'll call this out “draw key” for the rest of the tutorial.
- Add a ‘toggle actor to your scene editor.
- Connect the ‘key’ output of the new Keyboard Watcher to the ’trigger’ input on the toggle actor.
- Connect the ‘toggle out’ output of the toggle actor to the ‘capture’ input on the Live Drawing actor.Now we’ve got something fun! Now, you can press the ‘d’ key to start drawing, and then press it again to stop drawing. Each time you start and stop again, the Live Drawing actor will create a new stroke, instead of continuing the previous one.
Now, try some experiments with how we can modify the visuals created by the Live Drawing actor.
Change the values in the 'color' and 'line width' input properties.
Set the feather amount’ to 5. What happens to your lines?
Set the min distance to 10. What happens to your lines?
Try different ‘endcap types’ and ‘join types’
The 'line width' input property changes the thickness of the lines created by the Live Drawing actor. Thicker lines with a high 'feather amount' might appear like spray paint, but thin lines with no 'feather amount' are more like a pencil or pen. What if we wanted to make something that looks like a gentle paint brush? Let's explore how we can use Isadora's calculation actors to help create this natural, brush-like flow.
- Add a 2D Velocity actor to the scene editor.
- Add a Smoother actor to the scene editor.
- Connect the 'horz pos' and 'vert pos' of your mouse watcher actor to the respective 'x' and 'y' inputs of the 2D Velocity actor. Do not disconnect the links between the mouse watcher and the live drawing actor!
- Connect the 'vel' output of the 2D Velocity actor to the 'value in' input on the Smoother actor.
- Set the 'smoothing' input on the Smoother to '0.5'
- Connect the 'value out' output of the Smoother actor to the 'line width' input on the Live Drawing actor.
- Let's draw!
Now, the velocity of the mouse movement determines the thickness of the lines. Fast mouse movement produces thick, heavy lines, whereas slower movements produce thin, delicate lines -- much like a simple paint brush!