タッチ・アンド・スリープ・アンド・ゴー

つまらないことしか書きません

JavaScriptでVJした話

先週行われた名古屋工業大学の学祭内でのクラブイベント、"Play Style"でVJをさせていただきました。

DJを齧っていた時からVJに興味はあり、今回は友達のたはわすくんがVJを探しているとの事だったので、重い腰を上げてエントリーさせていただきました。

システム構成

VJの素材になるような手持ちが無く、私がプログラマという事もあり、迷わず映像出しの要にはプログラミングによる映像表現を採用しました。

イベント時の様子

感想・反省

ネタが少なすぎた

これに関してはもう少し早くから準備を始めるべきでした。

言い訳をするならば、色々と学校の中で細々とした作業が多すぎた......。

iPhoneで撮ったループ素材に関しては、マルチネ辺りのトラックメーカーの曲が流れた時に渋谷の映像を出したら盛り上がったのと、長尺の車載映像は中々汎用性が高くて良かったのですが、ネタが足りなすぎて同じループ素材を2,3回使いまわしてしまって、ずっとフロアにいたお客さんには飽きられてしまったかもしれません。

一方でJavaScriptのグラフィックプログラムは用意してたもの全てプリミティブな動作のプログラムでしたが、実写映像と重ね合わせると中々見栄えの良いものだったとは思います。

大学院の先輩のようなプログラムだけで魅せることのできる表現は中々難しいので、実写のループ素材を大量に用意しておき、プログラムの方は実写に彩りを添える程度の汎用性の高いものを用意しておくスタイルはアリかなと思いました。

オーディオリアクティブなプログラムに遅延が発生していた

目視での確認なのでどの程度の秒数遅れているかは確認できませんでしたが、音楽の低音部分(0〜440Hz)の強度が一定のしきい値を超えた時に動作させるはずだったプログラムに微妙に遅延が発生していたのが確認できました。

  • Web Audio APIでマイクからの音声をサンプリング
  • 同じくWeb Audio APIのAnalyzerで低周波成分のレベルを取り出す
  • ブラウザに映像の変化として表示
  • SC SyphonでVDMXに送信

と、様々なシステムを噛ませているので、どこがボトルネックなのかは次回までに突き止めておかないといけません。

DJネームの文字は動いたほうが良い

Twitterで共有されている映像からお分かりの通り、PNG画像をVDMX内のビデオミキサで映像に表示していたので、文字にはエフェクトを掛けない限り変化が現れません。

カラオケ映像みたいでかっこ悪いっすよね。笑

次回、もしVJをやる機会があったらAfter Effectで作っておきたいと思いました。

まとめ

反省点は多々ありましたが、なによりVJしていて楽しかったです!

僕のVJの後にVJしていた1cch4nくんや、イベントの夜に行った別のイベントのVJさんのプレイを見て格の違いを思い知らされましたが......笑

精進してまいりますので、もしもオファーくださる方がいらっしゃったら!(そして僕がタスクに忙殺されていなければ)是非ともVJの機会を与えてくだされば幸いです🙏🙏🙏

MacにPIC開発環境を作る

最近、訳あってPICを触り始めました。

工学系の大学に居た時は実習で度々触っていたのですが、色々調べてみると学校で使っていたモノよりも使いやすいモダンな開発環境が最近の主流のようでした。

備忘録も兼ねてドキュメントとして残しておこうと思います。

今回はPIC12F1822を使用します。

http://ww1.microchip.com/downloads/jp/DeviceDoc/41413C_JP.pdf

What is PIC

PIC (コントローラ) - Wikipedia

PIC(ピック)とは、Peripheral Interface Controller(ペリフェラル インターフェイス コントローラ)の略称であり、マイクロチップ・テクノロジー社 (Microchip Technology Inc.) が製造しているマイクロコントローラ(制御用IC)製品群の総称である。

PICにはCPU、メモリ (RAM, ROM)、I/Oなどが1チップに収められており、ROMに書き込まれたプログラムにより制御される。回路構成が容易かつ安価で、他のマイクロコントローラと比べて圧倒的にインターネット上で情報を得やすく、関連書籍も豊富で、PICそのものの入手性も良いため電子工作愛好家の間で人気がある。

IC一つのサイズのマイコンで、デジタルのI/Oポート、型番によってはクロックを作る発振器やアナログI/Oポートなども含まれている便利なマイコンです。

通信周りを実装しようとすると少しだけ厄介ですが、コレ一つでArduinoで作られがちなホビーは大体作ることができます!便利!

用意するもの

  • MacのPC
  • ユニバーサル基板
  • 10kΩの抵抗
  • 0.1μFのコンデンサ
  • PIC 12F1822
  • PICKit3

ソフトウェアのダウンロード

開発環境 MPLABの導入

下記URLからMac用をダウンロード

http://www.microchip.com/ja/mplab/mplab-x-ide

ダイアログに従ってインストール

PIC用のCコンパイラの導入

下記URLからMac用をダウンロード

http://www.microchip.com/mplab/compilers

XC◯◯は書き込むPICのCPUのビット数に応じています。

ダイアログに従ってインストール

書き込み用回路の作成

f:id:nasustim:20171121180638j:plain

作ります。

f:id:nasustim:20171121180821j:plain

良い感じのサイズ感になりました。

プログラミング準備

以下のサイトを参考に↓

qiita.com

上記サイトと違う点として、

  • PICKit3からの給電で動かそうとすると電力不足でエラーを吐くので、 Propaties -> PICKit3 -> Power の項目にはチェックを入れず、電源装置からの給電で書き込み。
  • コンフィグレーションビットのFOSCはINTOSC(内部クロック設定)に

プログラムに関してはPIC12F1822用に、

  • ANSEL -> ANSELA (アナログIOの設定)
  • TRISIO -> TRISA (AポートのI/O設定)
  • " PORTA = 0x00; "を追加 (Aポートの初期値を全て0にセット)

好例のLチカ

RA4, RA5にLEDを、RA0にプルアップのスイッチ回路を取り付けてLをチカしました。

以下、ソースコード

/* 設定省略 */

#include <xc.h>

void main(void) {
    unsigned char flag = 0;

    ANSELA  = 0x00;
    TRISA = 0x01;
    PORTA  = 0x00;

    while(1){
        if(!RA0){
            __delay_ms(20);
            flag = ~flag;
        }
        RA5 = flag & 0b00000001;
        RA4 = ~flag & 0b00000001;
    }
}

アルバイト

全くの私事なのですが、9月から株式会社OTON GLASSでアルバイトをしています。

https://otonglass.jp/

 

普段はリモートワークなのですが月一で東京に来て、

活動報告とか活動計画を立てたりしています。

今も東京にいます。

 

社長の島影さんから"ソフトウェアエンジニア"の肩書を頂きましたが、

最近はほとんどハードウェアを触っています。

大学に居た時よりも今のほうが半田ゴテを触っている時間が長いです。

 

岐阜では平日のお昼に秋月電子で電子部品を注文しても届くのは次の日のお昼くらいですが、

東京では思い立ったら直ぐに秋葉原に行って部品を調達できます。

概念は知っていたのですが実際に体験すると感動してしまいます。

パーツ屋との距離の近さがクリエイティブ文化との近さなのでしょうか。

 

会社のある六本木一丁目から秋葉原のマルツパーツまで迷わずに行けるようになりました。

同じ23区内でも片道で30分くらいかかる体感です。

一回買い出しに行くだけでヘトヘトになってしまうので、

必要な部品のリストアップ、その部品で駄目だった時の保険としての部品のリストアップが大切だと学びました。

 

会社は高層ビルの高層階にあって眺めがキレイです。

六本木にあるので、小腹がすいた時に近くのコンビニまで行くのが一苦労なのがつらいです。

 

明日会社の人に自己紹介をするのでスライド作りました。

Presentation

マウスじゃなくて十字キーで進むと戻るを操作できます。

 

ひびの

アイデアスケッチ本

大学院でお世話になっている先生たちが本を出しました。

アイデアスケッチ ―アイデアを〈醸成〉するためのワークショップ実践ガイド

アイデアスケッチ ―アイデアを〈醸成〉するためのワークショップ実践ガイド

所属してるプロジェクトの中で書いたアイデアスケッチが数枚載っているのですが、
一枚だけ僕が書いたスケッチも載ってます。

僕みたいな人はアイデアを思いついても、
「技術的に難しそう」とか
「冷静に考えるとナシだな......」とか
色々考えてしまって脳内でボツにしがちなのですが、
一度絵に起こして、物理的にストックしておいて、後からじっくり考えると所謂「死にアイデア」が少なくなるというか、
一度考えたことが無駄になりにくいので、最近はプロジェクト以外でもアイデアスケッチで考えることをしています。

IAMASで手に入れたノウハウの中で5本の指に入るくらい気に入ってます。

ひびの

いいから俺の夏の思い出を見てくれ!(2017)

色々ありました。

ヴァージョン2016: nasustim.hatenadiary.com

六月

IAMASのプロジェクトに配属されて、オープンハウス(オープンキャンパス)で展示する作品を作り始めました。

七月

ツイッターの知り合いのアルファロメオお兄さんたちの集会BBQにちゃっかり参加しました。当方マツダアクセラです。

学校のみんなでCIRCUS TOKYOに行ってクラブイベントをしました。全ての関係者様に感謝。

オープンハウスで秀作と作業机を展示しました。

キラキラ女子ズに、展示すごーいってめちゃめちゃ言われました。さらに精進しようと思いました。

八月

お祭りと聞いて駆けつけました。

台湾に行きました。

まとめ

遊びすぎて修士研究がやばい。

node + express周りの基本 - 備忘録

大学院のプロジェクト(研究室みたいなやつ)の一環で習作を作っています。その中で、サーバサイドをnode + expressで作りこんでいます。
今まで、nodeのCLIを少しとexpress未経験だった僕としてのちょっとした備忘録。

導入

開発環境がmacなのでmac向けに書きます。今のmacにはデフォルトでnodeとnpmが入っているので、面倒くさいバージョン管理は抜きにしてプリインストールのシステムを使います。

$ mkdir project && cd project  
$ npm init  

質問に答えていく

$ npm install express  

作ったディレクトリにexpress(node環境のwebアプリケーションフレームワーク)をインストール 。
npmではnodeをベースにしたプロジェクト単位でパッケージを入れられる。

$ npm install ejs  

expressで使えるテンプレートエンジン。PHPみたいに使える。
ejsとjadeの2種類がある。
ejs => 今までの静的ページの資源を再利用し、PHPのように実行部分を付け加えられる。
jade => Rubymiddlemanとかあんな感じのノリでHTMLへ変換するための記述していくやつ。

$ mkdir views && cd views  
$ cat > index.ejs  

テンプレートファイルやHTMLファイルは $WEB_ROOT/views の直下に置いていく。

$ cd ../  
$ vim srv.js  

サーバサイドのプログラムを記述。
後述。

$ node srv.js  

サーバアプリを起動。

コーディング

var express = require("express");
var app = express();

// テンプレートエンジンにejsを使う指定
app.set("view engine","ejs");

// まずはwebサーバを8080ポートで開く。
var server = app.listen(8080,function(){
    console.log("express is running at "+server.address().port);
});

// $WEB_ROOTにGETリクエストが送られて来た時の処理
// req => 来たリクエストのデータが格納されている。
// res => レスポンスを送るためのインスタンス。renderメソッドとかsendメソッドでクライアントにレスポンスできる。
// next => よく存じ上げていない。今のところ使っていない。
app.get("/",function(req,res,next){
    res.render("index",{});
});

// $WEB_ROOT/api とかにPOSTリクエストが来た時の処理。
app.post('/api',function(req,res){
    //renderの場合はview以下の第一引数で指定したテンプレートファイル/HTMLファイルがクライアント側に返されて表示される。
    //第一引数の文字列からは拡張子は省略できる
    res.render("api",{});
    //sendはデータをレスポンスで返せる。
    //ObjectとかArrayで返すと便利。
    res.send([
        {taskName: "帰る", taskPriority: 1},
        {taskName: "寝る", taskPriority: 2},
        {taskName: "学校に来る", taskPriority: 3}
    ]);
});