'The Artist' code.org tutorials supplement for App Inventor
Scott Ferguson
The last exercise...
Here is the last exercise done with my implementation in App Inventor:
(a depth of 8 is used rather than 9 as the Canvas is not wide enough (430px) to contain that large a tree)
Here are the blocks in App Inventor to create that drawing:
Notice that looping and recursion are supported.
Documentation:
The Artist: a supplement to code.org's 'The Artist' tutorials to teach basic programming concepts by allowing App Inventor users to create custom drawing procedures similar to those found in specific code.org drawing tutorials(1) adding the additional features available with App Inventor's full compliment of Language Blocks(2) while working directly in App Inventor's IDE.
In this implementaiton, figures/shapes are drawn using a Clock component's Timer block, global variables, a 'Pencil' ImageSprite, a Drawing Canvas and a Queue data structure with associated Enqueue and Dequeue procedures to store and retrieve drawing data and display drawings based on that data.
The Run procedure is executed when the user touches the Run button below the Drawing Canvas.
If a block or called procedure references the Enqueue procedure, data for drawing lines, setting colors, changing the Pencil ImageSprite Heading or Pencil width are stored in a data Queue rather than executing immediately.
Once execution of the Run procedure has completed, any blocks in the Queue will be executed by an initial call to the Dequeue procedure.
The Dequeue procedure copies the stored drawing data into associated global variables, then enables and the Drawing.Timer event block.
The Drawing.Timer event block acts on that data to perform any of the operations on the Drawing Canvas specified below then calls the Dequeue procedure again until the Queue is empty:
SetColor (Color) - set the color to be used for drawing lines to 'Color' until the color is changed with another SetColor block; default: Black
(Any of App Inventor's color blocks, color values or the RandomColor procedure can be attached to the 'Color' socket)
PencilDown - when the pencil is down, drawing blocks will draw lines on the Drawing canvas; associated with the global variable PencilDown which has a default: true
PencilUp - when the pencil is up drawing blocks can move the pencil withouth making a line
SetWidth (Width) - the width of the drawn line in pixels; default: 4
TurnRight (Degrees) - the pencil will turn 'Degrees' degrees to the right by the amount from it's current heading
TurnLeft (Degrees) - the pencil will turn 'Degrees' degrees to the left from it's current heading
MoveForward (Pixels) - the pencil will move forward at the curent heading by Length pixels; if MoveForward follows PencilDown, a line will also be drawn in the current global PencilColor and global PencilWidth
MoveBackward (Pixels) - the pencil will move backward at the curent heading by the specified number of pixels; if MoveBackward follows PencilDown, a line will also be drawn in the current global PencilColor and global PencilWidth
JumpForward (Pixels) - the pencil will move forward but not draw
JumpBackward (Pixels) - the pencil will move backward but not draw
Functions:
Repeat (Times) - creates a list of numbers from 1 to Times; ex: call Repeat(5) returns (1 2 3 4 5); useful for simulating the repeat (times) block in App Inventor when attached to the for each item in list block -- see example below); when combined with for each item in list, the item variable can optionally be used as a counter which increments each time through the loop, if needed
Iterations (Angle) - returns the number of sides for a given external angle in a regular polygon; for a triangle, Angle = 120 so Iterations (120) returns 3; useful when attached to the 'to' socket of the for each number from by to loop block to stop the loop automatically (the end angle is equal to the start angle in these cases)
(The repeat (times) looping block from the code.org tutorials is not included. Use the Repeat (Times) function as described above or just use the for each number from to by block)
Why use a Queue?
Executing Canvas drawing blocks using a Queue results in an initial delay after the user releases the Run button but has benefit of showing the results of each operation and allowing the user to include looping blocks without the delay or problems normally associated with using loops for animation in App Inventor. To the user, the actual drawing of the figure on the Canvas is very similar to the experience with code.org's.
The instructor may wish to explain the importance of using Clock Timer blocks for animation loops if they do not use this technique in their apps, however.
Why create this supplement to the code.org tutorials in App Inventor?
The user will have access to all of the AI language blocks, be able to share their drawings using the new sharing component as well as make Android apps based upon those drawings or use the programming concepts learned here in other projects.
Drawing Canvas:
Width: 430
Height: 430
BackgroundColor: White
LineWidth: 4
Pencil ImageSprite:
default Heading: 0
Speed: 0
Picture: "pencilc30.png" (small stubby blue pencil)
X: 200
Y: 200
Width: 30
Height: 30
Global variables associated with the drawing Queue:
Name Default Description
---- ------- -------------------------------------
Angle 0 if not 0, the degrees value to add to the current Pencil Heading
PencilColor Black maps to the Canvas PaintColor property
PencilWidth 4 maps to the Canvas LineWidth property
PencilDown true determines if a line is drawn when the pencil is moved
Length 0 if not 0, the pencil is moved Length pixels at Pencil's current Heading
---
This project is based upon 'The Artist' drawing tutorials at code.org.
According to the statement at code.org's About page:
"All curriculum resources and tutorials we author are free to use under a Creative Commons license, and our technology is developed as an open source project."
In that spirit, this project provides a supplement to code.org's materials which allows further exploration using App Inventor's IDE and the additional features provided by it's complete Language Blocks set.
I have attempted to keep the syntax of the basic drawing blocks as close to the original code.org blocks as possible to reduce confusion for those new programmers-in-training who are perhaps transitioning from code.org's example blocks to this project's blocks.
---
sf
References:
(1) Stage 5, puzzles 1..10: http://learn.code.org/s/1/level/24 (Artist 1)
Stage 7: puzzles 1..11: http://learn.code.org/s/1/level/35 (Artist 2)
Stage 11: puzzles 1..11: http://learn.code.org/s/1/level/59 (Artist 3)
Stage 15: puzzles 1..10 http://learn.code.org/s/1/level/82 (Artist 4)
Stage 19: puzzles 1..6: http://learn.code.org/s/1/level/103 (Artist 5)
(2) http://appinventor.mit.edu/explore/ai2/support/blocks.html
---
END