Интересное руководство по программированию для дизайнера - запустите свою картинку (часть первая): 16 шагов

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

Запустить! Запустить! Запустить!

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

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

Поскольку мы хотим создавать анимационную графику, мы должны знать, как создается анимация.

Картинка выше кажется довольно привлекательной и наглядно раскрывает принцип реализации анимации.

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

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

Шаг 1: переменная

Переменная - это контейнер для данных. Его можно многократно использовать в программе.

Например:

[cceN_cpp theme = "dawn"] size (500, 500); эллипс (100, 250, 50, 50); эллипс (200, 250, 50, 50); эллипс (300, 250, 50, 50); эллипс (400, 250, 50, 50);

[/cceN_cpp]

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

Вот код после добавления переменной:

[cceN_cpp theme = "dawn"] size (500, 500); int a = 50; эллипс (100, 250, а, а); эллипс (200, 250, а, а); эллипс (300, 250, а, а); эллипс (400, 250, а, а);

[/cceN_cpp]

Получаем абсолютно такой же результат!

Поскольку мы определили переменную a, мы можем удобно изменять параметры. Если мы изменим a = 50 на a = 100, тогда ширина и высота всех кругов станут равными 100 одинаково. Таким образом, нам не нужно менять параметры один за другим. Переменная - действительно хорошее изобретение.

Шаг 2: Создание переменной

Перед использованием переменной мы должны составить оператор и обозначить его тип данных.

int i;

i ＝ 50;

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

int i ＝ 50;

Имя переменной сравнительно свободно. Но иногда приходится на что-то обращать внимание.

Шаг 3. Регламент присвоения имен переменной

• Это должно быть сочетание алфавита и подчеркивания. Это может быть символ или слово.

• Деликатный случай. Имя и имя могут означать разные переменные.

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

• Нет таких ключевых слов, как int, float.

Ниже приведены некоторые неверные утверждения.

int $ a;

int 89b;

Вот правильные утверждения:

int r;

int super_24;

int openTheDoor;

Шаг 4: Тип переменной

За исключением объявления целочисленных данных, мы можем объявить десятичные данные (также называемые данными с плавающей запятой) с помощью ключевого слова float.

поплавок b = 0,5

Мы должны помнить, какой тип данных мы использовали для нашего оператора. Если мы использовали ключевое слово int, последнее присваивание не может записать i ＝ 0.5 или что-то в этом роде, иначе программа выдаст ошибку. Но если мы напишем обратное, все в порядке. Например, правильная грамматика - float i = 5, но программа распознает его как десятичное число.

Некоторые из переменных уже определены системой. Нам не нужно декларировать их самостоятельно. Как и ранее упомянутая «ширина, высота», она автоматически принимает ширину и высоту экрана компьютера. Такая высокая частота использования, что дизайнер прямо определяет ее как переменную по умолчанию, чтобы сделать ее более удобной для нас.

Шаг 5: Оператор

Следующие операторы обработки:

+ плюс

- минус

* умножить

делить

％ Модуль остатка

Вы должны быть знакомы со всеми этими операторами, кроме%. Это кажется довольно странным, потому что его результат - остаток. 9% 3 равно 0. А 9% 5 равно 4.

Операторы могут использоваться среди присваиваний и переменных.

[cceN_cpp theme = "рассвет"] int a = 1; // объявляем целочисленную переменную a, присвоение равно 1. int b = 2; // Объявление целочисленной переменной b, присвоение 2. int c; // Объявить целочисленную переменную c. с = а + Ь; // Плюс два присваивания и присваиваем результат c. печать (с); // Выходная переменная c.

[/cceN_cpp]

Шаг 6: Результат операции:

Результат вывода будет отображаться не в окне, а в консоли внизу.

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

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

Шаг 7: Регулирование работы

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

печать （6/5）; // результат 1

Операция между целыми числами будет иметь новое целое число. 6 разделить на 5 равно 1,2. Но результат вывода программы равен 1. Это противоречит нашей интуиции. Программа не будет обрабатывать округление, а удалит число после десятичной точки.

печать (6.0 / 5.0); // результат 1.2

Операция между числами с плавающей запятой приведет к получению нового числа с плавающей запятой. Если фактический результат равен 1,2, результат вывода программы будет таким же.

печать (6 / 5.0); // результат 1.2

печать (6.0 / 5); // результат 1.2

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

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

Шаг 8: Функция настройки и функция рисования

Ранее мы говорили о стопке базовых знаний. Наконец-то мы пришли поиграть во что-нибудь интересное. Настройка функций и рисование эквивалентны основным функциям обработки. Эти две функции очень особенные. Он может контролировать работу программы. Сравнительно сложная программа будет включать эти две функции, потому что они являются основным фреймом программы. Формат:

void setup () {

}

void draw () {

}

Специальное использование делает их формат вызова отличным от других функций. Мы должны добавить «void» перед именем функции, что означает отсутствие «возвращаемого значения». За именем функции мы должны добавить круглые скобки и фигурные скобки.

[cceN_cpp theme = "dawn"] установка void () {print (1); } void draw () {print (2); } [/cceN_cpp]

Давайте посмотрим на пример:

При нажатии кнопки управления консоль сначала выводит «1», а затем постоянно выводит «2», пока вы не нажмете кнопку остановки или не закроете окно.

Код в круглых скобках в функции настройки будет реализован только один раз, в то время как код в функции draw будет постоянно выполняться в обращении (реализация по умолчанию 60 раз в секунду).

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

Шаг 9: круг в горизонтальном движении

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

Эти детали мы должны определить сами. Вы должны указать программе, какая графика обязательно нужна каждому кадру.

Напишите в него следующий код (теперь давайте начнем делать это руками):

[cceN_cpp theme = "рассвет"] int x; int y; void setup () {size (300, 300); х = 0; у = высота / 2; } void draw () {background (234, 113, 107); noStroke (); эллипс (x, y, 50, 50); х = х + 1; }

[/cceN_cpp]

В этом разделе кода отображается движущийся круг. Ранее объявленные переменные x, y используются для хранения положения координаты. Его назначения выполняются в настройке функции. В функции draw используется следующий код клавиши:

х = х + 1

Не рассматривайте это как математическое уравнение, иначе это будет очень странно. Здесь «＝» обозначает присвоение. Он представляет собой размещение правильных чисел в левой переменной. Предположим, что x равно 50, после запуска кода правая часть «＝» будет равна 50 + 1, то есть 51. Окончательный результат будет присвоен переменной x. Таким образом, значение x становится 51.

Следуйте процедуре программы, каждый раз, когда функция draw работает один раз, значение x будет увеличиваться на 1. Таким образом, каждый раз, когда мы рисуем, круг будет перемещаться в пиксельном направлении горизонтально вправо по сравнению с предыдущим кадром. Таким образом, графика становится движущейся.

• Чтобы сделать код более читабельным, мы должны выделить определенное место перед каждой строкой кода в фигурных скобках. И он должен быть максимально выровнен. Нажимаем TAB или несколько пробелов, его можно вообще убрать.

• Символ пробела и разрыва строки в программе не влияет на программу. Так что ничего страшного, если мы наберем больше или меньше.

Вот еще один более простой способ выразить это. Чтобы переменный круг автоматически увеличивался на 1, мы должны записать его в следующем формате.

круг ＝ круг ＋1

Довольно неудобно! Если имя переменной длиннее, нам нужно ввести больше слов. Так что наши ленивые предшественники придумывают такую идею.

круг ＋＋

Разве это не очень просто? Это означает автоматическое увеличение на 1. Подобно этому, есть - -, что означает автоматическое уменьшение на 1.

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

круг + = 2

Это равно

круг = круг + 2

Аналогично есть - ＝, / =, * =.

Шаг 10: Направление движения

В каком направлении движется графика, зависит от того, как вы меняете координату. Если его изменить на y ＝ y ＋ 1, круг будет двигаться вниз. Если оба x и y увеличиваются на 1, круг переместится вниз в правый нижний угол. Если мы запишем это как минус, он будет двигаться в противоположном направлении.

[cceN_cpp theme = "рассвет"] int x, y; // Можно объявить несколько переменных одновременно, используйте запятую для разделения. void setup () {size (300, 300); х = 0; у = 0; } void draw () {background (234, 113, 107); noStroke (); эллипс (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Скорость движения

Помните значение по умолчанию 60 кадров в секунду в функции draw? В соответствии с этой скоростью круг выше будет перемещаться вправо на 60 пикселей в секунду.

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

х ＝ х ＋ 10

Он увеличил скорость в 10 раз по сравнению с оригиналом!

Другой способ - изменить частоту обновления холста. частота кадров()

Эта функция может изменять частоту трансляции холста. Запишите frameRate (10) в настройку функции, он изменит исходные 60 кадров в секунду на 10 кадров в секунду. Скорость снижена в 6 раз, чем раньше.

Шаг 11: пропущенный фон

Все предыдущие примеры записывают фон в функцию draw. Вы когда-нибудь думали записать это в настройку функций? Будет ли разница? Теперь давайте обновим пример горизонтального движения.

[cceN_cpp theme = "рассвет"] int x, y; void setup () {size (300, 300); фон (234, 113, 107); х = 0; у = высота / 2; } void draw () {noStroke (); эллипс (x, y, 50, 50); х + = 1; } [/cceN_cpp]

Что произошло? Может быть, он не может правильно понять причину производства проблемы. Удалите функцию noStroke, снова добавьте обводку и посмотрите путь движения круга.

Ой, это потому, что ранее созданный круг не был удален! Поскольку настройка функции выполняется только один раз, если мы напишем фон над ней, она заполнит фон только один раз, а затем больше не будет иметь никакого эффекта. Функциональный фон похож на инструмент «ведро с краской». После использования он будет охватывать все содержимое холста, а не устанавливать только цвет фона. Мы пишем его перед отрисовкой функции, чтобы прежний фрейм перекрывался каждый раз, когда мы создаем новый паттерн. Следовательно, круг может идти, как мы и ожидали. За исключением запоминания использования каждой функции, мы должны думать о положении кода. Много времени, восходящая или нисходящая линия для codea и запись ее в скобках или вне скобок, будут создавать совершенно разные эффекты. Направление кода двухмерное. Если появляется ошибка, мы должны откалибровать в этом двух измерениях.

• Этот неповторяющийся метод рисования может создать особый эффект при правильном использовании. Вы можете скопировать следующий код и попробовать.

[cceN_cpp theme = "dawn"] void setup () {size (400, 400); } void draw () {эллипс (ширина / 2-mouseX, высота / 2-mouseX, mouseY, mouseY); эллипс (ширина / 2-mouseX, высота / 2 + mouseX, mouseY, mouseY); эллипс (ширина / 2 + mouseX, высота / 2-mouseX, mouseY, mouseY); эллипс (ширина / 2 + mouseX, высота / 2 + mouseX, mouseY, mouseY); } [/cceN_cpp]

Здесь мы использовали волшебные переменные mouseX и mouseY. Позже мы поговорим об этом подробнее.

Шаг 12: встряхивая круг

Что, если я хочу, чтобы направление движения круга стало нерегулярным? С умной функцией random вы можете реализовать этот эффект. Случайная - это часто используемая функция. Его можно использовать для генерации случайной функции. Это похоже на дух без следа. Связавшись с переменными, вы не можете себе представить, что будет дальше.

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

случайный (высокий)

High представляет собой случайный верхний предел, а нижний предел по умолчанию равен 0. Например, random (10). Он произвольно выдаст число от 0 до 10 (0 включен, но 10 не включен).

случайный (низкий, высокий)

Если мы установим два параметра, то он вернется к случайному значению между ними, например, random (5, 10). Он произвольно выдаст число от 5 до 10 (5 включено, но не включено 10).

Пример:

[cceN_cpp theme = "dawn"] float x;

х = случайный (50, 100);

печать (х); [/cceN_cpp]

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

• Примечание: значения, созданные функцией random, относятся к типу с плавающей запятой (тип десятичного числа). Если мы хотим присвоить значение целочисленной переменной, мы должны преобразовать ее с помощью функции int (). Преобразования не соблюдают округление, а удаляют десятичную часть напрямую. Таким образом, вывод int (random (5)) имеет только 5 возможностей: 0, 1, 2, 3, 4.

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

[cceN_cpp theme = "рассвет"] int x, y; void setup () {size (300, 300); х = ширина / 2; у = высота / 2; } void draw () {background (234, 113, 107); noStroke (); х + = int (случайный (-5, 5)); y + = int (случайный (-5, 5)); эллипс (x, y, 50, 50); }

[/cceN_cpp]

Предыдущие добавленные значения координат фиксированы. Только если мы увеличим случайное значение, круг будет двигаться в неопределенном направлении. Чем больше случайный диапазон, тем чаще трясется. Поскольку изменение значений между кадрами скачкообразно, движение больше не будет плавным. В то время как первый кадр находится в (150, 150), последний кадр переместится в положение (170, 170) в пределах проблеска.

Шаг 13: перенос круга

Мигрирующий круг

Будет ли это плавное движение? Функциональный шум может нам помочь. У него лучший ритм, чем у стандартного рандома. И случайные числа генерируются непрерывно.

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

шум (t)

Функциональный шум не может определить свой выходной диапазон. Программа определяет, что она может генерировать только числа с плавающей запятой от 0 до 1, а фиксированный ввод может иметь только фиксированный вывод.

[cceN_cpp theme = "dawn"] float x = noise (5); float y = шум (5); печать (х, у); [/cceN_cpp]

Поскольку вышеуказанные входные параметры равны 5, поэтому выходные результаты одинаковы. Тогда как изменить результат? Ответ заключается в динамическом изменении входных параметров. Фактически мы можем рассматривать шум как безграничную голосовую дорожку, входные параметры как «настоящее время». Если ввод параметров является непрерывным, вывод также будет непрерывным.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (700, 100); х = 0; фон (0); } void draw () {x + = 1; y = шум (количество кадров / 100,0) * 100; noStroke (); эллипс (x, y, 2, 2); }

[/cceN_cpp]

В этом случае мы рисуем путь изменения Y, чтобы лучше понять функциональный шум.

• Среди них переменная frameCount получит текущий кадр. В отличие от ширины, высоты в предыдущем, он стабилен без каких-либо изменений. Кроме того, он начинает увеличиваться с 0. Если мы понимаем это по нашему начальному отображению анимированной графики, это показывает страницу, к которой мы перешли (а не понятие времени в программе).

• frameCount - целочисленная переменная. После деления на другую целочисленную переменную программа по умолчанию будет обрабатывать результат как целое число. Чтобы повысить точность результата, нам нужно изменить 100 на 100.0. Разделив на число с плавающей запятой, мы также получим число с плавающей запятой.

• Чтобы изменить ось Y с 0 на 100, мы должны умножить результат шума на 100. Таким образом, мы можем контролировать диапазон случайных значений.

Некоторые из вас, умеющие думать, могут спросить: «Почему мы должны делить frameCountby на 100? Разве нельзя писать frameCount напрямую?» Конечно вы можете! Но здесь, чтобы лучше отобразить характеристики шума функции, мы снизили «скорость вещания». В приведенном ниже примере показано изменение выходного значения при разной скорости изменения.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; void setup () {size (700, 500); х = 0; фон (0); } void draw () {x + = 1; y1 = шум (количество кадров) * 100; y2 = шум (frameCount / 10.0) * 100; y3 = шум (количество кадров / 100,0) * 100; y4 = шум (frameCount / 1000.0) * 100; y5 = шум (frameCount / 10000.0) * 100; noStroke (); эллипс (x, y1, 2, 2); эллипс (x, y2 + 100, 2, 2); эллипс (x, y3 + 200, 2, 2); эллипс (x, y4 + 300, 2, 2); эллипс (x, y5 + 400, 2, 2); инсульт (80); строка (0, 100, ширина, 100); строка (0, 200, ширина, 200); строка (0, 300, ширина, 300); строка (0, 400, ширина, 400); }

[/cceN_cpp]

Вы можете рассматривать изменяющиеся параметры внутри функционального шума как индикатор выполнения. Изменение параметра аналогично перемещению индикатора выполнения. Поэтому, когда изменяющийся объем этой «голосовой дорожки» больше, передние и задние непрерывные характеристики выходного значения будут слабее (мы можем представить, что произойдет, если мы транслируем музыкальное произведение или видео с 2-кратной скоростью 5. раз скорость, в 20 раз скорость). Когда область видимости больше определенного значения, тогда нет большой разницы в том, чтобы функционировать случайным образом при генерации значения.

Если вы сможете понять все приведенные выше примеры, вы почувствуете, что нет ничего проще, чем нарисовать мигрирующий круг. Вы тоже можете понять внутренние принципы.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (300, 300); х = 0; } void draw () {background (234, 113, 107); x = шум (количество кадров / 100,0 + 100) * 300; y = шум (количество кадров / 100,0) * 300; noStroke (); эллипс (x, y, 50, 50); }

[/cceN_cpp]

Теперь движение интереснее, как у вращающегося гироскопа.

• Причина, по которой переменная x внутри функционального шума должна быть плюс 100, состоит в том, чтобы разделить их на расстояние. Если параметры xy в пределах функции шума совпадают или довольно близки, изменение координаты x, y будет примерно таким же. Это сделано для того, чтобы движение стало более случайным.

Шаг 14: круг, перемещаемый мышью

Далее мы подошли к двум переменным, которые мне нравятся больше всего: mouseX и mouseY. При первом взгляде на два зачатия мои глаза заблестели. Потому что это наиболее прямой способ взаимодействия с графикой. С его помощью мы можем создать много интересных программ.

Дело довольно простое:

[cceN_cpp theme = "рассвет"] int x, y; void setup () {size (300, 300); х = 0; у = 0; } void draw () {background (234, 113, 107); noStroke (); x = mouseX; y = mouseY; эллипс (x, y, 50, 50); }

[/cceN_cpp]

mouseX может получить координату x мыши, а mouseY может получить координату y.

• Попробуем поменять положительный и отрицательный символ или поменять местами mouseX и mouseY.

Шаг 15: Конец

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

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

Эта статья написана дизайнером Вензи.

Шаг 16: относительные показания:

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

Интересное руководство по программированию для дизайнера - создайте свою первую программу обработки

Источник этой статьи:

Если вам нужна помощь, вы можете связаться с нами по адресу: [email protected].