App Inventor 2
Programming mobile phones with Android 
by App Inventor 2 - Juan Antonio Villalpando

- Initiation Tutorial App Inventor 2 -

Return to tutorial index

____________________________

Drawing and animation

27.- Canvas. Drawing lines with your finger on the screen.

ip27_canvas_draw.

- Canvas is an area of the screen where you can draw, draw lines, circles points ...

- Let's create a Canvas and we will draw on it with your finger using multiple colors.

- Create a Canvas, it is in drawing and animation.

- We put in Width and Height of Canvas that Fills parents, ie the entire screen.

- Insert a HorizontalArrangement1 and within five Buttons .
- The buttons we place as shown in the figure below.

_________________
Design

_________________
Blocks

- When you drag your finger across the Canvas, a line between the previous point and the current point is drawn.

- When you press one Button, the stroke color is set according to the button pressed.

_______________________________
28.- Canvas. ImageSprite.

ip28_imagesprite_canvas

- Canvas is an area of the screen where you can draw, draw lines, circles points ...
- ImageSprite is a drawing should go on a Canvas and can move.
- The Canvas Hight: 400 pixel
- The LineWidth, should draw a line, it would be drawn to that thickness.

- The ImageSprite goes into the Canvas.

- The Button I have given with the Property Form Oval.

- I put an image with a transparent background.

- Transparent background've done online: http://www.online-image-editor.com/?language=spanish

- Download this image and sound file.

balon3.gif

Download: la.mp3

_________________
Design

_________________
Blocks

- When touch the Canvas, a random color, mixing Red, Green and Blue is created, according to random numbers.
- Each RGB can have a value from 0 to 255, in this case I started at 100 to come out lighter colors.

- In addition a filled circle is drawn with the random color obtained before and also random diameter of 1-80.

When we raise the finger Canvas, a sound rings.

When you drag your finger across the canvas one is drawn Black line of three pixels thick.

We put your finger on the image and drag across the canvas.
Also as will be dragging turning 3 degrees by ImageSprite1.Heading.

When you press the Button or EdgeReached, the contents of the Canvas is Clear.

................................................

If instead we want the black line black Points, we would put this...

_______________________________
29.- Canvas. ImageSprite. (II)

ip29_image_bounce

- When you press a Button ImageSprite (balon3.gif) moves to the sides.
- Also the ImageSprite rotates (Heading) 5 degrees as it moves.

_________________
Blocks

- When the red ball Collides with a edge a sound bounces sound.
- When the ImagenSprite (balon) Collides with something, the red ball changes direction.
- You hear another sound.

- We can move the SpriteImage (balon) moving the finger.

- When you click on Button5 , the program (closes not work while being emulated, only when installed).

_______________________________
30.- Canvas. ImageSprite. (III). Launched property.

ip30_launch_sprite_image

- By putting your finger on an image and quickly drag, the image moves in that direction and with the speed that you have done with your finger.

- Download this boat to your computer and then upload it to the project that we are doing.

barquito2.png

- In Design, insert:

- A Canvas, occupying the Width and Height of the parent.

- Within the canvas a SpriteImage. In its Property Photo, put the image of the boat.

_________________
Design

Blocks

- When you put your finger on the image and move it quickly, it will move the image in that direction and with that speed.
- When the image reach an edge, bounces.

_______________________________
30B.- Transparent Sprite. Variable Z. Direction. Collision.

ip30B_sprite_transparent

- We will continue with Canvas and Sprites.

- In this case, a Sprite will move across the Screen, will cross above or below other Sprites, bounce, change direction,...

- Insert a Canvas. We put Yellow Background color. We set the Width and Height to Fill to parents.
- We insert a Label.

- Insert a HorizontalArrangement and within five Buttons.
- Inside the insert 4 ImageSprite in Canvas:

- The small square is the ImagenSprite1. In this square top it is marked with a black line and the right with a white outline. This Sprite will move across the screen.
- When your direction to move the mark on the right, that is the white line. We will put your speed to 10.

- The second is the ImagenSprite2, a blue square with another yellow center

- The third and fourth are transparent central color, meaning that if something passes through, when passing through the white part will be .

- As I indicated in a previous example, we can create images with transparent background online http://www.online-image-editor.com/?language=spanish

- In the design, we put all the variable Z to 2

_________________
Design

_________________
Blocks

Comments.

- In this example the two block up Launched and Dragged not coexist well. Come on Block Dragged and Right click on Disable Block to cancel, and we enable it later.

- The causes Launched when we put the finger on the ImageSprite1 and drag with speed, moves in the direction in which we have dragged and drag speed.

- The edge Touching, when the ImageSprite1 touches a screen edge, bounces and write on the label the number of border that has touched (1, -1, 3 -3)

- In Collision and EndCollision when ImageSprite1 collides with other Sprites indicated on the Label, when no clashes also indicated.

- When you press the Button1 the ImageSprite1 is directed to the Direction: x = 10, y = 10 screen.

- When you press the Button2 the ImageSprite1 is directed towards the ImageSprite12

- When you press the Button3, the Rotate variable is changed to true or false, ie if it was true becomes false and false if it was true it gets, this is expressed as:
Rotate = NO (Rotate)

- Rotate sets whether when the Sprite collides drawing changes its direction or not. That is, "reverse" or "turns" is set.

- Z establishes whether a Sprite to above or below another.

- If a Sprite has Z = 2 and Z = 3 has another, it will pass over.

- If a Sprite has Z = 2 and Z = 1 has another, it will pass under.

- By putting the ImageSprite1 to 1 or 3 we have less or more preferably be on the image passing through, as we have put in Z = 2 for the other Sprites Design.

- In this example there are two Sprites having transparent part, so that the ImageSprite1, will you pass beneath them.

- Enable Drag block.

- Finally, install the application and play around with it.

_______________________________
31.- Canvas. By swiping your finger across the screen image is drawn. Mask.

ip31_mask

- In the Canvas is an image that occupies the entire canvas. At the start screen, the image is masked with white and alpha 0,
- When swiping your finger across the canvas you draw the image behind the white color.
- If you just click on the white out a circle of the picture.
- With the buttons we put all blank or present the image.
- To do it again press the Button "All white".
- In this code pays attention to how the create white (255, 255, 255) plus a fourth number, 0, which sets the alpha or color saturation, if we do not put this number does not work what we want.

_________________
Design

- When we touch the canvas a circle of radius 25 is drawn
- When we drag your finger across the canvas a line thick 40 is drawn.

- When the display starts, the process becomes white.
- When pressed Button1, the process becomes white.
- When you press Button2, white is removed and the image appears.

White process, draw a large circle that occupies the entire screen gets white and then puts the paint color white but with alpha 0.
Alpha 0 is the color saturation.

_______________________________
32.- Drawing of a function.

ip32_draw_function

- It is drawing a sine, cosine and parable.

- To draw on Canvas. We put your property Width: Fill parent, and its Hight Property: 400 pixels

_________________
Design

_________________
Blocks

____________________________
Comments.

We must make a match:

360 ---------------------- WithScreen         
X     --------------------- number

X = WithScreen * number / 360

That is, we adapt the value of the variable X for the 360 ​​WithScreen match.

- Multiply by 100, if we do not high signal will have very small values.

- Multiply by -100 as the dimensioning of the screen goes up and down and not bottom-up, ie as we go down the greater the varible Y.
(We could also have use subtraction instead of addition, as is done then in the parable)

- We added 220 for the center of the signal coincides with the center of the screen.

- It takes time to draw the signals.

- We must study the horizontal and vertical scale of the signal we want to see.

- Another way would be to use small lines instead of points block DrawLine.

____

Here is another example of drawing functions.

CodingMathEpisode2 (Source)

_______________________________
33.- Paddle tennis. Ball and ImageSprite.

ip33_tennis

- A Ball Canvas moves by bouncing off its axis.

_________________
Design

_________________
Blocks

_____________________________________

Trick

If you want the canvas fills the top of the screen, uncheck and check the property Scrollable in the Screen1 screen and places the Hight Property Fill parent on Canvas

__________________________________