The Joy of Multiplying by Floats

This really confused me when I started creative coding, and I just accepted it was magic. After a lot of experience I now get it, and I want to help you get there quicker too.

This is a really unintuitive thing to understand, and might take a few tries before you're comfortable with it. Feel free to read this once, try things out, then come back to it later as you get more experience.

So what are floats? They're numbers with a decimal. EG 0.20983475. Importantly, for this to work, we never go above 1.

That sounds really limiting. Only numbers between 0-1?!

But there's incredible power in it.

Use in placing things

Imagine we have a purple square and we want to place it in the center of our canvas.

gold bordered canvas with a purple square cut off in the top left corner

Initially our purple square is in the top left of the canvas. Because it's aligned to its center, it's getting copped off at the top and the left.

If this was in p5, the code for this might look like:

rect(0, 0, 200, 200);

Lets say we dont know the size of the canvas, it automatically resizes to match the width and height of whatever screen it's on. How can we center our square?

We divide by a float of .5. This will half any value we give it. So we do that with the width and height.

rect(width * 0.5, height * 0.5, 200, 200);

And we get:

gold bordered canvas with a purple square, perfectly centered.

Why does this work? Well, floats are essentially percentages. .5, is 50%! .125 is 12.5%.

Control in Discovery

You might think that that's not much better than just dividing by 2. And you'd be right!

But the real value comes in when you want to try out different values. Lets play with an example.

Demo of float-vs-division

This is an interactive demo, try it out on the site to see it in action!

What if you want to a third of the way across?

Ok, so that's easy for the fraction, pop 3 in, and the line gets divided by three.

And same with the float, just pop in .3333333, or however many 3's you feel like typing.

Halves, quarters, that's all ok.

What about going 82% across the line? That's easy in the floats, enter .82. But what about the fraction? 1.2195121951219512?! That's hard to understand.

These charts might make it clearer too, because the jumps between fractions are inconsistent, but with floats are easy.

Fractions

Three gold and purple squares, moved along three lines. The first is 1/2 way, the second 1/3, the third 1/4 of the way across the image.

These are really inconsistent. The difference between /2, /3 is way bigger than between /3, /4. This inconsistency is really difficult for the human brain.

Floats

Three gold and purple squares, moved along three lines. The first is 20%, the second is 30%, the third 40$ of the way across the image.

These are lovely! It's exactly the same gap between each, and I can immediately understand how I can play with these numbers.