Интересное руководство по программированию для дизайнера - Управление процессом программы - Заявление цикла: 8 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:54

Управление программным процессом - оператор цикла

Из этой главы вы познакомитесь с важным и мощным утверждением Point-Loop для знаний.

Перед чтением этой главы, если вы хотите нарисовать в программе 10 000 кругов, вы можете сделать только ужасный метод. То есть написать 10 000 строк кода эллипса. Те ленивые разработчики кода, которые хотят повысить эффективность во что бы то ни стало, определенно не допустили бы этого. Итак, оператор цикла создан. С этим утверждением вы можете интуитивно почувствовать мощь компьютерной автоматизации.

Шаг 1. Для цикла

Существует множество операторов цикла, среди которых наиболее широко используется For Loop. Все мы знаем, что функция draw постоянно работает в обращении. Начните с первого предложения в начале, оно будет выполняться сверху вниз до последнего предложения. После завершения операции она начнется снова с первого предложения. Оператор For немного похож на функцию draw. Код внутри оператора for может выполняться повторно.

Вот его грамматическая структура:

For (выражение 1; выражение 2; выражение 3) {

Тело петли

}

Очевидно, что предложения в теле цикла - это то, что мы ожидали, что они будут реализованы неоднократно. Выражение 1 используется для инициализации и присвоения первого значения переменной цикла. Выражение 2 предназначено для условия цикла. Выражение 3 обновит значение переменной цикла.

Что такое переменная цикла? Фактически это эквивалент локальной переменной. Давайте посмотрим на полное письмо.

for (int i = 0; i <10; i ++) {

Тело петли

}

Чтобы реализовать функцию цикла, оператор for в основном полагается на локальную переменную, которая будет использоваться при завершении цикла. Локальная переменная в приведенном выше примере - i. Выражение 1 завершило инициализацию локальной переменной. Позже, каждый раз, когда цикл срабатывает один раз, эту переменную необходимо обновить. В приведенном выше примере i ++ в выражении 3 используется для реализации функции обновления. Благодаря этому переменная будет увеличиваться на 1 каждый раз при обновлении. В конце концов, код внутри тела цикла не может повторяться бесконечно, иначе последние операторы не могут быть выполнены. Таким образом, нам нужно терминальное условие. Экспресс 2 как раз для этого. Здесь программа определит, меньше ли i 10. Если это так, продолжайте работу. Если нет, то выпрыгивайте из цикла.

Следовательно, последовательность операций оператора for такая же.

Выражение 1 (инициализация локальной переменной)

Выражение 2 (удовлетворено, затем продолжайте работу)

Петлевое тело (первая циркуляция)

Выражение 3 (Обновление)

Выражение 2 (удовлетворено, затем продолжайте работу)

Тело петли (второй круг)

Выражение 3 (Обновление)

Выражение 2 (удовлетворено, затем продолжайте работу)

Петлевое тело (Третья циркуляция)…

Выражение 3 (Обновление)

Выражение 2 (Неудовлетворительно, затем выпрыгиваем из цикла)

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

Пример кода (5-1): void setup () {

for (int i = 0; i <10; i ++) {

println ("запустить");

}

}

Вы можете подсчитать количество запусков в консоли. Здесь ровно 10. Это говорит о том, сколько раз код в теле цикла был выполнен. Однако мы до сих пор не можем определить, какие изменения действительно произошли в цикле. Итак, мы можем попробовать заменить символ "run на переменную" i "и посмотреть, что будет.

Пример кода (5-2): void setup () {

for (int i = 0; i <10; i ++) {

println (я);

}

}

Теперь мы видим, что значение i в теле цикла непрерывно увеличивается. Позже мы можем использовать это значение, чтобы понять текущий процесс цикла.

В примере кода (5-2) значение i изменяется с 0 на 9. По сравнению с фактическим временем цикла, кажется, всегда на 1 меньше. Если вы не привыкли к этому, выражение в скобках оператора for можно записать в следующем виде:

для (int i = 1; i <＝ 10; i ++)

Таким образом, i справедливо соответствует временам цикла. Значение «<＝» меньше и равно. Таким образом, когда я равен 10, он все равно будет соответствовать условию. Следовательно, он будет работать еще раз по сравнению с записью в i <10. Хотя он начинается с 1, время цикла по-прежнему равно 10. Конечно, если ничего особенного не требуется, я хотел бы предложить вам использовать метод записи в пример в начале. Позже мы познакомим вас с вектором или массивом, оба из которых получают свой элемент по его нижнему индексу. И все индексы по умолчанию начинаются с 0. Определение начального значения равным 0 является сравнительно распространенной практикой.

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

Локальные переменные в операторе for могут не только объявлять пластиковые типы, но также объявлять переменные в типах с плавающей запятой. Например, это можно записать как (float i = 0; i <10; i + = 0,02).

Шаг 2. Использование цикла for для решения математических задач

Вы все еще помните историю детства математика Гаусса? На тот момент Гуасу было 10 лет. Его учитель хотел дать задание в классе, и вопрос был

1＋2＋3＋4……＋97＋98＋99+100＝？

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

Мы, возможно, еще не помним, что такое суммирование арифметической последовательности, но мы можем получить ответ примитивным и жестоким способом. И это для цикла. Поскольку для компьютеров это всего лишь небольшой кусок пирога, мы должны описать вопрос на языке, который распознается компьютером, и тогда мы сможем легко получить ответ.

Пример кода (5-3):

void setup () {

int answer = 0;

for (int i = 1; i <= 100; i ++) {

ответ + = я;

}

println (ответ);

}

Я считаю, что результат, который вы получите, совпадает с ответом, который сообщил Гуасс: это 5050!

Советы: Имя локальных переменных в цикле for может быть изменено по желанию при условии, что оно соответствует правилам именования переменных. Вы можете записать это как (int k = 1; k <= 100; k ++). Если никаких особых условий не произошло, в качестве имени переменной по умолчанию используется i.

Шаг 3: для рисования петель

После серии кажущихся скучными постельных принадлежностей, наконец, мы можем перейти к более интересному разделу. То есть использовать цикл for для рисования изображений. Теперь мы можем отложить эти утомительные математические вычисления. Мы, дизайнеры, более чувствительны к графике.

Использование цикла For для рисования массива кругов

Когда мы хотим использовать цикл for для представления группы повторяющихся элементов, мы должны заранее убедиться в числовом соотношении этих элементов, тогда мы можем использовать цикл for, чтобы удобно реализовать его, вместо того, чтобы выполнять массовую повторяющуюся работу. Предположим, мы хотим нарисовать ряд кругов, равномерно распределенных по горизонтали. Его виртуальная координата не изменяется, а его горизонтальная координата изменяется. Причем слева направо горизонтальная координата постоянно увеличивается и расстояние увеличивается одинаково. На данный момент мы можем использовать i в цикле for, чтобы получить горизонтальную координату каждого круга.

Пример кода (5-4): void setup () {

размер (700, 700);

фон (83, 51, 194);

noStroke ();

}

void draw () {

for (int i = 0; i <7; i ++) {

эллипс (50.0 + i * 100.0, высота / 2.0, 80.0, 80.0);

}

}

50 обозначает начальную позицию первого круга слева. 100 in i * 100 представляет увеличивающееся расстояние.

Шаг 4: Используйте цикл для рисования случайной круглой точки

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

Пример кода (5-5):

void setup () {

размер (700, 700);

фон (0);

noStroke ();

}

void draw () {

фон (0);

for (int i = 0; i <10; i ++) {

float randomWidth = random (60,0);

эллипс (случайный (ширина), случайный (высота), randomWidth, randomWidth);

}

}

Здесь причина, по которой положение круга постоянно мигает, заключается в том, что каждый раз, когда функция random срабатывает один раз, результат является случайным. Поскольку функция draw по умолчанию запускает 60 кадров в секунду, каждые 10 кругов, нарисованных за секунду, будут менять свое положение 60 раз. Эта быстрая вспышка делает изображение более чем 10 кругов. Изменение простого значения в программе принесет вам совершенно другой эффект. Мы можем изменить время цикла, изменив конечное условие. Конечное состояние на рисунке ниже - i <100

1. Вот эффект, когда конечное условие i <1000:
2. Случайное зерно
3. Если я не хочу, чтобы положение круга генерировалось случайным образом, а также его вспышка, что я могу сделать? Один из способов - создать и сохранить независимые переменные для каждого круга и инициализировать эти переменные в настройке. Присвойте этим переменным случайное значение. Таким образом, при использовании функции рисования в draw мы вызываем значение, хранящееся в переменных. Это никогда не изменится. Чтобы нарисовать 10 кругов, мы можем просто использовать этот метод. Но что, если мы хотим нарисовать 1000 кругов или 10 000 кругов? Будет довольно сложно использовать этот традиционный метод для создания этих переменных и присвоить им имя. Нам не нужно изучать новый метод построения переменных. Вот гибкий метод, который поможет нам достичь этой цели. То есть использовать randomSeed. Теперь давайте посмотрим на его эффект после использования. Пример кода (5-6): [cceN_cpp theme = "dawn"] void setup () {size (700, 700); background (0); noStroke ();}

4. void draw () {

   фон (0);

   randomSeed (1);

   for (int i = 0; i <10; i ++) {

   float randomWidth = random (20,0, 60,0);

   эллипс (случайный (ширина), случайный (высота), randomWidth, randomWidth);

   }

   } [/cceN_cpp]

   По сравнению с предыдущим кодом, в нем нет никаких изменений, кроме изменения диапазона радиуса круга от 10 до более 30 с помощью только предложения ofSeedRandom. После добавления этого предложения изображение кажется статичным.

   Формат вызова:

   randomSeed (а);

   Среди этого формата значение параметра - seed. Вы должны заполнить его целым числом (напишите значение точки плавучести в P5, он не ошибется, но будет рассматривать его как целое число). Функция randomSeed - установить начальное значение для случайного значения. Затем он будет генерировать разные случайные массивы в соответствии с разными семенами. После этого мы вызываем функцию random, чтобы результат возврата был определен. Здесь определенное не для результата - это определенное значение, а для сгенерированного массива. То есть результат возврата определен относительно времени вызова.

   Пример кода (5-7): [cceN_cpp theme = "dawn"] void setup () {

   randomSeed (0);

   for (int i = 0; i <5; i ++) {

   println (случайный (10));

   }

   } [/cceN_cpp]

   Теперь мы продолжим использовать println для проведения эксперимента. После использования randomSeed каждый раз, когда вы закрываете программу и перезапускаете ее, она будет возвращаться к строке с тем же результатом. Значение будет соответствовать последовательности один за другим. Если вы удалите его, то каждый раз он будет возвращаться к другому значению. Зачем нужна эта настройка? Это потому, что само случайное значение в программе является псевдослучайным. Результат кажется случайным, но на самом деле он создается фиксированным и повторяемым методом вычисления. Это эквивалентно назначению примитивного значения для randomSeed, тогда следующий результат будет вычислен в соответствии с этим начальным значением. Однако, если мы не назначим начальное число, программа по умолчанию будет использовать текущее время системы для создания начального числа. Поэтому результат каждой операции разный. Пример ниже может помочь вам лучше понять randomSeed.

   Пример кода (5-8): [cceN_cpp theme = "dawn"] void setup () {

   размер (700, 700);

   фон (0);

   noStroke ();

   }

   void draw () {

   randomSeed (1);

   for (int i = 0; i <10; i ++) {

   float randomWidth01 = random (10, 60);

   эллипс (случайный (ширина), случайный (высота), randomWidth01, randomWidth01);

   println (randomWidth01);

   }

   randomSeed (1);

   for (int i = 0; i <10; i ++) {

   float randomWidth02 = random (10, 60);

   эллипс (случайный (ширина), случайный (высота), randomWidth02, randomWidth02);

   println (randomWidth02);

   }

   } [/cceN_cpp]

   Попробуйте изменить второй randomSeed (1) на randomSeed (0) и сравните окончательные результаты.

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

Шаг 5: Используйте цикл для рисования линии

После того, как мы освоили использование randomSeed, мы можем попробовать изменить функцию рисования. Например, измените рисунок круга на рисунок линии. Только если мы разработаем некоторые изменяющиеся правила до конца линии, мы сможем использовать множество линий, переплетенных, чтобы создать уникальный узор.

Пример кода (5-9):

[cceN_cpp theme = "dawn"] void setup () {

размер (700, 700);

фон (0);

}

void draw () {

randomSeed (0);

for (int i = 0; i <2000; i ++) {

float x1 = ширина / 2,0;

float x2 = random (50.0, 650.0);

ход (255, 20);

линия (x1, 50, x2, 650);

}

} [/cceN_cpp]

Создать простую кисть

Снова вернемся к циклу for. Приведенные выше примеры не являются интерактивными. Если мы хотим сделать результат более интересным, мы не можем забыть объединить mouseX и mouseY в наш код.

Пример кода (5-10):

[cceN_cpp theme = "dawn"] void setup () {

размер (700, 700);

фон (255);

noStroke ();

}

void draw () {

for (int i = 0; i <1000; i ++) {

заполнить (0, 30);

float x = mouseX + random (-50, 50);

float y = mouseY + random (-50, 50);

эллипс (x, y, 2, 2);

}

} [/cceN_cpp]

Создается кисть «точки рассеивания». Поскольку каждая интенсивная мини-круглая точка основана на положении мыши, она может перемещаться в ограниченных направлениях из четырех направлений: влево, вправо, вверх и вниз. Таким образом, окончательная форма кисти похожа на квадрат.

Пример кода (5-11):

[cceN_cpp theme = "dawn"] void setup () {

размер (700, 700);

фон (255);

noStroke ();

}

void draw () {

for (int i = 0; i <1000; i ++) {

коэффициент поплавка = mouseX / (плавающая) ширина;

float x = mouseX + random (-50, 50);

float y = mouseY + random (-50, 50);

fill (0, коэффициент * 255, 255 * (1 - коэффициент), 30);

эллипс (x, y, 2, 2);

}

}

[/cceN_cpp]

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

Шаг 6: для вложенного цикла

Цикл For может быть вложенным. Вы можете снова написать цикл for в цикл for. Когда вам нужно нарисовать двухмерную матрицу, вы можете выбрать этот метод.

Пример кода (5-12):

[cceN_cpp theme = "dawn"] void setup () {

размер (700, 700, P2D);

фон (202, 240, 107);

}

void draw () {

заполнить (0);

for (int i = 0; i <5; i ++) {

for (int j = 0; j <5; j ++) {

float x = 150 + i * 100;

float y = 150 + j * 100;

эллипс (x, y, 60, 60);

println (я + ":" + j);

}

}

}

[/cceN_cpp]

Чтобы использовать вложенный цикл в первый раз, вы должны выяснить его логические отношения. Реализация кода в программе всегда сверху вниз. Следовательно, первый реализованный цикл определенно является крайним. Каждый раз, когда внешний цикл срабатывает один раз, внутренний цикл будет работать непрерывно до тех пор, пока он не перестанет удовлетворять условию. После этого начнется вторая операция внешнего цикла. После запуска второй операции внутренний цикл будет продолжаться до тех пор, пока он не сможет удовлетворить условие. Такое повторение он делает до тех пор, пока все условия не могут быть выполнены, и он не выскакивает из цикла.

В приведенном выше коде тело цикла во внешнем цикле сработало всего 5 раз, а тело цикла во внутреннем цикле сработало 25 раз. В пределах 25 раз, в зависимости от разницы значений i, j, мы можем обеспечить горизонтальную и вертикальную координаты круга отдельно. Я встроил раздел печати, вы можете наблюдать за выводом данных и думать о его изменении. Только с двумя вложенными циклами мы можем испытать все комбинации данных i, j.

подсказки

Ибо цикл во втором слое обычно уплотняют табуляцией в начале. Это может сделать структуру кода более понятной. Вы должны называть локальные переменные на двух уровнях цикла for разными именами. Среди них наиболее часто используются «i», «j», «k».

Гибкое использование "i", "j"

Два имени переменных «i», «j» представляют локальные переменные двух уровней цикла for. Приведенный ниже пример углубит ваше понимание «i» «j». В зависимости от различных значений «i», «j» мы можем вводить параметры для группировки элементов.

Пример кода (5-13): [cceN_cpp theme = "dawn"] void setup () {

размер (700, 700);

фон (0);

noStroke ();

}

void draw () {

фон (0);

заполнить (250, 233, 77);

for (int i = 0; i <7; i ++) {

for (int j = 0; j <7; j ++) {

pushMatrix ();

перевести (50 + i * 100, 50 + j * 100);

// Установка 1

// угол с плавающей запятой = sin (millis () / 1000.0) * PI / 2;

// Установка 2

// коэффициент плавления = i / 7.0;

// угол с плавающей запятой = sin (millis () / 1000.0 + ratio * (PI / 2)) * PI / 2;

// Установка 3

коэффициент плавучести = (i * 7 + j) /49.0;

угол поплавка = sin (миллис () / 1000.0 + соотношение * (PI / 2)) * PI / 2;

повернуть (угол);

rectMode (ЦЕНТР);

// Рисуем картинку 1

rect (0, 0, 80, 80);

// Рисуем картинку 2

// rect (0, 0, 100, 20);

// Рисуем картинку 3

// rect (0, 0, ratio * 50);

popMatrix ();

}

}

} [/cceN_cpp]

Код Пояснение

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

millis () получает время от начала программы до настоящего момента. Единица - мс. Это значение будет влиять на скорость изменения выходного значения sin. Если мы напишем миллис напрямую, масштаб изменения будет слишком большим. Таким образом, мы должны разделить его на 1000.0.

В этом разделе кода мы используем символ комментария «//», чтобы скрыть некоторые настройки. Вы можете сдвигать эффекты запуском или закрытием. Например, если мы начинаем предложения после «Настройка 3», мы должны использовать символ комментария, чтобы закрыть блоки кода после «Настройка 1» и «Настройка 2». Что касается примеров подобной структуры программы с разными локальными переменными, мы можем писать в этом формате. Таким образом, нам не нужно отдельно хранить несколько инженерных документов. Мы можем часто использовать этот навык во время практики и создания и сохранить некоторые удовлетворительные настройки параметров.

Среди них влияние значения i, j на программу в основном представлено смещением «Настройка 1 (Настройка 2) (Настройка 3)». Вы можете сравнить полученные результаты ниже.

Нарисуйте рисунок 1: Настройка 1

Нарисуйте рисунок 1: Настройка 2

Нарисуйте рисунок 1: Настройка 3

Нарисуйте рисунок 2: Настройка 1

Нарисуйте рисунок 2: Настройка 2

Нарисуйте рисунок 2: Настройка 3

В настройке 1 мы не использовали i и j, чтобы влиять на угол поворота каждого элемента. Таким образом, мы можем видеть, что движение каждого элемента одинаково. В настройке 2 мы использовали значение i, а также i и j в настройке 3. Наконец, они повлияли на ввод параметров функции sin through ratio. Это изменило периодическую смену угла. Поскольку фактический эффект настройки 2 и настройки 3 не так очевиден в анимированной графике, мы можем наблюдать это на следующем снимке экрана.

Нарисуйте изображение 2 (слева: настройка 2; справа: настройка 3)

Нарисуйте рисунок 3 (слева: настройка 2; справа: настройка 3)

На первом рисунке соотношение используется для изменения угла поворота квадрата. Вторая картинка предназначена для непосредственного управления радиусом круга. Мы видим, что он использовал предложение я ценю:

коэффициент плавучести = i / 7.0;

Последовательное изменение элемента прицела. Поскольку горизонтальная координата для управления изображением зависит только от значения i, шаблоны с одинаковой горизонтальной координатой будут одинаковыми. И значение соотношения, угла поворота и радиуса круга тоже такое же.

В то же время мы используем предложение i, j:

коэффициент плавучести = (i * 7 + j) /49.0;

Он может описать «градиент». Здесь, с помощью метода умножения коэффициента, он объединил влияние строк и столбцов. Итак, каждый элемент отличается.

Шаг 7. Пока цикл

Есть брат для цикла for. Это цикл while. Что умеет цикл for, а цикл - тоже. Но частота использования цикла while в creativeCoding не такая высокая, как у цикла for.

Пример кода (5-14): [cceN_cpp theme = "dawn"] void setup () {

int a = 0;

while (a <10) {

println (а);

а ++;

}

} [/cceN_cpp]

Грамматическую структуру while легче понять, чем for. Мы можем создавать переменные перед оператором while. Затем введите выражение в квадратной скобке. Когда он будет удовлетворен, оперируйте предложениями в теле цикла. Наконец, мы помещаем выражение в тело цикла для обновления переменных, а затем цикл завершается. Что касается гарантированного времени цикла, мы часто используем цикл for. Что касается неопределенного значения переменной, мы рекомендуем использовать цикл while.

Считать:

Попробуйте использовать всевозможные базовые элементы для замены элементов рисования в цикле for для создания различных кистей.

В сочетании с тригонометрической функцией, упомянутой в предыдущей главе, попробуйте переделать кисть «точки рассеивания» в кисть круглой формы.

Попробуйте создать двумерную матрицу только с циклом for.

Предварительный просмотр следующей главы По мере того, как в этом курсе вы найдете все новые знания, которые вы изучаете, возможность игры сразу же значительно возрастет. Программа представляет собой ящик пандоры. Все, что вы можете вообразить, оно может сделать за вас. Так что у нас нет причин не изучать этот язык, на котором можно общаться с компьютерами. В нашей следующей главе мы познакомим вас с еще одним оператором управления процессом if. Он может контролировать поток процесса и генерировать более сложные и изменчивые результаты. С помощью оператора if вы можете с легкостью создавать свои собственные текстовые приключенческие игры! Эта статья написана дизайнером Вензи. Относительная литература: Интересное руководство по программированию для дизайнера - обработка начального касания Интересное руководство по программированию для дизайнера - создание вашей первой программы обработкиИнтересное руководство по программированию для дизайнера –Загрузите свою картинку (часть первая). Интересное руководство по программированию для дизайнера –– Получите свое изображение. (Часть вторая)

Шаг 8: Источник

Эта статья взята с сайта:

Если у вас есть какие-либо вопросы, вы можете связаться с ： [email protected].