Hello, again.
I am inserting a little extra video here in this section
on working with variables in p5.js
to talk about something called an motion operation.
I really just want to put laser focus
in on this one line of code here, circleX circleX plus 1.
Right?
So this was the first step in learning
how to declare, and initialize, and use your own variables.
The variable called circleX, I set it
to an initial value of 100.
And then, every frame I add 1 to it.
And so we get this illusion of it moving across the canvass.
If I click the mouse, I reset it back to zero.
So why am I here to just talk more and more
about circleX equals circleX plus 1?
When you're learning to code, which is presumably
what you're doing right now watching these videos,
you'll quickly discover that you were taught to do it one way,
you tried it that way, and then you found another example that
did it a different way.
Especially in JavaScript, there's
multiple ways to write the same thing.
So it can be very confusing.
There's also often this mantra that programmers
will have of trying to reduce the amount of typing
and to write things in more and more and more shorthand.
Some of this can be called syntactic sugar,
a different way-- actually that's not--
syntactic sugar isn't always shorthand,
but it's a way of sometimes reducing or cleaning up syntax.
In any case, I don't know that this is really so sweet.
I don't love shorthand always because it
can make things a little confusing,
especially when you're beginning to learn.
But it cannot be avoided.
So I want to cover some shorthand for you
right now for incrementation operations.
So I had the variable circleX.
Let's just simplify that and make it the variable x.
So here, my variable name is x.
I've declared it with the keyword let and I've given it
an initial value of 100.
Then, presumably in Draw, if I'm following
what I did in my code, I might say something
like x equals x plus 5.
I want to increment the value of x by 5 every time through Draw.
Starts at 100, then becomes 105, 110, 115,
and so on and so forth.
This can also be written as x plus equals 5.
It's common enough that this shorthand x equals x plus 5
is reduced to x plus equals 5.
Guess what?
If I were to change this to x equals x plus 1,
this would be x plus equals 1.
And this can be further reduced to x plus plus.
So this is a common enough thing that
happens in coding over and over again, just increment
a variable by 1, increment a variable by 1, that there
is a two-character sequence plus plus
that you can write which means the exact same thing as x
equals x plus 1.
Incidentally, if you've ever heard of the programming
language C++, why is it called C++?
There is a programming language once called--
it still exists-- called C. And then, there
were improvements and changes made to it.
And the next version is incremented by 1, or C++.
This can also be done with minus.
X minus equals 1 would be decrementing x by 1.
You could do this with multiplying
x times or asterisk equals 2.
That would be doubling x every frame.
Slash equals would be divide.
And there are more and more kinds of operations like this.
So that's really all I wanted to say.
I probably didn't need to take whatever
this was, like a 3 hour video on what x plus equals 1
is written means.
But hopefully, this helps clarify for you
as I go through future examples where
you start to see these kinds of shorthand
and syntactic sugars pop up here and there.
And I hope that it is sweet for you.
See you in the next video.
Actually, I'm not leaving just yet just, just to confirm.
I'm going to change this to circleX plus plus equal 1.
Same exact result. Plus equals 10.
It's moving by 10.
And then just to be sure, circleX plus plus.
It's moving by 1.
OK, hope this was helpful to you and look forward
to seeing you in the next video.
[MUSIC PLAYING]