# Scratch 3 Walkthrough and Demo ## Overview ![](https://cdn-learn.adafruit.com/assets/assets/000/069/376/medium800/force___flex_scratch_wiki_main.png?1547585742 source: Wikimedia Commons) In this guide we'll delve into the popular programming language [Scratch](https://en.wikipedia.org/wiki/Scratch_(programming_language)).  Scratch is a block-based language geared for beginners that lets you create your own interactive stories, animations, games, music, and art. Scratch is easy to use and requires no prior coding experience! First we'll do a walkthrough of the basics. Next we'll cover the updates in the 3rd and newest edition of the language which was released January 2, 2019. Lastly we'll do some digital painting inside Scratch using a Circuit Playground Express as our "paintbrush" and "palette". See below! ![](https://cdn-learn.adafruit.com/assets/assets/000/069/382/medium800thumb/force___flex_scratch_demo.jpg?1547586450) # Adafruit Parts ### Part: Circuit Playground Express (CPX) quantity: 1 Circuit Playground Express is a great introduction to electronics and programming [Circuit Playground Express (CPX)](https://www.adafruit.com/product/3333) ### Part: USB cable quantity: 1 USB A to Micro-B (Plugs into computer to program the CPX) [USB cable](https://www.adafruit.com/product/592) ## Optional ### Part: Adafruit Circuit Playground Express Enclosure quantity: 1 A plastic case for the Circuit Playground Express that makes it look pretty. [Adafruit Circuit Playground Express Enclosure](https://www.adafruit.com/product/3915) # Scratch 3 Walkthrough and Demo ## Walkthrough The quickest way to get started with Scratch is to jump right in! The programming language is web-based which means there is no downloading necessary. Just head to the website below. [Click here to get started with Scratch!](https://scratch.mit.edu/) After entering the Scratch site, click the orange "Start Creating" button. You will then be taken to the Scratch project editor. This is where all the coding happens! Follow the short tutorial to learn the basics of how "[sprites](https://en.scratch-wiki.info/wiki/Sprite)" work in Scratch.  ![](https://cdn-learn.adafruit.com/assets/assets/000/069/446/medium800/force___flex_Screen_Shot_2019-01-15_at_5.31.02_PM.png?1547656033) # Scratch 3 Walkthrough and Demo ## Block types Scratch is a "[block-based](https://en.scratch-wiki.info/wiki/Block-Based_Coding)" programming language. This means instead of writing lines of code to program, we use "[blocks](https://en.scratch-wiki.info/wiki/Block_Categories)". Each block has a specific category that describes what its purpose is. [Sprites](https://en.scratch-wiki.info/wiki/Sprite) are the objects that perform actions in a project and these blocks tell the sprites what to do. Code blocks can also tell a stage or backdrop how to behave. # The different types of code blocks: # [Motion](https://en.scratch-wiki.info/wiki/Motion_Blocks) - Define the movement of sprites ![force___flex_Screen_Shot_2019-01-16_at_3.36.54_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/470/medium640/force___flex_Screen_Shot_2019-01-16_at_3.36.54_PM.png?1547671171) # [Looks](https://en.scratch-wiki.info/wiki/Looks_Blocks) - Change the appearance of sprites. Gives the ability to change costumes and apply graphic effects. ![force___flex_Screen_Shot_2019-01-16_at_3.37.05_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/471/medium640/force___flex_Screen_Shot_2019-01-16_at_3.37.05_PM.png?1547671217) # [Sound](https://en.scratch-wiki.info/wiki/Sound_Blocks) - Play audio by recording sounds, using [Midi notes](https://en.scratch-wiki.info/wiki/MIDI_Notes) and more. ![force___flex_Screen_Shot_2019-01-16_at_3.37.15_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/473/medium640/force___flex_Screen_Shot_2019-01-16_at_3.37.15_PM.png?1547671639) # [Events](https://en.scratch-wiki.info/wiki/Events_Blocks) - Trigger scripts or series of code blocks. Consists mainly of [hat blocks](https://en.scratch-wiki.info/wiki/Hat_Block) which start a script. ![force___flex_Screen_Shot_2019-01-16_at_3.37.31_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/474/medium640/force___flex_Screen_Shot_2019-01-16_at_3.37.31_PM.png?1547671792) # [Control](https://en.scratch-wiki.info/wiki/Control_Blocks) - Dictate the flow of a project. Provide mechanism for "looping" different blocks and scripts. ![force___flex_Screen_Shot_2019-01-16_at_3.37.44_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/475/medium640/force___flex_Screen_Shot_2019-01-16_at_3.37.44_PM.png?1547671999) # [Sensing](https://en.scratch-wiki.info/wiki/Sensing_Blocks) - Let multiple sprites interact with themselves and/or the stage. Can determine how two sprites collide for example. ![force___flex_Screen_Shot_2019-01-16_at_3.37.58_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/476/medium640/force___flex_Screen_Shot_2019-01-16_at_3.37.58_PM.png?1547672193) # [Operators](https://en.scratch-wiki.info/wiki/Operators_Blocks) - Allow various mathematical functions within a project. Can be used to modify variables and [strings](https://en.scratch-wiki.info/wiki/String). ![force___flex_Screen_Shot_2019-01-16_at_3.38.07_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/477/medium640/force___flex_Screen_Shot_2019-01-16_at_3.38.07_PM.png?1547672355) # [Variables](https://en.scratch-wiki.info/wiki/Variable) - Used to store data in projects, like a name or a score. ![force___flex_Screen_Shot_2019-01-16_at_3.38.17_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/478/medium640/force___flex_Screen_Shot_2019-01-16_at_3.38.17_PM.png?1547672572) # My Blocks - You can create your own blocks! ![force___flex_Screen_Shot_2019-01-16_at_3.38.32_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/479/medium640/force___flex_Screen_Shot_2019-01-16_at_3.38.32_PM.png?1547672898) # Extension Blocks - At the bottom left of the screen. These blocks let you connect to hardware or access a number of other block types like the pen, or music blocks. ![force___flex_Screen_Shot_2019-01-16_at_3.38.38_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/481/medium640/force___flex_Screen_Shot_2019-01-16_at_3.38.38_PM.png?1547672935) ![force___flex_Screen_Shot_2019-01-16_at_3.38.51_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/482/medium640/force___flex_Screen_Shot_2019-01-16_at_3.38.51_PM.png?1547672974) # Scratch 3 Walkthrough and Demo ## User Interface The [Scratch user interface](https://en.scratch-wiki.info/wiki/Scratch_User_Interface) is the area on your screen where the Scratch program exists. The screen is divided into multiple sections or "[panes](https://www.computerhope.com/jargon/p/pane.htm)" which have different functions from picking blocks to code with, to coding, to seeing your code in action. We will go through the different elements of the interface. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/453/medium800/force___flex_Screen_Shot_2019-01-16_at_12.07.39_PM.png?1547658514) ## The Block Palette - The block palette is where all the code blocks exist. Blocks are color coded by category. These blocks can be dragged to the scripting area to either code sprites or the stage. ![force___flex_Screen_Shot_2019-01-16_at_11.02.35_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/448/medium640/force___flex_Screen_Shot_2019-01-16_at_11.02.35_AM.png?1547656974) ## The Script Area - The scripts area is where our code is dragged to and assembled.   ![force___flex_Screen_Shot_2019-01-16_at_11.03.23_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/455/medium640/force___flex_Screen_Shot_2019-01-16_at_11.03.23_AM.png?1547658668) ## The Stage Area - The stage is where we can see our code come to life! For example if we have a "when green flag clicked" event block at the start of our code, we can click the green flag to trigger the code we wrote. ![force___flex_Screen_Shot_2019-01-16_at_11.18.20_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/450/medium640/force___flex_Screen_Shot_2019-01-16_at_11.18.20_AM.png?1547658256) ![force___flex_Screen_Shot_2019-01-16_at_12.09.21_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/454/medium640/force___flex_Screen_Shot_2019-01-16_at_12.09.21_PM.png?1547658587) ## The Sprite Info Pane The sprite info pane is where we can find info about our sprites as well as manipulate them. Access this pane by clicking on the thumbnail of the desired sprite. This area also allows us to delete and create new sprites. ![force___flex_Screen_Shot_2019-01-16_at_11.03.37_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/456/medium640/force___flex_Screen_Shot_2019-01-16_at_11.03.37_AM.png?1547658879) ## The Costume/Backdrop Pane - The costume and backdrop panes can be accessed by clicking the middle tab in between the "code" tab and the "sounds" tab. This is where we can create and manipulate sprites and backdrops. To switch between costume and backdrop panes, select the desired thumbnail in the sprite info pane. ![force___flex_Screen_Shot_2019-01-16_at_11.15.32_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/458/medium640/force___flex_Screen_Shot_2019-01-16_at_11.15.32_AM.png?1547659217) ![force___flex_Screen_Shot_2019-01-16_at_11.49.57_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/459/medium640/force___flex_Screen_Shot_2019-01-16_at_11.49.57_AM.png?1547659255) ## The Sounds Pane - The last tab in the top left area of the interface allows us to crate and manipulate sounds. You can even record your own! ![force___flex_Screen_Shot_2019-01-16_at_11.15.42_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/460/medium640/force___flex_Screen_Shot_2019-01-16_at_11.15.42_AM.png?1547659435) ## Toolbar and Tutorials - The toolbar on the top of the screen allows us to load and save projects as well as undo the deletion of sprites.    - Find a variety of tutorials on how to do just about anything in Scratch by clicking the "tutorials" button! ![force___flex_Screen_Shot_2019-01-16_at_12.26.08_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/462/medium640/force___flex_Screen_Shot_2019-01-16_at_12.26.08_PM.png?1547659598) ![force___flex_Screen_Shot_2019-01-16_at_11.52.34_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/463/medium640/force___flex_Screen_Shot_2019-01-16_at_11.52.34_AM.png?1547659626) # Scratch 3 Walkthrough and Demo ## Tips and Tricks # Workflow and mistakes - Copy and paste code blocks to save time. - Be careful when creating and deleting sprites! The code blocks you create tell the associated sprite what to do. Thus when you delete a sprite you are deleting the code that tells it what to do. Warning: If you accidentally delete a sprite, click edit on the tool bar then click "Restore Sprite" to bring your code back to life! ![force___flex_Screen_Shot_2019-01-16_at_11.58.01_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/449/medium640/force___flex_Screen_Shot_2019-01-16_at_11.58.01_AM.png?1547657925) ## Troubleshooting - Right click a block for help. - Visit the [Scratch wiki](https://en.scratch-wiki.info/wiki/Scratch_Wiki_Home) for more help. - There's a whole community of [Scratchers](https://en.scratch-wiki.info/wiki/Scratcher) that have come across a multitude of issues and would also love to help. - To join the community make an account! # Scratch 3 Walkthrough and Demo ## What's New in Scratch 3? Scratch 3.0 includes a new sound editor, new sprites, new programming blocks, and much more. ## A new build Scratch was originally built with Adobe Flash which is going away soon so the new update is built in [HTML5](https://en.wikipedia.org/wiki/HTML5) and a Javascript library called [React](https://en.wikipedia.org/wiki/React_(JavaScript_library)). What does that mean for us?  Scratch can now be used on tablets and almost all hardware, like Raspberry Pi for example! ## Scratch Extensions Scratch extensions is a new feature that allows for Scratch programs to talk to external hardware and online resources. [Micro:bit](https://en.scratch-wiki.info/wiki/Micro:bit_Extension) even has its own extension! ## Other updates per the [Scratch Wiki](https://en.scratch-wiki.info/wiki/Scratch_3.0): - Stage is moved to the top right. - New modern look and design. - Some color changes to blocks. Events Blocks are the color of the Scratch 2.0 Control Blocks, and control blocks are a bit lighter than the old events blocks - More Blocks has been renamed [My Blocks](https://en.scratch-wiki.info/wiki/My_Blocks), and is a shade of light red - Some default inputs (the inputs that show up in the [Block Palette](https://en.scratch-wiki.info/wiki/Block_Palette) are different) - New [Paint Editor](https://en.scratch-wiki.info/wiki/Paint_Editor) and [Sound Editor](https://en.scratch-wiki.info/wiki/Sound_Editor) - [Pen](https://en.scratch-wiki.info/wiki/Pen_Extension), [Video Sensing](https://en.scratch-wiki.info/wiki/Video_Sensing_Extension), and [Music](https://en.scratch-wiki.info/wiki/Music_Extension) blocks are now extensions - You can now make and play projects on tablets and play them on phones, but currently you cannot edit projects on mobile phones - Several extra options for the “touching ()?” boolean, including “any edge”, “mouse-position”, and “left edge” - Different fonts: Sans Serif (thin Helvetica), Serif (Times), Handwriting, Marker, Curly, Pixel, Chinese, Japanese, and Korean - The vector paint editor is now the default editor - The Video Sensing blocks are in an extension - New extensions: [Text to Speech](https://en.scratch-wiki.info/wiki/Text_to_Speech_Extension), [Translate](https://en.scratch-wiki.info/wiki/Translate_Extension), [Micro:bit](https://en.scratch-wiki.info/wiki/Micro:bit_Extension), and Lego Mindstorms EV3. - Internet Explorer will not be a supported browser - [PicoBoard](https://en.scratch-wiki.info/wiki/PicoBoard) and [LEGO WeDo](https://en.scratch-wiki.info/wiki/LEGO_WeDo) 1.0 are not supported - The addition of a pause button like in [Phosphorus](https://en.scratch-wiki.info/wiki/Phosphorus_Player) and [Sulfurous](https://en.scratch-wiki.info/wiki/Sulfurous_Player) - New blocks!! (below) [Click here](https://en.scratch-wiki.info/wiki/Scratch_3.0) to learn more about the functionality of these blocks. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/385/medium800/force___flex_image.png?1547587443) # Scratch 3 Walkthrough and Demo ## Draw Demo! In this demo we will create a simple draw program in Scratch. Next we will create a program in [MakeCode](https://learn.adafruit.com/makecode/what-is-makecode) that will allow a Circuit Playground Express (CPX) to control the mouse and keyboard functions that we define in Scratch. Lastly we create a masterpiece! ![](https://cdn-learn.adafruit.com/assets/assets/000/069/508/medium800thumb/force___flex_scratch_demo.jpg?1547745812) The best way to learn a new language is to start making with it, so let's go! # Scratch 3 Walkthrough and Demo ## Scratch Code Find the Scratch code to this project below. Feel free to follow along or access the code for yourself!  [Click here to access the Scratch code for this project](https://scratch.mit.edu/projects/278677303/) After clicking the link above, you'll be taken to the project page. Once there, click **see inside** to access the code. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/525/medium800/force___flex_Screen_Shot_2019-01-17_at_1.00.14_PM.png?1547748070) ## Create a sprite for the pen The first thing we want to do is make a new sprite for our **pen**. This sprite will not only be the visual representation of our painting tool but it will also hold all the associated code. - In the sprite info pane, delete any current sprites.  - Next, to create a new sprite, hover the mouse over the cat with a plus sign. Now find and click the paint brush icon. - This will bring us to the sprite costume pane where we can create our very own sprite! - Our pen sprite is simple but feel free to make it extra fun. - Click the circle shape in the toolbar on the left, next disable the outline, lastly we choose the color we want for the sprite in the **fill** drop down. Then click and drag a small circle or whatever shape we want in the canvas. - Now we see our new sprite in the sprite info pane, so let's go ahead and name it. - The last step is to change the size of the sprite by typing in the desired size in the sprite info pane. ![force___flex_Screen_Shot_2019-01-17_at_12.43.24_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/514/medium640/force___flex_Screen_Shot_2019-01-17_at_12.43.24_PM.png?1547747294) ![force___flex_Screen_Shot_2019-01-17_at_12.46.02_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/515/medium640/force___flex_Screen_Shot_2019-01-17_at_12.46.02_PM.png?1547747319) ![force___flex_Screen_Shot_2019-01-17_at_12.46.28_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/516/medium640/force___flex_Screen_Shot_2019-01-17_at_12.46.28_PM.png?1547747343) ![force___flex_Screen_Shot_2019-01-17_at_12.47.24_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/517/medium640/force___flex_Screen_Shot_2019-01-17_at_12.47.24_PM.png?1547747370) ## Adding the pen extension blocks - In order to access the pen blocks in scratch, we need to grab the extension. - Click the extension icon on the bottom left of the blocks palette. - Next click the pen extension to add it. ![force___flex_Screen_Shot_2019-01-16_at_3.38.38_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/532/medium640/force___flex_Screen_Shot_2019-01-16_at_3.38.38_PM.png?1547749155) ![force___flex_Screen_Shot_2019-01-16_at_3.38.51_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/533/medium640/force___flex_Screen_Shot_2019-01-16_at_3.38.51_PM.png?1547749195) ## Setting up the program - The first thing we want to do is tell the program to start after the green flag is clicked. - Next we create a variable called `stepSize` and set it to `3`. This variable will determine how fast we want the pen to follow the mouse. Then create another variable called `color_counter` and set this to `0`. This will help us switch colors more easily. - Next set the pen size to `5`. This is the thickness of the pen. - Then we tell the pen to start in the middle of the screen at `0, 0`. - Lastly we want to erase everything that's currently on the stage before the forever loop begins. ![force___flex_Screen_Shot_2019-01-17_at_12.39.23_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/512/medium640/force___flex_Screen_Shot_2019-01-17_at_12.39.23_PM.png?1547746842) ![force___flex_Screen_Shot_2019-01-17_at_12.31.31_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/513/medium640/force___flex_Screen_Shot_2019-01-17_at_12.31.31_PM.png?1547746860) ## Forever loop - In a forever loop, we add a `point towards mouse-pointer block`. - Next, goes a `pen down` block. - Then drag a `move x steps` block, dragging in the variable `stepSize` from the variables blocks in place of the number. - Now we create a series of **if** statements that check for the `color-counter` value which will tell the program when to switch colors and what color to switch to. - Each time the character **c** is typed on the keyboard, the value of `color-counter` increases by 1 (we will get to this next). However, with the last if statement, when the value reaches above 6, it is reset back to 1. ![force___flex_Screen_Shot_2019-01-17_at_1.13.50_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/528/medium640/force___flex_Screen_Shot_2019-01-17_at_1.13.50_PM.png?1547748858) - The last few blocks of code define functions for pressing keys **e** (erase) and **c** (color). - When **e** is pressed, we erase the board. In the next section, when we code the CPX, we tell it to send the character **e** when it is shaken. - When **c** is pressed we increase the value of `color-counter` by `1`. Later this will get translated into: when **button A** is pressed on the CPX, send the character **c**. ![force___flex_Screen_Shot_2019-01-16_at_5.00.10_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/534/medium640/force___flex_Screen_Shot_2019-01-16_at_5.00.10_PM.png?1547749864) ## Test it out! Now that the Scratch program is finished, test out the code in the stage by clicking the green flag to start. Move the mouse around to guide the pen. Press **c** to change colors and **e** to erase the board. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/535/medium800/force___flex_Screen_Shot_2019-01-17_at_1.35.22_PM.png?1547750210) # Scratch 3 Walkthrough and Demo ## CPX and MakeCode ## What is Circuit Playground Express (CPX)? The Circuit Playground Express is an easy way to get started learning electronics and coding. It's filled with tons of fun lights and sensors! The CPX is what we'll use to control the mouse and keyboard to draw in our new Scratch program. Head [here](https://learn.adafruit.com/adafruit-circuit-playground-express) to learn more about the CPX. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/565/medium800/force___flex_image.png?1547759918) ## What is MakeCode? MakeCode is a web-based code editor for physical computing made by Microsoft. It is almost identical to Scratch in design, however it is mainly for programming hardware like the CPX rather than a sprite on a computer screen. More on MakeCode for Adafruit boards [here](https://learn.adafruit.com/makecode). ## Create a New Project with MakeCode Head over to [https://makecode.adafruit.com/](https://makecode.adafruit.com/) and create a new project. Click the button below to access the code for this project. [Click here to open the project up in MakeCode](https://makecode.com/_aR9b9UFb1gJt) ![](https://cdn-learn.adafruit.com/assets/assets/000/069/550/medium800/force___flex_Screen_Shot_2019-01-17_at_2.00.56_PM.png?1547751776) ## Add the Keyboard and Mouse Extensions in MakeCode Follow [this guide](https://learn.adafruit.com/make-it-a-mouse?view=all#microsoft-makecode) on how to add these extensions to MakeCode. They will allow us to use the CPX to act as a mouse and a keyboard! ![](https://cdn-learn.adafruit.com/assets/assets/000/069/556/medium800/force___flex_Screen_Shot_2019-01-17_at_2.05.19_PM.png?1547752160) ## The NeoPixel Palette - In an `on start` loop, set the colors of the NeoPixels on the CPX to the according colors. This is so the user knows which colors they have to choose from. ![force___flex_Screen_Shot_2019-01-17_at_2.01.03_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/552/medium640/force___flex_Screen_Shot_2019-01-17_at_2.01.03_PM.png?1547751840) ## Coding with the accelerometer 1 G (one gee) is equivalent to Earth's gravitational pull at a resting point. The CPX's accelerometer senses the gravity it feels in any given direction on the x, y or z axis. The value it senses is anywhere from 0 to 1023 mg (miligravities). 1G = 1000 miligravities. Learn more about the accelerometer on the Circuit Playground Express [here](https://learn.adafruit.com/sensors-in-makecode/accelerometer). - In a `forever` loop, we create an `if else` statement that describes how the mouse should move when the CPX is tilted forwards, to the right, backwards, or to the left.    - If the accelerometer senses any more that 500mg in any direction, the mouse will move in that direction. ![force___flex_Screen_Shot_2019-01-16_at_5.02.07_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/539/medium640/force___flex_Screen_Shot_2019-01-16_at_5.02.07_PM.png?1547750767) ## Sending keyboard info - When **button A** is clicked, the CPX sends the character **c** for color change.   - When the CPX is shaken, the CPX sends the character **e** for erase. ![force___flex_Screen_Shot_2019-01-17_at_2.01.19_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/069/554/medium640/force___flex_Screen_Shot_2019-01-17_at_2.01.19_PM.png?1547751863) ## Uploading the Code Now that we have the code for the project, we need to upload it to the CPX. Let's name our file and download it. - Choose a name at the bottom of the page. - Then click the pink  **Download**  button. Follow the directions and connect your CPX to your computer via the USB cable. Click the CPX Reset button once to go into programming mode (all the Circuit Playground Expresses' LED light NeoPixels will turn green). In some cases, you may need to press the reset button twice to get into programming mode. Next, look for the file in your downloads folder and drag it onto your  **CPLAYBOOT**  drive that should have showed up in your file manager/finder when you plugged in your board and entered programming mode. Once your code file is placed on the **CPLAYBOOT** drive should  see the  **CPLAYBOOT**  drive disappear indicating the code is running. # Scratch 3 Walkthrough and Demo ## Putting it All Together The code should now be running! Try tilting around the CPX and see if the mouse moves. Head to our Scratch program, enter full screen and test it out! - **Tilting** the CPX moves around the pen. - **Clicking** **button A** on the CPX changes colors. - **Shaking** the CPX erases the picture. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/557/medium800thumb/force___flex_scratch_demo.jpg?1547762267) ## Troubleshooting - If the pen in scratch is acting glitchy as you tilt the CPX around, try decreasing the value of `stepSize`. - Head [here](https://learn.adafruit.com/makecode/what-is-makecode) to troubleshoot MakeCode issues. - For CPX related issues head [here](https://learn.adafruit.com/adafruit-circuit-playground-express). - Head to the [Scratch Wiki](https://en.scratch-wiki.info/wiki/Scratch_Wiki_Home) to troubleshoot Scratch related issues. ## What will you create next? How can you modify what we created to make something even cooler? What other sensors on the CPX could we use to add more effects with the pen in Scratch?  Happy Hacking! ## Featured Products ### Circuit Playground Express - Base Kit [Circuit Playground Express - Base Kit](https://www.adafruit.com/product/3517) It's the **Circuit Playground Express Base Kit!**  It provides the few things you'll need to get started with the new [Circuit Playground Express](https://www.adafruit.com/product/3333). This version of Circuit Playground is super powered, and will... Out of Stock [Buy Now](https://www.adafruit.com/product/3517) [Related Guides to the Product](https://learn.adafruit.com/products/3517/guides) ### USB cable - USB A to Micro-B [USB cable - USB A to Micro-B](https://www.adafruit.com/product/592) This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller Approximately 3 feet / 1 meter long In Stock [Buy Now](https://www.adafruit.com/product/592) [Related Guides to the Product](https://learn.adafruit.com/products/592/guides) ### 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... Out of Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ### Adafruit Circuit Playground Express or Bluefruit Enclosure [Adafruit Circuit Playground Express or Bluefruit Enclosure](https://www.adafruit.com/product/3915) We've got nice cases for many of our beloved boards, but the [Circuit Playground Express](https://www.adafruit.com/product/3333) and [Circuit Playground Bluefruit](https://www.adafruit.com/product/4333) has been left out of couture enclosure... In Stock [Buy Now](https://www.adafruit.com/product/3915) [Related Guides to the Product](https://learn.adafruit.com/products/3915/guides) ## Related Guides - [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md) - [Make It Shake, Rattle, and Roll: Accelerometer Use](https://learn.adafruit.com/make-it-shake-rattle-and-roll.md) - [Circuit Playground Analog Input](https://learn.adafruit.com/circuit-playground-analog-input.md) - [Zelda: Breath of the Wild – 3D Printed Bladesaw](https://learn.adafruit.com/bladesaw.md) - [Professor Bubbleton’s Breathing Head in a Jar](https://learn.adafruit.com/professor-bubbleton-s-breathing-head-in-a-jar.md) - [Circuit Playground + CircuitPython Quickstart Guide](https://learn.adafruit.com/circuit-playground-express-circuitpython-5-minute-guide.md) - [Which CircuitPython Board is Right for You?](https://learn.adafruit.com/choose-your-circuitpython-board.md) - [Labo RC Car Action Lights](https://learn.adafruit.com/labo-rc-car-underglow.md) - [Make It Talk](https://learn.adafruit.com/make-it-talk.md) - [CRICKIT WobblyBot](https://learn.adafruit.com/crickit-wobblybot.md) - [NeoPixie Dust Bag with Circuit Playground Express](https://learn.adafruit.com/neopixie-dust-bag-cpx.md) - [Dancing Inflatables: Make your Holiday Display Move](https://learn.adafruit.com/dancing-inflatables-make-your-holiday-display-move.md) - [MIDI Stomping Pads](https://learn.adafruit.com/midi-stomping-pads.md) - [Automation with Crickit and Capsela](https://learn.adafruit.com/automation-with-crickit-and-capsela.md) - [Makecode para la Circuit Playground Express](https://learn.adafruit.com/makecode-es.md) - [Hacking Ikea Lamps with Circuit Playground Express](https://learn.adafruit.com/hacking-ikea-lamps-with-circuit-playground-express.md)