vj節點

by George Gally

通過喬治·加利

創意編碼—如何在JavaScript中創建VJ引擎 (Creative Coding — How to create a VJ engine in JavaScript)

了解如何將JavaScript動態注入網頁 (Learn how to dynamically inject JavaScript into webpages)

For years I’ve been using the browser for my performances and installations using my own simple homegrown VJ engine. And now, after you learn a few simple tricks, you can too…

多年來，我一直使用自己的簡單本地VJ引擎將瀏覽器用于表演和安裝。 現在，在您學習了一些簡單的技巧之后，您也可以...

快速介紹 (A quick intro)

Firstly, what is a VJ engine? you might ask. And maybe even: what is a VJ? Wikipedia defines the characteristics of VJing as:

首先，什么是VJ引擎？ 你可能會問。 甚至甚至：什么是VJ？ 維基百科將VJing的特征定義為：

The creation or manipulation of imagery in realtime through technological mediation and for an audience, in synchronization to music.

通過技術中介實時創建或操縱圖像，并與聽眾同步地為觀眾提供圖像。

And a VJ engine is simply the software used for VJing.

VJ引擎只是用于VJing的軟件。

But why would I build my own when there are so many VJ engines out there?

但是，當有如此多的VJ引擎出現時，為什么我要構建自己的引擎？

I never really loved VJ software — they always felt bloated and made everyone’s stuff look kinda the same. It’s kind of like when you first got your hands on Photoshop, and just blended a bunch of stuff together, added some filters, and it was cool (because it was the 90s). But most of all, I wanted tighter and better integration between developing content and the sound input frequencies.

我從未真正喜歡過VJ軟件-他們總是感到felt腫，并使每個人的東西看起來都差不多。 這有點像您第一次接觸Photoshop時，只是將一堆東西混合在一起，添加了一些濾鏡，而且很酷(因為那是90年代)。 但最重要的是，我希望在開發內容和聲音輸入頻率之間實現更緊密，更好的集成。

I rarely VJ these days, but it still drives most of my installations and performances — anywhere I need multiple visualisations I use RBVJ (the RB is for Radarboy — that’s me) as a wrapper/player.

這些天我很少使用VJ，但是它仍然可以驅動我的大多數裝置和性能-在需要多幅可視化效果的任何地方，我都將RBVJ ( RB用于Radarboy ，就是我)用作包裝器/播放器。

RBVJ has gone through a number of iterations over the years, as I’ve bounced from Flash, to Processing, and finally now to JavaScript, all using the same simple system.

多年來，RBVJ經歷了多次迭代，正如我從Flash到處理，再到現在是JavaScript一樣，都使用相同的簡單系統。

I had previously open sourced it and my content (before the days of Git and not really knowing there was a thing called open-source). It won a bunch of awards, and I saw my content being used in a whole bunch of places which was nice. So I thought it was time to make it available for others again, along with a bunch of content to show how I go about creative coding.

我以前曾開源過它和我的內容(在Git出現之前，還不真正知道有一種叫做開源的東西)。 它贏得了很多獎項，我看到我的內容在很多地方都得到了很好的使用 。 因此，我認為是時候再次將其提供給其他人，以及一堆內容來展示我如何進行創意編碼。

Ok, that’s a long enough introduction. Show me the money, you say!

好的，這是足夠長的介紹。 你給我看看錢！

1.結構化內容 (1. Structuring the Content)

Essentially, a VJ engine is just a fancy content browser and player. So what we really need is a way to retrieve and play our content.

本質上，VJ引擎只是精美的內容瀏覽器和播放器。 因此，我們真正需要的是一種檢索和播放內容的方法。

You could just dump all your content in a folder, but this system is what has worked best for me, allowing a simple structure for keyboard control:

您可以將所有內容轉儲到一個文件夾中，但是這個系統對我來說是最有效的，它提供了一種簡單的鍵盤控制結構：

• Shift 0–9 to change sets

  移0–9更改設置

• Keys 0–9 to change banks

  0–9鍵更改銀行

• Keys a-z to choose content within the bank.

  按鍵az選擇銀行中的內容 。

This gives you 2,700 files to work with. If you really (really!?) wanted more, you could also double that by accessing another 26 files per bank with shift A-Z).

這樣您就可以使用2,700個文件。 如果您真的(真的！？)想要更多，您還可以通過按AZ移位訪問每個庫中的另外26個文件來將其加倍。

Like most HTML projects, I have a simple top-level structure, and keep the VJ content in a numbered structure inside the art folder, like so:

像大多數HTML項目一樣，我有一個簡單的頂層結構，并將VJ內容保留在art文件夾內的編號結構中，如下所示：

index.html/css/js/art <- content goes here

My content folder (/art) contains 10 numbered folders, which I refer to as sets. Inside each set are another 10 numbered folders representing banks. And inside each bank are 27 individual numbered content files, like so:

我的內容文件夾(/ art)包含10個編號的文件夾，我稱之為set 。 在每組里面還有另外10個編號編號的文件夾，代表銀行 。 每個銀行內有27個單獨編號的內容文件，如下所示：

2.檢索和播放內容 (2. Retrieving and Playing the Content)

Now we just need a way to access our files, which is done by injecting content into our index page.

現在，我們只需要一種訪問文件的方式即可，方法是將內容注入到索引頁面中。

And it’s pretty simple to do this.

做到這一點很簡單。

The magic happens in a function called I’ve loadJS(). It creates a script tag within the page’s head and then injects some JavaScript into it (which would be our content). We trigger this function via a keypress (but could also be a midi or OSC signal) and pass the filename of the content we want into it. Then the script is available on the page.

神奇的事情發生在一個名為我的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);

}

We listen for keypresses with an event listener, which calls a function called onKeyDown(), like so:

我們使用事件偵聽器偵聽按鍵，該事件偵聽器調用名為onKeyDown()的函數，如下所示：

window.addEventListener( ’keydown’, function( event ) {   onKeyDown( event ); });

The listener passes the event object to the function, which contains a bunch of useful stuff. Here what we’re interested in: the event.keycode. Pressing the ‘a’ key gives us a keycode of 65, and pressing us a ‘z’ gives us a keycode of 90. So we simply subtract 65 from the keycode to give us the required file number and pass this value into a changeFile() function, which I’ll show in a bit.

偵聽器將事件對象傳遞給函數，該函數包含一堆有用的東西。 這是我們感興趣的： event.keycode 。 按“ a”鍵給我們鍵碼為65，按“ z”給我們鍵碼為90。所以我們只需從鍵碼中減去65 給我們所需的文件編號 并將此值傳遞到changeFile()函數中，我將稍后顯示。

Similarly we want keys 0–9 (keycodes 48 to 57, so subtract 48 ) to change banks. We also want test to see whether the shift key has been pressed to load sets. The event object has a handy event.shiftKey variable for this, so our onKeyDown function will look like so:

同樣，我們希望鍵0–9(鍵代碼48至57，所以減去48)來更改庫。 我們還希望進行測試，以查看是否已按下Shift鍵來加載集合。 事件對象為此具有一個方便的event.shiftKey變量，因此我們的onKeyDown函數將如下所示：

// 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 );      }

}

}

The changeFile() function basically just takes the keypress and converts it into a URL. It calls our loadJS() function to inject the content into the page, and boom we’re away...

changeFile()函數基本上只需要按下按鍵并將其轉換為URL。 它調用我們的loadJS()函數將內容注入頁面，然后我們就離開了……

So our changeFile() function would look like this:

因此，我們的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);

}

I also have an art_location variable in case I want to have different collections of visuals (so I can have different folders for different shows and installations). I also add the filename as a hash (https://127.0.0.1/#set/bank/file) to the browser’s URL to make it easy to see where I am.

如果我想擁有不同的視覺效果，我也有一個art_location變量(因此我可以為不同的演出和安裝使用不同的文件夾)。 我還將文件名作為哈希(https://127.0.0.1/#set/bank/file)添加到瀏覽器的URL中，以方便查看我的位置。

Our changeBank() and changeSet() functions set the current_bank and current_set variables. Then they just call the changeFile() function to pull up the correct file.

我們的changeBank() 和 changeSet()函數設置current_bank和current_set變量。 然后，他們只需調用changeFile()函數即可提取正確的文件。

For housekeeping, I also reset all the counters — setting current_file back to 0 when I change banks, and the current_bank back to 0 when I change sets. This is so I know that when I change banks, the file playing will be the first file in the bank. Similarly, when I change sets, the file playing will reset to be be the first file from the first bank of the current set (current_set/0/0.js).

為了看家，我也重置所有計數器-設置current_file回0當我改變銀行和current_bank回到0當我改變集。 因此，我知道當我更換庫時 ，正在播放的文件將是庫中的第一個文件。 同樣，當我更改集合時，正在播放的文件將重置為當前集合( current_set / 0 / 0.js )的第一個庫中的第一個文件。

A bit of a mouthful, but the functions are actually super simple:

有點麻煩，但是功能實際上非常簡單：

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);

}

And so the complete code for your basic VJ engine looks like this:

因此，基本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 );

}

All that’s left to show you is how I structure the actual content files, which use an encapsulated function like so:

剩下要向您展示的是我如何構造實際的內容文件，它們使用如下封裝的函數：

// RBVJ art

rbvj = function() {

draw = function() {     // do some creative coding here  }

}();

The function rbvj() is what gets injected into the page. It’s reused, so that every time a new file is inserted into my page, the memory gets flushed from all previous content.

函數rbvj()是注入頁面的內容。 它已被重用，因此每次將新文件插入我的頁面時，都會從所有先前的內容中清除內存。

By encapsulating the code (see the ‘()’ after the function), any code inside the rbvj() function will run automatically when the file is injected into the page.

通過封裝代碼(請參見函數后的“()”)， rbvj()中的任何代碼 文件插入頁面后，該功能將自動運行。

You’ll notice that inside the content, I have a draw() function (this one from my own creative_coding.js utility script). It’s just a simple loop that uses JavaScript’s requestAnimationFrame() and is able to vary the frame rate.

您會注意到，在內容內部，我有一個draw()函數(該函數來自我自己的creative_coding.js實用程序腳本)。 這只是一個使用JavaScript的requestAnimationFrame()的簡單循環 并能夠更改幀速率。

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);

};

And that’s pretty much it. You now have a working VJ engine in the bowser.

就是這樣。 現在，bower中的VJ引擎正在運行。

3.其他一些可能會有所幫助的事情 (3. Some other things to know that may be helpful)

I normally just plug my computer’s sound input straight into an input from the venue’s mixer or amp (I use a version of my standard microphone input mic.js file, which you can read more about here). And I have keys setup (in my case, the plus and minus keys) to adjust the input levels up or down, so I don’t have to keep accessing the mixer.

通常，我通常只是將計算機的聲音輸入直接插入場地調音臺或放大器的輸入中(我使用標準麥克風輸入mic.js文件的版本，您可以在此處了解更多信息)。 而且我有按鍵設置(在我的情況下，是加號和減號 )可以向上或向下調整輸入電平，因此我不必一直訪問調音臺。

Also note that for sound input, you’ll need a secure HTTPS connection — or if you use something like Atom’s Live Server, then that’s built in.

還要注意，對于聲音輸入，您將需要一個安全的HTTPS連接-或如果使用諸如Atom的Live Server之類的東西，那么它是內置的。

I also have a bunch of other keys set up for simple audio and visual filters (see how to make a pixelation filter here).

我還為簡單的音頻和視覺過濾器設置了許多其他鍵(請參閱此處如何制作像素化過濾器)。

I mostly don’t use a preview screen/interface, but it’s easy enough to build one. Just create a new HTML page and let the pages talk to each other through a socket.

我通常不使用預覽屏幕/界面，但是構建一個界面很容易。 只需創建一個新HTML頁面，然后讓這些頁面通過套接字彼此對話即可。

And finally, one last tip: when developing content, simply make a function to read in the current hash value of the browser, and call the loadFile() function on page load. That way, when you’re working on a file and you reload the page, that file is automatically displayed.

最后，最后一個技巧是：開發內容時，只需編寫一個函數以讀取瀏覽器的當前哈希值，然后在頁面加載時調用loadFile()函數。 這樣，當您處理文件并重新加載頁面時，該文件將自動顯示。

And that’s pretty much it. Hope this helps you get out there and show more of your content. As I mentioned previously, I’ve included a whole bunch of content for you to play around with and test so you can get a feel of how I create my stuff. If you use or alter any of it, I’d love to see how, where, and what you did with it. So please drop me a line.

就是這樣。 希望這可以幫助您走到那里，并顯示更多內容。 如前所述，我提供了很多內容供您試用和測試，以便您能體會到我如何創建自己的東西。 如果您使用或更改了其中任何一個，我很樂意了解您如何，在何處以及如何使用它。 所以請給我打個電話。

Happy coding. And thanks for reading!

快樂的編碼。 并感謝您的閱讀！

As usual the full code is available on Github.

和往常一樣，完整的代碼可以在Github上找到 。

This article is part of an ongoing series of tutorials on learning creative coding in pure JavaScript. As yes, I should be doing this in ES6, but wanted to keep this as simple as possible to understand.

本文是有關使用純JavaScript學習創意編碼的一系列教程的一部分。 是的，我應該在ES6中進行此操作，但希望保持其盡可能的簡單易懂。

You can see previous all my previous creative coding tutorials here.

您可以在這里查看我之前所有的創意編碼教程。

And follow me here for updates, techniques and eye candy:

并在這里關注我，以獲取更新，技巧和眼神：

@radarboy3000 * Instagram photos and videos3,960 Followers, 843 Following, 1,082 Posts - See Instagram photos and videos from @radarboy3000www.instagram.comGeorge Gally (@radarboy_japan) | TwitterThe latest Tweets from George Gally (@radarboy_japan). Media artist, technologist, tinkerer, dreamer. Motion reaction…twitter.comRadarboyRadarboy. 130 likes · 7 talking about this. Art, design visualisation, hackswww.facebook.com

@ radarboy3000 * Instagram照片和視頻 3,960關注者，843以下，1,082帖子-查看@ radarboy3000的Instagram照片和視頻 www.instagram.com George Gally(@radarboy_japan)| Twitter 來自George Gally的最新推文(@radarboy_japan)。 媒體藝術家，技術專家，修補匠，夢想家。 運動React… twitter.com Radarboy Radarboy。 130喜歡·7談論這個。 藝術，設計可視化，黑客攻擊 www.facebook.com

翻譯自: https://www.freecodecamp.org/news/how-to-create-a-vj-engine-in-javascript-b63b7fb1c87b/

vj節點