Introduction to Coding CANVAS Jerry Sommerville

December, 2024

The traditional methods used in mathematics education often overlook opportunities to engage students in coding skills that will have a lasting impact in the future. We can improve our teaching methods by developing an understanding of math concepts for practical use for a society that is increasingly software driven.

The Problem:

Traditional grade school and high school math instructors can easily develop future coders by introducing coding as a computer lab exercise in the classroom.

The purpose for the math exercises is often not known by the students. Classes are mostly an exercise in memorizing formulas and procedures. The process is like training an artist to mix paints to attain various colors in the spectrum, without teaching them to paint on the canvas. CANVAS is an acronym for Computers Algebra Numbers Visual Aids for Science (CANVAS). Coding CANVAS is the practice of using the computer screen as an artist uses a canvas. The goal is to utilize graphics (visual methods) in mathematics to assist in demonstrating applied math and computer science.

The Solution:

The modern computer is a tool that is severely under-utilized in the classroom. The burden of doing mathematical computation and discovery of math concepts should be placed upon computers. Proper use of the computer will take students further down the educational road than current teaching methods afford. The computer’s potential as a teaching tool is similar to the paradigm shift caused by the advent of the automobile when horses and buggies, walking, streetcars, and bicycles were the dominant means for transportation. During this time period, many questioned the benefits of a “horseless carriage” because it appeared to be an expensive toy. Similarly, the slower, more laborious hand teaching methods prevail, while computer-aided instruction is considered a crutch that will hamper or hinder fundamental skills. Computer augmented training in math classes will fill a void that is now facing employers. Many technical industries are understaffed because insufficient numbers of students have the math and programming skills critical to this modern era. Computer augmented training will remove much of the burden placed on teachers to convey mathematical concepts to their students.

The Approach:

Suppose that the subject of the day in a high school math class is to understand the mathematics of a circle with an offset. Most teachers using traditional methods will write the mathematical expression on the whiteboard by hand then they will explain the variables for the points on the circle, the variable for the radius, and the variable for the offset. Next, the instructor will attempt to explain how the variables change the circle’s appearance. This is done by many iterations going from the changes in math expression, then to whiteboard to show the effect with multiple graphical plots of the expression. Many students will get lost in the iterations, variables, and graphs. Furthermore, most students would not care about the math exercise because it seems pointless, except they need to get a good grade in the class.

As educators we are training the next generation of designers and developers. Necessity is the mother of invention. Development starts with need or necessity for the task at hand. Math should start with establishing a need for the subject that is about to be taught. The purpose and the concept should be presented first. The development process has five steps:

  1. establishing the need and the requirements,
  2. the plan of action,
  3. the preparation by the gathering of parts to implement the plans,
  4. the test if the requirements were satisfied (iterations will occur here),
  5. Presentation of the solution and a summary of what was done.

How would this same exercise differ if a computer were used in a classroom? Our instructor would define a task to use circles for, say, drawing a face. (See Figure 1, Smiling Face).

For grade schools, our instructor would introduce the number grid showing horizontal and vertical coordinates. Our instructor could place the facial features on the drawing, one at a time on the number grid, to show the importance of thoroughness and accuracy in math and computer science. We demonstrate this approach below using Python computer code.

The high school instructor would plan to use math expressions to draw the outline of the head with a circle. Likewise, the eyes and nose could be drawn using full circles with smaller diameters and offsets. The mouth and ears can be done with partial circles, and differing diameters and offsets. Drawing the face on the board by hand could show this. The instructor will use the computer to draw the face using math expressions for a circle to render each of the facial features that were drawn by hand. Then the teacher reveals the common circle math expression to show what was changed to get the desired result. Variables can be changed to show the trends. The face can then be redrawn on the computer to help students see the cause and effect.

Without the computer, an instructor would have to work much harder to convey the concepts and to keep the student’s attention. Each student could then be required to manipulate the face using the computer to give it another desired appearance. With success, the teacher then trains students in the use of a circle for more generalized cases. In summary, computers can be used in the classroom to illustrate mathematical principles more effectively by exposing students to pre-written source code and by allowing students to manipulate the code to see the cause and effect of changes in variables. At the same time, the science of learning to translate mathematical expressions to instructions understood by computers is a valuable skill set to develop for our students of tomorrow.

The Test Cases:

Instructors need only a modest amount of experience in math to participate. There are five test cases below: three Python examples, one Java example, and one VBA example. Python language is available for free at https://python.org.

Python #1 Source Code Beginning:

from graphics import *  
import tkinter as tk

def main():  
    win = GraphWin("Smiley Face Using Graphics.py in Python", 400, 400)  # create a window for drawing  
    c = Circle(Point(200,200), 20)  # define nose circle

Python #1 Source Code End:

Python #2 Source Code Beginning:

from tkinter import *  
from tkinter import messagebox  
top = Tk()  
top.title("Smiley Face using tkinter methods in Python")

Python #2 Source Code End:

Python #3 Source Code Beginning:

from graphics import *  
import tkinter as tk

def main():  
    win = GraphWin("Coord. Transform using graphics.py", 400, 400)  # create a window for drawing

Python #3 Source Code End

Java Example for High School

The first exercise will use Java language. The source code develops places smiley face into window using JFrame. To display the image, use NotePad app in Windows to save the file and run Java using the command prompt. Java programs with the "main" module will not display the image using "NetBeans" IDE.

Java Source Code Beginning:

// DrawFace.java by Jerry Sommerville  
import java.awt.*;  
import java.awt.event.*;  
import javax.swing.*;

public class DrawFace extends JApplet {  
    public void init() {  
        setBackground(Color.white);  
        setForeground(Color.white);  
    }

Java Source Code End

QB64 Example

The second exercise will use QB64, a freeware computer language that imitates the MS DOS QBASIC application that was provided in Windows 95 and 98 except it will run on Windows XP and Windows 7. The BASIC acronym stands for Beginner’s All-purpose Symbolic Instruction Code. You can Download Qb64 freeware from www.qb64.com.

QB64 Source Code Beginning:

SCREEN 12 'Set screen resolution to 640 pixels X 480 pixels 16 colors  
WINDOW (-10, 10)-(10, -10) 'Make window 10 units high, 10 units wide

QB64 Source Code End