> 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/02a-variables-window-size.md).
# 02a - Variables: Window size
Create a new sketch, set the canvas dimensions to 600, 400 and in the draw a rectangle that matches the dimensions of the canvas. Give the rectangle a distinct outline through `strokeWeight` to make sure it really matches the canvas size. Make rectangle yellow to distinguish it from background.
```
function setup() {
createCanvas(600, 400);
}
function draw() {
background(220);
strokeWeight(10);
fill(255, 255, 0);
rect(0,0,600,400);
}
```
Now change the size of canvas in `createCanvas()` to 800, 500. What happens?
The rectangle no longer covers the whole canvas. The canvas is now larger than the rectangle and can be visible around the rectangle.
We could, of course, change the size of the rectangle from 600, 400 to 800, 500 too. But imagine if we had tens of various shapes in our code and we would have to adjust all their dimensions too.
Can it be done more efficiently?
## First variables: `width` and `height`
Let's replace the dimensions of the rectangle - `600`, `400` - with two words: `width` and `height` and see what happens:
function draw() {
background(220);
strokeWeight(10);
fill(255, 255, 0);
rect(0,0,width,height);
}
The rectangle now covers the full extent of the canvas. And it will cover it no matter how large our canvas is. Try changing the canvas dimensions in `createCanvas` and see for yourself!
## What are these magic words?
We used words `width` and `height` instead of `600` and `400`. Notice how the words have a different color from the rest of the text in the editor. This means they are special words called variables.
Imagine computer memory as a big storage room with shelves. And on these shelves are boxes. And these boxes have labels. Somewhere, there are two boxes labeled `width` and `height`. And computer makes sure these two boxes contain the numbers for canvas width and canvas height.
Whenever we use these labels `width` and `height` in our code, the computer will look inside these boxes and use the number in these boxes in our code. The words are placeholders for some number values.
And since these number values may change - when we changed the size of canvas in `createCanvas` - the boxes are called **variables**.
## Using variables as numbers
Let's put a circle in the center of the canvas. Our canvas is sized `800` x `500`. So the position of the circle will bee `400`, `250`:
All is good until we change the size of canvas again. E.g. to `400`, `300`:
```
function setup() {
createCanvas(400, 300);
}
```
The rectangle scales with the canvas size, but our circle is no longer in center. We need to replace the numbers in `circle` with our variables.
When our canvas was 800 x 600, we placed the circle into middle by dividing the values in half: 800 / 2 = 400, 600/2 = 300.
We can do the same with variables `width` and `height`. We can divide them by `2`:
Whatever you can do with numbers - dividing, multiplying, adding, subtracting etc. - you can do with variables. Let's make sure the circle is always exactly ⅔ of height:
Now whenever you change canvas size in `createCanvas`, the circle will always be in center and will always be as large as ⅔ of height. Try changing canvas size and see that it's true.
## Exercises - Flags
When making the following exercises, try changing the canvas size from time to time, to make sure your code is working correctly and that the shapes you draw remain in their positions and are not shifted around the screen.
Do the exercises on your own. Open the solutions (hints) only if you can't move forward.
### Japan
Create flag with white background, red circle in the middle. The circle's size is 3/5 of the flag's height.
Note: 3/5 is the same as 60%. If you want to use 60% instead of 3/5, you can write `0.6*height`. Make sure you use decimal dot `.` and not comma `,`
Solution
```
function setup() {
createCanvas(600, 300);
noStroke();
}
function draw() {
background(255);
fill(255, 0, 0);
circle(width/2, height/2, 0.6*height);
}
```
### Monaco
Create flag with white background, red rectangle covering the upper half.
Solution
function setup() {
createCanvas(600, 300);
noStroke();
}
function draw() {
background(255);
fill(255, 0, 0);
rect(0, 0, width, height/2);
}
### Poland
Create a similar flag, but this time the red rectangle covers the bottom half.
Solution
function setup() {
createCanvas(600, 300);
noStroke();
}
function draw() {
background(255);
fill(255, 0, 0);
rect(0, height/2, width, height/2);
}
### Hungary
Create a flag on white background where the top third is red and bottom third is green.
Solution
```
function setup() {
createCanvas(600, 300);
noStroke();
}
function draw() {
background(255);
// Red stripe starts at 0,0 and is height/3 tall
fill(255, 0, 0);
rect(0, 0, width, height/3);
// Green stripe starts as 2/3 of height and is also height/3 tall
fill(0, 160, 0);
rect(0, 2/3*height, width, height/3);
}
```
### Italy
Do the same but vertically. Italy's flag has green stripe in left third and red stripe in right third.
Solution
```
function setup() {
createCanvas(600, 300);
noStroke();
}
function draw() {
background(255);
// Green starts at 0,0 and is width/3 wide
fill(0, 160, 0);
rect(0, 0, width/3, height);
// Red stripe starts as 2/3 of width and is also width/3 wide
fill(255, 0, 0);
rect(2/3*width, 0, width/3, height);
}
```
### Scotland
The flag of Scotland has blue background and two thick lines connecting opposing corners diagonally.
Solution
```
function setup() {
createCanvas(600, 300);
}
function draw() {
background(0, 94, 184);
// Thick white lines will be drawn
strokeWeight(0.1*width);
stroke(255);
// Line from top left corner (0,0) to bottom right corner (width,height)
line(0,0,width,height);
// Line from bottom left corner (0,height) to top right corner (width,0)
line(0,height,width,0);
}
```
### More flags
Try the following flags too. Look for the dimensions of the stripes, triangles and crosses ( 2/3, 3/5, etc.) online and use them precisely:
* Finland
* Czechoslovakia
* Switzerland
## Other useful variables
When we create our canvas using exact numbers, e.g. 600, 300, the created graphics will not cover the whole window:
That's because the size of our window is usually not the same as the numbers defined in `createCanvas`. There are, again, variables for that.
Instead of exact numbers, such as 600, 300 use variables `windowWidth` and `windowHeight` inside `createCanvas`:
```
function setup() {
createCanvas(windowWidth, windowHeight);
}
```
Now try changing the size of the browser window and run the sketch again. You must stop and run the sketch again, the size will not change immediately.
From now on, this will be our first change in every new sketch. Replacing number values inside `createCanvas` with variables `windowWidth` and `windowHeight`.
## Resizing the window dynamically
If you want the size to change immediately when you resize the window, there's a special formula for that. Add the following code and the end of your sketch:
```
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
```
Now you don't need to stop and run the sketch again, the size changes immediately when you resize your window.
