Coding and the equation of a circle

A student was creating a tower defence game in my computer class, doing so he learned what the equation of a circle is.  This idea is a Gr. 12 math idea, and he did this in Grade 10.  Here is what happened...

He was coding a certain tower in his game and he asked me "How do I code the tower to only attack units which are within 200 pixels?"  I first asked if he could draw me a picture of what he wanted, and below is computer graphic of what he drew..

I then said, "What do you have?" He then showed me that he created variables:

t_x = x value of the turret

t_y= y value of the turret

u_x= x value of the unit

u_y= y value of the unit

He had currently coded that if the following two inequalities were true the tower would attack.

At a quick glance we realize that this creates a square around the turret not a circle.  This he had already realized.  He then said, "How do I test if the straight line distance is less than 200?".  We then drew a picture as follows:

 He then said "Well I know that once the line from the turret to the unit is less than or equal to 200, the turret will attack but what inequality do I create?"  A student, next to him, said "Would pythagorean theorem work?".  The problem we had was to label the other two sides.  Minutes passed while I let him think, and finally he asked if this would work

 I said.. "lets try it".. sadly the turret would attack the unit if the unit was within 200 units of the origin not the turret.  Once again, I refused to simply give him the answer and I asked him, "what could we do to change from the origin to the turret?"  He replied with "Well the turret isn't always the origin, so we would have to test the distance.. and so can we do.."

I then asked, "Why did you use the absolute value before?" Which is responded "because the code needs to take the positive value, and if the unit was to the left or below the turret I need it to become positive....but....wait....squaring is positive, so can I just remove the absolute value?"  We tried and here was his final test

When tested, this worked perfectly.  Keep in mind this child is in Grade 10, and completed an outcome from Gr. 12 mathematics.

Teaching math through Coding

I recently started teaching Computer Science 10 and 20 and I use the program Processing.  It is a free program and entirely based in a geometric space.  The cross curricular links in this program are amazing!  I want to share how my Grade 10 students were introduced to higher level math concepts while working with this program.

First, here is a program Sean wrote:

int[] numb = new int[5];
void setup() {
  size(800, 800);   background(255);   numb[0]=0;  numb[1]=200;  numb[2]=400;   numb[3]=600;  numb[4]=800;
}
void draw() {
  line(numb[int( random(0, 5))], numb[int( random(0, 5))], numb[int( random(0, 5))], numb[int( random(0, 5))]);
}

The picture it creates is:

Now in case you don't understand processing what is drawing does is takes the numbers 0, 200, 400, 600, and 800 and creates a line from all possible co-ordinates created from these numbers to all other possible co-oridinates.  For example a line from (200, 600) to (800, 800).  It does it in a random pattern, but after running for some time all possible lines are drawn. 

After Sean drew this I asked him "How many lines have been drawn?"  This is a typical Math 30-1 question, a course in which Sean has never been in yet.

After some thought he asked if it would be "5 times 5 times 5 times 5 times 5?"  or 3125.  This is of course, a great way to start the problem but is too high as you can't have a line from (0,0) to (0,0).  Also he didn't account that the line from (0, 400) to (600, 800) is the same as the line from (600, 800) to (0, 400).  At this point the bell rang and we will finish the conversation tomorrow.  However in Grade 10 Computer Science he was introduced to a Gr 12 Math concept called "Fundamental Counting Principle" and "Permutations and Combinations".

Next was Ex who wanted to create a scene where a sun rises and sets. His original project had the sun follow a straight line to the top of the screen and then follow a straight line back down to the horizon.  Following a "^" shape in the sky.  This of course is not how the sun moves, as it would move more in a parabolic shape. 

Unfortunatly, Ex has only taken Math 10 and not have heard of a "Parabola".  Consequently, I sat with him and we played with his code.   Instead of it following "y=-x+10" I asked him to put in "x^2" and to watch what will happen.  Instantly he was surprised to see his sun move in a different fashion than before.

He asked how do we move the sun right in the sky, as he wanted the sun to be at the highest point in the middle of the screen.  What he was asking was "How do we horizontally move the parabola?".  Again this is Math 30 concept.  Through some guided discovery, Ex realized that by replacing x with x-h we move the parabola left and right.  

 Here is his final code.

int xPos=0; float xPos2=260; int positionX =50; int positionY = 100; int Switch = 0;
void setup() {
  size(500, 500);  smooth();
}
void draw() {
  background(130, 200, 255);  fill(255, 238, 21);  ellipse(xPos, xPos2, 100, 100);  xPos=xPos+1;
  xPos2=0.005*(xPos-260)*(xPos-260);
  if(xPos<=0){
    background (0);
     }
     
  noStroke();  fill(15, 80, 0);  rect(0, 300, 500, 400);  fill(40, 40, 40);  rect(200, 230, 100, 70);
  fill(65, 65, 65);  rect(235, 250, 30, 50);  triangle(300, 190, 300, 230, 202, 230);  ellipse(240, 280, 5, 5);
  fill(53, 43, 32);  rect(140, 230, 20, 70);  fill(6, 62, 0);  ellipse(150, 220, 60, 60);  fill(112, 112, 112);
  rect(0, 355, 500, 100);  fill(191, 191, 9);  rect(0, 400, 50, 10);  rect(75, 400, 50, 10);  rect(150, 400, 50, 10);
  rect(225, 400, 50, 10);  rect(300, 400, 50, 10);  rect(375, 400, 50, 10);  rect(450, 400, 50, 10);
  }