Напиши красив код - за мен е удоволствие, но е трудно да споделите това удоволствие с други програмисти, да не говорим за тези, които не са. В своята свободна и общуването със семейството време, имах една идея за това как да програмирате стихотворение помощта на платно елемент, за да се направи във вашия браузър.
Има редица термини, които описват визуалните експерименти на схемата за компютърен код, демонстрацията, интерактивно изкуство, и така нататък. За да се опише този процес, се спрях на поемата терминът програмиране. Поема - полирана проза, лесно, кратко и естетика. Това не е полу-завършен скица на идеята за албум, но нещо свързано представен от публиката за неговото удоволствие. Поема - не е инструмент, но тя живее, за да доведе до емоция.
Чета много книги по математика, информатика, физика и биология за собственото си удоволствие. И аз бързо разбрах, че ако аз се спирам на някаква идея, хората се отегчават. Всъщност, мога да взема една идея, която мисля, че е изключително вълнуващо и бързо да рефлектира върху човешкия смисъл на интерес, дори и ако лицето няма никаква представа за кодиране и как работи изобщо. Не е нужно да се разбере в някакъв комплекс философска мисъл или изчислителни изчисления, за да програмирате стихотворение. То се нуждае само от желание да видят нещо живо и с дъх на екрана. Кодове и примери, че оставят по-долу ще ви помогнат да разберете как всъщност да се извърши тази бърз и лесен процес.
Главната особеност е, че създаването на стихотворението трябва да бъде проста и лесна. Няма нужда да прекарат три месеца, както и изграждане на един, макар и много готино демо. Вместо това създайте 10 стихотворения, които ще Ви помогнат да привлечете идеята за живот. Напиши кода, който ще бъде вълнуващо, и не се страхувайте да се провалят.
Няма нищо сложно, можете лесно да започнете. Единственото нещо, което може да е малко объркващо, това е контекстът, че трябва да се сформира с настройките, като например fillStyle, ширина на линията, шрифт и strokeStyle, преди да се използва действителната цифра. Можете лесно да се забрави за актуализиране или презареждане на настройките и най-накрая получи неочакван резултат.
Първият пример само писти и превръща статично изображение в платното. Всичко това е добре, но истинско забавление започва, когато ви попитам със скорост от 60 кадъра в секунда. Съвременните браузъри имат добавка requestAnimationFrame функция, която синхронизира кода на оригиналната рисунка с един модел, който се движи в браузъра. Това подобрява ефективността и дава леко пътуване. Целта на визуализацията е да бъде код, който се движи със скорост от 60 кадъра в секунда.
Var платно = document.getElementById ( "Например-платно ');
Сега бъдете внимателни, преди да се говори за програмирането и чертежа на екрана, но тук съм приготвил нещо математически. Признавам, че аз винаги съм обичал математиката (за разлика от много други изпълнители). Независимо от тази любов, аз съм разочарован от начина, по който се преподава в училище. преподаването й е твърде формално, което може да е добро за учител по математика, но се губи възхищение, интерес в проучването и прагматизъм, с които можете да направите много интересни неща. Но има и добра новина, програмистите не обръщат внимание на това и да се концентрират върху по-интересни неща.
И сега ще се опитам да обясня как бързо координатната система. Това ще бъде полезно да се разбере как математическа функция, може да се създаде движение. Картината по-долу показва интерактивна система от координати. Моля, имайте предвид, че има не само х-координата. Функцията, че са изготвени, представени като (а * х + б) * в + г. Играйте плъзгача по график, и можете да видите как всеки един от тези стойности могат да се регулира положението и мащаба на графиката.
Ако все пак искате да се продължи да се работи с кода, предлагам ви да зададете движение и посока. Опитайте се да промените стойностите в координатната система, или да отидете на друга функция, и да видим какво ще стане.
Тези примери са малко по-сложно, тъй като те са свързани с обекти, но си струва. Вижте примерен код, който ще се разбере как новата сцена, която ще ви помогне с основите на изготвяне на платното. Нашата нова точка маркер е да има достъп до всяка променлива, както и в контекста на платното.
За да започнете с дизайнера, за да персонализирате конфигурацията точки на своята работа и да зададете някои променливи, необходими за работата. Отново се обръщаме към Three.js вектор. Когато има честота на кадри, възпроизвеждане, за да 60fps, е важно предварително да стартирате вашите елементи или да създадете нов по време на възпроизвеждане. Тя може да се яде наличната памет и да направи своя визуализация стръмен. Също така, обърнете внимание на начина, по който точката изпраща копие от рамката на връзката. Той помага да се работи по-ясно.
В останалата част от кода ще бъде инсталиран на обекта, тъй като точките на прототипи. на всеки един от новите моменти има достъп до тези методи. Аз ще обясня от функция, за да функционира.
Аз се отдели кода на чертеж от актуализацията на код. Тя помага много по-лесно да подкрепят и да се премести на обекта. Точно като MVC схема разделя вашия личен контрол и логически оглед. Vector DT - е промяната с течение на времето в милисекунди след последната актуализация. Това заглавие е лесен и кратък и идва от (не се притеснявайте) смятане деривати (изчисление производно). Той изважда скоростта на движението си на честотата на кадрите. Така, че няма да се забавя NES стил, ако срещнете някакви затруднения. Ако скоростта е твърде висока, се оказва, че ще бъдат пропуснати кадри, но скоростта ще останат същите.
Тази функция е малко странно, в нейната структура, но лесен за използване. Наистина скъпо да се разпредели памет в координатна система (функция). MoveDistance може да се настрои веднъж и се използва при повторно стартиране системни функции, когато е необходимо.
Този вектор се използва само за да се изчисли, че новата позиция и не е предназначен за външни функции. Това е първото математическо вектор, който започва да се използва. Сега посоката на вектора се умножава, за разлика от смяната на времето и след това добавяне на позицията. В края на действието е модула, който държи на точката на екрана.
И в края на най-лекият. Направете копие на контекста на основния обект и начертайте правоъгълник (или нещо друго, няма значение). Просто правоъгълник най-лесният начин да се направи на екрана.
На този етап аз съм добавяне на нова точка и го наричат this.dot = нова точка (X, Y, това) главно дизайнер. И тогава, в основен метод за актуализация добавя this.dot.update (DT) и движещ точка се появява на екрана.
Хубаво е, че в кода малко по структура, но тя не дава по-привлекателна. Тук започва цикъла. По принцип, обектът ще създадем нов обект DotManager. Удобен да се съберат тази функционалност в отделен обект, защото е по-лесно и по-чисто, защото симулация става все по-трудно.
Сега в шаблона, а не да се актуализира точка, ние създаваме и актуализира DotManager. Първо, създаване 5000 точки.
Това със сигурност изглежда много по-добре, отколкото една точка. Сега е време да започнете да добавяте по метода на актуализация в точка. Всяка промяна в кода на обекта ще бъде отразено във всяка точка на екрана. Но чудеса тук и започват да се случи. Запомни координатна система се намира по-горе? Какво ще кажете за да се определи ефекта на вълнообразно движение? Ще създадем променлива wavePosition до точката на обекта. В заключение, ние добавяме тази променлива да Y. на позиция
Да, малко объркващо, когато е писано в една линия, така че сложих друга опция, която е направена в координатна система.
Аз съм притеснен за ...
Друг малък бар. Монохромно ухапа скучно, така че нека да добавите малко цвят.
За всяка нова точка определя първоначалната си позиция и даде тон върху платното хоризонтално. Добавих функция Utils.hslToFillStyle. това е малко помощ за конвертиране на някои входни променливи в форматиран правилно fillStyle верига. Случаи вече са много по-интересно. Въпросът в крайна сметка ще бъдат събрани на едно място и няма да има дъга ефект, след като те са произволно разпръснати. Отново, това е един пример на мобилна изображения примеси математика или входните стойности. Харесва ми да работя с цвят по цвят модел HSL, отколкото RGB, защото е по-лесно за използване. RGB малко абстрактно.
До този момент не е имало реален потребителски опит.
Остава само да се създаде едно кликване на обекта в рамките на схемата. Сега, когато имаме една мишка, можете да направите така, че точки ще следват.
Този метод може да бъде малко ви обърка, ако не сте добре запознат с векторни математика. Вектори могат да бъдат добре визуализирани и могат да помогнат за привличане на драскулки върху хартия с петна от кафе. Просто казано, тази функция показва разстоянието между мишката и точката. И когато точката се премества по-близо до друга точка, която се основава на това колко е близо до друга точка, и от това колко време е минало. Това се извършва чрез изчисляване на разстоянието на придвижване (нормална скаларна фигурата), и тази цифра се увеличава с нормализиране на вектора на (вектор на дължина 1) съвпада с мишката. Добре, последно изречение, не е необходимо да се напише на прост език, но това е само началото.
Най-важното нещо за мен е процес на създаване на едно стихотворение на програмиране и изкуството на създаване на нещо ново. Бих силно препоръчваме да не влизам в подробности и големи проекти. Вместо това, повтарям, да експериментират, да се насладите успех, а понякога и нека нещо, което не се получи. След като аз имам нещо като парче от зловеща дъгата. Имах големи надежди за рекурсивни кръгове, но аз не позволи лошите резултати ме чукат от пътя ми. В крайна сметка, кодът, който тук е описан в подробности - това изследване в много обектно-ориентиран стил, който ми харесва най-много. Адаптиране на тези идеи на собствените си процеси, инструменти и техники. Стихове не са големи интегрирана система, така че е лесно да се направи и експериментират с него, без да се вземат предвид условията на мащабни проекти.
Обърнете внимание на платното като молив, който ще Ви помогне да реализирате своите чудесни идеи и и да даде възможност на творенията си летят.
ВНИМАНИЕ! Използвате остарял браузър Internet Explorer
Този сайт е изграден върху най-напредналите и модерни технологии и не поддържа Internet Explorer втората и седмата версия.
Свързани статии