Мазмун
- Эмне үчүн анимацияны жүргүзүү үчүн маалыматтарды колдонуу керек?
- Берилиштерге негизделген маалыматтарды визуалдаштыруу
- Биз эмне кылабыз?
- Эмнени билебиз?
- Файлдар кайда?
- 01. Жаңы эскизди баштаңыз
- 02. Аудио маалыматтарды колдонуу менен биринчи эскизди түзүңүз
- 03. Аудио маалыматтарды боёк щеткасы катары колдонуңуз
- 05. Эскизиңизди толуктаңыз
- RadialArc {} классы:
- RadialArcs {} классы:
- 06. Андан ары алпарыңыз
p5.js бул атактуу жумушчу столунун чыгармачыл коддоо чөйрөсүн иштеп чыккан JavaScript эң акыркы ишке ашырылышы. Бул иштетүү процессинин күчүн жана колдонуунун жеңилдигин талап кылат жана аны браузериңизге жайгаштырат. Бул полотнодо сүрөт тартууга жардам берет, бирок веб-баракчаңыз менен интеграцияланып, сиздин "эскиз" DOMго жооп берип, аны башкарууга мүмкүнчүлүк берет.
p5.js анимациянын жана Интернеттеги маалыматтарды визуалдаштыруунун бир топ баш ооруларын жоюп, анимация менен эки жөнөкөй функцияны колдонуу менен иштөөнү жеңилдетет: жайгашуу() жана Draw ().
Бирок бул жөнөкөйлүктү чектейт деп ойлобоңуз, анткени сиз өз функцияларыңызды түзүп, коомчулук тарабынан түзүлгөн китепканалардын көпчүлүгүнүн жардамы менен Процессингди узак жолго таштай аласыз.
Көбүрөөк веб-дизайн куралдары жана кеңештер үчүн, биздин мыкты веб-хостинг провайдерлеринин тизмесин көрүп, мыкты веб-сайт куруучуну жана булут сактагычты тандап алыңыз.
- Чыгармачыл кодировкага кирүүнүн 6 жолу
Эмне үчүн анимацияны жүргүзүү үчүн маалыматтарды колдонуу керек?
Дизайн жана анимация системаларын түзүү - бул ар кандай маалыматтарды бере турган эрежелердин, параметрлердин жана өзгөрүлмө диапазондордун жыйындысын аныктоону билдирет. Тутумдун параметрлери менен ойноп, ар кандай маалыматтарды киргизүү мүмкүнчүлүгү, сиз системалык ыкманын ырааттуулугу менен чексиз чыгуучу вариацияларды түзө аласыз.
Ар кандай маалыматтар ар кандай визуалдык натыйжаларды жаратышы мүмкүн жана тез кыймылдаган, бай текстураланган маалыматтардын сонун булагы - аудио. Анимацияда дал ушул нерсени колдонобуз.
Берилиштерге негизделген маалыматтарды визуалдаштыруу
Берилиштерге негизделген анимация маалыматтарды визуалдаштыруубу? Ооба жана жок. Сиздин анимацияңыз визуалдык көрүнүш сыяктуу маалыматтардын визуалдык чагылдырылышы болот, бирок максаты салттуу визуалдаштыруудан айырмаланып турат. Берилиштерди визуалдаштыруу көрүүчүлөргө маалыматтар жөнүндө түшүнүк берүү үчүн колдонулат, андыктан графика маалыматтардын байланыш кызматында.
Бирок, биз кызыктуу жана текстуралык графикалык вариацияларды жаратуу үчүн, биз маалыматтарды чыгармачыл үрөн катары колдонобуз, андыктан маалыматтар графиканын кызматында. Албетте, бир дисциплина бири-бири менен тыгыз байланышта жана экинчиси менен кайчылаш чаңдашат, бирок маалыматтарды колдонууда өзүңүздүн ниетиңизди билүү жакшы.
Биз эмне кылабыз?
p5.js бизге үн файлын анализдөөнүн натыйжасында берилиштерге тез жана оңой мүмкүнчүлүк берет (MP3 сыяктуу). Биз p5.fft колдонуп, аудио ичинде ар кандай жыштыктарды талдап, (бас жана трембл) угуп, ошол жыштыктын "энергиясын" же амплитудасын элестетебиз.
Биз үндүн «формасын» ойногондо көрө алышыбыз үчүн, биз жөн гана үндүн учурдагы амплитудасын көрсөткүбүз келбейт, бирок маалымат түйүндөрүнүн «буферин» басып алабыз. Бул бизге баалуулуктардын жылма тарыхын көрсөтүүгө мүмкүнчүлүк берет.
Берилген маалыматтарды көрсөтүү үчүн, экрандын борборунан сырткы четине чейин бир катар концентрдик жааларды жаратабыз. Доонун узундугу маалыматтардын амплитудасын билдирет. Дайындар үчүн, мисалы, сызыктын салмагы жана түс сыяктуу башка визуалдык кодировканы колдонобуз.
Эмнени билебиз?
Код аркылуу иштеп, биз төмөнкүлөрдү камтыйт:
- Жаңы p5 эскизин орнотуу
- Үн жүктөлүүдө жана анализделүүдө
- Берилиштердин маанилерин көлөмү, формасы жана түсү сыяктуу визуалдык элементтерге салыштыруу
- Сүрөттөрдү тартуу үчүн анимациянын жана маалыматтардын абалын сактоо жана кодубузду кайрадан колдонууга ыңгайлуу кылуу үчүн сабактарды колдонуу.
Файлдар кайда?
Анимациянын файлдары башка адамдардын эскиздерин бөлүшүү, табуу жана форскировкалоо үчүн мыкты аянтча болгон OpenProcessingте жайгаштырылган. Бул сиз үчүн дагы сонун жер.
Биз аудио дайындарын колдонуп жаткандыктан, эскизге сүйрөп барыш үчүн MP3 файл керек болот. OpenProcessing боюнча жаңы эскизди орнотобуз; аудио жүктөлгөндөн кийин, дайындар алынганда жана жөнөкөй "маалымат формасын" түзгөндө сиздин эскиз ушундайча көрүнөт:
Толтурулган эскиз ушундайча көрүнөт:
Же болбосо, сиз p5.js онлайн редакторун колдонсоңуз болот же китепкананы жүктөө же CDN аркылуу өз проектиңизге киргизсеңиз болот.
01. Жаңы эскизди баштаңыз
Акысыз OpenProcessing каттоо эсебин алыңыз жана профилиңиздеги баракчадан Эскиз түзүү баскычын чыкылдатыңыз. Андан кийин p5.js орнотулган эки функцияны камтыган эң негизги эскиздерди жаратат:
- жайгашуу() - Бул бир гана жолу иштеп, жаңы полотнону орнотуу үчүн колдонулат
- Draw () - Бул жерде сиз ар бир кадрды иштетүүнү каалаган кодду коёсуз
Сиз байкайсыз фон () орнотулганда бир гана жолу чакырылат. Бул экранды тазалайт, андыктан экранды ар бир кадрдан тазалоону кааласаңыз, анда ушул нерсенин башына киргизиңиз Draw () функциясы да.
P5.js сайтынан таба алган бир нече мисалдарды колдонуп, ушул жерде бир нече кодду ойнотуңуз.
02. Аудио маалыматтарды колдонуу менен биринчи эскизди түзүңүз
Менин башталгыч эскизиме өтүңүз.
Ойнотуу баскычын басып, сиз MP3 файлын кенепке таштоону суранган текстти көрө аласыз. Жүктөлүп бүткөнчө бир нече секунд күтүп, андан кийин ойноону баштоо үчүн полотнону чыкылдатыңыз. Чыгышыңыздын артынан эллипсти көрүшүңүз керек, ал сиз жүктөп берген музыканын басс амплитудасы менен катар түсүн өзгөртүп жатат.
Коддун көпчүлүк бөлүгү комментарийленген, бирок бир нече негизги элементтерин карап көрөлү:
Эскиздин башында, алдыда жайгашуу(), биз кээ бир глобалдык өзгөрмөлөрдү түздүк.
Ичинде жайгашуу() бизде бир-эки маанилүү саптар бар:
colorMode (HSB, 360,100,100);
colorMode () p5.jsди RGB жана HSB сыяктуу ар кандай түстүү мейкиндиктерде иштөөгө, ошондой эле каналдарда чабыттап жүргөн масштабды конфигурациялоого мүмкүндүк берет. Бул жерде биз HSB диапазондорун демейки орнотуудан көрө (0дон 255ке чейин) эмес, Photoshop аркылуу жакшы тааныш болушу мүмкүн болгон маанилерге койдук.
canvas.drop (gotFile);
Бул өтө пайдалуу p5.js функциясы биздин полотнодогу файлдарды түшүрүү иш-чараларын угууга мүмкүнчүлүк берет. Файлды түшүрүү иш-чарасы келгенде, биз чалып жатабыз gotFile () анын туура түрү экендигин текшерип, үндү талдап баштаңыз.
soundFile = жаңы p5.SoundFile (file.data);
Бул жерде биз ташталган файл маалыматтарыбызды SoundFile. Үн файлы болгондо, биз төмөнкү кодду колдонобуз:
- initSound () жаңы FFT нускасын орнотуу (үнүн талдоо үчүн)
- analyseSound () учурдагы үн блогун ар бир кадрга талдоо
- getNewSoundDataValue () колдонуу fft.getEnergy () бизге үндүн учурдагы амплитудасын берүү үчүн ар бир кадр. Бул демейки 0 ден 255 тен 0 га чейин 1 диапазонуна которулат.
Кеңеш: Берилген маалыматтарды масштаб, ылдамдык жана түс сыяктуу визуалдык параметрлерге картага түшүргөндө, аны оңойураак колдонсоңуз болот, анда 0 ден 1 диапазонго которуу пайдалуу.
Draw () функциясын карап көрөлү. Бул сызык бас жыштыгынын учурдагы амплитудасын талап кылат (0дон 1ге чейин) жана ага өзгөрмө берет myDataVal.
var myDataVal = getNewSoundDataValue ("бас")
Биз каада-салтыбызды атайбыз getDataHSBColor () маалыматтын маанисин Реңкке, Каныктыкка жана Жарыктыкка өзүнчө картага түшүрүп, бизге түс берет. Берилиштер канчалык жогору болсо, түс ошончолук спектри боюнча жылып, өңү ачык жана каныктырылат.
var myDataColor = getDataHSBColor (myDataVal);
Эллипсти чийүүдөн мурун, ага маалыматтын маанисине 200 (px) көбөйтүп, көлөмүн беришибиз керек. Ошентип, маани канчалык жогору болсо, эллипс ошончолук чоң болот.
var myEllipseSize = 200 * myDataVal;
03. Аудио маалыматтарды боёк щеткасы катары колдонуңуз
Бир аз кызыктуу болуш үчүн, комментарий калтырыңыз фон () чалуу Draw () функциясы менен сиз үн реактивдүү эллипсти колдонуп, боёк менен боёсоңуз болот!
05. Эскизиңизди толуктаңыз
Бир жыштык үчүн бир маалымат эллипсинин сүрөтүн тартуу абдан сонун, бирок эми бас жана тебүү үчүн бир катар маалыматтык жаа түзөбүз. Ошондой эле, үндүн формасын жакшыраак көрүүгө жардам берүү үчүн мурунку баалуулуктардын буферин чийебиз.
Эскиздин ушул даяр нускасына баш багып, аны иштетип, андан кийин MP3 жүктөп коюңуз.
Эми сиз экрандын ортосунан чыгып келе жаткан бир катар жааларды көрө аласыз. Горизонталдык жаа - басстын визуалдаштырылышы, ал эми вертикалы MP3 үнүн тандап алат.
Кодду карап туруп, орнотулган, жүктөлгөн, талданган жана алынган маалыматтардын көпчүлүгү акыркы эскиз менен бирдей болот, ошондуктан биз буга көңүл бурбай коё алабыз. Бул жерде бир аз коддор бар, ошондуктан мурункудай эле бир нече негизги ойлорду тандап алалы.
Жааларды түз эле тартуунун ордуна Draw (), биз чындыгында айрым колдонуучулук класстарды түзүп жатабыз:
- класс RadialArc {} жеке жаа маалыматтарынын маанисин кармап, жаа тартат
- класс RadialArcs {} 'RadialArc' инстанцияларынын жыйнагын башкарат
Ар бир класстын аныктамасында конструктор бар, анда биз кээ бир негизги баалуулуктарды коюп жатабыз, ошондой эле класстын жүрүм-турумун өзгөртө турган параметрлерди өткөрүп жатабыз. Эми аларды тыкыр карап көрөлү.
RadialArc {} классы:
Бул бир маалыматтын маанисин кармаган жана симметриялуу жаа жуптарын тарткан класс.
setValue () жана getValue () маалыматты жаадан кирип-чыгарууга мүмкүнчүлүк түзүп, маалыматты жаңыртуу менен биздин жаасыбыздын массивинен өткөрүп турабыз. redrawFromData () жаасын кайрадан эсептөө жана кайрадан тартуу үчүн чакырылган.
drawArc () бул жерде биз ыңгайлуу p5.js функциясы деп атайбыз arc (). Arc () Тригонометрияны өзүбүз жасаганга караганда ылдамыраак, бирок биз ага бир нече маанини, абалды, өлчөмдү жана эң маанилүүсү, биздин жаа үчүн башталгыч жана аяктоочу бурчту өткөрүп беришибиз керек.
Ал бурч градус эмес, "радиан" менен өлчөнөт. Radians градус сыяктуу, бирок башка масштабда: 360 ° 2 x pi радианга барабар. P5.js үчүн орнотулган туруктуу константалар бар PI, HALF_PI жана QUARTER_PI жана башкалар.
RadialArcs {} классы:
Бул биздин массивди жараткан башкаруу классы RadialArc {} маалыматтарды ар бирине жана ичине жылдырып, арканы чакырып, аларды жаңыртып турат redrawFromData () функция.
Баштоо үчүн RadialArcs () требль жана басс класстары, карап көргүлө жайгашуу(). Эки түзүп жатканыбызды байкасаңыз болот RadialArcs () мисалдары, ошондой эле биздин колдонуучунун параметрлери.
Бул параметрлер: жаа саны, ички жана сырткы жаа өлчөмдөрү, баштапкы бурч, сызыктын максималдуу салмагы жана түстүн түс диапазону. Бул колдонуучулук класстарды түзүү менен, ал биздин кодду кайра колдонууга мүмкүнчүлүк берет, бирок ошол параметрлерди өткөрүп, ар бир инстанцияны жекелештирет.
Жаа объектилери башталгандан кийин, ар бир кадр чакырылат updateRadialArcs () жана drawRadialArcs () негизги p5 ичинде Draw () функциясы, анимация кандайча жаңырат жана кыймылдайт.
06. Андан ары алпарыңыз
Биз бул жерде бир топ коддорду камтыдык, бирок сиз маалыматтарды кандайча алып жаткандыгыбызды жана көлөмү, абалы, узундугу, салмагы жана түсү сыяктуу визуалдык элементтерге кандайча колдонуп жаткандыгыбызды көрө аласыз деп ишенем.
Андан ары кетүү үчүн, жаа, топ жана бурчтардын саны менен ойноңуз. Түстөр диапазонун өзгөртүп, ар кандай фигураларды тартуу үчүн жаңы класстарды түзүңүз.
Бул мисалда биз ар дайым агып турган маалыматтарды колдондук жана тез кадр ылдамдыгы менен бирге анимациянын иллюзиясын жаратат. Бирок, бардык эле маалыматтар андай эмес жана жайыраак жаңырта алат. Жайыраак берилиштер үчүн, фигураларыңыздын анимациясын алардын учурдагы жана максаттуу өлчөмдөрүнүн ортосунда 'аралык' коюу менен, жылмакай анимация түзсөңүз болот.
Кийинки маалыматтарга негизделген анимацияңызга ийгилик!
Бул макала алгач 320 санында жарыяланган тор, веб-дизайнерлер жана иштеп чыгуучулар үчүн дүйнөдөгү эң көп сатылган журнал. 320 чыгарылышын сатып алуу бул жерде же бул жерде жазылуу.
