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

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:49

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

Стъпка 1: Движение и функция

Нека ви покажа няколко непознати снимки, за да стимулирате вкуса ви.

Какво е това? Сега първо запазете този въпрос и после ще го знаете и използвате.

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

Колко функции можете да разпознаете от горните снимки? Каква връзка имат те с движението? Сега нека вземем квадратна функция от нея, добавим някои параметри на случаен принцип и ще видим какво ще се случи. Например y = x² / 100.

Ето как изглежда изображението на функцията. Копирайте кода по -долу.

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

Бягащ ефект

След това изберете функция sin. Формула: y = 150 + sin (x).

Копирайте следния код.

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

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

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

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

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

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

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

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

Трябва да обърнем внимание, че в програмата входът на функционалния параметър спрямо ъгъла приема радиан. Така sin90 ° ще се запише в греха (PI ／ 2). Ако не сте запознати с този метод, можете да използвате функцията randians, за да преобразувате ъгъла в радиан предварително, и след това да напишете sin （радиани (90)).

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

Стъпка 3: Управлявайте графичното движение с тригонометрична функция

Ето случай, за да видите действителния ефект от графичното движение.

[cceN_cpp theme = "зора"] float x, y; void setup () {размер (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 = "зора"] float x, y, r, R, ъгъл; void setup () {размер (300, 300); r = 20; // Диаметър на кръг R = 100; // Радиус на пътя на движение x = 0; ъгъл = 0; y = височина/2; } void draw () {background (234, 113, 107); превод (ширина/2, височина/2); // Преместване на оригиналната точка към центъра на екрана. noStroke (); x = R * cos (ъгъл); y = R * sin (ъгъл); елипса (x, y, r, r); ъгъл += 0,05; } [/cceN_cpp]

Виж! Появява се въртящ се кръг! Тук независимата променлива вече не е в ъгъл на постоянно увеличаване на бита (равен на θ на снимката). Това е стойка за ъгъл. Сред тях xy имат относително умножен коефициент R, което води до разширяване на радиуса на движение на кръга (R е за радиус). Ако няма да умножи R, пътят му на движение ще бъде ограничен в диапазона от -1 до 1.

Защо не използвате увеличаващия се x? Според свойството на самата функция всеки x в домейна за дефиниция има единственото y, което да му съответства. Така че в равнинна правоъгълна координатна система не можете да откриете „проста функция“за директно изчертаване на окръжност. Тоест не можем да използваме този формат повече.

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

x ＋＋;

Така че трябва да променим представата си. Изберете друг ъгъл като независима променлива и след това използвайте функцията sin и cos, за да я трансформирате в хоризонтална и вертикална координата.

x = R * cos (ъгъл);

y = R * sin (ъгъл);

ъгъл += 0,05;

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

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

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

Функцията sin и cos обаче е често срещана. Ако искате да създадете по -високо ниво, по -добре се опитайте да го познаете задълбочено. Ако самият този въпрос може да ни накара да научим повече математически познания, има още интересни неща, които ви очакват да изкопаете.

Това са снимки, близки до тригонометричната функция.

Стъпка 4: Система за координати на движението

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

Функция превод

Функцията 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); // За да видим промяната на ъгъла на завъртане, направихме овал.

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

Хоризонтално движение и кръгово движение

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

Стъпка 5: Хоризонтално движение

[cceN_cpp theme = "зори"]

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

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

Завъртане на движението

[cceN_cpp theme = "зора"] float r, R, ъгъл; void setup () {размер (300, 300); r = 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 работи веднъж, координатната система ще се премести на разстояние в дясната долна посока от оригиналната основа? Разумно няма да остане завинаги в центъра на екрана.

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

Достъп до състоянието на координатите

Понякога не искаме промяната на състоянието на координатната система да се основава на предишната. По това време трябва да използваме функции pushMatrix и popMatrix. Двете функции обикновено се появяват в двойка. Функцията pushMatrix е преди popMatrix. Те не могат да се използват единствено или ще се объркат.

Пример:

[cceN_cpp theme = "зори"] pushMatrix (); // Съхранява превод на състоянието на координатната система (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 () {размер (300, 300); фон (234, 113, 107); noStroke (); x = 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 = "зора"] float x, y, ъгъл; void setup () {размер (300, 300); фон (234, 113, 107); noStroke (); } void draw () {ъгъл += 0,01; x = sin (ъгъл) * 100; y = cos (ъгъл) * 100; превод (ширина / 2, височина / 2); pushMatrix (); скала (1 + 0,1 * sin (ъгъл * 10)); елипса (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

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

Изненадан? Това са прости основни функции. Но с различна комбинация можем да създадем толкова много различни ефекти. Досега моето излагане спира, за да се освободи малко място за вашето проучване.

Стъпка 6: Изчерпателна употреба

Той скоро приключва за тази глава. В последната две глава въведох основния метод за графично движение. Вярвам, че може да имате по -дълбоко разбиране за това, в сравнение с първоначалните ви идеи. И накрая, ето няколко завършени примера за ваша справка.

[cceN_cpp theme = "зора"] float x1, y1, x2, y2, r, R; ъгъл на поплавък1, ъгъл2; void setup () {размер (300, 300); r = 12; R = 120; ъгъл1 = 0; ъгъл2 = PI/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 () {background (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; earD = 180 + грех (frameCount / 10.0) *20; eyeD = 60 + sin (frameCount/30.0) *50; лице D = 300; strokeWeight (8); елипса (175, 220, earD, earD); елипса (ширина - 175, 220, earD, earD); правоъгълна (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]

Не е ли магия за динамична графика? Тук не ви показвам твърде много случаи. Може да успеете да проектирате далеч по -добър ефект от мен. Предимството на рисуването с програма съществува, че можете да играете с всеки пиксел. Тъй като вашата графика не е растерна, всяка ключова точка на вашата графика е контролируема. Той може да реализира някои ефекти, които друг софтуер не може да реализира.

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

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

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

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

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

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

Ако имате въпроси, можете да изпратите имейл на [email protected].

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