# Mouse Painter: Emulate Mice with MakeCode 

## Overview

https://www.youtube.com/watch?v=kUMavGuMzsw

![](https://cdn-learn.adafruit.com/assets/assets/000/079/605/medium800/makecode_diamondstack.png?1566227827)

Drawing beautiful curves and perfect circles with a mouse is hard! It's been likened to trying to paint with a bar of soap. You can enlist your Circuit Playground Express coded with MakeCode to be your Mouse Painter assistant. Loaded with pre-programmed shapes, the CPX can "click" your mouse buttons and move your cursor for you to create gorgeous shape in your favorite digital paint program.

This guide will show you how to code it in MakeCode, and then you can expand on your palette of available shapes to make your own masterpiece.

Featured
### Circuit Playground Express

[Circuit Playground Express](https://www.adafruit.com/product/3333)
 **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to...

In Stock
[Buy Now](https://www.adafruit.com/product/3333)
[Related Guides to the Product](https://learn.adafruit.com/products/3333/guides)
![A Black woman's manicured hand holds a round microcontroller with lit up LEDs.](https://cdn-shop.adafruit.com/640x480/3333-05.jpg)

# Mouse Painter: Emulate Mice with MakeCode 

## Code the Mouse Painter in MakeCode

![](https://cdn-learn.adafruit.com/assets/assets/000/079/606/medium800/makecode_Screen_Shot_2019-08-12_at_5.11.25_PM_%282%29.png?1566227920)

## Getting Started with MakeCode

If you're new to MakeCode, [head to this guide to get started](https://learn.adafruit.com/makecode). Once you're familiar with MakeCode on your Circuit Playground Express, return here.

![](https://cdn-learn.adafruit.com/assets/assets/000/079/507/medium800/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor.jpg?1565927656)

## Load the Code

Let's start by downloading the code so we can take a look at it in the MakeCode editor, as well as load it on the Circuit Playground Express to use it.

Load the code by [heading to this share link](https://makecode.com/_ef3eMvLRP0T8). Then, click the **Edit** button to open it into the MakeCode editor.

Alternately, you can download the .uf2 file linked below and import it into MakeCode by dragging it onto the MakeCode browser window.

![makecode_Mouse_Painter_-_Microsoft_MakeCode.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/508/medium640/makecode_Mouse_Painter_-_Microsoft_MakeCode.jpg?1565927999)

[circuitplayground-Mouse_Painter.uf2](https://cdn-learn.adafruit.com/assets/assets/000/079/509/original/circuitplayground-Mouse_Painter.uf2?1565928108)
Let's have a look now at how it works.

## Add Extension

For the CPX to act as a mouse emulator, we need to add the HID Mouse (Human Interface Device) extension to MakeCode. First, click on the **Advanced** button and then click **Extensions.**

Then, click on the **mouse** extension and it will be added to your project.

You'll now see the **Mouse** category and associated blocks available.

You can now emulate three different things -- clicking the mouse buttons, moving the mouse horizontally and vertically, and turning the mouse wheel.

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/511/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_2.jpg?1565972465)

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/512/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_3.jpg?1565972550)

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_4.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/513/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_4.jpg?1565972647)

Mouse emulation can be used for more... nefarious uses, too! Check out the [Phantom Mouse Jiggler](https://learn.adafruit.com/phantom-mouse-jiggler/mouse-jiggler) project to see how to prank someone with a mysterious cursor that has a mind of its own.

## Setup

### NeoPixels

In the **on start** block we'll turn on a few NeoPixels as indicators. These are the ones nearest the cap touch pads we'll be using to adjust parameters later, such as radius and amplitude of our shapes.

Note how we use the HSV (hue, saturation, value) color model rather than the default RGB (red, green, blue) for the three pixels that will be changing color to indicate parameter values. The HSV model is simpler to deal with when changing colors, as only a single number -- the hue -- needs to change in order to cycle through the color wheel.

The magenta pixel at the bottom will be flipped between NeoPixel 4 and 5 to indicate the position of the slide switch, and thus, which shape set we're accessing with the A & B buttons.

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_7.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/516/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_7.jpg?1565973448)

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_5.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/517/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_5.jpg?1565973590)

### Variables

We also set up a large number of different variables that are used throughout the rest of the program. This is a convenient place to do so, allowing you to tweak values in a single place as you experiment with what shapes you like most!

## Switch and Buttons

While _ **Switch & Buttons** _ would make a great title for an animated buddy cop film about an unlikely crime fighting duo of a fast talking lizard (Switch) and a highly educated cat (Buttons), that's not what's going on here. No, we are literally talking about the slide switch and two momentary buttons on the CPX.

We'll use the switch to flip between two different sets of shapes that can be drawn by toggling the **style** variable between **0** and **1.** We'll also flip the magenta NeoPixel to the corresponding position of the physical switch.

When button A is pressed, we call either the **sineWave** function or the **cosineWave** function, depending on the switch position.

Button B calls either the **circle** function or the **diamond** function.

 

 

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_6.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/518/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_6.jpg?1565974168)

## Cap Touch

We can use the capacitive touch pads as inputs to adjust the parameters of our drawn shapes. The **A3** and **A2** pads are used to increase or decrease the radius variable that we'll use in a moment when drawing the circle and diamond shapes.

When the **on touch A3 click** block runs, first we light the on board red LED, then we increment the **radius** variable by 5 \* the **radScrnMlt** variable. That variable was on we set in the **on start** loop, and it gives us a convenient place to multiply our radius values broadly in case we use the mouse painter on a system with a different screen resolution. I found that moving between computers all of my shapes seemed too small on the larger resolution monitor, so a quick tweak to the **radScrnMlt** is the answer.

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_8.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/520/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_8.jpg?1565974745)

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_10.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/521/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_10.jpg?1565976631)

Next, we adjust the hue of the nearby NeoPixel 8. This changes along with the change in the radius variable, and by using the **remainder of \_\_ / 255** block, we can constrain all values to within the 0-255 range of the hue parameter. In other words, the colors will cycle as we increase the radius.

Then we turn off the red LED. This all happens very quickly, so the LED appears to blink rapidly with each touch of the pad, a nice indicator that the input has been received.

The **A2** pad is used in the same way as **A3** , but to decrease the radius instead.

The **A4** and **A6** pads will be used in much the same way, but instead of incrementing values, they each cycle through an array of numbers we created in the  **on start ** loop. This gives five different amplitudes and five different wave periods to choose from when creating sine waves and cosine waves.

## Diamond Drawing

This one is the simplest one -- when the **diamond** function is called, first, the mouse button is pressed. NOTE: there is a bug currently that requires us to call the **mouse button**  **right** when we want to click the left mouse button.

Next, we move the mouse to the right on  **x** and up on **y.** Rather than hard-code a value, we use the **radius** variable (which we can change by tapping the **A3** pad) multiplied by the **radScrnMlt** number, multiplied by positive 4 on **x** and negative 4 on **y.**

We then pause half a second to allow the brush to catch up, and then repeat the process until we have drawn the diamond pattern.

Depending on brush tool settings, in some software, such as the excellent, free [Sketch.io Sketchpad](http://sketch.io/sketchpad), this will result in a rounded diamond, while others, such as Photoshop, will create a straight sided one.

Also note how different brush tip profiles will create interesting angled/calligraphic effects. We can tap the **A3** button to change the radius for some variety as well.

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_11.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/522/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_11.jpg?1565976827)

![makecode_Sketchpad_5_1_-_Draw__Create__Share_.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/523/medium640/makecode_Sketchpad_5_1_-_Draw__Create__Share_.jpg?1565977333)

![makecode_Screenshot_8_16_19__10_41_AM.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/524/medium640/makecode_Screenshot_8_16_19__10_41_AM.jpg?1565977349)

![makecode_Untitled-3___100___Layer_10__RGB_8___.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/525/medium640/makecode_Untitled-3___100___Layer_10__RGB_8___.jpg?1565977535)

![makecode_Untitled-3___100___Layer_10__RGB_8____2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/529/medium640/makecode_Untitled-3___100___Layer_10__RGB_8____2.jpg?1565986401)

## Circles

Drawing a smooth circle can be very tricky by hand, particularly when using a mouse instead of a pencil! Thankfully, we can use a formula to draw one for us. Most drawing programs can create a circle, sure, and you can then pick a color to outline it. But the advantage to drawing it in realtime is that we can use angled/calligraphy brushes and other stamping/tip effects that only work when the stroke is painted in real-time.

Many circle calculation formulas are for plotting the points in an absolute set. We, however, need to calculate the relative offset of the mouse position from step to step of the plotting process.

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_12.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/526/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_12.jpg?1565985991)

![makecode_Screenshot_8_16_19__1_11_PM.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/528/medium640/makecode_Screenshot_8_16_19__1_11_PM.jpg?1565986339)

After looking at [some online reference](https://www.mathopenref.com/coordcirclealgorithm.html) and consulting with the much more mathematically competent [Jan Goolsbey](https://learn.adafruit.com/users/HarpDude), here's the formula I used in pseudocode, you can see the block implementation in MakeCode in the image to the left:

```auto
theta = 0 // starting angle (in radians) and the variable that increases with each loop
lastX = (cos(theta) * radius) // a temporary variable that stores the previous X value; used to calculate the difference between the current position and the previous
lastY = (sin(theta) * radius)  // a temporary variable that stores the previous Y value; used to calculate the difference between the current position and the previous
step = 0.1  // amount in radians added to theta angle variable for each loop; "walks" around the circle in a clockwise direction
repeat until theta is less than or equal to ((2 * pi) + step) { // loops from the starting value of theta until it reaches a full circle plus one step (to close the circle completely)
    set x to (radius * (cos)theta)) // the cosine function produces a value between -1 and 1; multiplying by the radius scales the circle to the selected size
    set y to (radius * (sin)theta)) // the sine function...
    move mouse x to (x - lastX) // calculate the difference between the new position's absolute x value and the previous; move the mouse incrementally from the old position to the new position
    move mouse y to (y - lastY) // ... absolute y value ...
    pause (stepDelay / 2)ms // wait a while for the drawing application to respond to the mouse movement
    change theta by step // get ready to plot the next point on the circle by incrementing the theta angle value
    set lastX to x // record the new position's x value so it can be used as the previous value during the next loop cycle
    set lastY to y // ..... y value ...
```

Info: 

## Waves

A beautiful, undulating sine or cosine wave is another wonderful, yet difficult-to-draw shape.

Our formula here is a bit more simple than the circle. We loop through a certain number of times defined by the length variable divided by the wavePeriod (width) variable, and do the following:

![makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_13.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/530/medium640/makecode_Adafruit_Circuit_Playground_Express_-_Blocks___Javascript_editor_13.jpg?1565987754)

![makecode_Sketchpad_5_1_-_Draw__Create__Share__3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/079/531/medium640/makecode_Sketchpad_5_1_-_Draw__Create__Share__3.jpg?1565989728)

```auto
set x to wavePeriod // plots the first x position
set y to (amplitude * sin((index + 1) / 4))
move mouse.x to x
move mouse.y to y
pause the stepDelay amount // allow the brush to catch up to the cursor
```

By tapping the **A4** and **A6** pads on the CPX, the amplitude and wave period may be adjusted respectively, thus creating different sine wave patterns.

Currently, the style 1 mode with the slide switch in the right position creates a cosine wave when the A button is pressed. It is very similar to the sine wave -- for extra credit, what other shape could you create instead?

Enjoy making your CPX Mouse Painter assisted digital art!

https://www.youtube.com/watch?v=masunOD6sK4


## Guide Products

### Circuit Playground Express

[Circuit Playground Express](https://www.adafruit.com/product/3333)
 **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to...

In Stock
[Buy Now](https://www.adafruit.com/product/3333)
[Related Guides to the Product](https://learn.adafruit.com/products/3333/guides)
### Pink and Purple Braided USB A to Micro B Cable - 2 meter long

[Pink and Purple Braided USB A to Micro B Cable - 2 meter long](https://www.adafruit.com/product/4148)
This cable is super-fashionable with a woven pink and purple Blinka-like pattern!

First let's talk about the cover and over-molding. We got these in custom colors, and if you _have_ to have visible cables, then you might as well have the nicest fabric-bound...

No Longer Stocked
[Buy Now](https://www.adafruit.com/product/4148)
[Related Guides to the Product](https://learn.adafruit.com/products/4148/guides)

## Related Guides

- [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md)
- [Best Beginner Boards for Teachers](https://learn.adafruit.com/best-beginner-boards-for-teachers.md)
- [LEGO Compatible Crickit Rover](https://learn.adafruit.com/lego-compatible-crickit-rover.md)
- [Circuit Playground Powerpuff Girls Valentine](https://learn.adafruit.com/circuit-playground-valentine.md)
- [Paper-Craft Crystal Gem Lantern](https://learn.adafruit.com/paper-craft-crystal-gem-lantern.md)
- [Tilt Controlled Marble Maze](https://learn.adafruit.com/tilt-controlled-marble-maze.md)
- [Crickit Powered Minerva Owl Robot](https://learn.adafruit.com/crickit-powered-owl-robot.md)
- [LED Reactive Light-Up Hockey Puck in MakeCode](https://learn.adafruit.com/led-hockey-puck.md)
- [Make It a Keyboard](https://learn.adafruit.com/make-it-a-keyboard.md)
- [LED NeoPixel Corset with Circuit Playground Express and MakeCode](https://learn.adafruit.com/led-corset-with-circuit-playground-and-makecode.md)
- [Four Seasons Fairy Bottle Lanterns](https://learn.adafruit.com/four-seasons-fairy-bottle-lanterns.md)
- [Circuit Playground Express Automatic Sunglasses](https://learn.adafruit.com/circuit-playground-express-auto-sunglasses.md)
- [Motion Gift Box](https://learn.adafruit.com/motion-gift-box.md)
- [FruitBox Sequencer: Musically Delicious Step Pattern Generator ](https://learn.adafruit.com/circuitpython-fruitbox-sequencer-musically-delicious-step-pattern-generator.md)
- [The MonkMakes Plant Monitor and CircuitPython](https://learn.adafruit.com/monkmakes-plant-monitor-and-circuitpython.md)
- [PyPortal New New New Product Viewer](https://learn.adafruit.com/pyportal-new-new-new-product-viewer.md)