Mathematics, Algebra, Algorithms and Cool Animations

This article will be the root of all following articles. The purpose is to convey in painfully simple terms Mathematic concepts, algorithms, so that they can be used in things such as cool animations.

Definitions

root
the places wheres something begins. Origin
algorithm
a set of steps to do in order to achieve something to a problem
base (or radix)
the format of the number system. In binary (base 2) it is 0 or 1, in decimal it is and multiples of 10, hex is base 16 etc
exponent
the number of times the base should be multiplied
power
take a base and multiply it with the exponent. In javascript it is the Math.pow static method, taking a base and exponent: `const square = Math.pow(7, 2); // 49`
ratio
the relationship one number has to another
golden
very valuable
theorem
a theorem is a result that can be proven to be true from a set of naturally occurring, observable truths
theory
a theory is a set of ideas used to explain why something is true, or a set of rules on which a subject is based on

Definitions are important. Not because authority says so. Because when you can think with a concept, you understand and can explain in simple terms other concepts based on it.

Mathematic symbols

  • a x b = a multiplied by b = ab (can omit the x)

Algorithms

Remember, programming is basically sequences, selections, and iterations. Thats it. You use these every day.

To solve a task you have to understand what the outcome should be, break down into steps and sub-steps how to achieve that goal, then do each in order. If that actually achieves a goal then the algorithm is correct.

There are some caveats. The algorithm might be correct, but is it efficient? In order to establish the worth of something it needs to be compared to something else. Efficiency is broken down further into space and time. If an algorithm is correct, but it takes a long time, then this is not good. If an algorithm is correct, but you need lots of space to do it, then this is not good.

An algorithm should be as simple as possible. We live in a world where we care about each other, and are striving to achieve a future of magnificence, therefore an algorithm should be communicable. If an algorithm is correct, fast, efficient, but nobody can grok it, then it is useless.

Fibonacci - the Golden Ratio

Fibonacci was an Italian mathematician from the Italy. He discovered the Golden Ratio which is a ratio that occurs in nature. This ration is approximately 1.6.

The sequence of numbers are calculated by adding the previous numbers together to get the next number in the sequence.

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

so:

0 + 1 = 1 // [0, 1]
1 + 1 = 2 // [1, 1]
1 + 2 = 3 // [1, 2]
2 + 3 = 5 // [2, 3]
3 + 5 = 8 // [3, 5]

... and so on.

The bigger the numbers, the more accurate the golden ratio (1.6). For example:

1 2/1 = 2.000000
2 3/2 = 1.500000
3 5/3 = 1.666666
5 8/5 = 1.600000

This is a number sequence. If we are given a number in this sequence, a very big number, how would we find out what the next value is? One algorithm would be to start from the beginning and work out each number until we get to our given number. That would be a correct algorithm. It would not be time efficient.

Geometry

Geometry comes from Greek meaning 'to measure the earth'. Today it means a branch of mathematics which covers topics as relations, properties, and measurement of solids, surfaces, lines, and angles.

Example: square root, take the area of a square, perform square root calculation, obtain the root of the square i.e. the length of one side.

We started off with a number, which could represent a length of a line. Then we took that number/line (root) and created a square from it.

What if we drew a diagonal line in that square from one corner to the opposite? We would then have 2 right angle triangles.

Pythagaras' Theorem

Pythaogras was a Greek philosopher and mathematician who made many discoveries.

The right angled triangle is something that comes in very handy. I remember at school thinking 'what is the point of this'. Context. You need context to anchor concepts together to create a coherent structure for intelligence.

Pythagoras' theorem is:

C2 = A2 + B2

C B B 2 A C A 2 2

So C is the longest side. If we knew the lengths of A and B, we could calculate the length of C by getting A2 + B2 and doing a square root on it.

JavaScript Animation Basics

I remember some kids in my Maths class saying "what am I going to use this for?". Well, that day has come haha.

http://www.mybridge.co/view/845

Math.sin
Math.cos

Glossary

Trigonometry:
A part of mathematics that deals with triangles, their angles, length of sides, and their relationships.

Sine:
Used in a right angle triangle. A function in trigonometry that returns the ratio of the side opposite a given angle to the hypotenuse.

Hypotenuse:
The longest side of a triangle, opposite the right angle.

Cosine:

Opposite:
The side opposite the smallest angle of the triangle. Or the angle that you know the value of?

Adjacent:
The side next to the smallest angle of the triangle. Or the angle that you know the value of?

How to remember? Think "Sohcahtoa" It works like this:

soh = Sine = Opposite / Hypotenuse

cah = Cosine = Adjacent / Hypotenuse

toa = Tangent = Opposite / Adjacent

requestAnimationFrame

https://css-tricks.com/using-requestanimationframe/

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

raf, by default, attempts to run at 60 fps. To run at a different rate you have to program this yourself.

an easy way to do this is with timestamps.

take a times tamp of now
if now is >= [specified interval], call raf function again

HTML5 Canvas

http://jsfiddle.net/roppa/ps3k1tnh/

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

http://diveintohtml5.info/canvas.html

canvas has 2 different coordinate systems - addressable space, physical number of pixels, then the css displacement thing.

References