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

 

Обратить внимание !!!

1. Тип данных указывается один раз при объявлении переменной так как каждый раз, когда вы указываете тип данных перед именем переменной, ваш компьютер думает, что вы объявляете новую переменную.
2. Нельзя использовать две переменные с одним именем в одной программе ,  поэтому в этом случае программа сообщит об ошибке:

 

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);  }

Итог: 

При помощи прямоугольника (а на самом деле при помощи любой заливаемой цветом фигуры) можно добиться интересных художественных эффектов