Learn creative coding writing simple programs

86. Drawing shapes with your mouse

In this episode we discover something easy to do, but not so easy to understand or explain :) We could say we work with two displays. One is the basic Processing display. We also have another display. We can copy any of the two displays into the other. We use this as a way to take a photograph of the main display. Things are changing in the main display. When something interesting happens (we release the mouse button), we copy whatever we see in the main display to the other display. This other display is just an image stored in a variable.
At any moment we can draw that copied display into the main display. We do this many times per second.
This, which may sound slightly confusing, results in a very simple effect: we are now able to move an object over the screen, and make it stick on the background whenever we click.

Tags: pixels, loadpixels

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
 To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```