Взаимодействие с курсором.

Это лишь отрывок из нашего разговора об интерактивном программировании, приспособленный для облегченной подготовки субтитров и переводов. Удобнее смотреть наши познавательные разговоры здесь:
https://www.khanacademy.org/cs/programming/

Вы уже научились создавать переменные и использовать их.

Сейчас мы изучим две особые переменные: mouseX и mouseY.

В данном случае вам не придется создавать эти переменные самостоятельно, в общем-то, вам и не нужно, так как они уже есть.

Видите ли, программа устанавливает значения этих переменных без вашего ведома, закрепляя значение mouseX за y-положением вашего курсора, а значение mouseY - за y-положением вашего курсора.

Это позволяет с большой легкостью делать отличные интерактивные программки, основанные на положении пользовательского курсора.

Давайте взглянем на круг, который я здесь нарисовала.

Так, я всегда рисую его в точке 200,200.

Если я использую mouseX и mouseY, эти особые переменные, тогда я могу нарисовать его буквально в точке mouseX и mouseY.

И сейчас, если я повожу курсором по холсту, вы можете увидеть, что кружок постоянно появляется в месте, где находится мой курсор - так, что он повсюду следует за моим курсором.

Здорово!

Если вы планируете использовать mouseX и mouseY, убедитесь, что вы используете их внутри функции draw. Посмотрите, что произойдет, если мы уберем эти две строчки кода за пределы функции draw.

Видите?

Сейчас этот код запускается единожды, так что круг нарисован всего один раз, и нарисован он там, где мой курсор находился при самом старте программы.

Вот именно поэтому код должен быть прописан внутри функции draw, потому что функция draw - это такая функция, которая вызывается постоянно и непрерывно, пока наша программа работает.

Так что, когда эта функция вызывается, она обращает внимание на текущее значение mouseX и mouseY и затем рисует круг именно в этой точке.

Если вы задумаетесь об этом, это в действительности очень похоже на анимацию - она меняется с течением времени, просто немного по-другому.

Замечательно, теперь мы можем делать множество забавных вещей.

А что случится, если вместо рисования круга в позиции mouseX, mouseY, я нарисую его в той же позиции mouseX, но поменяю значение mouseY, скажем, на 300?

Теперь вы видите, что круг сопровождает курсор только по оси координат x, не замечая, что я делаю на оси координат y.

Хорошо, а если я нарисую его на в позиции mouseX, mouseY, вернув все на место, но избавлюсь от заднего плана, просто вынесу его в комментарии?

Вы только посмотрите! Я получила эту клевую кисточку. Здорово!

Или, или, я могу просто поменять местами эти переменные. Давайте вернем фон. Я поменяю переменные mouseX и mouseY местами, и увидим, что получится.

Теперь стало совсем уж странно. Курсор делает все, что я ему велю, строго наоборот.

Но это и здорово, вы могли бы придумать целую игру, где нужно нарисовать что-нибудь или сделать что-то, используя инверсное управление курсором.

Вот и все про mouseX и mouseY - довольно весело. Наслаждайтесь!