> 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/02b-variables-drawing-with-mouse.md).
# 02b - Variables: Drawing with mouse
The variables for the size of our drawing area - `windowWidth` and `windowHeight` or `width` and `height` - are maintained by the computer. The computer makes sure there are correct numbers stored inside these boxes in computer memory.
Whenever we use a variable in our code, the computer runs to the storage room, looks inside the box of the same label, takes the number stored in the boxes, and uses the number in the code.
## Where is my mouse?
There are other variables maintained by the computer and among the most useful are the variables storing the current position of mouse: `mouseX` and `mouseY`. Let's use them in code:
```
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
circle(mouseX, mouseY, 50);
}
```
We have a circle drawn at the position of the mouse. Our first interactive sketch!
The variables `mouseX` and `mouseY` specify the horizontal and vertical coordinates of the mouse.
We can use them as any number in any command. This draws a rectangle that starts at the top left corner of the screen and its width and height is set to the position of the mouse:
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
rect(0,0, mouseX, mouseY);
}
## Exercises
### 1. Diagonals
Draw 4 lines starting in the mouse position and ending in each corner of the screen. (Hint: Remember the flag of Scotland from previous exercises?)
Solution
```
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
line(mouseX, mouseY, 0, 0);
line(mouseX, mouseY, width, 0);
line(mouseX, mouseY, 0, height);
line(mouseX, mouseY, width, height);
}
```
### 2. Horizontal line
Draw a horizontal line across the screen which matches mouse position. If mouse position is `mouseX`,`mouseY`, what is the position of the left point of the horizontal line? And what is the position of the right point of the horizontal line?
Solution
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
background(0);
line(0, mouseY, width, mouseY);
}
### 3. Cross
Draw both horizontal and vertical line crossing the mouse position
Solution
## Drawing with mouse
These moving objects are a result of the following operations done by computer:
* erase background to black
* draw the object at mouse position
* go back to begginning of `draw()`
* erase background to black
* draw the object at (now a slightly different) mouse position
* go back to begginning of `draw()`
* .... and on and on and on ....
The animating effects comes from constantly erasing the background and drawing an object to a new, slightly different, position. But what if we didn't erase the background at all?
The objects drawn before will remain on screen. Let's try the circle sketch but without the `background` command:
```
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
}
function draw() {
// background(0);
circle(mouseX, mouseY, 50);
}
```
{% hint style="info" %}
The `//` in front of `background(0)` has disabled the command. This is a good way to disable something without having to delete the command. Deleting the whole line will work too, but this way we have an option the bring the command back to life by removing the `//`.
{% endhint %}
Now we can draw as painters! But we lost the black background :cry:
To bring the background back, while still being able to draw without erasing the background, we need to move the background command from `draw` to `setup`. Make sure you remove the comment slashes `//` after you move it:
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0);
noFill();
background(0);
}
function draw() {
circle(mouseX, mouseY, 50);
}
Now we have full control of both the background color and the drawing colors.
## Transparency
Cool visual effect is created when we don't draw with full colors but add some amount of transparency to the color. The stroke defined in our sketch uses 3 components: red (0), green (255) and blue (0):
```
stroke(0,255,0);
```
We can add a 4th component to it. This is called opacity or alpha. A full opacity is what we see now. But if use half opacity (255 / 2 = 122) the lines will become only partially visible:
```
stroke(0,255,0, 122);
```
This creates visually pleasing effect of smoother gradients and accumulation of color in places that are more occupied.
## Exercises
### 4. Diagonals with transparency
Use the diagonals exercise from a while ago. Change it to employ transparency and draw a nice image with it. Experiment with different values of alpha in `stroke`.
Solution
```
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0, 50);
noFill();
background(0);
}
function draw() {
line(mouseX, mouseY, 0, 0);
line(mouseX, mouseY, width, 0);
line(mouseX, mouseY, 0, height);
line(mouseX, mouseY, width, height);
}
```
### 5. Star shaped flower
Draw semi-transparent lines from center to mouse position.
Solution
```
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0,255,0, 50);
noFill();
background(0);
}
function draw() {
line(width/2, height/2, mouseX, mouseY);
}
```
