| источники:
https://dystosvita.gnomio.com/mod/page/view.php?id=2317
https://youtu.be/v1UyQSxbCLk
Игорь Криулин - Полуостров Бинария
Использование переменных и выражений
В среде Processing можно воспользоваться некоторыми системными переменными:
- width - ширина полотна
- height - высота полотна
- frameCount - количество обработанных кадров
- millis - количество миллисекунд от запуска проекта
- screen.width - ширина экрана
- screen.height - высота экрана
- key - последняя нажата клавиша
- keyPressed - нажата клавиша (True or False)
- mousePressed - нажата кнопка мыши (True or False)
- mouseButton - какая кнопка мыши нажата
Используя эти переменные, а также координаты положения мыши можно выполнять интерактивные построения.
dist - команда dist позволяет определить расстояние между двумя точками 
Например, команда
float green = dist (mouseX, mouseY, width / 2, height / 2);
записывает в переменную green действительного типа значение расстояния между положением мыши (mouseX, mouseY) и центром экрана (width / 2, height / 2).
|
Встроенная переменная mouseX содержит текущую координату X мыши в окне скетча. Она обновляется с каждым кадром.
Встроенная переменная mouseY содержит текущую координату Y мыши в окне скетча. Она обновляется с каждым кадром.
Встроенная переменная pmouseX содержит координату X мыши предыдущего кадра. Она обновляется с каждым кадром.
Встроенная переменная pmouseY содержит координату Y мыши предыдущего кадра. Она обновляется с каждым кадром.
|
|
void setup ()
{
size (400,400); // задает размер окна
background (255,0,0); // задает цвет заливки окна
strokeWeight (4); // задает толщину линии
stroke (0,255,0); // задает цвет линии
}
void draw ()
{
float green = dist (mouseX, mouseY, width / 2, height / 2);//переменной green присваиваем значение функции dist
/*дополнительная проверка в рамках процедуры выполнение построения по щелчкам мыши*/
if (mousePressed == true)
{
line (pmouseX, pmouseY, mouseX, mouseY); // рисования линии указателем мыши
}
// линии на экране приобретать оттенков зеленого, в зависимости от расстояния до центра экрана.
stroke (0, green, 0);
println(green); //выводим значение функции dist на консоль
}
|
 |
|
//глобальные переменные
int m = 10, s = 3;
void setup()
{
size(1200, 400); stroke(75, 0, 0); frameRate(30); background(0,0,0);
}
void draw()
{
if (mousePressed)
{ fill(0, 0, 0, 3);
stroke(75, 0, 0);
float r;
float d = m + 1.5 * dist(pmouseX , pmouseY, mouseX, mouseY);
d = d * 0.5 + random(d * 0.75);
r = 0.05 + random(d * 0.2);
fill(185 + random(70), 75 + random(50), 55 + random(25));
ellipse(mouseX, mouseY, d, d);
fill(255, 255, 255);
for (int i = 0; i < s; i++){ ellipse(mouseX + random(-d, d), mouseY + random(-d, d), r, r);
}
}
}
|
 |
map - команда map позволяет перевести данные из одной шкалы в другую.
Общее описание команды:
map (value, start1, stop1, start2, stop2) - Она преобразует диапазон значений переменной.Все вычисления скрыты в функции map().
- Первый параметр - переменная
- Второй и третий - минимальное и максимальное значение переменной,
- Четвертое и пятое - желаемое минимальное и максимальное значение переменной.
Например, у нас определенное значение находится в диапазоне от 0 до 100, а мы хотели бы перевести его в диапазон от 10 до 255.
Таким образом, 50 должен стать значением 130; а 100 - значением 255 следующей шкалы.
пример 1. Изменение оттенка красного цвета линии в зависимости от расстояния до краев экрана.
В переменную red требуется записать перевод значений координаты Х положения указателя мышки от 0 до 500 в в интервал значений от нуля до 255, это будет по сути составляющая красного цвета, которая зависит от того, насколько указатель отдалился от конечной границы.
|
void setup()
{
size(500,500);// задает размер окна
background(200,200,200);// задает цвет заливки окна
strokeWeight(7);// задает толщину линии
}
void draw()
{
/* (map (value, start1, stop1, start2, stop2) -переводить значение горизонтальной координаты положения мыши mouseX в пределы 0-255.*/
float red = map(mouseX, 0,width, 0,255); //переменной red присваиваем значение функции map
// линии на экране приобретать оттенков красного, в зависимости от расстояния до краев экрана.
stroke(red,0,0);
line(mouseX, mouseY,pmouseX,pmouseY);// рисования линии указателем мыши
println("red = ",red); //выводим значение функции map на консоль
}
|
 |
В результате команды stroke (red, 0,0); линии на экране приобретать оттенков красного, в зависимости от расстояния до краев экрана.
Фактически, так можно отобразить скорость движения мыши, скорость изменения ее координат.
пример 2 В этом примере координата X мыши (числа от 0 до 640) масштабируются до новых чисел, чтобы определить цвет и размер круга.
|
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(0);
// масштабируем значение mouseX от 0 до 640 до диапазона от 0 до 175
float c = map(mouseX, 0, width, 0, 175);
// масштабируем значение mouseX от 0 до 640 до диапазона от 40 до 300
float d = map(mouseX, 0, width, 40, 300);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
println("c= ", c, " d= ", d);
}
|
 |
пример 3. Если вы используете числа для рисования на экране, то у вас может появиться необходимость изменить диапазон значений какой-либо переменной.
|
вариант 1
void setup() {
size(240, 120);
strokeWeight(12);
smooth();
}
void draw() {
background(204);
stroke(255);
line(120, 60, mouseX, mouseY); // Белая линия
stroke(0);
float mx = mouseX/2 + 60;
line(120, 60, mx, mouseY); // Черная линия
}
|
вариант 2
void setup() {
size(240, 120);
strokeWeight(12);
smooth();
}
void draw() {
background(204);
stroke(255);
line(120, 60, mouseX, mouseY); // Белая линия
stroke(0);
float mx = map(mouseX, 0, width, 60, 180);
line(120, 60, mx, mouseY); // Черная линия
}
|
|
Функция map() делает код легко читаемым, поскольку минимальное и максимальное значения заданы явно в качестве входных параметров.
В приведенном примере диапазон mouseX от 0 до width преобразован в диапазон от 60 (когда mouseX = 0) до 180 (когда mouseX=width).
|
constrain - команда constrain позволяет указать границы значений для определенной переменной.
Например, команда
lineWidth = constrain (lineWidth, 0,5);
ограничивает значение толщины линии lineWidth в пределе от 0 до 5.
пример
Добавим команду constrain, которая позволяет указать границы значений для определенной переменной. Даже если в результате расчетов получим значение, превышающее пределы, переменная получит крайнее значение из указанных границ.
|
void setup()
{
size(500,500);
background(200,200,200);
strokeWeight(5);
}
void draw()
{
float green = dist(mouseX, mouseY,width/2, height/2);
float red = map(mouseX, 0,width, 0,255);
int lineWidth =mouseX;// переменной lineWidth присваивается значение встроенной переменной mouseX , которая в свою очередь содержит текущую координату x мыши в окне скетча и обновляется с каждым кадром.
lineWidth = constrain(lineWidth,0,10); // функция constrain ограничивает значение толщины линии lineWidth в границе от 0 до 10
strokeWeight(lineWidth); //устанавливается значение толщины линии
stroke(red,green,0); //устанавливается значение цвета линии
line(mouseX, mouseY,pmouseX,pmouseY);
println("constrain(lineWidth,0,10) = ", constrain(lineWidth,0,10));
}
|
 |
Задание
Создайте проект, в котором мячик отражается от границ окна, плавно изменяя цвет в процессе движения.
При щелчке мышкой мячик перемещается в центр экрана.
В зависимости от движения мышки мячик ускоряется в направлении указателя мыши
Логическая операция ИЛИ ( OR) обозначается |
Логическая операция И (AND) обозначается &
|
вариант 1
float r = 50, x, y, dx, dy;
void setup()
{
size(640, 480); smooth(); noStroke(); frameRate(25);
x = width / 2; y = height / 2; dx = -5; dy = 5;
}
void draw()
{
background(0, 0, 0);
x += dx; y += dy;
if ((x > (width - r)) || (x < r)) dx = - dx;
if ((y > (height - r)) || (y < r)) dy = - dy;
fill(255, 155, 0); ellipse(x, y, r * 2, r * 2);
fill(235, 115, 0); ellipse(x, y, r * 1.5, r * 1.5);
}
|
вариант 2
|
| |
