Hey guys, thanks for attending this talk about Calculang.
Calculang is a language for calculations.
So calculations, Calculang.
And in Calculang we write pure functions
but outside effects. So if you've probably heard that sound bite before,
and no side effects means because
I try to develop Calculang to be flexible.
Now, I use a lot of terminology whenever I describe
functions, but pure functions are similar
to formulas and spreadsheets.
I'm not the first person to say that. So you'll hear me
mix up those terms, formulas and functions.
And I want to show you the Calculang
website, which is Calculang.dev.
So here's the logo,
and here are the things that are important. And down below we have some examples.
So there are some finance examples
that are simple computationally.
Some simulations that are simple computationally.
Some maths art examples. And some other demos
of things. And I want to show you some of these.
We'll start with the savings calculator, but I want to use
a new experimental website.
This is this. So here we're looking at
savings calculator, a visualization. We're saving
1000 every year for five years. We're getting interest
2%. And we end up at 5,308.
And over here, separate
to the visualization. This visualization uses numbers from
Calculang model, which is separate. And we have the formulas here
and the inputs here. So we have formulas, input,
output. And I want to show you the formulas.
Formulas are the building blocks
of calculations here. So
look at the balance, the savings balance. This is the most important
output here. Apart from some edge cases,
the balance, the savings balance is the previous year's
savings balance plus deposits, new deposits,
plus interest. And we can look at interest.
And it's the balance from the previous year, the previous year's balance
times interest rate. So
now I'll point out some things about this code.
First of all, you might notice it looks like JavaScript.
It looks like JavaScript because based on JavaScript, it compiles into JavaScript.
Secondly, there's only two new primitives to know about Calculang
formulas and inputs. Here,
balance is a formula and it's blue, although you can't really see it here.
And interest rate is an input and it's pink.
And although balance is a formula
and interest rate is an input, we can change it up here,
balance is the formula we just saw.
Their formulas and inputs are both implemented
as JavaScript functions. So we call them,
we call interest rate like it's a function.
Fourthly,
everything being a function is a nice uniformity,
but it means there's a lot of
calls and there's a lot of brackets. We've got brackets, brackets, brackets,
brackets, brackets. Mostly these brackets are empty
and that's because the Calculang compiler will analyze how inputs are used
and it will populate brackets for you.
Those last two properties
are motivated by flexibility, which is something I'll speak more about
tomorrow in particular today. I'm going to focus more on
interactions. So we can interact with this model also
from over here.
These formulas. And if we double click a number,
we get this overlay of the numbers that we used
to calculate the number. So 508 is 5204 plus 104.
And if we can navigate here,
104 is 5204 times 2%.
So we can see the whole
workings of a calculation and dependencies.
So this is showing you
a visualization of numbers
and interacting with the workings
and the formulas. But numbers that are on this
in this website. So what about meeting numbers where they are?
For this next example, I'm going to ask you to use your imagination
a little bit.
So we can imagine this is a piece of paper somewhere. It's got these numbers on it.
100,000, 4%,
10 years. And it's alone and there's a repayment amount
12,000, 3,000, 2,9 per year.
So this 12,000, 3,000, 2,9,
it was calculated so
it has workings. It was probably calculated
on a computer and I know it was because I calculated it with
calculating. And with just this,
which links
the formulas and the inputs, then I can share
not just the number but also the workings.
So where that brings you is
it's 12, 3, 2, 9. What that brings you is
here, 12, 3, 2, 9.
Repayment amount.
And you can check the factors that are used.
And I don't want to convince you if this is right
or wrong. The answer might be
that it depends. But just to show
you a way to share workings along with a number.
So this interacting with numbers and seeing the workings behind a number
and sharing it is something we can debate at being useful for
one person or another. But it's something we can debate for all
users of numbers. And that brings me to developers.
And numbers are a lot of what we do on computers, I think.
So this example is a bar chart.
You might
anticipate what will happen. But we can move around.
It's a projection of a reward.
And
how does this work then?
There's a map.
2D map.
And a player in it. And there's walls. And there's a field of view.
And I'll turn around and look at this direction.
And
this, the calculations behind this
to show you how the bar chart works, it's a
we split the field of view. To produce this image,
we split this field of view into many different directions.
And we cast imaginary rays in every direction until they hit a wall.
And then we calculate a distance. And for rays that travel far,
that have a long distance, like these ones, then we give them
small bars. And for rays which are interrupted by a wall at a short
distance, then we give them big bars.
And these bars here are very big because they catch this
green block right beside us.
Now, we can go deeper and we can,
with a few clicks, see the workings as we interact with this.
And look at the formulas for the distance.
So, this distance is,
there's two distances here.
We can see the steps of the algorithm by highlighting here.
This is the force intersection with the horizontal grid line.
There's no wall. This is the second. There's no wall.
This is the toward. And there's a wall. So we stop.
We can calculate the distance.
Now, there was a bug here. I don't know if you saw it.
If we go back, so we can travel back to our gameplay.
Here. There's something wrong with,
this should be a smooth edge.
At least this bar should not be so small.
From the map, it looks like, from the time here,
it looks like the ray is going through this corner, which it shouldn't.
And so, can we figure out why?
If we go through the workings.
There was a check here. No wall, no wall, no wall.
Wall. But, here, there should be a wall.
So this check looks wrong. Let's look at what's going on in here.
So X is like two and a little bit, and Y is three.
X two and a little bit, three is a blue wall.
So, that seems wrong.
This formula, there are checks for the boundaries at the edges.
So, that's not relevant here.
And we have this lookup against the map to find the walls.
And there is a subtraction here of a little value, which is a fudge.
And it looks like our X is just very close to two.
And that fudge throws it down to one, and then it doesn't find a wall.
So, we're hit with this bug.
Now, I'm going to show you how we can fix that by making the fudge smaller,
and I won't remove it because it says it's necessary.
So...
Okay, thanks.
So now we can compile with our change, and we can hot reload.
So now we can see a fixed wall.
In case we missed it, we can go back and forward.
So before, after.
We can travel through more gameplay just to make sure there's no regressions with that.
And these things are fine, so...
So that's our change met, and we're happy with that.
So here we saw interacting with a visualization,
but a simulation of a world,
and some developer things like hot reload, time travel,
which I think are well suited to functional programming,
which Caglang is close to.
And one more example.
Whereas this one is a bar chart, this next example is a scatterplot.
We've got stars, and we can travel through them.
I can speed this up.
And we can say that the state of this visualization is calculated by Caglang,
and on the left we can see the state and the workings for that state.
And up this in real time.
And I was watching this from start to finish,
and then I noticed that there is some redundant code here.
This condition is never false.
Now, in these examples...
In these examples, I showed some interactions with numbers and their formulas and their workings,
and a way to share numbers with the workings.
We looked at numbers in the world, imaginary,
and we looked at numbers for a simulated world.
But the enabler for all of Verben I showed is this.
It's the separation of concerns and it's the pure functions,
which is the same enabler for the aims of Caglang,
which to be shareable and communicable,
it helps to not have programming mixed in with your numbers,
to be shareable and communicable as far as numbers is concerned.
To be transparent, it helps to work with different views to be interoperable,
so that tools can give different perspectives.
To be verifiable, it helps to be pure,
so that the same inputs going into a function,
you can expect a predictable output.
Flexibility and reusability is this.
These two are things I'm going to talk about tomorrow
in declarative and minimalistic computing, dev room.
That's all for my talk today.
Now, if there are any questions, I'll be happy to take some.
Thank you.