Yaradıcı kodlaşdırma - JavaScript-də VJ mühərriki necə yaradılır

JavaScript'i veb səhifələrə dinamik şəkildə necə vurmağı öyrənin

Instagram-da radarboy3000-dən

İllərdir öz sadə doğma VJ mühərrikimdən istifadə edərək çıxışlarım və qurğularım üçün brauzerdən istifadə edirəm. İndi bir neçə sadə fənd öyrəndikdən sonra sən də edə bilərsən ...

Sürətli giriş

Əvvəlcə VJ mühərriki nədir? deyə soruşa bilərsiniz. Və bəlkə də: bir VJ nədir? Vikipediya VJing xüsusiyyətlərini aşağıdakı kimi müəyyənləşdirir:

Texnologiyanın vasitəçiliyi ilə və tamaşaçı üçün, musiqiyə sinxronizasiya zamanı görüntülərin yaradılması və ya manipulyasiyası.

Və VJ mühərriki sadəcə VJing üçün istifadə olunan bir proqramdır.

Bəs orada çox sayda VJ mühərriki olanda niyə özüm quracam?

Mən heç vaxt VJ proqramını sevmirdim - onlar həmişə şişmiş hiss etdilər və hər kəsin əşyalarını eyni görünməyə məcbur etdilər. Photoshop-a ilk dəfə əllərinizi atdığınız və bir dəstə əşyanı qarışdırdığınız, bir neçə filtr əlavə etdiyi və sərin olduğu (90-cı illər olduğuna görə) bu cürdür. Ancaq ən başlıcası, inkişaf edən məzmun və səs girmə tezliyi arasında daha sıx və daha yaxşı inteqrasiya istədim.

Mən bu günlərdə nadir hallarda VJ edirəm, amma yenə də qurğularımın və çıxışlarımın çoxunu idarə edir - hər yerdə RBVJ istifadə etdiyim çoxsaylı vizual görüntülərə ehtiyacım var (RB Radarboy üçündür - bu mənimdir).

FlashV-dən sıçramışam, Qenerasiya və nəhayət indi JavaScript-də, hamısı eyni sadə sistemdən istifadə edərək RBVJ illər ərzində bir sıra iterasiyalardan keçmişdir.

Mən əvvəllər onu və məzmunumu açmışdım (Git günlərindən əvvəl və açıq mənbəli deyilən bir şeyin olduğunu bilmədən). Bir dəstə mükafat qazandı və məzmunumun gözəl yerlərdən istifadə olunduğunu gördüm. Beləliklə, yaradıcı kodlaşdırmaya necə getdiyimi göstərmək üçün bir dəstə məzmunla birlikdə onu yenidən başqalarına təqdim etməyin vaxtı gəldiyini düşündüm.

Instagram-da radarboy3000-dən

Ok, bu kifayət qədər uzun bir tətbiqdir. Pulunu mənə göstər, sən demə!

1. Məzmunun qurulması

Əslində, bir VJ mühərriki yalnız xülya məzmunlu bir brauzer və pleyerdir. Beləliklə, həqiqətən ehtiyacımız, məzmunumuzu almaq və oynamaq üçün bir yoldur.

Sadəcə bütün məzmununuzu bir qovluğa ata bilərsiniz, ancaq bu sistem mənim üçün ən yaxşı işləmişdir və klaviatura idarəsi üçün sadə bir quruluşa imkan verir:

  • Dəstləri dəyişdirmək üçün 0-9 keçin
  • Bankları dəyişdirmək üçün 0–9 düymələri
  • Bank daxilində məzmun seçmək üçün az düymələr.

Bu işləmək üçün 2700 fayl verir. Həqiqətən (həqiqətən !?) daha çox istəsəniz, hər bir banka başqa birinə 26 fayl daxil etməklə əlavə edə bilərsiniz).

Əksər HTML layihələri kimi sadə bir üst səviyyəli bir quruluşa sahibəm və VJ məzmununu sənət qovluğunun içərisində nömrəli bir quruluşda saxlayıram:

index.html / css / js / art <- məzmun bura gedir

Məzmun qovluğumda (/ art) dəstlər adlandırdığım 10 nömrəli qovluq var. Hər dəstin içərisində bankları təmsil edən daha 10 ədəd qovluq var. Hər bir bankın içərisində 27 fərdi nömrəli məzmun sənədləri var, belə:

İçəridə / sənətdə 10 dəst qovluq var. Hər dəstdə 10 bank var, hər bir bankın içərisində 27 javascript faylı var. Banklar və dəstlərə nömrə düymələri və məzmun az düymələri vasitəsilə daxil olur

2. Məzmunu almaq və oynamaq

İndi sadəcə sənədlərimizə daxil olmaq üçün bir yola ehtiyac duyuruq ki, bu da indeks səhifəmizə məzmun vurmaqla edilir.

Və bunu etmək olduqca sadədir.

Sehrli, mən loadJS () adlı bir funksiyada baş verir. Səhifənin başı içərisində bir skript etiketi yaradır və sonra bir az JavaScript daxil edir (bu bizim məzmunumuz olacaq). Bu funksiyanı bir düymə basmaqla işə salırıq (eyni zamanda midi və ya OSC siqnalı ola bilər) və içimizə istədiyimiz məzmunun adını ötürürük. Sonra skript səhifədə mövcuddur.

// INJECT JS ONTO SƏHİFƏ
var my_script;
funksiya loadJS (fayl adı) {
 // əvvəllər (my_script! = müəyyən olunmamış) sənəd yüklənmişsə, vurulmuş JavaScript silmək.getEmissionsByTagName ("baş") [0] .removeChild (my_script);
 
// skript elementini yaratmaq my_script = document.createElement ('script'); my_script.setAttribute ("növü", "mətn / javascript");
// Faylı içinə yükləyin və səhifənin başlıq etiketinə daxil edin my_script.setAttribute ("src", filename); sənəd.getEmissionsByTagName ("baş") [0] .appendChild (my_script);
}

Bir düymə basqılarını bir hadisə dinləyicisi ilə dinləyirik ki, bu da KeyDown () adlı bir funksiyanı çağırır:

windows.addEventListener ('keydown', funksiya (hadisə) {onKeyDown (hadisə);});

Dinləyici hadisə obyektini bir dəstə faydalı maddədən ibarət olan funksiyaya keçir. Budur bizi maraqlandıran şey: event.keycode. 'A' düyməsini basmaq bizə 65 kod düyməsini verir və 'z' düyməsini basmaq bizə 90 kod düyməsini verir. Beləliklə, biz sadəcə 65 kodunu çıxarırıq ki, tələb olunan sayda nömrəni verək və bu dəyəri dəyişən fayla keçirək ( ) bir az göstərəcəyim funksiya.

Eynilə, 0–9 düymələrini (48-dən 57-dəki kodlar, 48-ni çıxarmaq) bankların dəyişdirilməsini istəyirik. Dəyişiklik düyməsinin dəstləri yükləmək üçün basıldığını yoxlamaq üçün də test istəyirik. Tədbir obyekti bunun üçün lazımlı event.shiftKey dəyişəninə malikdir, buna görə onKeyDown funksiyamız belə görünəcəkdir:

// KeyPress Stuff
funksiyası onKeyDown (hadisə) {
    var keyCode = event.keyCode;
   // DƏYİŞMƏSİ // düymələri az if (keyCode> = 65 && keyCode <= 90) {changeFile (keyCode - 65);
   // DƏSTƏK VƏ BANK DƏYİŞDİRMƏSİ // 0-9} düymələri başqa halda (keyCode> = 48 && keyCode <= 57) {
// növbə düyməsinin də basıldığını yoxlayın (event.shiftKey) {changeBank (keyCode-48); } başqa {ChangeSet (keyCode-48); }
   }
}

ChangeFile () funksiyası əsasən düyməni basaraq URL adresinə çevirir. Məzmunu səhifəyə daxil etmək üçün loadJS () funksiyamızı çağırır və uzaqlaşırıq ...

Instagram-da radarboy3000-dən

Beləliklə, dəyişiklikFile () funksiyamız belə görünəcəkdir:

var current_file = 0; var cari_set = 0; var current_bank = 0;
var art_location = "sənət /";
// İSTEHSAL YÜKSƏK FUNKSİYALARI
funksiya dəyişdirməkFile (fayl) {
current_file = fayl; var loc = current_set + '/' + current_bank + '/' + current_file; var filename = contentLocation + loc + '.js'; loadJS (fayl adı); sənəd.location.hash = loc; //console.log("File: "+ loc);
}

Fərqli vizual kolleksiyalara sahib olmaq istəyim halında art_location dəyişkənliyim var (fərqli şoular və qurğular üçün fərqli qovluqlara sahib ola bilərəm). Harada olduğumu görməyimi asanlaşdırmaq üçün brauzerin URL-inə hash kimi fayl adını əlavə edirəm (https://127.0.0.1/#set/bank/file).

ChangeBank () və changeSet () funksiyaları cari_bank və cari_set dəyişənlərini təyin edir. Sonra düzgün faylı çıxarmaq üçün yalnız dəyişiklikFile () funksiyasını çağırırlar.

Ev təsərrüfatları üçün də bütün sayğacları sıfırladım - bankları dəyişdirəndə cari_faylı 0-a, dəstləri dəyişdirdiyim zaman isə cari_bankı 0-a qaytarıram. Bu ona görə bilirəm ki, bankları dəyişdirəndə oynayan fayl bankdakı ilk sənəd olacaq. Eynilə, dəstləri dəyişdirdiyim zaman oynayan fayl, cari dəstin ilk bankından ilk sənəd olmağa bərpa olunur (current_set / 0 / 0.js).

Bir az ağızlı, amma funksiyaları həqiqətən çox sadədir:

funksiya dəyişdirməkSet (dəst) {
current_set = set; konsol.log ("ChangeSet:" + current_set);
  // bank nömrəsini dəyişdirməkBankı sıfırlayın (0);
}
funksiyanın dəyişdirilməsiBank (bank) {
current_bank = bank; konsol.log ("dəyişiklikBank:" + cari_bank);
  // fayl nömrəsini sıfırlayın və yeni fayl dəyişdirinFayl (0);
}

Və əsas VJ mühərrikiniz üçün tam kod belə görünür:

// İSTEHSAL YÜKSƏK FUNKSİYALAR
var art_location = "/ sənət";
var fileref; var current_file = 0; var cari_set = 0; var current_bank = 0;
funksiya dəyişdirFile (fayl) {sıfırlama () current_file = fayl; var loc = current_set + '/' + current_bank + '/' + current_file; var filename = 'art /' + loc + '.js'; loadJS (fayl adı); sənəd.location.hash = loc; //console.log("File: "+ loc); }
funksiya dəyişdirməkSet (dəst) {current_set = set; cari_bank = 0; konsol.log ("ChangeSet:" + current_bank); // dəyişdirməkFile (0); }
funksiyanın dəyişdirilməsiBank (bank) {current_bank = bank; konsol.log ("dəyişiklikBank:" + cari_bank); dəyişiklikFile (0); }
funksiyanın yenidən qurulması () {ctx.clearRect (0, 0, w, h); ctx2.clearRect (0, 0, w, h); ctx3.clearRect (0, 0, w, h); ctx.lineCap = "butt"; }
// INJECT JS ONTO SƏHİFƏ
funksiya loadJS (fayl adı) {
if (fileref! = müəyyən edilməmiş) sənəd.getEmissionsByTagName ("baş") [0] .removeChild (fileref); fileref = sənəd.createElement ('script'); fileref.setAttribute ("növü", "mətn / javascript"); fileref.setAttribute ("src", fayl adı); sənəd.getEmissionsByTagName ("baş") [0] .appendChild (fileref);
}
Instagram-da radarboy3000-dən

Göstərmək üçün qalan yalnız bu kimi qapalı funksiyanı istifadə edən faktiki məzmun sənədlərini necə qurulduğumdur:

// RBVJ sənəti
rbvj = funksiya () {
  draw = function () {// burada yaradıcı kodlaşdırma edin}
} ();

Rbvj () funksiyası səhifəyə vurulan şeydir. Yenidən istifadə olunur, hər dəfə səhifəmə yeni bir fayl daxil edildikdə yaddaş bütün əvvəlki məzmunlardan təmizlənir.

Kodu kodlaşdıraraq ('()' funksiyasından sonra baxın), rbvj () funksiyasının içərisindəki hər hansı bir kod, səhifəyə enjekte edildikdə avtomatik olaraq işə düşəcəkdir.

Məzmunun içərisində heç-heçə () funksiyası (bu mənim öz yaradıcılıq_coding.js köməkçi skriptimdən) olduğunu görürsünüz. Bu, JavaScript-nin requestAnimationFrame () istifadə edən və çərçivə sürətini dəyişməyi bacaran sadə bir döngədir.

var frame_number = 0; var frame_rate = 60; var last_update = Tarix.now ();
funksiya loop () {
var indi = Tarix.now (); var elapsed_mils = indi - son_update;
if ((typeof windows.draw == 'function') && (eleden_mils> = (1000 / windows.frame_rate))) {windows.draw (); frame_number ++; son_update = indi - keçən_mils% (1000 / windows.frame_rate); } requestAnimationFrame (loop);
};

Bu da çox şeydir. İndi bükücüdə işləyən VJ mühərriki var.

3. Faydalı ola biləcəyi bəzi başqa şeylər

Mən adətən sadəcə kompüterimin səs girişini məkanın qarışdırıcısından və ya amp-dən bir girişə qoşuram (standart mikrofon giriş mikrofonum.Ms faylının bir versiyasını istifadə edirəm, bu barədə daha ətraflı oxuya bilərsiniz). Giriş səviyyələrini yuxarı və ya aşağı tənzimləmək üçün açarların quraşdırılması (mənim vəziyyətimdə, artıma və mənfi düymələr) var, buna görə mikserə girməyi davam etdirmək məcburiyyətində deyiləm.

Səs girişi üçün təhlükəsiz bir HTTPS bağlantısına ehtiyacınız olduğunu və ya Atom'un Canlı Serveri kimi bir şey istifadə etdiyinizi nəzərə alsaq, onda quraşdırıldığını da unutmayın.

Sadə audio və vizual filtrlər üçün quraşdırılmış digər düymələrdən də bir dəstəyim var (burada bir pikselasiya filtrini necə hazırlamağınıza baxın).

Mən əsasən bir önizleme ekranı / interfeysi istifadə etmirəm, ancaq birini qurmaq kifayətdir. Yeni bir HTML səhifəsi yaradın və səhifələrin bir yuva vasitəsi ilə bir-biri ilə danışmasına icazə verin.

Və nəhayət, son bir ipucu: məzmunu inkişaf etdirərkən, brauzerin cari hash dəyərində oxumaq üçün bir funksiya et və səhifə yüklənməsində loadFile () funksiyasını çağırın. Beləliklə, bir fayl üzərində işləyərkən və səhifəni yenidən yüklədiyiniz zaman həmin sənəd avtomatik olaraq göstərilir.

Bu da çox şeydir. Ümid edirəm ki, oradan çıxmağınıza və məzmununuzu daha çox göstərməyə kömək edir. Əvvəldə qeyd etdiyim kimi, əşyalarımı necə yaratdığımı hiss edə bilmək üçün birlikdə oynamaq və sınamaq üçün bir dəstə məzmun əlavə etdim. Hər hansı birindən istifadə etsəniz və ya dəyişdirsəniz, necə, harada və nə ilə etdiyinizi görmək istərdim. Xahiş edirəm mənə bir xətt çəkin.

Xoşbəxt kodlaşdırma. Və oxumaq üçün təşəkkür edirəm!

Həmişə olduğu kimi tam kod Github-da mövcuddur.

Bu məqalə, təmiz JavaScript-də yaradıcı kodlaşdırmanı öyrənmək üçün davam edən bir sıra dərsliklərin bir hissəsidir. Bəli, bunu ES6-da etməliyəm, amma bunu başa düşmək üçün mümkün qədər sadə saxlamaq istədim.

Əvvəlki bütün əvvəlki yaradıcı kodlaşdırma dərslərimi buradan görə bilərsiniz.

Yeniləmələr, texnikalar və göz konfetləri üçün burada məni izləyin: