Engaging Beginning Programmers with Visual Problem Solving

Shared by Russell Gordon (@rgordon)

Teacher, Lakefield College School

CEMC Summer Institute for Computer Studies Educators — Thursday, August 16, 2018

Outline for Today's Session

  1. Observe and decompose visual problems
  2. Take a step back
  3. Implement solutions
  4. Refine solutions
  5. Discuss curricular connections
  6. Make original art
  7. Share our creations
  8. Additional resources

Contents

Decomposing Visual Problems

Image 1: Blur, October 16, 1993

Blur
"I put my trousers on, have a cup of tea
and I think about leaving the house."

Assume that you know how to draw text, shapes (like rectangles on screen), can change colours, et cetera.

In fact, for now, forget about implementation details.

Let's operate on the following assumptions. This gig poster is:

  • 400 pixels wide
  • 600 pixels tall
  • the origin is in the bottom left corner with the x and y axes counting left and up
    (in other words, it's a standard Cartesian plane, like math class)

Make a plan for how to produce this image.

First think individually (1 minute), then discuss with your neighbour (2 minutes), then we'll discuss as a group.

Decomposition Notes

  • Lorem ipsum...

Image 2: The Pixies, December 13, 1986

The Pixies
" Where is my mind? / Way out in the water / See it swimmin' "

What programming structures would be required to reproduce this image?

Make a plan for how to create this image.

Again, let's think individually first, then pair, then share.

Decomposition Notes

  • Lorem ipsum...

Image 3: Gorilla Biscuits, December 13, 1986

Gorilla Biscuits
" When you're on the bottom / The place to look is up
When things are getting better / Don't stop, don't say enough
What you achieve / That's for you to choose
You can always / Regain what you lose "

Here is one last image, more challenging.

Make a plan for how to create this image.

Think, pair, share.

Decomposition Notes

  • Lorem ipsum...

Taking a Step Back

Important note: the original gig poster designs are by Mike Joyce at Swissted.

I must give credit for the idea of reproducing gig posters to Greg Seale.

Sometimes the best PD comes from walking to Bathurst Street to get a coffee with your colleague!

We started at the end of my Grade 10 Intro to Computer Studies course.

The gig poster images we looked at were exam prep (Blur and The Pixies) and part of the exam itself (Gorilla Biscuits).

How might you start using images to develop student understanding of core programming stuctures and concepts?

Here's a possible progression...

Concept(s) Image
sequence sequence
sequence a harder image that requires careful sequencing
iteration iteration
iteration iteration-harder
iteration
conditionals		 iteration-and-conditionals

Implement Solutions

Now that we've had a chance to discuss plans for how to reproduce both simple and not-so-simple images, try your hand at implementation in the language your choice.

Immediate Language Options for Graphics

In 2018 we are fortunate, as teachers, to have so many capable programming languages at our disposal that make the production of basic graphics approachable for high-school students.

The following represents suggestions for how to produce graphics in three popular languages. There are no doubt more; I encourage you to work in the language that you use with your students.

Python

Use graphics.py with Python 3.x.

Swift

Use a library that I've developed (works with Swift 4.x and Xcode 9.2.x).

Java / Processing

Use Processing, which is built on top of Java. Students can write code that uses Processing functions to generate graphics and, as needed, use regular Java classes and frameworks.

Refine Solutions

Now that we've tried our hand at implementation, what improvements in algorithms did you develop, as compared to your initial plans?

Refinement Notes

Discuss Curricular Connections

Now that we've discussed the decomposition of some visual problems, tried our hand at implementation, and discussed algorithm refinements... what connections do you see to the Ontario Computer Studies curriculum? Where could you imagine using visual problem solving in your courses?

Curricular Connection Notes

Make Original Art

Could you imagine asking students to create original art with graphics and programming?

To draw in a broad cross-section of students, could we find inspiration from interior decorating?

Screen shot from Living with Pattern, by Rebecca Atwood

Screen shot from Living with Pattern, by Rebecca Atwood.

Hollywood?

Leslie Mann at the 65th annual Emmy Awards

Leslie Mann at the 65th annual Emmy Awards.

Fashion?

Dress pattern from Zaful, an online fashion apparel retailer.

Dress pattern from Zaful, an online fashion apparel retailer.

Share Our Creations

What did you come up with? Do you care to share now with the group?

Additional Resources

Earlier I mentioned that some of these images were used in the final exam for my Grade 10 Intro to Computer Studies coures.

Here is the planning sheet template I'd encouraged students to use before coding (PDF / Pages / Word). Here is a completed exemplar.

Here is the rubric I developed for the final exam (PDF / Pages / Word).