Create.withcode.uk now supports debugging python code with breakpoints

I made create.withcode.uk a few years ago to try to make it as easy as possible for my computing students to interact with python code examples on any device. I wanted to be able to step through lines of code, discuss how it worked then share it with students in a way that let them tweak it, debug it, extend it and share it without the hassle of creating user accounts.

I’ve been thinking a lot recently about how to boost resilience and independence for students in a Computing classroom, particularly when it comes to debugging.

One thing that I’ve noticed that makes a big difference to students is if they’re taught early on how to use debugging tools like breakpoints, stepping and watches.

Step: running one line at a time to check the sequence of instructions runs in the order you’re expecting

Watch: checking the value of a variable as each line of code executes to see how data changes

Breakpoint: telling your code to pause when it gets to a particular line of code so that you can see what happens next

Useful debugging features of an Integrated Development Environment

Stepping and watching variable values has been possible for a while in create.withcode.uk but yesterday I released an update to allow you to set breakpoints on any line of code.

Debugging python code with breakpoints with create.withcode.uk
Debugging python code with breakpoints with create.withcode.uk

The above example shows some python code which will draw some butterfly in random colours.

On the right of the screen you can see the value of each global and local variable. This is really useful for explaining how data changes as your code runs.

The red blobs next to the line numbers show two breakpoints on line 21 and 28. You can toggle a breakpoint on or off by clicking on the line number.

To run the whole code (or up to a breakpoint) in create.withcode.uk, press Ctrl + Enter

To step through one line of code at a time, press Ctrl + .

To run the whole code (up to a breakpoint or the end of the program) press

Ctrl+Enter

To step through just one line of code press

Ctrl+Full Stop

instead. Try out the breakpoints in the example below:

It’s a work in progress, so let me know when you find any bugs or if you have any suggestions on how to improve it.

Happy debugging!

Free tools for teaching data representation of images with python

Free tools for teaching data representation of images with python

In Computing at KS3 in England, students have to learn how images can be stored and manipulated using binary data.

Pupils should be taught to:

…understand how instructions are stored and executed within a computer system; understand how data of various types (including text, sounds and pictures) can be represented and manipulated digitally, in the form of binary digits

This can be a tough part of the curriculum to cover in the limited time available to most schools but it can also be a really exciting way of bridging the gap between the Computer Science and iMedia / IT facets of the course.

In order to follow up from a series of lessons using Photoshop to create and manipulate high quality graphics, I wanted students to be able to understand how the images that they’d just created were stored on a computer.

There are some excellent ‘unplugged’ resources out there where students can see how simple images can be represented by binary data but I wanted Y8 students to be able to write, edit and debug some simple python code that showed them how computers store and process images.

There are two main ways that computers use binary data to represent images. This blog post details how you can use free web based tools to get students to explore how computers can represent and manipulate both bitmap and vector images.

Data representation of images: Bitmap images
Data representation of images: Bitmap images

Data representation of images: Vector images
Data representation of images: Vector images using

The next page gives some activity ideas for getting students to understand how vector images work.

microbit Tetris in python

microbit Tetris in python

I’ve finally got round to updating the online microbit python simulator in create.withcode.uk to catch up with some of the amazing new micropython features (such as speech and radio).

To celebrate, here are three different versions of the classic game tetris that you can simulate online in a virtual microbit or download to your device and play.

Microbit tetris in python
microbit tetris in python

First version

The first two tetris games weren’t made by me: the first was made by VivianePons and donated into the public domain after making it at PyCon2016.

It uses the microbit’s accelerometer to sense how much you tilt the device in order to move the blocks left and right. You can play it in the simulator by clicking on the accelerometer tab and changing the X slider left and right.

Second version

The second version of tetris comes from the excellent tutorial at 101 Computing. It uses buttons A and B to move the blocks and you get different shapes that you can rotate by pressing both buttons rather than a single dot:

Which version do you prefer? Can you combine the best bits of both programs? I think it’d be great it you could use the accelerometer like the first version but have the more complex blocks that you can rotate like the second one. Perhaps button A would rotate counter clockwise and button B clockwise. Post a comment with a link to your code if you’re able to improve on either of these projects and thanks to the original authors for sharing their code online.

 

Update 28/3/2017:

It seems that the second version doesn’t work any more with the current version of micropython for a micro:bit.

Please see below for a version of Tetris I’ve put together that works on both the simulator and an actual device.

There are four different types of blocks that fall down. You can move them by pressing A or B or rotate them by tilting the microbit left or right.

Have fun!