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

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

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

Шаг 1: движение и функции

Позвольте показать вам несколько неизвестных картинок, чтобы пробудить ваш вкус.

Что это? Теперь просто оставьте этот вопрос первым, а потом вы будете знать и использовать его.

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

Сколько функций вы можете распознать на фотографиях выше? Как они связаны с движением? Теперь давайте возьмем из нее квадратичную функцию, случайным образом добавим несколько параметров и посмотрим, что будет. Например, y = x² / 100.

Так выглядит изображение функции. Скопируйте приведенный ниже код.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (300, 300); фон (0); х = 0; } void draw () {штрих (255); strokeWeight (2); у = pow (x, 2) / 100,0; // Функция pow вернется к n-й степени номера обозначения. (x, 2) представляет собой квадрат x. Первый параметр - это базовое число, а второй - индекс. точка (х, у); x ++; } [/cceN_cpp]

Эффект бега

Затем выберите функцию sin. Формула: y = 150 + sin (x).

Скопируйте следующий код.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (300, 300); фон (0); х = 0; } void draw () {y = высота / 2 + sin (радианы (x)) * 150; // Функция радиан преобразует x в угол. x ++; ход (255); strokeWeight (2); точка (х, у); } [/cceN_cpp]

Эффект бега

Это изображение, которое мы получаем после работы с кодом. И это их следы движения. По сравнению с предыдущим результат очевиден. Изображение функции фактически соответствует треку движения! Это достаточно просто. Вам просто нужно заменить значение x, y на координату. Первый трек, который мы нарисовали, эквивалентен графику функции y = x² / 100. В то время как последний трек равен графику функции y = 150 + sin (x). Но в программе направление оси y противоположное. Таким образом, по сравнению с исходным изображением, дорожка будет перевернута. Теперь, я думаю, у вас должно быть ощущение, что некоторые сложные вопросы, которые долгое время преследовали вас в голове, сразу же решаются. Удивительно, что эти фантастические функции, которые мы узнали раньше, можно использовать для управления движением графики!

Шаг 2: написать функцию

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

Поэтому приведенная ниже формула в программе должна быть записана так:

y = x² → y = pow (x, 2) или y = sq (x)

y = x³ → y = pow (x, 3)

у = хⁿ → у = pow (х, п)

y = 4ⁿ → y = pow (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

у = √5 → у = sqrt (5)

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

Тригонометрическая функция

Теперь давайте пойдем дальше и познакомимся с некоторыми описаниями тригонометрических функций.

Обращаем внимание, что в программе ввод параметра функции относительно угла принимает радианы. Таким образом, sin90 ° должен быть записан в sin (PI ／ 2). Если вы не знакомы с этим методом, вы можете использовать функцию randians для предварительного преобразования угла в радианы, а затем написать sin （радианы (90)).

Использование степеней функций относительно противоположно. Он может преобразовывать радиан в угол. Введите печать (градусы (PI / 2)) прямо в область редактирования и посмотрите, что вы получите.

Шаг 3. Управляйте движением графики с помощью тригонометрической функции

Вот вам случай увидеть реальный эффект движения графики.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (700, 300); } void draw () {background (234, 113, 107); y = sin (радианы (x)) * 150 + 150; x ++; noStroke (); эллипс (x, y, 50, 50); } [/cceN_cpp]

Функция sin - периодическая функция. Его минимальное значение составляет －1, а максимальное значение - 1. Высота экрана составляет 300. Относится к y = sin (радианы (x)) * 150 + 150, поэтому диапазон изменения значения y будет хорошо контролироваться в пределах 0. до 300.

Вращающийся круг

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

Фактически они визуально выявили взаимосвязь между координатой окружности и тригонометрической функцией. Движение на приведенных выше изображениях обусловлено постоянно увеличивающейся независимой переменной θ. Слева - изображение функции sin и cos, а справа - точка, совершающая круговое движение после отображения. Разве это не очень умно? Это больше не загадочно. Вы можете использовать код, чтобы реализовать это.

Простой пример:

[cceN_cpp theme = "dawn"] float x, y, r, R, angle; void setup () {size (300, 300); г = 20; // Диаметр круга R = 100; // Радиус пути движения x = 0; угол = 0; у = высота / 2; } void draw () {background (234, 113, 107); перевести (ширина / 2, высота / 2); // Перемещаем исходную точку в центр экрана. noStroke (); х = R * cos (угол); у = R * sin (угол); эллипс (x, y, r, r); угол + = 0,05; } [/cceN_cpp]

Смотреть! Появляется вращающийся круг! Здесь независимая переменная больше не находится в постоянном увеличении, бит становится углом (равным θ на картинке). Это подставка под угол. Среди них xy имеют относительно увеличенный коэффициент R, что приводит к увеличению радиуса кругового перемещения (R для радиуса). Если не умножать R, его путь движения будет ограничен в пределах от -1 до 1.

Почему бы не использовать увеличивающийся x? Согласно свойству самой функции, любой x в домене определения имеет единственный y, который ему соответствует. Таким образом, в плоской прямоугольной системе координат вы не можете найти «простую функцию» для прямого рисования круга. То есть мы больше не можем использовать этот формат.

y = (Неизвестное выражение x?);

х ＋＋;

Итак, мы должны изменить нашу идею. Выберите другой угол в качестве независимой переменной, а затем используйте функции sin и cos, чтобы преобразовать его в горизонтальную и вертикальную координаты.

х = R * cos (угол);

у = R * sin (угол);

угол + = 0,05;

Некоторые из вас могут задаться вопросом, почему он может отображать путь кругового движения. Согласно определению тригонометрической функции, мы можем легко понять, что функция sin является отношением противоположной стороны к гипотенузе; функция cos - это отношение смежных к гипотенузе. Независимо от того, где находится точка круга, r (радиус) останется неизменным. Следовательно, мы можем заключить выражение координаты x и координаты y.

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

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

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

Эти изображения тесно связаны с тригонометрической функцией.

Шаг 4: Система координат движения

Предыдущие эффекты связаны с изменением графических координат. Сама система координат статична. Фактически, мы можем сделать перемещение координат, чтобы реализовать двигательный эффект. Это похоже на то, как люди на пляже наблюдают за другими людьми в лодке. Для людей на лодке лодка статична. Но что, если лодка движется сама по себе, то люди в лодке движутся вместе с ней. В первых случаях речь идет о «людях, бегущих по лодке». На самом деле лодка не движется. Ниже приведены некоторые общие функции для изменения системы координат.

Функция translate

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

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

перевести (а, б)

Первый параметр означает перемещение в положительном направлении оси x для пикселей. Второй параметр означает перемещение в положительном направлении оси y для b пикселей.

Сравните два кода и попытайтесь найти разницу. (Чтобы упростить код, мы можем удалить размер функции, ширина и высота экрана по умолчанию равны 100.)

Перед тем, как использовать:

эллипс (0, 0, 20, 20);

После мы используем:

перевести (50, 50);

эллипс (0, 0, 20, 20);

Функция поворота

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

повернуть (а)

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

Перед использованием:

эллипс (50, 50, 20, 20);

После использования:

повернуть (радианы (30));

эллипс (50, 50, 20, 20);

Эффект в программе - заставить круг вращаться вокруг центральной точки координат по часовой стрелке на 30 градусов.

Шкала функций

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

масштаб (а)

Эта функция может уменьшить масштаб системы координат. Значение предназначено для масштабирования. Если параметр больше 1, увеличьте масштаб; если меньше 1, то уменьшите масштаб.

Перед использованием:

эллипс (0, 0, 20, 20);

После использования:

шкала (4);

эллипс (0, 0, 20, 20);

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

шкала (4, 2);

эллипс (0, 0, 20, 20);

Суперпозиция функции преобразования

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

перевести (40, 10);

перевести (10, 40);

эллипс (0, 0, 20, 20);

Его конечный эффект будет равен

перевести (50, 50);

эллипс (0, 0, 20, 20);

То же, что и функция поворота

повернуть (радианы (10));

повернуть (радианы (20));

эллипс (50, 50, 20, 20);

Равно

повернуть (радианы (30));

эллипс (50, 50, 20, 20);

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

Перед использованием:

эллипс (50, 50, 50, 20);

После использования:

перевести (50, 50);

повернуть (радианы (45));

эллипс (0, 0, 50, 20); // Чтобы увидеть изменение угла поворота, мы сделали овал.

Это может показаться странным. Вам просто нужно больше практиковаться, тогда вы это поймете. (Вы также можете попробовать изменить последовательность функций translate и rotate, чтобы увидеть разницу.)

Горизонтальное движение и круговое движение

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

Шаг 5: горизонтальное движение

[cceN_cpp theme = "рассвет"]

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

Координата окружности не меняется, но меняется ее система координат.

Повернуть движение

[cceN_cpp theme = "dawn"] float r, R, angle; void setup () {size (300, 300); г = 20; // Размер круга R = 100; // Радиус движения дорожки} void draw () {background (234, 113, 107); перевести (ширина / 2, высота / 2); // Перемещаем исходную точку в центр экрана. повернуть (угол); noStroke (); эллипс (0, R, r, r); угол + = 0,05; } [/cceN_cpp]

Разве это не намного яснее и проще, чем тригонометрическая функция? Здесь у вас может возникнуть вопрос. В качестве примера возьмем вращающийся код. Очевидно, что упомянутая выше функция преобразования является относительной и допускает наложение. Если мы напишем translate (width / 2, height / 2) в функцию draw, это не означает, что каждый раз, когда функция draw выполняется один раз, система координат будет перемещаться на расстояние в правом нижнем направлении от исходной базы? Разумно он не останется в центре экрана навсегда.

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

Доступ к статусу координат

Иногда мы не хотим, чтобы изменение статуса системы координат основывалось на первом. На данный момент мы должны использовать функции pushMatrix и popMatrix. Эти две функции обычно появляются в паре. Функция pushMatrix находится перед popMatrix. Их нельзя использовать по отдельности, иначе все пойдет не так.

Пример:

[cceN_cpp theme = "рассвет"] pushMatrix (); // Сохраняем статус системы координат translate (50, 50); эллипс (0, 0, 20, 20); popMatrix (); // Считываем состояние системы координат rect (0, 0, 20, 20); [/cceN_cpp]

В этом примере перед использованием translate (50, 50) мы используем функцию pushMatrix. для сохранения текущего состояния системы координат. Это в то же время исходный статус. После того, как мы нарисуем круг, а затем реализуем popMatrix, он вернется в это состояние. В этот раз реализуйте функцию rect, вы обнаружите, что она не пострадала от влияния функции translate, вместо этого она нарисует квадрат в левом верхнем углу исходной точки.

Кроме того, функции pushMatrix и popMatrix допускают вложение.

Например

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Чтобы наглядно показать его взаимосвязь, мы выбираем сжатый формат.

Комбинированное движение или движение в движении?

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

Вроде совмещают горизонтальное движение с вращательным движением системы координат. Дело здесь в том, чтобы двигаться только в одном направлении.

[cceN_cpp theme = "рассвет"] int x, y; угол поплавка; void setup () {size (300, 300); фон (234, 113, 107); noStroke (); х = 0; // Когда начальное значение x равно 0, этим предложением кода можно пренебречь. При объявлении переменной значение по умолчанию равно 0. y = 0; // То же, что и выше. угол = 0; // То же, что и выше. } void draw () {угол + = 0,25; y--; перевести (ширина / 2, высота / 2); pushMatrix (); повернуть (угол); эллипс (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

А еще есть круговое перемещение и масштабирование системы координат.

[cceN_cpp theme = "dawn"] float x, y, angle; void setup () {size (300, 300); фон (234, 113, 107); noStroke (); } void draw () {угол + = 0,01; х = грех (угол) * 100; y = cos (угол) * 100; перевести (ширина / 2, высота / 2); pushMatrix (); масштаб (1 + 0,1 * sin (угол * 10)); эллипс (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Не поддавайтесь обману! Точка круга фактически совершает круговое движение. Это несложно понять, если сравнить с масштабированием видеокамерой. Видеокамера постоянно движется вперед или назад, снимает точку в круговом движении.

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

Шаг 6: комплексное использование

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

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; угол поплавка1, угол2; void setup () {size (300, 300); г = 12; R = 120; угол1 = 0; угол2 = ПИ / 4; } void draw () {background (234, 113, 107); noStroke (); перевести (ширина / 2, высота / 2); угол1 + = 0,02; угол2 + = 0,06; x1 = R * sin (угол1); y1 = R * cos (угол1); x2 = R / 2 * sin (угол2); y2 = R / 2 * cos (угол2); эллипс (x1, y1, r / 2, r / 2); эллипс (x2, y2, r, r); эллипс (-x1, -y1, r / 2, r / 2); эллипс (-x2, -y2, r, r); эллипс (x1, -y1, r / 2, r / 2); эллипс (x2, -y2, r, r); эллипс (-x1, y1, r / 2, r / 2); эллипс (-x2, y2, r, r); ход (255); strokeWeight (3); строка (x1, y1, x2, y2); строка (-x1, -y1, -x2, -y2); строка (x1, -y1, x2, -y2); строка (-x1, y1, -x2, y2); } [/cceN_cpp]

Этот пример не содержит никаких сведений, кроме представленной в предыдущей главе.

По каким очкам соответствует? Какие строки совпадают? Я тоже не могу разобраться. Но я помню, что это происходит из небольшого фрагмента кода.

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

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

Шаг 7: КОНЕЦ

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

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; void setup () {размер (500, 500); } void draw () {фон (200, 0, 0); browX = 150 + sin (frameCount / 30.0) * 20; EarD = 180 + sin (frameCount / 10.0) * 20; eyeD = 60 + sin (frameCount / 30.0) * 50; faceD = 300; strokeWeight (8); эллипс (175, 220, EarD, EarD); эллипс (ширина - 175, 220, ухо, ухо); rect (100, 100, faceD, faceD); линия (browX, 160, 220, 240); линия (width-browX, 160, width-220, 240); заполнить (случайный (255), случайный (255), случайный (255)); эллипс (175, 220, eyeD, eyeD); эллипс (ширина-175, 220, eyeD, eyeD); заполнить (255); точка (ширина / 2, высота / 2); треугольник (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, ширина - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

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

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

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

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

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

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

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

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

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