Using Math Expressions (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

point() is a function that takes in

an x coordinate and a y coordinate

and draws a point on the screen.

So right now it's drawing a point
that's only one pixel big,

which you might be able
to see if you squint.

If you want to make the point bigger,

you can call this function strokeWeight()

and pass it a size, let's say 10.

Aha! That's better. So now let's talk
about some math expressions.

A math expression is any string
of numbers and symbols

that evaluates to some other number.

For example, 1 + 1 is
a math expression that evaluates to 2.

A more complicated expression might be

4 + 3 * 8 / (2 + 2),

which evaluates to -- let's see,

two... never mind what it evaluates to.

The point is, while you're coding,

any place where you would normally use

a number, you can actually substitute

one of these math expressions.

So for example, this point() function

here accepts two numbers as parameters.

Instead of 100, I could just as well say

"50 + 50," or maybe "25 * 4,"

and the computer would evaluate
those expressions for us

before drawing the point at that position.

The basic order of operations
you learned about in school

applies to coding as well.

Remember PEMDAS?

Well, maybe you don't, but this is

the acronym I learned
in school and it stands for

Parentheses, Exponent, Multiplication,

Division, Addition, Subtraction.

And there's actually no symbol
for exponent in this language,

so in our case, it's just PMDAS.

This means that everything

inside parentheses are evaluated first,

and then multiplication and division

are evaluated next from left to right,

and finally we do addition

and subtraction, also from left to right.

So let's just go through a couple
more examples and see

what kind of things we can do.

Let's draw a rectangle,
maybe at 100 * (4 - 2),

and then, y coordinate -- give it

(300 + 50) / 7 + 80,

and maybe a width of 100 + 50,

and then a height of 60 * 3,
how about that?

Whew! That is a fat rectangle.

Maybe I wanna set the strokeWeight()

to something smaller like 10 - 7, yeah?

I can also draw an ellipse()

at 130 + 50

and 100 + 60,

maybe 40 * 3,

and let's do 200 - 17, yeah?

Oh, and would you look at that!

Kinda looks like... an elephant!

Well that's it, now you know
about math expressions.