| https://www.youtube.com/watch?v=Tt3GeNfAymE&list=PLU24OxjGmbJsAomamaD1A64QIZiyz5var&index=4
Переменные. Объявление переменных
Переменные сохраняют свое значение в памяти и поэтому могут быть использованы в программе неоднократно. Переменная может использоваться в одной программе много раз и изменять свое значение во время выполнения программы.
Если проводить аналогию с внешним миром то переменные – как ящики, в которые мы можем положить определенное количество объектов.
Объявление переменных
Когда вы объявляете новую переменную, вы указываете:
1. имя -имя это то, как вы будете называть переменную;
2. тип данных - сообщение, какой вид информации будет храниться в памяти
Диапазон значений, которые может принимать переменная, определяются типом данных, например:
- тип данных integer хранит числа без дробной части (целые числа);
- в коде integer будет сокращено до int.
Существуют типы данных для хранения различных данных:
- целых чисел,
- чисел с плавающей точкой,
- символов,
- слов,
- изображений,
- шрифтов и так далее.
3. значение переменной - после указания имени и типа данных вы можете присвоить значение переменной.
В результате каждой переменной будет выделена область памяти для хранения информации.
Варианты присваивания значений переменной
1. int x; // Объявить переменную x типа int
|
Этот код делает то же самое, но короче:
int x = 12; // Объявить переменную x типа int и присвоить ей значение
|
2. x = 12; // Присвоить значение переменной x
|
Обратить внимание !!!
- Тип данных указывается один раз при объявлении переменной так как каждый раз, когда вы указываете тип данных перед именем переменной, ваш компьютер думает, что вы объявляете новую переменную.
- Нельзя использовать две переменные с одним именем в одной программе , поэтому в этом случае программа сообщит об ошибке:
int x; // Объявить переменную x типа int
int x = 12; // ОШИБКА! Нельзя использовать две переменные с именем x
|
Системные переменные Processing
В среде Processing можно воспользоваться некоторыми системными переменными:
1. width - ширина полотна
2. height - высота полотна
3. frameCount - количество обработанных кадров
4. frameRate контролирует скорость выполнения программы
5. millis - количество миллисекунд от запуска проекта
6. screenwidth - ширина экрана
7. screenheight - высота экрана
8. key - последняя нажата клавиша
9. keyPressed - нажата клавиша (True or False)
10. mousePressed - нажата кнопка мыши (True or False)
11. mouseButton - какая кнопка мыши нажата
12. mouseX содержит x-координату мыши
13. mouseY содержит y-координату мыши
Используя эти переменные, а также координаты положения мыши можно выполнять интерактивные построения
Правила формирования выражений.
Processing имеет набор правил, определяющих приоритет операторов, то есть какие операторы будут выполняться первыми, какие - вторыми, третьими, и так далее. Эти правила определяют порядок выполнения арифметических операций. Знание этих правил позволит вам понять, как работает, к примеру, эта строка кода:
int x = 4 + 4 * 5; // Присвоение переменной x значения 24
- выражение 4 * 5 вычисляется первым, поскольку умножение имеет высший приоритет.
- Затем, прибавление к произведению 4 дает 24.
- Наконец, поскольку оператор присвоения (знак равенства) имеет низший приоритет, число 24 присваивается переменной x.
Более наглядная запись содержит скобки, но имеет тот же результат:
int x = 4 + (4 * 5); // Присвоение значения 24 переменной x
Если вы хотите, чтобы сумма вычислялась первой, добавьте скобки. Так как выражение, заключенное в скобки имеет более высокий приоритет, чем умножение, порядок вычисления изменится, и это повлияет на результат:
int x = (4 + 4) * 5; // Присвоение значения 40 переменной x
Способы быстрой записи операций
Некоторые арифметические операции настолько часто используются в программировании, что были придуманы способы быстрой записи этих операций так как иногда бывает удобно нажимать на несколько клавиш меньше.
Например, вы можете складывать или вычитать из переменной с помощью всего одного оператора:
x += 10; // Выражение эквивалентно x = x + 10
y -= 15; // Выражение эквивалентно y = y - 15
Также часто возникает необходимость прибавлять или вычитать 1 из переменной, поэтому существуют операторы для быстрого выполнения этих действий. Это операторы: ++ и --
x++; // Выражение эквивалентно x = x + 1
y--; // Выражение эквивалентно y = y - 1
Типы данных. Порядок операций
Область видимости переменных
Правило видимости переменных гласит:
1. К переменной, объявленной внутри блока (код, заключенный в скобки { .... }, можно обратиться только из этого блока.
- это означает, что переменная, объявленная в блоке setup() работает только в блоке setup(),
- переменная, объявленная в блоке draw(), может использоваться только в блоке draw().
Переменную, работающую исключительно в пределах одного блока, мы называем локальной переменной.
2. Исключение составляют переменные, объявленные вне блока setup() и draw().
- эти переменные доступны для вызова как из draw(), так и из setup() (или из любой функции, которую вы создадите). Представьте область вне setup() и draw() как внешний блок кода.
- мы называем эти переменные глобальными переменными, они могут использоваться в любом месте программы.
Примеры,объясняющие эту концепцию.
Первый:
int i = 12; // Объявление глобальной переменной i равной 12
void setup() {
size(480, 320);
int i = 24; // Объявление локальной переменной i равной 24
println(i); // Вывод на консоль числа 24
}
void draw() {
println(i); // Вывод на консоль числа 12
}
|
Второй:
void setup() {
size(480, 320);
int i = 24; // Объявление локальной переменной i равной 24
}
void draw() {
println(i); // ОШИБКА! Переменная i является локальной в setup()
}
|
Символы
> (больше, чем), оператор
>= (больше или равно), оператор
// (двойной слеш) комментарии
< (меньше), оператор
<= (меньше или равно), оператор
!= (не равно), оператор
|
|| (оператор логическое ИЛИ)
&& (оператор логическое И)
% (оператор целочисленное деление)
== (равенство), оператор
# (хэш), символ
|
Пример использования системной переменной frameCount
источник: П. А. Орлов ПРОГРАММИРОВАНИЕ ДЛЯ ДИЗАЙНЕРОВ Учебное пособие
Системная переменная frameCount – хранит количество отработанных кадров (фреймов)
шаг 1. Рисуем крестик
void setup () {
size (300, 300);
smooth ();
strokeWeight (30);
stroke (100);
}
void draw () {
background (0);
line (100 ,100 , 200, 200);
line (200 ,100 , 100, 200);
/*- системная переменная frameCount –
хранит количество отработанных кадров (фреймов) */
println(frameCount);
}
|
|
шаг 2. Анимируем крестик
void setup () {
size (300, 300);
smooth ();
strokeWeight (30);
stroke (100);
}
void draw () {
frameRate(10); // ограничиваем количество кадров до 10 в секунду
background (0);
// line (100 ,100 , 200, 200);
line(frameCount ,100, 100+ frameCount , 200);
// line (200 ,100 , 100, 200);
line (100+ frameCount ,100, frameCount , 200);
}
|
Это движение происходит по двум причинам.
- мы используем переменную, которая постоянно растет на 1.
- вызов функции draw() происходит не один раз, а в цикле. Более того, функция draw() вызывается бесконечно, пока вы не выключите программу или компьютер.
|
Каждый раз, когда вызывается функция draw(), крестик отрисовывается с координатами при значении переменной frameCount = 1. Эта переменная и содержит номер текущего кадра, который отрисовывается на экране. И далее, как в классической мультипликации, мы рисуем следующий кадр. В следующем кадре мы заливаем холст черным и заново рисуем крестик при frameCount = 2.
Важно отметить, что при таком покадровом подходе к анимации,каждый следующий кадр ничего не знает о предыдущем. Когда мы с вами смотрим на анимацию крестика, то мы видим ОДИН крестик, который движется по экрану, а на самом деле этого ОДНОГО крестика нет. Каждый раз отрисовка происходит заново, программа перерисовывает экран новой картинкой
Для наглядности внесем некоторые корректировки в код проекта и запустим на выполнение.
void setup () {
size (400, 300); smooth ();
strokeWeight (30); stroke (100);
background (0);
}
void draw () {
// ограничиваем количество кадров до 1 в секунду
frameRate(1);
// background (0); - отменяем покадровую заливку окна
line(frameCount*100 ,100, 100+ frameCount*100 , 200);
line (100+ frameCount*100 ,100, frameCount*100 , 200);
}
|
|
Выполним отмену корректировок
шаг 3. Анимириуем крестик без заливки фона
void setup () {
size (300, 300);
smooth ();
strokeWeight (30);
background (0);
}
void draw () {
stroke (frameCount);
line(frameCount ,100, 100+ frameCount , 200);
line (100+ frameCount ,100, frameCount , 200);
}
|
|
С каждым новым кадром мы меняем цвет линии и не заливаем наш холст черной краской после предыдущего кадра. Мы как бы оставляем предыдущий мультипликационный кадр и рисуем прямо на нем
|
Задание . Измените кода проекта так, чтобы на холсте было отрисовано изображение, как на рисунке
Крестик должен двигаться по диагонали от левого верхнего угла в правый нижний угол.
Варианты решения
Вариант 1
void setup () {
size (300, 300);
smooth ();
strokeWeight (30);
background (0);
}
void draw () {
stroke (frameCount);
line(60+frameCount ,0+frameCount, 60+frameCount, 120+frameCount);
line (0+frameCount ,60+frameCount, 120+frameCount , 60+frameCount);
}
|
|
Вариант 2
void setup () {
size (300, 300);
smooth ();
strokeWeight (30);
background (0);
}
void draw () {
translate(0,0);
rotate(radians(45));
stroke (frameCount);
line(frameCount ,-50, 100+ frameCount , 50);
line (100+ frameCount ,-50, frameCount , 50);
}
|
|
Итог:
При помощи прямоугольника (а на самом деле при помощи любой заливаемой цветом фигуры) можно добиться интересных художественных эффектов
| |