Lesson 4: Animation. Goals

Transcription

1 Introduction: In this session you are going to use custom built tools in Arduino to help you turn images or animation into code that automatically uploads to your DIY Gamer. It is a fun and easy way to get to grips with the DIY Gamer and its programming environment. Goals Design and upload an image to the DIY Gamer via USB Design and upload an animation to the DIY Gamer via USB Find and edit the Speed of playback in the Arduino sketch Test your project Save Save your project Page 1 - Lesson 4: Animation

2 Step 1: Setting up the Arduino 1. Plug in the DIY Gamer with USB cable 2. Open the Arduino application to open your Arduino software 3. Open New sketch on your newly opened Arduino sketch 4. Select Tool > Board > Arduino Uno This tells the Arduino sketch which type of Arduino board we are using. 5. Select Tool > Serial Port > comp 3 (for PC) usb (mac) This selects which port to we are communicating with the Arduino through. Page 2 - Lesson 4: Animation

3 Step 2: Using DIY Gamer Image Painter 1. Select Tools > DIY Gamer Image Painter 2. This opens up a new window This is where you are going to design an image to display on the DIY Gamer. Notice how it is made up of 8 rows and 8 columns to represent the DIY Gamer s LED matrix. 3. Use the clear tool to clear the display to clear your display of any selected pixels. 4. Use the paint tool to draw lit LED s draw LED s that will be on in your image. Page 3 - Lesson 4: Animation

4 Step 2: Using DIY Gamer Image Painter 5. Use the eraser tool to turn LEDs off draw LED s that will be off in your image. 6. Get designing Just draw something quick and simple to display on the screen to understand how the uploading process works. 7. When you have finished copy your image Once you have drawn something click This turns the image you have drawn into code made up of arrays and displays it in the empty Arduino sketch. 8. Replace existing code in dialogue box 9. Can you find the Void setup in the Arduino Sketch? This set up all the functions the gamer needs. void setup(){ gamer.begin(); } 10. Can you find the Void loop in the Arduino Sketch? This is the main part of the code that is looped through over and over again. void loop(){ gamer.printimage(image); } Page 4 - Lesson 4: Animation

5 Step 2: Using DIY Gamer Image Painter 11. Can you find the Array in the Arduino Sketch? This 8 rows of 8 one s and zero s are the part of the code which tell the Gamer s LED matrix which LEDs to turn on or off. They directly represent the DIY Gamers screen. byte image[8] = {B , B , B , B , B , B , B , B }; 12. Look at your image s code in the DIY Gamer Image Painter software This shows you how the LEDs are represented as an array of ones and zeros. Your screen should look similar to the one on the right. Page 5 - Lesson 4: Animation

6 Step 2: Using DIY Gamer Image Painter 13. Can you see the how the one s represent an LED that is on in this example? Test your project 14. Upload your code in Arduino or in Image Painter software to upload the code. Either of these compiles and uploads the edited sketch to The DIY Gamer via the USB What should happen is Screen goes Blank 2. The red DIY Gamer LED Blinks and the RX and TX LEDs flash on the Arduino 3. Boom - Your image is on the screen, awesome Save Save your project the arrow facing downwards that looks like this to save your code. Page 6 - Lesson 4: Animation

7 Step 3: Using DIY Gamer Animation Generator Animations are just a series of images played one after another. Think of what you might want to animate on the DIY gamer Screen. It could be your name, a moving pattern, or a face. Use the alphabet cheat sheet to help you. 1. Plan your animation (short and snappy) on the paper template provided. 2. Select Tools > DIY Gamer Animation Generator 3. This open up a DIY Gamer Animation Generator window The menu is similar to Image Generator, except this time you can create multiple frames. Page 7 - Lesson 4: Animation

8 Step 3: Using DIY Gamer Animation Generator 4. Draw your first frame Copy your design from your paper sheet. Using did the Image Painter. to turn the LED s on just as we 5. Add your next frame Notice how you animation now has 2 frames, you will see this in the dialogue box to the top right of the window. 6. Continue adding and drawing all frames of your animation 7. Use to toggle back and forward through the frames to review them 8. Test your animation to playback your animation. All looking good? 9. Stop the animation to stop your animation playing. Page 8 - Lesson 4: Animation

9 Step 3: Animate your name Test your project 10. When your happy with your animation, upload your code in to upload the code. This will turn you animation into arrays, paste it into the Arduino sketch and upload it to the DIY Gamer all in one! Wowzers. 1. Screen goes Blank 2. The red DIY Gamer LED Blinks and the RX and TX LEDs flash on the Arduino 3. Boom - Your animation is on the screen, awesome Step 4: Changing the speed of the animation 1. In the Arduino sketch, find the line of code that controls the rate of playback. This is actually a delay (not speed), so you control how long the Arduino pauses between each frame of your animation. Bigger numbers = slower animation playback Smaller numbers = faster animation playback 1000 milliseconds = 1 second ( 1 frame per second) 250 milliseconds = quarter of a second ( 4 frames per second) Page 9 - Lesson 4: Animation

10 Step 4: Changing the speed of the animation 2. Change the delay number Do you want to make your animation faster or slower? Test your project 3. Test your code to test your code Not compiling: Maybe you deleted a bracket by mistake. Check your code. 10. When your happy with your animation, upload your code in to upload the code. This will turn you animation into arrays, paste it into the Arduino sketch and upload it to the DIY Gamer all in one! Wowzers. 1. Screen goes Blank 2. The red DIY Gamer LED Blinks and the RX and TX LEDs flash on the Arduino 3. Boom - Your animation is on the screen, awesome Save Save your project on the icon to save your animation. Page 10 - Lesson 4: Animation

11 Step 4: Changing the speed of the animation Well Done You have mastered the art of editing animation code for the DIY Gamer and controlled it s speed by changing the code. Next you will learn to use the light sensor to control the DIY Gamer. Challenge: Can you make the animation go slower? Can you make the animation go faster? Can you make something spin on the screen? Are you brave enough to try editing the arrays in the Arduino sketch? Page 11 - Lesson 4: Animation