Codebox: Плъзнете (arraylist) на цели - 💡 Fix My Ideas

Codebox: Плъзнете (arraylist) на цели

Codebox: Плъзнете (arraylist) на цели


Автор: Ethan Holmes, 2019

Последният Codebox показа как да използвате вашата уеб камера, за да замените мишката с магическа пръчка (нещо като). В примера преместването на пръчката в кръгова област на екрана е довело до преминаване на излъчващите лъчи към произволен цвят. Тази статия се основава на този пример и показва как да създадете по-сложни взаимодействия. Вместо единична, неподвижна цел, тази скица представя редица летящи цели. Докосването на целта (думата „шапка“) го превръща в друга дума (в случая „заек“), както е показано тук:

Скицата илюстрира как се създава и управлява списък от интерактивни обекти. Независимо дали пишете игри, системи за частици или контролирано от Arduino магическо шоу (добре, така че аз съм наклонил ръката си - това е предмет на бъдещ пост), това са инструменти, които ще използвате отново и отново продължете с обработката.

Настройте скицата

Първи неща - нека да приберем скицата. За този проект ще са необходими два файла: magic_words.pde и Target.pde, Първо изстреляйте Processing и поставете следния код за magic_words.pde в главния прозорец.

Можете да маркирате първия ред, да превъртите целия път надолу и след това да използвате Ctrl-c, за да копирате кода (твърд), или можете да кликнете върху тази връзка (magic_words.pde), натиснете Ctrl + a, за да изберете целия текст, и след това използвайте Ctrl + c, за да го копирате (по-лесно). След като копирате кода, върнете се към Обработка и го поставете в главния прозорец. След това използвайте “File -> Save” от лентата с менюта (или просто Ctrl + s) и запишете файла с името “magic_words” (Обработката ще добави автоматично “.pde”).

Ето Target.pde, вторият файл, от който се нуждаете:

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

За да създадете раздел, щракнете върху стрелката с дясна посока в горния десен ъгъл на прозореца за обработка.Обработката ще ви поиска ново име на файл - въведете „Цел.“ След като въведете името на файла, ще се появи нов раздел, където можете да поставите кода. Следната диаграма трябва да ви даде стъпките, от които се нуждаете:

Последното нещо, което трябва да направим, е да създадем хубав шрифт за целта. (Шрифтовете са разгледани в Глава 6 на Първи стъпки с обработка). Защо питаш? Извън кутията, обработката има само една проста команда, наречена текст() това ще покаже текст, но не можете да кажете колко място заемат на екрана (което ще бъде важно, както ще видим след минута). Плюс това, те са само ти стар шрифт на Arial, така че не са много интересни.

За да заобиколите това, можете да използвате менюто Инструменти, за да създадете нов файл за шрифт за вашата скица. След като импортирате файла с помощта на loadFont () ще можете да играете с типография. (W00t!). Както и да е, процесът на създаване на шрифт е ясен. Първо, кликнете върху „Инструменти -> Създаване на шрифт…“ от лентата на менюто, която ще се появи следния екран:

Тогава трябва само да изберете желания шрифт (аз избрах „Baskerville-Bold“; ако искате да използвате друг шрифт, ще трябва да промените името на файла с шрифта в magic_words.pde). Забележете, че името на файла в долната част на полето се променя, докато избирате различни опции - това е името на файла, което ще трябва да използвате в скицата; Обработката автоматично ще добави “.vlw” към края.

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

Следващите две секции описват как работи скицата. Първата част описва кода в файла Target.pde, който се използва за създаване на обект Target, основният изграждащ блок на скрипта. Вторият раздел описва как файлът magic_words.pde използва и ArrayList за управление на няколко Target обекта.

Целевият обект

Глава 9 на Първи стъпки с обработка представя обекти и обектно-ориентирано програмиране (ООП). За да прегледате накратко, един обект е градивен блок, използван за създаване на по-сложни програми. Обектите съдържат два основни елемента: полета, които са променливи, които определят текущото състояние на обекта и методи, които са само функции, които правят обекта нещо. Ключова част от силата на ООП е, че тя ви помага да мислите за вашия код по физически начин, като ви насърчава да мислите по отношение на по-прости компоненти.

За да използвате обекти, първо създайте a клас (или няколко класа - можете да използвате много различни обекти), което е като шаблон, който описва всичко, което обектът може да направи. След като дефинирате класа, ще използвате нов да създадете обекти, които можете да използвате в скиците си. Това разграничение може да бъде малко объркващо, затова мислете за него по този начин. Ако сте печели торта, ще започнете с рецепта. Това е като класа - имате описание, но самата торта. За да получите тортата или предмета, трябва да следвате рецептата, преди да имате какво да ядете. Създаването на нови обекти е задача на обработването нов Команда - създава нова обектна променлива чрез извикване на специален метод, наречен конструктор, Конструкторът инициализира променливите на обекта и обикновено го приготвя за действие; единствената разлика между нея и всеки друг метод е, че тя има същото име като класа.

Добре, достатъчно преглед. Нека поговорим за кода. Както бе обсъдено по-рано, целевият клас е градивен елемент. Неговите полета включват:

  • Текуща позиция, представена от променливите х и ш
  • Скорост и посока, представени от променливите DX и ди, Това са само случайно избрани стойности.
  • Ширина и височина, представени от променливите w и з
  • Размер на шрифта (повече за това малко)
  • Флаг, показващ дали пръчката се допира до целта (флаг е програмният срок за всяка променлива, използвана за представяне на конкретен статус, например за или от)
  • Текущият текст на целта (т.е. „шапка“ или „заек“)

След задължителното Мишена() конструктор (единствената задача е да зададе стойностите на befofe и след текста за целта), като методите включват:

  • етап (), което прави целта да се движи около сцената. Това работи чрез добавяне на DX и ди към х и ш променливи.
  • боя (), която привлича целта на сцената вх, ш) позиция
  • detectCollision (), която определя дали пръчката се е сблъскала с целта
  • setBox (), която актуализира променливите за ширината и височината на целта въз основа на това дали тя е била докосната от пръчката
  • превключване (), която променя целевата дума. (т.е., ако текущата дума е „шапка“, тогава щифт прави „Зайо“ и обратно
  • на сцената(), която връща флаг, указващ дали целта е отлетяла от видимата област на екрана

Първите два метода са доста ясни, но останалите методи, които се използват за откриване на сблъсъци, заслужават малко повече внимание. Ако извикате от първоначалното кодиране, откриването на сблъсък е име на всички начини, по които можете да го определите. Две неща се пресичат на екрана. В първоначалния пример на пръчката имахме кръгова цел, затова използвахме проста формула за разстояние, за да определим дали координатите на пръчката са в радиуса на целта. В този пример използваме правоъгълна цел. За да направим нещата по-сложни, целта променя размера, когато желанието го докосне, така че се нуждаем от някои поддържащи методи, за да сме сигурни, че всички променливи са в съответствие с текущото състояние на целта. Следната диаграма показва различните части, които са в игра:

С тази диаграма е много лесно да напишете кода за detectCollision ():

// Определя се конкретна x, y координата в полето boolean detectCollision (float cx, float cy) {boolean retVal = false; if ((cx> x) && (cx <(x + w)) && (cy> (y-h)) && (cy <y)) {retVal = true; } връщане retVal; }

И накрая, на сцената() определя дали целта все още е във видимия етап. След като излезе, той се рециклира, като се постави на ново място с нова скорост и посока. Успокояващо е да се отбележи, че въпреки добавената сложност, по-голямата част от този код е почти идентичен с Пример 5-17: Границите на правоъгълник в началото на обработката.

Arraylist на цели

Сега, след като преминахме през целевия клас, нека да разгледаме как да го използваме. Както беше споменато в началото, основната цел на този пример беше да покаже как можете да управлявате динамично няколко обекта. Докато стандартните масиви (разгледани в Глава 10 на Първи стъпки с обработката) са чудесни за много неща, те не са много динамични, защото след като сте посочили колко елемента имат, ще останете с това завинаги.

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

обработка на ArrayList е начин да се избегнат тези ограничения. Вместо да е прост тип данни, като float или int, ArrayList е клас на изграждащ блок за управление на други обекти. Той има методи за добавяне на нови елементи, изтриване на съществуващ, намиране на броя на елементите в списъка и т.н. Освен че е наистина полезен инструмент, работата с ArrayList ще ви запознае с техниките, които ще използвате в други, по-сложни класове, като HashMaps (нещо, което ще изследваме в бъдещите публикации). Затова преминете към magic_words.pde и нека погледнем кода.

Създаването на ArrayList е доста просто и се прави в този ред; имайте предвид, че не е необходимо да декларираме размер:

Цели на ArrayList; // ArrayList е динамичен начин за управление на масиви

След като бъде деклариран, можем да започнем да добавяме нови обекти в ArrayList, което правим с добави () метод. Ето кодовете в кода настройвам() метод, който добавя началните цели:

target = new ArrayList (); // Създаваме нов списък за (int i = 0; i <N; i ++) {target.add (нов Target ("Hat", "Rabbit")); }

Този фрагмент има няколко интересни точки. Първо, той демонстрира синтаксиса за извикване на метод, който е object_variable.метод на класа (списък с аргументи). Второ, тя показва как можете да използвате обект като аргумент за ArrayList. Забележете как използваме нов команда в списъка с аргументи - която ще създаде нова променлива на обект Target и ще я прехвърли в списъка. И накрая, фрагментът показва как можем да направим всичко това в цикъла. Можем да добавим 10, 100 или 10 000 обекта - размерът на списъка е напълно динамичен.

Този следващ фрагмент, който се показва в рисувам() метод, показва как можем да използваме получите () метод за изтегляне на елемент от списъка ArrayList:

за (int i = 0; i <target.size (); i ++) {Target t = (Target) target.get (i); // Извличане на i-тата цел от Array t.paint (); // Paint it // Проверка за сблъсъци, ако (t.detectCollision (wandX, wandY)) {if (! T.inTarget) {t.toggle (); t.inTarget = true; }} else {t.inTarget = false; } t.step (); // Аванс на екрана // Ако текущата цел е преместена от сцената, изтрийте го от списъка и създайте нова цел, ако (! T.onStage ()) {target.remove (i); target.add (нова цел ("шапка", "заек")); }}

Най-важната линия тук е Целеви t = (Target) target.get (i);, Тук се случват няколко неща. Първата е, че създаваме нова извиквана Целева променлива T, Този път обаче не използваме нов команда. Защо питаш? Това е така, защото обектът, към който се стремим, вече съществува - той бе създаден по-рано в настройвам() метод. Всичко, което правим тук, е да го извлечем. Второ, имаме този вид странен синтаксис на (Мишена), Това е начинът, по който казваме „Обработка“ какъв тип променлива е, че очакваме да извлечем. Това се нарича „леене” и изисква малко повече обяснения.

Ако си спомняте, ArrayList е общ инструмент - можем да го използваме с променлива Target, класа Jitterbug, разгледан в Глава 10 на Първи стъпки с обработката, или всяка друга променлива на класа, която бихме могли да създадем в бъдеще. Въпреки това, обработката (и Java, основният език, на който се основава) не може да се справя с общия обект. То изисква да дадем на всяка променлива точен тип, когато го декларираме. Добавяне (Мишена) към предната част на получите () командата е това, което прави това - казваме „Обработване“ „Хей, издърпваме обект„ Цел ”. Ще видите това като изливане в други програмни ресурси.

И накрая, имаме targets.get (I) част от линията. Това просто казва „издърпайте азItem -т елемент от целите ArrayList.

След като действително извлечем променливата T, можем да извикаме прочетените променливи, да извикаме методите й и като цяло да я накараме да ни оферира. В този пример първо извикваме боя () метод за изчертаване на целта на екрана. След това проверяваме дали пръчката се докосва (тъй като ще извикате от последното кодово поле, позицията на пръчката е представена от променливите wandX и Wandy). Ако има сблъсък, първо проверяваме дали пръчката е била вече вътре в целта. (С други думи, пръчката може да се е сблъскала с обекта при по-ранна итерация на настройвам() и все още да се намирате в полето за насочване.) Ако не е (т.е. за пръв път се удари в полето за цел), тогава превключваме текста и задаваме inTarget флаг. Ако пръчката вече е в целта, тогава ние просто поставяме целевото знаме на false, което предотвратява промяната на целта от всяка променлива на всяка итерация. рисувам(), Следващата команда, t.step (), просто увеличава целта х и ш позиции. И накрая, последното ако проверява дали целта вече не е видима на сцената. Ако не е (т.е. отклони от видимата област на екрана), целта се премахва от списъка ArrayList, като се използва Премахване() метод; след това в някакво ново място се добавя нова цел.

Уф! Това са много абстрактни неща, но си струва да се разбере, защото ще използвате тези техники отново и отново. Независимо дали използвате ArrayList, HashMap или друга обща структура от данни, разбирането на тези основни стъпки - създаване на нов обект, съхраняването му в общата структура на данните и извличането му - е от съществено значение за създаването на по-сложни програми.

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

Още: Вижте всички колони на Codebox



Може Да Се Интересувате

Метабаб, екстравертният виенски хакерско пространство

Метабаб, екстравертният виенски хакерско пространство


Hackerspace Happerings: Hackerspace Symposium в Берлин

Hackerspace Happerings: Hackerspace Symposium в Берлин


Направете тъмно в протест на SOPA / PIPA

Направете тъмно в протест на SOPA / PIPA


Alt.CES: Роботни топки и 3D кубчета

Alt.CES: Роботни топки и 3D кубчета