Goal: Create a drawing App that allows the user to create their own colors. Users will be able to use sliders to create color and width of lines. They will then be able to draw on the canvas. The App will start with the image below. Check out this video to see a preview of the app.

If you want an alternative to the instructions below, here is a video explanation of the same material.


Phase 1. Set up the drawing to change the colors of the line

This app is similar to Paint Pot! We will have a canvas that we can draw on and sliders that will change the colors.

1. Design: Add a canvas. This is the canvas you draw on!

A) Set its image to be the awesome.jpg. Click on this link to download the file.

B) Set the canvas height to be 250 pixels. Set the canvas width to be 250 pixels.

C) Rename this Canvas to "DrawingCanvas". We will have another canvas later and we don't want to mix them up!

2. Blocks: Let's add the ability to draw on the canvas like we did in Paint Pot. Remember we used when.Dragged and call.DrawLine. You can look at the Paint Pot (Phase 2) instructions again or at your code from Paint Pot!

3. Design: Drag a vertical arrangement below the canvas (make the width fill parent!). This is to keep all of the components we will have in nice order.

Inside the horizontal arrangement drag: A button to clear the screen. (Name the button accordingly)

Blocks: set functionality of Clear Button to clear the DrawingCanvas.

A) You will need a call.Clear statement. Again this is just like Paint Pot!

4. Design: Drag four sliders below the horizontal arrangement of buttons. These will change the color of the lines we are drawing with.

A) A slider (min 0 to max 255) to control the amount of red in our color. Rename it to indicate information about the slider (such as RedSlider). Change the color of the slider to show the color it is controlling. Make the slider width "Fill Parent".
B) A slider (min 0 to max 255) to control the amount of green in our color. Rename it to indicate information about the slider (such as GreenSlider). Change the color of the slider to show the color it is controlling. Make the slider width "Fill Parent".

C) A slider (min 0 to max 255) to control the amount of blue in our color. Rename it to indicate information about the slider (such as BlueSlider). Change the color of the slider to show the color it is controlling. Make the slider width "Fill Parent".

Remember what we learned about colors in pixels, RGB!

5. Blocks: Create a procedure to set the color on the DrawingCanvas using our sliders. Call the procedure setLine.

(A) You will need a set.PaintColor block for the DrawingCanvas. We will add more to this procedure in later steps.


(B) To set the color you will need to use the makeColor method from the Color Category. A color is a list of three numbers specifying how much red, how much green, and how much blue.
The order of the color given to the "makeColor" maters. You want this order: Red then Green then Blue (RGB!).


Attach this to the set.Paintcolor.

6. Blocks: Now that your SetLine procedure is done, you need to call it for EACH SLIDER.

Call your procedure (execute it) SetLine whenever one of the sliders moves:
A. When Red Slider PositionChanged
B. When Green Slider PositionChanged
C. When Blue Slider PositionChanged

*Note you will need three separate blocks for this. One for each slider. Here is the when.PositionChanged block for when the RedSlider has been moved:

Test out your app! Can you change the colors of the line you are drawing?

Phase 2: Viewing the color BEFORE actually using it.

1. Wouldn't it be nice if we could see what color we are drawing with before drawing on the DrawingCanvas? Let's add a second canvas, call it LineColorCanvas, so that we can see the color of the line

Design: Add a canvas above the sliders with dimensions 50 pixels for height and 100 pixels for width named LineColorCanvas.


We are going to draw a line on this canvas to show the color we have created with the sliders.

YOU have to decide where the line is drawn (rather than where your finger touches the screen).

In the picture above, you can see the coordinate system. (0,0) is the upper left hand corner. X increases to the right. Y increases going down. If your LineColorCanvas is 100 width and 50 height, the picture below shows the endpoints you need for a line across the center of the LineColorCanvas screen.

In your setLine procedure add a call.DrawLine for the LineColorCanvas with the x and y coordinates from the line in the picture above (0,25) and (100,25).

Each canvas has its only paint color. Since we have two canvases now we also need to set.PaintColor for the LineColorCanvas in the setLine procedure.

2. Let's make it so we can change the width of the line we are drawing with as well.

Designer: Add a slider below our three color sliders called "LineWidthSlider" (1 min to 25 max).

It may be that your screen is so full you can't see all the components. If you select "Scrollable" from the screen, you will be able to slide the contents to see everything:


Blocks: We will need to add two blocks to the setLine procedure so set.LineWidth on the DrawingCanvas and the LineColorCanvas.

Remember, we also need a when.PositionChanged block.

Test your app! What do you notice?

When we change the color and the line width there are left over colors on the canvas. We need to do some sort of clearing of the LineColorCanvas to make only the current color and width settings visible. See if you can figure out where to put a call.Clear for the LineColorCanvas! Ask a mentor if you need help.

Test out your app again! Can we see the changing color and the changing line width on the LineColorCanvas? Can you draw with different colors and different widths?

Phase 3: Finishing touches

1. Now let's change the image that we are coloring on! We want to be able to switch between a blank canvas and our awesome picture.

Designer: Add a button to switch the picture. You could put this in a horizontal arrangement so it is next to the clear button.

Blocks: Create a variable to keep track of the image that is currently being shown. Name the variable "isImage". We will use this with the switch button. It will allow us to switch between the image we put on the canvas and a blank canvas.

A) Create the variable as a boolean variable. A boolean variable has only has two values: true (I want the image) and false (I don't want the image). Set the variable to "true" to start.

B) You will need to set the variable "isImage" to the opposite of what it currently is upon clicking the switch image button. This uses a "setter" for the variable and a "not" from logic. Click here to see an example of what this looks like.

C) You will need an if.then.else statement (just like in Channel Surfing!), if the isImage variable is true, then we set the the background image to a blank canvas , else set the background image of the canvas back to awesome.jpg. Click here to see an example of what this could look like.


1. (*) Try adding an accelerometer to clear the DrawingCanvas.

2. () Try adding a button that randomly selects a new image from a list each time it is clicked.