Джордж Галли
Узнайте, как динамически вводить JavaScript на веб-страницы
В течение многих лет я использовал браузер для моих выступлений и установок, используя свой собственный простой доморощенный двигатель VJ. И теперь, после того, как вы узнаете несколько простых трюков, вы тоже можете …
Быстрый введение
Во-первых, что является двигателем VJ? Вы можете спросить. И, может быть, даже: что такое Vj? Википедия Определяет характеристики VJING как:
А двигатель VJ – это просто программное обеспечение, используемое для VJING.
Но зачем мне построить свои собственные, когда там так много двигателей VJ?
Я никогда не любил VJ Software – они всегда чувствовали раздутые и заставили все вещи выглядеть одинаково. Вроде, когда вы впервые получили свои руки на Photoshop и просто смешали кучу вещей вместе, добавили некоторые фильтры, и это было круто (потому что это было 90-е годы). Но больше всего, я хотел более жестче и лучшую интеграцию между развивающимся контентом и звуковыми входными частотами.
Я редко VJ в эти дни, но он все еще ведет большинство моих установок и спектаклей – где угодно, мне нужно несколько визуализаций, которые я использую RBVJ ( RB для Радарбой – Это я) как обертка/игрок.
RBVJ Прошел несколько итераций в течение многих лет, когда я отскочил от Flash, обрабатывать и, наконец, теперь в JavaScript, все используя одну и ту же простую систему.
Ранее я ранее открыл его и мое содержание (до дни Git и не совсем зная, что было называется открытым источником). Он выиграл кучу наград, и я видел, как мой контент используется в целой кучке мест что было хорошо . Поэтому я думал, что пришло время сделать его снова для других, наряду с кучей контента, чтобы показать, как я иду о творческом кодировании.
Хорошо, это достаточно длинное введение. Покажите мне деньги, вы говорите!
1. Структурирование содержания
По сути, двигатель VJ – это просто модный браузер и плеец контента. Так что нам действительно нужно, это способ получить и играть наш контент.
Вы могли бы просто бросить весь свой контент в папке, но эта система – это то, что было лучше для меня, что позволяет простую структуру для управления клавиатурой:
- Shift 0-9 для изменения наборов
- Клавиши 0-9, чтобы изменить банки
- Клавиши A-Z, чтобы выбрать контент в банке.
Это дает вам 2700 файлов для работы. Если вы действительно (действительно!?) Хотел больше, вы также можете удвоить, что доступа к еще 26 файлам на банк с Shift A-Z).
Как и большинство HTML-проектов, у меня есть простая структура верхнего уровня, и сохраняйте содержимое Vj в нумерованной структуре внутри искусство Папка, как так:
index.html/css/js/art <- content goes here
Моя папка Content (/Art) содержит 10 пронумерованных папок, которые я ссылаюсь на наборы Отказ Внутри каждого набора есть еще 10 пронумерованных папок, представляющих банки Отказ А внутри каждого банка 27 индивидуальных пронумерованных файлов контента, как так:
2. Извлечение и воспроизведение контента
Теперь нам просто нужен способ получить доступ к нашим файлам, который выполняется путем инъекционного контента на нашу индексную страницу.
И это довольно просто сделать это.
Магия происходит в функции, называемой у меня loadjs (). Он создает тег скрипта в голове страницы, а затем вводит в него какой-то JavaScript (который был бы нашим контентом). Мы запускаем эту функцию с помощью клавиш (но также может быть сигнал MIDI или OSC) и передайте имя файла содержимого, которое мы хотим в него. Затем скрипт доступен на странице.
// INJECT JS ONTO PAGE
var my_script;
function loadJS(filename) { // delete injected JavaScript if there's been some loaded in before if (my_script != undefined) document.getElementsByTagName("head")[0].removeChild(my_script); // create a script element my_script = document.createElement('script'); my_script.setAttribute("type", "text/javascript"); // Load the file in and insert it into the page's head tag my_script.setAttribute("src", filename); document.getElementsByTagName("head")[0].appendChild(my_script);}
Мы слушаем KeyPresses с прослушивателем событий, который вызывает функцию под названием lekeydown () , вот так:
window.addEventListener( 'keydown', function( event ) { onKeyDown( event ); });Слушатель передает объект события к функции, который содержит кучу полезных вещей. Вот что мы заинтересованы в: Event.KeyCode Отказ Нажатие клавиши «A» дает нам KeyCode Из 65 и нажав нам «Z» дает нам KeyCode 90. Итак, мы просто вычитаем 65 от KeyCode Чтобы дать нам необходимый номер файла и пройти это значение в ChangeFile () Функция, которую я покажу немного.
Точно так же мы хотим ключей 0-9 (ключевые коды 48-57, так что вычтите 48), чтобы изменить банки. Мы также хотим тест, чтобы увидеть, была ли клавиша Shift нажата на нагрузки. Объект события имеет удобство Event.shiftkey Переменная для этого, так что наши lekeydown Функция будет выглядеть так:
// KeyPress Stuff
function onKeyDown( event ) {var keyCode = event.keyCode;
// CHANGE FILE // keys a-z if ( keyCode >= 65 && keyCode <= 90 ) { changeFile(keyCode - 65); // CHANGE SET AND BANK // keys 0-9 } else if ( keyCode >= 48 && keyCode <= 57 ) { // Test whether the shift key is also being pressed if( event.shiftKey ) { changeBank( keyCode-48 ); } else { changeSet( keyCode-48 ); }}
}
ChangeFile () Функция в основном просто берет клавишу и преобразует его в URL. Это называет нашими loadjs () Функция, чтобы ввести контент на страницу, а бум мы находимся …
Итак, наш ChangeFile () Функция будет выглядеть так:
var current_file = 0;var current_set = 0;var current_bank = 0;
var art_location = "art/";
// FILE LOADER FUNCTIONS
function changeFile(file) { current_file = file; var loc = current_set + '/' + current_bank + '/' + current_file; var filename = contentLocation + loc + '.js'; loadJS(filename); document.location.hash = loc; //console.log("File: " + loc);}
У меня также есть Art_Location Переменная в случае, если я хочу иметь разные коллекции визуальных эффектов (поэтому у меня могут иметь разные папки для разных шоу и установок). Я также добавляю имя файла в качестве хэши (https://127.0.0.1/#set/bank/file) к URL-адресу браузера, чтобы легко увидеть, где я есть.
Наше ChangeBank () и Изменение () Функции Установите reeure_bank и current_set Переменные. Тогда они просто называют ChangeFile () Функция, чтобы поднять правильный файл.
Для домашнего хозяйства я также сбрасываю все счетчики – установка Current_file Вернуться к 0, когда я меняю банки, а reeure_bank Вернуться к 0, когда я меняю наборы. Это так, что я знаю, что когда я меняю банки Воспроизведение файлов будет первым файлом в банке. Точно так же, когда я меняю Наборы, Воспроизведение файла будет сброшена, чтобы быть первым файлом из первого банка текущего набора ( Teake_set/0/0JS ).
Немного глоток, но функции на самом деле суперпростые:
function changeSet(set) { current_set = set; console.log("changeSet: " + current_set);// reset bank number changeBank(0);
}
function changeBank(bank) {current_bank = bank; console.log("changeBank: " + current_bank);// reset file number and load new file changeFile(0);
}
И поэтому полный код для вашего базового двигателя VJ выглядит так:
// FILE LOADER FUNCTIONS
var art_location = "/art";
var fileref;var current_file = 0;var current_set = 0;var current_bank = 0;
function changeFile( file ) { reset() current_file = file; var loc = current_set + '/' + current_bank + '/' + current_file; var filename = 'art/' + loc + '.js'; loadJS( filename ); document.location.hash = loc; //console.log("File: " + loc);}function changeSet( set ) { current_set = set; current_bank = 0; console.log( "changeSet: " + current_bank ); // reset changeFile( 0 );}function changeBank( bank ) { current_bank = bank; console.log( "changeBank: " + current_bank ); changeFile( 0 );}function reset(){ ctx.clearRect( 0, 0, w, h ); ctx2.clearRect( 0, 0, w, h ); ctx3.clearRect( 0, 0, w, h ); ctx.lineCap = "butt";}// INJECT JS ONTO PAGE
function loadJS( filename ) {if ( fileref != undefined ) document.getElementsByTagName( "head" )[ 0 ].removeChild( fileref ); fileref = document.createElement( 'script' ); fileref.setAttribute( "type", "text/javascript" ); fileref.setAttribute( "src", filename ); document.getElementsByTagName( "head" )[ 0 ].appendChild( fileref );
}
Все, что осталось показать, что вы являетесь структурой фактических файлов содержимого, которые используют инкапсулированную функцию, подобную так:
// RBVJ art
rbvj = function() { draw = function() { // do some creative coding here }}();
Функция RBVJ () это то, что вводится на страницу. Он повторно используется, так что каждый раз, когда новый файл вставлен на мою страницу, память промыта от всего предыдущего контента.
Инкапсулируя код (см. «()» После функции), любой код внутри RBVJ () Функция будет работать автоматически, когда файл вводится на страницу.
Вы заметите, что внутри контента у меня есть Нарисуйте () Функция (это из моего собственного Creative_coding.js Утилительный скрипт). Это просто простая петля, которая использует JavaScript ProwelsimationFrame () и умеет изменять частоту кадров.
var frame_number = 0;var frame_rate = 60;var last_update = Date.now();
function loop() {var now = Date.now(); var elapsed_mils = now - last_update;
if ((typeof window.draw == 'function') && (elapsed_mils >= (1000 / window.frame_rate))) { window.draw(); frame_number++; last_update = now - elapsed_mils % (1000 / window.frame_rate); } requestAnimationFrame(loop);};
И это в значительной степени это. Теперь у вас есть рабочий двигатель VJ в Bowser.
3. Некоторые другие вещи, чтобы знать, что может быть полезным
Я обычно просто подключил звук моего компьютера прямо на вход с микшера или AMP проведения (Я использую версию моего стандартного ввода микрофона Mic.js Файл, который вы можете прочитать больше о здесь ). И у меня установка клавиш (в моем случае плюс и минус ключевые ключи), чтобы отрегулировать уровни входных элементов вверх или вниз, поэтому мне не нужно получать доступ к смесителю.
Также обратите внимание, что для звукового входа вам понадобится безопасный подключение HTTPS – или если вы используете что-то вроде живого сервера Atom Atom, то это встроен.
У меня также есть куча других ключей, настроенных для простых аудио и визуальных фильтров (см. Как сделать фильтр Pixelation здесь ).
В основном я не использую экран/интерфейс предварительного просмотра, но достаточно легко построить один. Просто создайте новую HTML-страницу и позвольте страницам говорить друг с другом через сокет.
И, наконец, последний совет: при разработке контента просто сделайте функцию для чтения в текущем хеш-значении браузера и вызовите LoadFile () Функция на странице нагрузки. Таким образом, когда вы работаете над файлом, и вы перезаряжете страницу, этот файл автоматически отображается.
И это в значительной степени это. Надеюсь, это поможет вам выйти туда и показать больше вашего контента. Как я уже упоминал ранее, я включил целую кучу контента для вас, чтобы играть с и тестировать, чтобы вы могли почувствовать, как я создаю свои вещи. Если вы используете или измените любого из этого, я бы хотел увидеть, как, где, и что вы с этим сделали. Поэтому, пожалуйста, сделайте мне линию.
Счастливое кодирование. И спасибо за чтение!
Как обычно, полный код доступен на Github Отказ
Эта статья является частью текущей серии учебных пособий по изучению творческого кодирования в чистом JavaScript. Как да, я должен делать это в ES6, но хотел, чтобы это было максимально просто понять.
Вы можете увидеть предыдущие мои предыдущие творческие учебные пособия по кодированию здесь Отказ
И следуйте за мной здесь для обновлений, техники и глазных конфет:
@ Radarboy3000 * Instagram Фотографии и видео 3960 подписчиков, 843 Следующее, 1 082 Сообщений – см. INSTARMAM Photos и видео из @ Radarboy3000 www.instagram.com Джордж Глалли (@Radarboy_japan) | Twitter Последние твиты из Джорджа Гэлли (@Radarboy_japan). СМИ артист, технолог, Tinkerer, мечтатель. Реакция движения … Twitter.com Радарбой Радарбой. 130 любит · 7 говорящих об этом. Искусство, визуализация дизайна, хаки www.facebook.com
Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-vj-engine-in-javascript-b63b7fb1c87b/”