Tag Archives: Hopscotch

WSD Coding Challenge Week 4 & 5 Drawings

Here’s the form where you can submit you drawings for this weeks challenge… Please have to try to have these submitted by week’s end.

 

WSD Coding Challenge Week 4 & 5 – Drawing App

As we zoom towards the break, I have been reminded that parent-teacher conferences have been or are in full swing. It is sometimes hard to keep up with outside projects at this time of year. With that in mind…

This week’s challenge is going to be a little different. One of the greatest thing about building an app is that you can actually start using that app!!! That, in fact, is the incredible power of coding! Solving a real problem, coming up with a solution that allows one to create or progress forward – in our case, we have been designing an app that can paint and draw!

Over the last number of weeks, Marcel Laroche’s class have been active participants in the WSDHSchallenges! One of his students has literally dropped this week’s challenge in our laps. And it’s an awesome one! See if you can guess it from just looking at the image below (posted with permission)…

Marcel Laroche's Class image

This weeks challenge is to actually USE the app you have created to PAINT or DRAW something special….

I am hoping you are all familiar with Chris van Allsburg’s book called “The Stranger”. If not, get it from the library and have a read or check out this PDF link…

The Stranger

This is a story about the seasons changing. We happen to be in the same situation right now. Spring is trying to arrive, but is having a hard time deciding whether or not it’s truly ready. What’s going on? Could it be that something like what happened in The Stranger is happening to us here in Winnipeg?


HERE’S THE CHALLENGE…

The challenge this week is to use the drawing app to draw a series of pictures…
As a classroom, decide what your picture(s) should be about? Should the class try to show pictures of Spring? Will the class retell the story of The Stranger but from a Spring point of view? Will you stick the images together in a sequence, creating a kind of image movie and add music? Get creative. I would love to post all these images online to show the power of app creation and use….

To that end, I will be posting an image submission form on Wednesday this week for uploading your images or images sequences… I will allow the following images upload types (jpeg, jpg, png, gif, tiff, mp4, m4v, mov). Please let me know if you need another file type enabled for some reason.

You will need some help with this as we have no way of actually “saving” the images out of our drawing app at the moment. I have posted a tutorial too assist with this below. The process for “saving” is the same whether you are using Scratch or Hopscotch.

WSDCodeCHWK4Prep from Keith Strachan on Vimeo.

How to get Screenshots from an iPad
Getting Screenshots from an iPad

FINALLY, SURVEY SAYS???

I would also appreciate if the teachers participating in the challenge please complete this survey to give me a sense of what’s working and where to go next…

Have a great Break!!!

WSD Coding Challenge Week 3 Solutions – Drawing App

This week I am going to show you how to search for my code examples in Hopscotch and essentially download them to your iPad so that you can explore my code easily.

WSDCodeCHWK3Solution from Keith Strachan on Vimeo.


I have uploaded the Scratch project to the MIT site and have embedded it here for your convenience to have a look at.

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.

WSD Coding Challenge Week 2 Solutions – Drawing App

I am a little late getting this posted. Little internet trouble on my end, so apologies.

Here is a link the HopScotch file. You will need to download it on the iPad to view the code.

HopScotch Drawing App
HopScotch Drawing App

I have uploaded the Scratch project to the MIT site and have embedded it here for your convenience to have a look at.

WSD Coding Challenge Week 2 – Drawing App

It’s time to set up week two’s coding challenge. You are going to need a little help getting started on this one! We need to set up some colour selection tools in our drawing app. But adding colour selection can be challenging and there are many ways to accomplish this task.

In this video, I go through one way of getting this task started in Hopscotch. The video will broach two new ideas: VARIABLES – or in Hopscotch parlance VALUES and colour number codes….

Variables or values are critically important to computer programs. They allow values to be stored temporarily for use later on. I have provided an example below where I compare a mailbox & mail to a variable & information that a computer program might use.

Variables Explained from Keith Strachan on Vimeo.

I have provided a couple of other links to help you understand variables and how to create them in Hopscotch as well:


This weeks Challenge:

Your job this week is to create a colour palette for your drawing app in either HOPSCOTCH or SCRATCH. You will need some support getting this started. Here’s a video to help with this…

WSDCodeCHWK2Prep from Keith Strachan on Vimeo.

The following image shows how Hopscotch indexes it’s colour palette. This will help you reference colours by number in the drawing program:

Hopscotch Colour Palette Index
Hopscotch Colour Palette Index

For the Scratch coders among us, I have provided some resources as well. The little Scratch program below will help the people using Scratch determine the colour “code” or number to assign to the set pen colour to code block. _set pen colour to_ code block

 

I am also going to show you three ways you might tackle “passing” the colour to the paint brush. One of them uses an external device called a PICO board! We’ll cover setting and sending or “passing” variables too! Once you have viewed the, getting started tutorial, your challenge will be to create a colour palette for your drawing app that contains at least 6 colours as well as black and white.** You might want to add a clear button and a size slider of some sort as well. Get creative in terms of your colour set up.

WSDCodeCHWK2PrepScratch from Keith Strachan on Vimeo.

Have fun and contact me if you need help.

Tutorials WSD Coding Challenge Week 1 – Drawing App

Let’s first take look at a process that will help guide your thinking as you try to solve problems along the way during the coding challenge month.

Coding Process: Programmatic Thinking
Coding Process: Programmatic Thinking

When creating applications or coding of any kind actually, it is important to be able to track where objects are, including where the cursor & your finder position is. This is accomplished in a lot of different ways, or rather using a lot of different commands, but essentially the position of all elements are tracked using some kind of cartesian coordinate system using X, Y (and in the case of 3D) Z. Here is an explanation of how and why this system is important in the drawing app we are creating.

Finger Tracking Explanation from Keith Strachan on Vimeo.

Here is a video explaining how to construct the first phase of the Drawing app in Hopscotch:

WSDCodeCHWK1_DA from Keith Strachan on Vimeo.

Here is the code to assemble the first phase of the app in Scratch 2:

WK 1 Scratch 2 Solution
WK 1 Scratch 2 Solution

WSD Coding Challenge Week 1 – Drawing App

I have had a fairly strong response to the coding challenge survey send out last week. The results are in and the consensus is as follows:

  • Nearly everyone wanted a variety of tools used: I will be highlighting Scratch 2, Scratch Jr., Hopscotch, and I may throw in some special connections with Raspberry PI or PICO boards other digital addons.
  • There was nearly an even split on weekly/biweekly delivery – I will be going with weekly delivery of the challenges for the month of March and April – roughly 8 lessons
  • I will be posting challenges on Monday, with tutorials on Wednesday and solutions from the field on Friday.
  • I will key all lessons for students, but adults can follow and learn along side; I will provide PDF and Video resources for all coding on the blog.
  • About half said they would post materials to Twitter. Please use the** #WSDCodes** or #WSDHSchallenges hashtags or both, or email your samples for me to post on the blog.
  • Now on to content… My theme will be ART focused. We will building an drawing app in stages. One that will draw shapes, lines in multiple colours. This will be challenging, but will address a lot of the creative and curricular ideas requested.

Hopefully, this will address the needs of the many. Please feel free to email or DM me if you have other needs that are not being met.

Here is the week one challenge:

Designing a Drawing App

Getting Starting in Hopscotch
Getting Starting in Hopscotch

 

Getting Started in Scratch
Getting Started in Scratch

For this challenge, I will be posting some video support on Wednesday. In the meantime, you will need to start looking for clues in the areas where movement is noted. Particularly movement related to the X and Y value of the pointer or cursor. When the mouse or cursor moves the X and Y value for the cursor or mouse needs to be constantly updated and recorded. A drawing app takes advantage of this by leaving a coloured trail as the cursor or mouse moves along this X/Y coordinate path. Hopscotch and Scratch each use slightly different keywords to accomplish this, but both are found in the movement or motion block sections. That’s the place to start looking. Good luck.