WSD Coding Challenge Week 3 – Drawing App

Week 3 Challenge: Paint Brush Size
Week 3 Challenge: Paint Brush Size

Line… is the most important part of any painting. (Lyle Carbajal)

This week gets a little more challenging! The challenge is to create widgets that will handle the brush size, making it both thicker and thinner as needed! We will be covering a couple of new concepts this week (If-Statements, “Listeners & Light switches”) as well as reviewing variables again.

Here’s the overview of the task:

WK3 Adding Line Widget from Keith Strachan on Vimeo.

What’s critically important to understand about the task is that Hopscotch isn’t actually completely up to the task…. We need a way to trigger things exactly when we want things triggered. For example, in this week’s code, each time the button that increases the paint brush’s thickness is tapped, two things essentially happen: 1) the paint brush’s thickness increases and 2) the display indicating the paint brush’s thickness changes to display the current paint brush thickness. This ALL needs to happen when the button is pressed and we need to trigger this.** We accomplish this feat with a variable and a listener routine.** Lets have a look at the logic that might come into play here…

Logic for Decisions in Coding Paint Brush Size
Logic for Decisions in Coding Paint Brush Size

Hopefully this makes some sense. The yellow objects in the diagram represent variables, the diamonds are decisions, or in Hopscotch if statements, and the boxes are commands. So the logic reads something like this…

  1. If a variable called IsTapped is ON then the Display needs to be updated and we need to check the next decision.
  2. Is the Brush Size at its Max? There seems to be a variable called MaxBrushSize and if it’s been reached then it’s displayed and the brush size is set to this value.
  3. OTHERWISE we move on. Are we at the Minimum brush size? Another decision. There doesn’t seem to be a variable for the minimum brush size so this is probably a hard coded value like 1! If it has been reached then it’s displayed and the brush size is set to this value.
  4. OTHERWISE the current brush size is displayed (there is a variable called BrushSize for this) and the brush size is incremented by BrushSizeIncrement which seems to be another variable.

Let’s walk through this in an example closer to our drawing app.

WSDCodeCHWK3Prep from Keith Strachan on Vimeo.

Here’s another example of how to handle if-statements in HopScotch. It’s similar to what you will need to create in your drawing app.

WSDCodeCHWK3PrepC from Keith Strachan on Vimeo.

One last bit of help to get you started. Let’s think just a bit about how to set up your interface:

WSDCodeCHWK3PrepB from Keith Strachan on Vimeo.


I realized last week that I gave enough information for the Scratch coders to accomplish this kind of coding already. In fact, they should be able to apply lessons learned last week to a line or paint brush resizing widget in their program this week.


As usual, I am available for online or in school support (in Winnipeg) if needed or desired. Let me know.

Print Friendly, PDF & Email