# Math Art

This lesson shows how fun math can be by creating creative circle (trig) artwork. Do not worry, you can use this lesson even if you do not understand trigonometry.

## Prerequisite

You must have basic understanding of coding and have completed the Drawing lesson and know about Functions.

## A Circle

There are many ways to draw circles very effectively, but this lesson will rely on the basics and use Sin and Cos. All you need to know is that these return a point around a circle. You give them an angle around a circle and they return a point. They assume the circle has size (diameter) of 1, but we can multiply the results with the desired diameter.

In C# **Sin()** and **Cos()** functions are available in the Math class found under the System namespace. We need to add **using System;** to the top of our code. Finally, **Sin()** and **Cos()** take angles in radians. We will add a function that converts degrees to radians.

In Python **math.cos()** and** math.sin()** are available by adding import math to the top of our program.

A circle is 360 degrees and so our loop will go from 0 to 360 and draw the points.

```
using static BrainPad.Controller;
using static BrainPad.Display;
using System;
double DtoR(double degree) {
var radians = (Math.PI / 180) * degree;
return radians;
}
Clear();
var a = 0.0;
while (a < 360) {
var circleX = Math.Cos(DtoR(a)) * 30;
var circleY = Math.Sin(DtoR(a)) * 30;
Point(circleX, circleY, White);
a = a + 1;
Show();
}
```

```
from BrainPad import *
import math
def DtoR(degree):
radians = (math.pi / 180) * degree
return radians
Clear()
a = 0.0
while a < 360:
circleX = math.cos(DtoR(a)) * 30
circleY = math.sin(DtoR(a)) * 30
Point(circleX, circleY, White)
a = a + 1
Show()
add
```

Oh look, we have a circle… sort of! The circle is positioned at 0,0 so we are only seeing a quarter of it. We can shift the circle to the middle of the screen.

Note that we will omit the using & import statement going forward. We will also omit the **DtoR()** function.

```
Clear();
var a = 0.0;
while (a < 360) {
var circleX = Math.Cos(DtoR(a)) * 30;
var circleY = Math.Sin(DtoR(a)) * 30;
Point(64 + circleX, 32 + circleY, White);
a = a + 1;
Show();
}
```

```
Clear()
a = 0.0
while a < 360:
circleX = math.cos(DtoR(a)) * 30
circleY = math.sin(DtoR(a)) * 30
Point(64 + circleX, 32 + circleY, White)
a = a + 1
Show()
```

## Trig Race

What happens if **Sin()** is going twice is fast as **Cos()**? We do this by multiplying the angle by 2. This is making one angle go twice as fast as the other.

```
Clear();
var a=0.0;
while (a < 360) {
var circleX = Math.Cos(DtoR(a)) * 30;
var circleY = Math.Sin(DtoR(a*2)) * 30;
Point(64 + circleX, 32 + circleY, White);
a = a + 1;
Show();
}
```

```
Clear()
a = 0.0
while a < 360:
circleX = math.cos(DtoR(a)) * 30
circleY = math.sin(DtoR(a*2)) * 30
Point(64 + circleX, 32 + circleY, White)
a = a + 1
Show()
```

Do you see how the circle got folded in and now we have an infinity symbol. Change the code to 3 times faster. Do you see a three curves?

Can you guess what 4 or 5 would look like?

You may have guessed right, but what if you use 2.2?

Looks like we are onto something, but the drawing did not complete. This is because the 2.0 will complete, but then the fraction 0.2 will not get a whole round. For 0.2 to become 1 (full round) you need to repeat our loop 5 times.

```
Clear();
var a = 0.0;
while (a < 360 * 5) {
var circleX = Math.Cos(DtoR(a)) * 30;
var circleY = Math.Sin(DtoR(a * 2.2)) * 30;
Point(64 + circleX, 32 + circleY, White);
a = a + 1;
Show();
}
```

```
Clear()
a = 0.0
while a < 360 * 5:
circleX = math.cos(DtoR(a)) * 30
circleY = math.sin(DtoR(a * 2.2)) * 30
Point(64 + circleX, 32 + circleY, White)
a = a + 1
Show()
```

## Circle of Circles

A circle can become all kinds of interesting shapes on its own, but what if we made a circle spiral along the circumference of another circle? The spiraling circle should go faster then the other circle it is going around. If not faster, then we will just have a larger circle. We will try 2 times faster and see what the results may look like.

```
Clear();
var a = 0.0;
while (a < 360) {
var circleX = Math.Cos(DtoR(a)) * 20;
var circleY = Math.Sin(DtoR(a)) * 20;
var spiralX = Math.Cos(DtoR(a * 2)) * 10;
var spiralY = Math.Sin(DtoR(a * 2)) * 10;
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White);
a = a + 1;
Show();
}
```

```
Clear()
a = 0.0
while a < 360:
circleX = math.cos(DtoR(a)) * 20
circleY = math.sin(DtoR(a)) * 20
spiralX = math.cos(DtoR(a * 2)) * 10
spiralY = math.sin(DtoR(a * 2)) * 10
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White)
a = a + 1
Show()
```

Is that a badly shaped heart? Change the multiplier of the spiral to 3, 4, 5… etc. Can you visualize what is happening? Here is what 15 would look like.

You can see what the circle is doing, but here is something impossible to visualize! What if we did 6 multiplier for **spiralX **but then used 5 for **spiralY**?

```
Clear();
var a = 0.0;
while (a < 360) {
var circleX = Math.Cos(DtoR(a)) * 20;
var circleY = Math.Sin(DtoR(a)) * 20;
var spiralX = Math.Cos(DtoR(a * 6)) * 10;
var spiralY = Math.Sin(DtoR(a * 5)) * 10;
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White);
a = a + 1;
Show();
}
```

```
Clear()
a = 0.0
while a < 360:
circleX = math.cos(DtoR(a)) * 20
circleY = math.sin(DtoR(a)) * 20
spiralX = math.cos(DtoR(a * 6)) * 10
spiralY = math.sin(DtoR(a * 5)) * 10
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White)
a = a + 1
Show()
```

We bet you have never seen math this cool before! Ok, let’s do it the other way around. Keep the same multiplier for the spiral and change it for the circle being surrounded.

```
Clear();
var a = 0.0;
while (a < 360) {
var circleX = Math.Cos(DtoR(a)) * 20;
var circleY = Math.Sin(DtoR(a * 2)) * 20;
var spiralX = Math.Cos(DtoR(a * 8)) * 10;
var spiralY = Math.Sin(DtoR(a * 8)) * 10;
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White);
a = a + 1;
Show();
}
```

```
Clear()
a = 0.0
while a < 360:
circleX = math.cos(DtoR(a)) * 20
circleY = math.sin(DtoR(a * 2)) * 20
spiralX = math.cos(DtoR(a * 8)) * 10
spiralY = math.sin(DtoR(a * 8)) * 10
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White)
a = a + 1
Show()
```

## What’s Next?

There are hours of fun still! Can you change one of the numbers to be a random number and let the code clear the screen and draw a new shape nonstop?

```
using static BrainPad.Controller;
using static BrainPad.Display;
using System;
double DtoR(double degree) {
var radians = (Math.PI / 180) * degree;
return radians;
}
var rnd = new Random();
while (true) {
Clear();
var a = 0.0;
var randX = rnd.Next(15) + 1;
var randY = rnd.Next(15) + 1;
Text("(" + randX + "," + randY + ")", 0, 0);
while (a < 360) {
var circleX = Math.Cos(DtoR(a)) * 20;
var circleY = Math.Sin(DtoR(a)) * 20;
var spiralX = Math.Cos(DtoR(a * randX)) * 10;
var spiralY = Math.Sin(DtoR(a * randY)) * 10;
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White);
a = a + 1;
Show();
}
Wait(3);
}
```

```
import random
def DtoR(degree):
radians = (math.pi / 180) * degree
return radians
while True:
Clear()
a = 0.0
randX = random.randint(1,15)
randY = random.randint(1,15)
Text("(" + randX + "," + randY + ")", 0, 0)
while a < 360:
circleX = math.cos(DtoR(a)) * 20
circleY = math.sin(DtoR(a)) * 20
spiralX = math.cos(DtoR(a * randX)) * 10
sprialY = math.sin(DtoR(a * randY)) * 10
Point(64 + circleX + spiralX, 32 + circleY + spiralY, White)
a = a + 1
Show()
Wait(3)
```

## What’s Next?

Are start for some game making? Start with the Gaming Intro lesson.

## BrainStorm

Who knew math can be so creative on its own?! Some of these drawing start as complete random but complete beautifully.