Интересни ръководства за програмиране за дизайнер-стартирайте снимката си (първа част): 16 стъпки

2025 Автор: John Day | [email protected]. Последно модифициран: 2025-01-23 14:36

Бягай! Бягай! Бягай!

Програмирането не е толкова трудно. Ключовият момент е да намерите своя ритъм и да го правите един по един.

Преди да прочетете тази глава, надявам се, че вече сте били запознати с основния метод за рисуване на функции, или ще се почувствате замаяни и объркани от две големи функции на главата: настройка и рисуване.

Тъй като искаме да правим движещи се графики, трябва да знаем как се произвежда анимацията.

Горната картина изглежда доста привлекателна и визуално разкрива принципа на изпълнение на анимацията.

Анимацията е магия. Това е магия за визуалната измама. Въпреки това, в тази информация избухна, видео наводнения възраст, ние вече сме свикнали с него. Малко хора ще се изненадат, че е невероятно нещо да можете да видите анимацията.

Същият принцип може да бъде приложен при анимация на рисуване с програма. Трябва да обмислим как да нарисуваме различни графики във всеки кадър и програмата автоматично ще обръща страници, докато ние допълваме завършена анимация в главата си. В следващата глава ще говорим за това как да реализираме основно графично движение. Преди това трябва да знаем някои основни познания за променливите.

Стъпка 1: Променлива

Променливата е контейнер за данни. Може да се използва многократно в рамките на програма.

Например:

[cceN_cpp theme = "зори"] размер (500, 500); елипса (100, 250, 50, 50); елипса (200, 250, 50, 50); елипса (300, 250, 50, 50); елипса (400, 250, 50, 50);

[/cceN_cpp]

Този раздел на кода не използва променливи. Той рисува четири кръга на екрана. Можем да открием, че имат еднаква ширина и височина. Сега, когато е същото, за да сведем до минимум повтарящото се въвеждане на данни, можем да определим знак, който да го представя. Този знак е променлив.

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

[cceN_cpp theme = "зори"] размер (500, 500); int a = 50; елипса (100, 250, а, а); елипса (200, 250, а, а); елипса (300, 250, а, а); елипса (400, 250, а, а);

[/cceN_cpp]

Получаваме абсолютно същия резултат!

Тъй като сме дефинирали променлива а, можем удобно да променим параметрите. Ако променим 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 = a + b; // Плюс две присвояване и присвояване на резултата й на 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 setup () {print (1); } void draw () {print (2); } [/cceN_cpp]

Нека да разгледаме един пример:

Когато натиснете бутона за работа, конзолата първо ще изведе "1" и след това постоянно ще изведе "2", докато не натиснете бутона за спиране или затворите прозореца.

Кодът в скоби в функцията за настройка ще бъде реализиран само веднъж, докато кодът в рамките на функцията за изтегляне ще работи постоянно в обръщение (изпълнение по подразбиране 60 пъти/секунда).

Поради този знак настройката обикновено се използва за инициализирано свойство на околната среда, като например ширината и височината на екрана, цвета на фона и всички видове присвояване на променливи. Докато често поставяме функциите за рисуване във функция draw, за да генерираме непрекъснато променени графики.

Стъпка 9: Кръг в хоризонтално движение

С функцията за рисуване можем да започнем да създаваме нашите анимации. Методът за писане на анимационен ефект чрез Processing е доста „неудобен“. Той няма никаква съществуваща команда. Например, посочете определена форма за криволинейна.

Трябва да дефинираме тези подробности сами. Трябва да кажете на програмата от каква графика определено се нуждае всеки кадър.

Напишете следния код в него (сега нека започнем да го правим на ръце):

[cceN_cpp theme = "зора"] int x; int y; void setup () {размер (300, 300); x = 0; y = височина/2; } void draw () {background (234, 113, 107); noStroke (); елипса (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Тази част от кода показва кръг на движение. Предишната декларирана променлива x, y се използва за съхраняване на позицията на координатата. Неговите задания се изпълняват при настройка на функция. Кодът на ключа е следният във функцията за изтегляне:

x = x + 1

Не го разглеждайте като математическо уравнение, иначе ще бъде много странно. Тук "＝" е символ за присвояване. Той представлява поставянето на десните числа в лявата променлива. Да предположим, че x е 50, след като кодът стартира, дясната страна на "＝" е равна на 50+1, т.е. 51. Крайният резултат ще бъде присвоен на променлива x. Значението на x става 51.

Следвайте процедурата на програмата, всеки път, когато функцията за рисуване работи веднъж, стойността на 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 () {размер (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); елипса (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

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

Помните ли стандартните 60 кадъра в секунда в рамките на функцията за рисуване? Според тази скорост, кръгът отгоре ще се премести с 60 пиксела в секунда надясно.

Ако искаме да променим скоростта на графично движение, има два метода: единият е да увеличаваме стойността x всеки път, откакто ще бъде променена.

x ＝ x ＋ 10

Той е подобрил скоростта 10 пъти в сравнение с оригиналната!

Другият метод е да промените честотата на опресняване на платното. frameRate ()

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

Стъпка 11: Пренебрегван фон

Всички предишни примери записват фон във функция draw. Мислили ли сте някога да го запишете в настройката на функцията? Ще има ли разлики? Сега нека актуализираме примера за хоризонтално движение.

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

Какво стана? Може би не може да разбере правилно причината за производството на проблема. Изтрийте функцията noStroke, добавете отново щрих и вижте пътя на движение на кръга.

О, това е така, защото предварително създаденият кръг не е изтрит! Тъй като настройката на функцията работи само веднъж, ако напишем фон над нея, тя ще запълни фона само за един път и после няма да има ефект повече. Функционалният фон е като инструмент за кофа за боя. След като се използва, той ще обхваща цялото съдържание в платното, вместо да задава само цвят на фона. Пишем го преди изчертаване на функция, така че предишният кадър да бъде покрит всеки път, когато създаваме нов модел. Следователно кръгът може да работи както очаквахме. С изключение на запомнянето на употребите на всяка функция, трябва да мислим за позицията на кода. Много време, нагоре или надолу ред за кодеята и за да я напишете в или извън скоба, тя ще създаде доста различни ефекти. Посоката на кода е двуизмерна. Ако се появи грешка, трябва да калибрираме в това две измерение.

• Този повтарящ се метод на рисуване може да създаде много специален ефект, ако се използва правилно. Можете да копирате следния код и да опитате.

[cceN_cpp theme = "dawn"] void setup () {размер (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: Разтърсващ кръг

Ами ако искам да направя посоката на движение на кръга неправилна? С функция произволно умело можете да реализирате и този ефект. Случайната е често използвана функция. Може да се използва за генериране на произволна функция. Това е като безследен дух. Веднъж свързани с променливи, не можете да си представите какво ще стане след това.

Формат за извикване:

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

High представлява случайната горна граница, а долната граница по подразбиране е 0. Например, random (10). Той ще произведе число от 0 до 10 на случаен принцип (0 е включено, но 10 не е включено).

случаен (нисък, висок)

Ако зададем два параметъра, той ще се върне към случайната стойност между тях. Например, случаен (5, 10). Той ще произведе число от 5 до 10 на случаен принцип (5 е включено, но 10 не е включено).

Пример:

[cceN_cpp theme = "зори"] float x;

x = случаен (50, 100);

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

Всеки път, когато стартираме програмата, конзолата ще извежда различни стойности.

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

След като се запознаем с използването на произволна функция, можем да влезем директно в случая по -долу.

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

[/cceN_cpp]

Предишните добавени координатни стойности са фиксирани. Само ако увеличим случайна стойност, кръгът ще се движи в неопределена посока. С по -големия случаен диапазон, той се разклаща по -често. Тъй като промяната на стойността между кадрите се отскача, движението вече няма да е плавно. Докато първият кадър е в положение (150, 150), последният кадър ще се премести в позиция (170, 170) в рамките на един поглед.

Стъпка 13: Мигриращ кръг

Мигриращ кръг

Ще създаде ли плавно движение? Функционалният шум може да ни помогне. Той има по -добър ритъм от стандартния случаен. А произволно генерираните случайни числа са непрекъснато.

Формат за извикване:

шум （t）

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

[cceN_cpp theme = "зори"] float x = шум (5); поплавък y = шум (5); печат (x, y); [/cceN_cpp]

Тъй като горните входни параметри са 5, значи изходните резултати са еднакви. Тогава как да промените резултата? Отговорът е да се променят динамично входните параметри. Всъщност можем да разглеждаме шума като неограничен гласов запис, входните параметри са точно като "настоящото време". Ако входът на параметъра е непрекъснат, изходът също ще бъде непрекъснат.

[cceN_cpp theme = "зора"] float x, y; void setup () {размер (700, 100); x = 0; фон (0); } void draw () {x += 1; y = шум (frameCount/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 = "зора"] float x, y1, y2, y3, y4, y5; void setup () {размер (700, 500); x = 0; фон (0); } void draw () {x += 1; y1 = шум (frameCount)*100; y2 = шум (frameCount/10.0)*100; y3 = шум (frameCount/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 = "зора"] float x, y; void setup () {размер (300, 300); x = 0; } void draw () {background (234, 113, 107); x = шум (frameCount/100.0 + 100)*300; y = шум (frameCount/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 () {размер (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); x = mouseX; y = мишкаY; елипса (x, y, 50, 50); }

[/cceN_cpp]

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

• Нека се опитаме да сменим положителния и отрицателния символ или да сменим mouseX и mouseY.

Стъпка 15: Край

От тези познати команди може да успеете да управлявате движението на графиката. Със съдържанието на последната глава, използвайте въображението си правилно, можете да създадете много интересни анимирани ефекти.

В следващата ни глава можем да видим по -изобилни примери. В същото време ще използваме математически функции и ще ги комбинираме с графично движение.

Тази статия идва от дизайнера Wenzy.

Стъпка 16: Относителни показания:

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

Интересно ръководство за програмиране за дизайнер-Създайте първата си програма за обработка

Тази статия е от:

Ако имате нужда от помощ, можете да се свържете с: [email protected].