「クリエイティブ・コーディングってなに？」という LT してきました。
先日クリエイティブ・コーディングを題材に LT（ライトニング・トーク） をさせていただく機会があり、発表スライドもクリエイティブ・コーディングの要素を加えて作ってみました。
LT の様子、作成したスライドについて記してみます。
発表の場は鹿児島.mk
今回お邪魔したのは、『プログラミング初学者でも気軽に参加できる』というコンセプトのエンジニアコミュニティ「鹿児島.mk」。
開催イベントは募集後すぐ満員になるという人気のコミュニティです。
2019/12/20 に行われた「2019年最後のLT大会」、こちらで LT させていただきました。
20名の参加者の内、LT 登壇者がなんと 7割の 14名！ 皆さんとても積極的で、和気あいあいとしたとても楽しい雰囲気の会でした。
皆さんの発表
私のパソコンがプロジェクターに接続できないトラブルがあり、主催者の方に手伝ってもらいながら会の最中に問題解決作業していました。
そのため他の方々の LT の様子を記録することができませんでした。すみません。写真もありません。ごめんなさい。
そんな中、バラエティに富んだ数々の LT の中で一番興味を惹かれたのはセリナさんによる歌詞の形態素解析による「歌詞の可視化」でした。（語呂もよい）
クリエイティブ・コーディングに通じるものが感じられて、すごく刺激を受けました。
そして、皆さんの LT についてセリナさんがとても詳しくブログを書いてくださっていました。ありがたい！
当日の様子の解説、丸投げさせていただきます！！🙇♀️
用意したスライド
今回は reveal.js という Web ブラウザでプレゼンできる JavaScript のライブラリを使ってみました。
これを使うと下記のような特徴を持ったスライドを作ることが出来ます。
・スライドを自動再生できる
・ページ遷移がかっこいい
・HTML なので画像も動画も自在に埋め込める
・もちろん p5.js も入れられる！
自動再生を切ったバージョンを GitLab Pages に置いてみました。よろしければ下記リンクからご覧ください。
最初のロードにちょっと時間かかります。「アニメーションとか」のページ以降にある動画の再生にも少し時間がかかるかもしれません。
長い目で見てね💕
スライド作成良かったところ
自動再生はグッド！
今回の LT は登壇者が多いこともあってか 5分という厳しい時間制限がありました。
『スライドを自動再生させて 5分で再生が終わるようにしておけば時間のこと気にしなくていいのでは？』と考え、やってみたらこれがバッチリでした！
reveal.js には自動再生機能がついていて、スライド毎に表示する時間を指定できます。長く話すスライドは長めに、ちょっとお見せするスライドは短めに時間をセットしておきました。
LT の最中はスライド切り替えの操作が不要なのでパソコンの側に居る必要がありません。スクリーンの側に立って身振り手振りを交えながら話せるのでとてもやりやすかったです。
p5.js でアクセント
スライド中に p5.js で作ったアニメーションを挿入し、ちょっと目を引くアクセントとしました。
今回は単なる飾りでしたが、説明と連動して動くグラフとか、リアルタイムな生の情報を表示するなど、より実用的な使い方もできると思います。
p5.js と reveal.js を組み合わせる方法は、ちょうど今年の Processing Advent Calendar 2019 で WGG_SH さんが紹介してくださっています。
スライド作成で気をつけたいところ
p5.js 使いすぎに注意
良い点でも挙げた p5.js ですが、使いすぎには注意が必要です。
reveal.js で作ったスライドは構造的には 1つの HTML ファイル、つまり 1ページの Web ページになっています。
その中に複数の p5.js を挿入した場合、それらは全てが常に動作している状態になります。
場合によってはパフォーマンスに影響が出るかもしれず、起動と停止をコントロールできるようにするなどの工夫が必要になるでしょう。
スタンドアロンでやるかネット接続でやるか
ネット上に置かれた容量の大きな画像/動画ファイルを利用する場合、表示がもたつく可能性があり注意が必要です。
自分のパソコンを使ってプレゼンする場合は、全ての資源をパソコンの中に用意してネット接続無しのスタンドアロンでやるのが安全だと思います。
LT 大会に参加させてもらって
私は今回始めてこの会に参加させていただきました。
先にも書いたように本当に雰囲気が良かったし、私のパソコントラブルにも主催者の方が親切に対応してくださって、おかげでとてもリラックスして登壇することができました。
人気のコミュニティなわけですね！😉
ぜひまた参加させていただきたいと思います。
次はクリエイティブ・コーディングのワークショップなんて出来たら楽しそうです！
私の愉快な Twitter、フォローしてね。
私の面白いコード集、見てね。
この記事が面白かったらサポートしていただけませんか？ ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕