Post navigation

Making a Rainbow in ScriptCraft – Part 1

I decided for my first ScriptCraft project I would try to create a rainbow. There were two reasons for choosing this:

I thought it’d look nice

It would need a bit of maths, so it’s something you couldn’t easily build by-hand

I was a bit disheartened when I found that the creator of ScriptCraft, Walter Higgins, had included a rainbow as a standard function in ScriptCraft, but I persisted regardless and I’m glad I did.

There are, I think, three things that make this script interesting:

It’s got some useful maths in it

It’s got an array variable

It’s got a second function

So, I’ll have a quick chat about each of these, but because it’s fundamental to the rest. This post is all about the maths.

I can just about hear the groans now, but I promise, this is crazy useful and really not that hard.

Useful Maths – Calculating the Area of a Rectangle or Square

The area of a rectangle or square is just the width multiplied by the height. Take a look at the two shapes below. The rectangle is 2 high and 5 wide and contains 2 x 5 = 10 squares. It’s area is 10. The square is 5 high and 5 wide and it’s area is 5 x 5 = 25.

Count the little squares if in any doubt.

Useful Maths – Squares and Square Roots

In a square, width and height are the same so the square’s area is always the same number multiplied by itself. Above it was 5 x 5 = 25.

A number squared is simply the number multiplied by itself. The name makes sense when you see that it relates to the area of a square, as above.

Two squared is 2 x 2 = 4. Three squared is 3 x 3 = 9. A square is often written as the number with a superscript 2 after it. You can see that here:

A square root is the reverse of a square. If 2 x 2 = 4, then the square root of 4 is 2. In the same way, the square root of 9 is 3. Every positive number has a square root, but most aren’t easy to guess like the two I’ve just shown. The square root of 2 is 1.414! A calculator or your computer program can always figure them out though. A square root is normally written as shown here:

Useful Maths – Measuring Distance in 2D and 3D

Now that we know about squares and square roots, we can talk about calculating the distance between two points in 2D and 3D. This is something programmers need to do all the time. The technique that’s used is known as Pythagoras’ Theorem and it’s been round since ancient times.

The person who invented it (probably not Pythagoras, even though his name’s on it now) noticed that there was something interesting about triangles which have right-angles in them (a perfectly square corner). They noticed that if you squared the length of the two shorter sides and added them together that that was the same as the square of the length of the longest side. Notice that the longest side is always the one which is directly across from the right angle. This diagram shows everything I’ve just said visually, showing the squared side lengths as physical squares:

If you’re in doubt, all the little squares are exactly the same size, you can count them to make sure they’re the same.

You might not see it, but we now have everything we need to calculate distances in 2D. Consider two points, shown in red below, which are x units apart horizontally and y units apart vertically:

It’s a right-angle triangle! This means that we know that the distance is related to the length of x and y like this:

but we don’t want distance squared, we only want distance so we can reverse the squaring with a square root which gives:

This is really easily extended to 3D too. If the points are at different Z positions and z is the difference between them in that direction the distance is:

Which is almost exactly the same, but has the z bit added.

In JavaScript – Measuring Distance in 2D and 3D

So, what does this look like in JavaScript? A little different, but easy to understand.

JavaScript doesn’t have a short way to write “squared” so we just multiply the variable by itself to get the squared value.

When it comes to square roots, the built-in Math object has a function for calculating square roots called “sqrt”.

Lets see how this looks together:

var x = 4;
var y = 3;
var distance = Math.sqrt((x * x) + (y * y));

Hopefully you can relate this to what we’ve shown above. Even if you don’t get it, you can still copy and use this code yourself if you need it.

The extension to 3D is almost identical. You’re probably figured it out, but I’ll show it anyhow for completeness: