Concept 9: Drawing & Animation
Drawing and Animation :art:
:dart: What We'll Learn Today
Get ready to bring your apps to life! Today we'll discover how to:
- Create amazing drawings on a Canvas :emoji:️
- Make sprites move and dance across your screen :emoji:
- Design bouncing balls that react to touch :emoji:
- Build fun animations and games! :video_game:
Let's Get Started! :rocket:
Welcome to the magical world of Drawing and Animation! In MIT App Inventor, we have three super cool components that will help us create awesome visual effects:
- Canvas - Your digital drawing board! :art:
- ImageSprite - Moving pictures that come alive! :emoji:
- Ball - Bouncy, colorful circles that move around! :emoji:
:bulb: Did you know? :emoji: The first computer animation was created in 1960! Now you're going to create your own animations - how cool is that?
Uses of Drawing and Animation
Let's see all the amazing things we can create:
Uses of Drawing and Animation
Canvas :emoji:️
What is Canvas?
Think of Canvas as your magical drawing board! :art:
Definition: A canvas is a two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved
It's like having a piece of paper on your phone screen where you can:
- Draw amazing pictures :emoji:️
- Move characters around :runner::emoji:️
- Create your own games! :video_game:
Setting Up Your Canvas
You can customize your Canvas to make it look exactly how you want! Here's what you can change:
- BackgroundColor - Pick any color you love! :emoji:
- PaintColor - Choose your drawing color :emoji:️
- BackgroundImage - Add a cool picture as background :emoji:
- Width and Height - Make it as big or small as you need! :emoji:
:information_source: Remember! :bulb: Width and Height are measured in pixels (tiny dots on your screen). They must be positive numbers - you can't have a negative-sized canvas!
Understanding Canvas Coordinates :emoji:
Here's something super cool - every spot on your Canvas has an address, just like houses on a street!
We use (X, Y) coordinates to find any location:
- X = How many pixels from the left edge :emoji:️
- Y = How many pixels from the top edge ⬇️
The upper left corner is always (0,0) - that's where we start counting!
Canvas Coordinate System Example
:bulb: Fun Fact! :dart: Game developers use coordinates just like this to know where everything is on the screen. Now you're thinking like a real game developer!
Canvas Events - Making It Interactive! :video_game:
Now let's learn about the special events that make your Canvas come alive! These events tell us when someone touches or moves their finger on the screen.
One. Dragged Event :pencil2:
When you drag your finger across the Canvas (like drawing a line):
Canvas Dragged Event Block
What happens:
- It tracks where you started dragging (prevX, prevY)
- It knows where you're dragging to (currentX, currentY)
- It remembers where you first touched (startX, startY)
- It even knows if you're dragging a sprite! :emoji:
2. Flung Event :emoji:
This is when you make a quick swipe - like flicking something across the screen!
Canvas Flung Event Block
Cool things it tells you:
- Where the swipe started (x,y) :emoji:
- How fast you swiped (speed) :runner::emoji:️
- Which direction (heading from 0-360 degrees) :emoji:
- If you flung a sprite! :dart:
:bulb: Try This! :emoji: Imagine flinging a paper airplane - that's exactly what this event detects!
3. TouchDown Event :emoji:
This happens when you first put your finger on the screen:
Canvas TouchDown Event Block
- It knows exactly where you touched (x,y)
- Perfect for starting to draw something! :emoji:️
4. TouchUp Event :emoji:
This happens when you lift your finger off the screen:
Canvas TouchUp Event Block
- It tells you where you lifted your finger (x,y)
- Great for finishing a drawing stroke! :sparkles:
5. Touched Event :emoji:
This is for quick taps - touch and immediately lift:
Canvas Touched Event Block
- Perfect for making things happen with a tap!
- It knows if you tapped on a sprite (TouchedAnySprite)
- Use this for buttons or clicking on objects! :dart:
:information_source: Remember! :star2: These events are like your Canvas's superpowers - they let your app know exactly what the user is doing!
ImageSprite :emoji:
What is ImageSprite?
Get ready to meet your new digital friend - the ImageSprite!
Definition: A 'sprite' that can be placed on a Canvas.
Think of an ImageSprite as a picture that can come to life! It could be:
- A butterfly flying across the screen :emoji:
- A spaceship zooming through space :rocket:
- Your favorite character in a game :video_game:
- Anything you can imagine! :sparkles:
ImageSprite Superpowers! :muscle:
Your ImageSprite can do amazing things:
- React to touch - Tap it and make something happen! :emoji:
- Drag around - Move it anywhere on the Canvas :emoji:
- Interact with friends - Bump into other sprites! :emoji:
- Bounce off edges - Like a pinball! :dart:
- Move automatically - Set it and watch it go! :runner::emoji:️
Making Your ImageSprite Move :emoji::emoji:️
Want to make your sprite move on its own? Here's a fun example!
To make an ImageSprite move left across the screen:
- Speed -> Set to 10 (that's 10 pixels per move) :runner:
- Interval -> Set to 1000 (moves every 1 second) :alarm_clock:
- Heading -> Set to 180 (that's left direction) ⬅️
- Enabled -> Set to True (turn it on!) :white_check_mark:
:bulb: Direction Guide! :emoji:
- 0° = Right :emoji:️
- 90° = Up ⬆️
- 180° = Left ⬅️
- 270° = Down ⬇️
Cool Features :star2:
- Picture property - Choose any image you want! :emoji:️
- Visible property - Make it appear or disappear like magic! :emoji:
- Rotates property - Make it spin as it moves! :emoji:
:information_source: Remember! :bulb: You can change any property at any time while your app is running. Want your butterfly to suddenly fly faster? Just change the Speed!
ImageSprite Events - Action Time! :emoji:
Your ImageSprite can detect special moments and react to them!
One. CollidedWith Event :emoji:
This is when your sprite bumps into another sprite - BOOM!
ImageSprite CollidedWith Event Block
What happens:
- It knows exactly which sprite it hit! :dart:
- Perfect for making games where things crash or collect items
- Like when Pac-Man eats a dot! :emoji:
:bulb: Game Idea! :video_game: Use this to make a game where a butterfly collects flowers, or a spaceship avoids asteroids!
2. Flung Event :rocket:
When someone flicks your sprite across the screen:
ImageSprite Flung Event Block
Super cool info you get:
- Where the fling started (x,y) :emoji:
- How fast they flung it (speed) :emoji:
- Which direction it's going (heading) :emoji:
- The exact movement details (xvel and yvel) :bar_chart:
3. NoLongerCollidingWith Event :emoji:
This happens when two sprites were touching, but now they're not!
ImageSprite NoLongerCollidingWith Event Block
When to use this:
- To know when sprites separate after bumping
- Perfect for "unsticking" sprites
- Like when two characters finish talking! :speech_balloon:
:information_source: Remember! :dart: These events help your sprites interact with each other - just like characters in your favorite video games!
Ball :emoji:
What is Ball?
Meet the Ball - the bouncy, colorful circle that loves to move around!
Definition: A round 'sprite' that can be placed on a Canvas.
Think of it as:
- A bouncing basketball :emoji:
- A rolling marble :emoji:
- A ping pong ball :emoji:
- Any round object in your game! ⭕
Ball's Amazing Abilities! :star2:
Your Ball can:
- React to touch - Tap it to score points! :emoji:
- Drag around - Move it with your finger :emoji:
- Bump into things - Other sprites or walls! :emoji:
- Move by itself - Set it rolling! :emoji:
- Change colors - Make it any color you want! :emoji:
Making Your Ball Move :runner::emoji:️
Let's make a ball bounce up like it's jumping!
Example: Ball moving upward:
- Speed -> Set to 4 (4 pixels per move) :rocket:
- Interval -> Set to 500 (moves every half second) ⏱️
- Heading -> Set to 90 (that's up!) ⬆️
- Enabled -> Set to True (let's go!) :white_check_mark:
:bulb: Did you know? :emoji: Real bouncing balls follow physics rules. In your app, you get to make your own rules - how cool is that?
Ball vs ImageSprite - What's Different? :emoji::emoji:️
| Ball | ImageSprite |
|---|---|
| Always round ⭕ | Can be any shape! :emoji: |
| Change color with PaintColor :art: | Use any image file :emoji:️ |
| Change size with Radius :emoji: | Size depends on image :emoji: |
:information_source: Remember! :bulb: Ball is perfect when you need a simple circle that can change colors and sizes quickly!
Ball Events - Bounce and Play! :emoji:
Your Ball has special events that make it super fun to use in games!
One. CollidedWith Event :emoji:
When your ball hits another sprite - BONK!
Ball CollidedWith Event Block
Perfect for:
- Scoring points when ball hits target :dart:
- Making sound effects on collision :emoji:
- Changing ball color when it hits something :emoji:
:bulb: Game Idea! :video_game: Create a game where the ball collects stars or avoids obstacles!
2. EdgeReached Event :emoji:
This is super special - it tells you when your ball hits the edge of the screen!
Ball EdgeReached Event Block
The edges have special numbers:
Edge Directions Diagram
Edge Direction Guide:
- 1 = Top (North) ⬆️
- 2 = Top-Right (Northeast) ↗️
- 3 = Right (East) :emoji:️
- 4 = Bottom-Right (Southeast) ↘️
- -1 = Bottom (South) ⬇️
- -2 = Bottom-Left (Southwest) ↙️
- -3 = Left (West) ⬅️
- -4 = Top-Left (Northwest) ↖️
:information_source: Cool Tip! :bulb: Use the Bounce method after EdgeReached to make your ball bounce off walls - just like a real bouncing ball!
3. Flung Event :rocket:
When someone flicks the ball across the screen:
Ball Flung Event Block
What you can do:
- Make the ball fly in the fling direction :emoji:
- Create a bowling or pool game :emoji:
- Launch balls like Angry Birds! :emoji:
The event gives you:
- Starting position (x,y) :emoji:
- Fling speed (how hard they flicked) :muscle:
- Direction heading (0-360 degrees) :emoji:
- Velocity details (xvel, yvel) :bar_chart:
:bulb: Try This! :dart: Make a mini golf game where you fling the ball into a hole!
You Did It! :star2:
Wow! You've learned all about Drawing and Animation in MIT App Inventor! Now you know how to:
:white_check_mark: Create and use a Canvas for drawing
:white_check_mark: Make ImageSprites move and interact
:white_check_mark: Design bouncing Balls for games
:white_check_mark: Use touch events to make your app interactive
:white_check_mark: Detect collisions between sprites
You're ready to create amazing animated apps and games! What will you build first? A drawing app? A bouncing ball game? The possibilities are endless! :rocket:
:information_source: Next Steps! :video_game: Try combining what you learned:
- Make a ball that changes color when it hits the edge
- Create a sprite that follows your finger
- Design a simple game with colliding objects
Keep experimenting and have fun creating! Remember, every great app developer started exactly where you are now. You're doing amazing! :emoji::sparkles: