STEAM blog

Computing, maths and art in education

Latest articles

Here are some of my latest blog articles. See the full index here.

Gingerbread man attractor

The gingerbread man attractor is another simple attractor, but it looks very different to the Henon attractor.

Read More…

Creating numpy arrays

There are several ways to create numpy arrays. Creating an array of zeros You can create an array of zeros using the zeros function, supplying the required array length: >>> import numpy as np >>> a = np.zeros(5) >>> print(a) [ 0. 0. 0. 0. 0.] This creates an array with 5 elements, each set to 0. The array elements are floating point values - this is the default, but you can create an array with different typed elements (eg integers), using the dtype parameter:
Read More…

Introduction to numpy

Numpy is a Python package that allows you to efficiently store and process large arrays of numerical data. Obvious examples of this type of data are sound data and image data, but numpy can also be used anywhere you have large data sets to process.

Read More…

Numpy efficiency

When we talk about the efficiency of numpy arrays, what exactly do we mean? There are really two separate issues: Efficiency of memory usage. Processing efficiency. Memory usage Numpy is written in C, which is quite a low level language. Values are stored directly in memory. If you want to store an 8-bit integer using C, it takes exactly one byte. In Python, numbers are stored as objects.
Read More…

Basic drawing

To create drawings with HTML5 canvas you will need two things: A basic HTML page with a canvas element. Javascript code to draw on the canvas. For simple pages, these can be included in the same file. This makes things easier because you can open the combined file in a browser to view it. Basic HTML page Here is a bare-bones HTML page. <!DOCTYPE HTML> <html> <head> </head> <body> canvas id="myCanvas" width="400" height="200</canvas> </body> </html> This page is empty except for a canvas element.
Read More…


In the previous example, we set the fill colour of the rectangle like this: context.fillStyle = 'blue'; In fact, using a named colour is just one of three different ways to choose a colour. Named colours HTML canvas recognises the standard colours. These include the obvious colours such as red, green and blue. They also include more exotic names such as tomato, moccasin and burlywood. There are 140 colours altogether, and they are the same set of colours that SVG uses.
Read More…

Coordinate system

When you draw shapes on the HTML canvas, they are positioned using (x, y) coordinates, just like points on a graph. However, unlike graph paper, the y values count down from the top of the canvas. So this code: context.fillStyle = 'blue'; context.fillRect(100, 50, 200, 75); creates something like this (assuming the canvas is 400 pixels wide and 200 pixels high): The parameters are fillRect(x, y, width, height), which means that the top left of the rectangle is positioned 100 pixels from the left edge of the canvas, and 50 pixels down from the top.
Read More…

Fill and stroke

Outlining a rectangle In computer graphics, drawing a line around a shape is called stroking. Here is the code to draw a line around a rectangle: context.strokeStyle = 'deeppink'; context.lineWidth = 4; context.strokeRect(50, 50, 75, 75); We set the strokeStyle to the colour we want the line to be. Of course, just like fill, we can any of the ways to set the colour. We also set the lineWidth of the stroke, in pixels.
Read More…

HTML canvas

HTML5 introduced a new HTML element called a canvas. A canvas is placed on the page in a similar way to any other element such as an image or a div element. However, the unique feature of the canvas is that you can use Javascript code to draw on it. The canvas has a comprehensive set of drawing commands including: Simple shapes such as lines, rectangles and circles. Complex shapes created from lines, arcs and curves.
Read More…

Paths and lines

A path is a way to define a general shape which can be made up of lines and curves. A path can be used to create pretty much any shape you want. Paths themselves aren’t visible, they just provide a definition of the shape you want to draw. To make the path visible, you must fill it or stroke it, or both. A path can also be used to define a clipping region.
Read More…