Outputting text by printing something to the console is rather easy. Getting a setup to output an image is a bit more difficult, but not to worry: I’ve done all the hard work for you behind the scenes. Here we’ll introduce the tools to work with images specifically for this site.

First let’s take a look at Python. We use a framework called processing. There’s a variant made for Python which is what we’ll use. Follow the comments along in the code editor below to see how we can draw a clear canvas:

This is great to draw static images, but it gets more interesting if we can actually create some moving parts. Both the processing framework and the C++ framework have a method to continuously update the canvas. For the Python variant the function is called draw() and in C++ we have a more extended function loop() with some parameters we’ll use in the examples below. We’re going to draw a circle that moves left to right using the sine function applied on the total time since the program started. The variants have different functions names which may be confusing, I tried to stick as close as the existing Javascript canvas drawing functions for the C++ functionality I made, which is different to the processing functions defined for the Python drawing code.

Finally let’s take a look at how to set individual pixels as this is a common use case for rendering applications. Here we only look at C++ as we aren’t going to touch individual pixels from Python. In the example below we’re creating an image in which we set the color of every pixel. After we’ve done that we’ll draw the image on the canvas.