> For the complete documentation index, see [llms.txt](https://vyuka.digitalneumenia.sk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vyuka.digitalneumenia.sk/creative-programming-i/02c-variables-our-own-variables.md).
# 02c - Variables: Our own variables
So far we used variables created and maintained by computer: `width`, `height`, `mouseX`, `mouseY`. The computer knows the size of the screen it puts the width of the screen into the box with label "`width`". It knows where the mouse is and it puts the horizontal position of mouse into the box with label "`mouseX`".
We can also create our own memory boxes and store numbers in them. Let's start with an example. Draw a circle of size 120 at the position of mouse:
You should be able to write this code on your own now. But just in case, here it is:
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
circle(mouseX, mouseY, 120);
}
Now we want to draw a square that is the same size as the circle and also centered around mouse.
If we put the square at the same position, the square is drawn not from center but from its top-left corner:
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
circle(mouseX, mouseY, 120);
square(mouseX, mouseY, 120);
}
Since square is not drawn from its center but from its top-left corner, we need to move the square position left by half of its size, and upward by half of its size:
```
square(mouseX - 120/2, mouseY - 120/2, 120);
```
After this change, the square is nicely aligned with the circle:
## When things change
What if we wanted to change the size of this symbol from 120 to 40. We would need to change all the numbers in our code, 120 to 40:
Imagine there are dozens of various objects, all relating to the size of the circle. We would have to change tens of various numbers in our code.
## Let there be variable
Just like we used `width` and `height` to save us from rewriting many numbers in our code, we can now use a variable that will store the size of the circle. Unlike `width` or `mouseX`, computer doesn't know how that variable is labeled and what's inside its box. We must do it on our own.
Let's call or variable `size` because it will represent the size of our circle. And let's store the value `40` inside the variable. This is how it's done:
let size = 40;
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
circle(mouseX, mouseY, 40);
square(mouseX - 40/2, mouseY - 40/2, 40);
}
{% hint style="info" %}
You can name your variable whatever you like, e.g. `velkost` or `diameter` or `little_guy`. Just don't start the variable name with number, e.g. `3corners` or use spaces in the name, e.g. `circle size`.
{% endhint %}
And now we can use this variable instead of the number in our code:
let size = 40;
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
circle(mouseX, mouseY, size);
square(mouseX - size/2, mouseY - size/2, size);
}
You might notice that our variable has a different color in editor than `mouseX` or `windowHeight`. That's because `mouseX` and `windowHeight` are special variables; created and maintained by computer. We can use them without creating them with `let` and without storing number in them with `=`.
## Why do we use variables?
Now we can change the value of our variable `size` from 40 to any number, e.g. 194 and we don't need to change anything else in the code.
let size = 196;
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
circle(mouseX, mouseY, size);
square(mouseX - size/2, mouseY - size/2, size);
}
The sketch works flawlessly. Both circle and square adapt to the new value of `size` without us having to change all the number that these commands contained before.
## Best practice
If a number is repeated multiple times in your, such as the size of the circle (`40`) was used in the position of the square and the size of the square, it's good practice to replace the multiple occurrences of this number with a variable. Just like we did.
It will help you in future to write code that takes less effort to change, update or maintain. You only need to change the value of the one variable and the rest of the code works automatically.
