WGGの活動log

都内でゲーム開発だったりVRだったりをしてるかもしれないエンジニアです． WGGは「ワグ」と読みます

自分流 「つぶやきProcessing」 の作業環境

プログラミング Vim Processing p5.js VSCode

#つぶやきProcessing について

前回 PCD Tokyo に参加して以来， 「つぶやきProcessing」 という活動を少し行っています

wgg.hatenablog.jp

つぶやきProcessingは，1ツイートにProcessingのプログラムと，実行結果を載せてツイートします

自分もこんな感じで何回か投稿しています



1ツイートにプログラムを収める必要があるという点から，度々文字数が足りないという問題に遭遇します
1ツイートは140文字( 半角なら280文字)で， そこにハッシュタグを付けるとなると大体 250文字くらいで作品1つを作る必要があります

というわけで，自分なりにこの問題を少しでもスマートに解決してみました

完成品

この動画です

この自作環境は，大体↓のような特徴を持っています

  • ファイルを保存するたびに実行結果が自動でリスタートされる
  • ファイルを保存するたびに，プログラムの圧縮 (minify) を行ってくれる
  • ファイルを保存するたびに，圧縮後の文字数を表示してくれる
  • (それなりに) 補完が効く

この環境を作ったことで，文字数制限に対してかなり書きやすくなりました

環境構築

使用言語

まず，使用するProcessingの種類ですが，完全に自分の好みで p5.jsを使っています

p5js.org

エディタ

テキストエディタは，先の動画では FVimを使っていましたが，基本的にエディタには依存していないのでVSCode でも Sublime でも NeoVim でも Atom でも何でも大丈夫だと思います

github.com

OS

OSはWindowsを使用していますが，Mac / Linux でも問題なく動作するはずです (最低限の依存を用意できれば)

ブラウザ

ブラウザもWebGLが動くなら多分何でもいいです (上の動画では Edge)

事前に用意したファイル

ローカルで動かす関係上，htmlとcssファイルは用意しています

<!-- index.html -->
<!doctype html>
<html lang="ja">

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" href="icon.png" />
  <link rel="stylesheet" href="./style.css">

  <script>
    window.addEventListener("touchstart", function (event) { event.preventDefault(); }, { passive: false });
    window.addEventListener("touchmove", function (event) { event.preventDefault(); }, { passive: false });
  </script>

  <title>つぶやきProcessing</title>
  <script src="js/p5.js"></script>
  <script src="js/main.js"></script>
</head>

<body>
</body>

</html>

一応スマホ対応していますが，そんな重要じゃないので，下の方で p5.js と， 自分で書く main.js を読み込んでいるだけです

// style.css
* {
  background: black;
}

.p5Canvas {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

こっちは画面中央にキャンバスを表示する設定です

npm 使う

多分ここがこの環境構築のメインです
node.js と npm を使用しています

nodejs.org
www.npmjs.com

MacとLinuxを使っている人は brew, apt, yum 等々で簡単に入れられると思います

npm のモジュール入れる

以下4つのモジュールを使用しています

npm install browser-sync
npm install onchange
npm install concurrently
npm install minify

package.json

↓みたいな感じです

{
  "name": "p5js",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "sync": "browser-sync start --server --files='./*.html, ./*.css'",
    "minify": "onchange ./js/main.js -- minify ./js/main.js",
    "min": "onchange ./js/main.js -- node ./js/minify.js",
    "start": "concurrently \"npm run sync\" \"npm run min\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "concurrently": "^5.1.0",
    "minify": "^5.1.0",
    "onchange": "^6.1.0"
  }
}

使い方

ターミナルで， npm start を実行すると，ブラウザが開いてコーディングできるようになります
この状態で， main.js を変更して保存すれば，ブラウザが自動でリロードされソースコードの圧縮が行われます

補完について

ここはエディタごとに変わってくるので細かく説明しません
自分の場合， vim-lsp-settings をお借りしました
ただnodeモジュールとしてp5 をちゃんと使ってるわけではないので色々中途半端だったりします， 文字数詰めるためにはちょっと仕方ない...
他のエディタを使っている場合， 恐らく「〇〇(エディタ名) p5 補完」 とかで検索するとそれなりに出ると思います

github.com

終わりに

こんな感じで素敵な環境ができあがりました
一応以下のリポジトリに，僕が つぶやきProcessing で作ったものを，開発環境と一緒に公開しています

github.com

もし「同じ環境使いたい！」って方が居ましたら，すぐに始められる環境一式を別で公開するかもしれません

それでは，皆さんに良い Processing ライフを！

PCD Tokyo 2020 に参加してきた感想とか

Processing p5.js プログラミング アート

2月1日に， Yahoo! Lodge で開催された PCD Tokyo 2020 に参加してきました

PCD Tokyo

PCDとは、Processing Community Day(プロセッシング・コミュニティー・デー)の略です。
Processing のユーザーの交流イベントで、アートとプログラミングのコミュニティの多様性を祝って
世界各地で2020年上半期の間に開催されます。

pcd-tokyo.github.io

僕自身は職業エンジニアで，かなり技術よりなので，こういったアート系のイベントは結構新鮮でした

今回参加して聞いた話からいくつか紹介してみます (僕自身もLT枠として話しました)


会場


Yahooさんのイベントスペースが会場だったので，このようなものが置いてありました


KeyNote

午前中は2つのセッションが有り，どちらもアートxプログラミングをテーマにした，とても興味深いお話でした

杉原 聡「Processingによる建築設計 － コンピュテーショナルデザインの実践」

当日遅刻してしまったので，途中から聞いていたのですが，Processingを用いて，建築の設計をするお話でした
杉原さんの作品を探してみたのですが，ここに数枚実際に作られた建築の写真が載っているのを見ました
コンピュテーショナルデザイン という分野に当たるそうで，自分は正直初めて聞きました
単に綺麗な模様を作るだけではなく，建築となると，そのコストや，耐久性なども考える必要があるはずですので，凄く高度なことをやっておられるという印象でした...

atlv.org

松本 昭彦「音楽とアルゴリズム ~歴史・テクノロジー・アート~」

こちらは，音楽xアルゴリズムの歴史といったテーマで，現代に向けてどのような音楽が楽しまれてきたか，という音楽の歴史から始まり
その中でプログラミング(アルゴリズム)はどのように音楽に組み込まれるようになったのか，という話でした

僕自身，音楽はかなり無知な方ですが，長い歴史とともに流行があり，受け入れられる音楽が変わりつつあったことを詳しく知りました

この部分聞いたとき，すごくなるほどって思ったんですが現代の音楽を，200年とか，もっと前の人がもし聞いたらどんな印象を受けるのかな～って思いました
あと，アルゴリズムの話もコンピュータが登場するよりも前からあり，サイコロを使ってランダムに音楽を作ったりする遊びがあると知りました

Presentation

午後からはLTの時間でした
ワークショップもあったのですが，自分のLTと時間が被ってたので自分はずっとLTの方を聞いていました

ProcessingとArduinoを用いて、取得された数値を材料に絵画を描く

@hina_nkmr さんの，卒業制作に関する発表です
卒業制作をこういう外部の交流会とかで発表するの，凄く良いですね
多分学校で話すのと緊張感とか，聞き手の反応とか変わってくると思います...
内容としては，ArduinoとProcessingを使って絵を描くというものでした
Processingのクリエイティブ性と，センサー類を組み合わせたら凄くインタラクティブ性のある楽しい作品が作れると思います！
自分も2018年のProcessingアドベントカレンダーで スマートフォンのジャイロセンサと組み合わせた話を書きましたが，作ってても結構楽しかったです

障子に穴をあけてもいいよ

工藤麻祐子 さんの， 凄くタイトルで惹かれる話でした
内容としては，以下のような感じです

  • 障子に穴をあけるの楽しい
  • でも障子に穴をあけると怒られる (経験済み)
  • なら，実際の障子に穴をあけなくても，その体験が得られるものを作ろう！

ということで，小型の障子の模型を作って，その裏にテンキーを配置し，障子に穴をあけるように押すと，奥に投影した障子に穴があいた映像が写り，
障子に穴をあける体験ができるというものでした

自分は大学でVR系のことをやっていたのでこういう話は凄く惹かれます

日常的にコードを書いて表現する

はぅ君 さん， nasana さん， Almina さん， 高尾 さん による，トークセッションです
主に，デイリーコーディングなどをやっている方による，普段のコーディングとかの話です

正直自分はデイリーコーディングする体力もやる気も足りてないんですよね...
ただただ凄いと思います

自分の場合，作りたいものを思いついたら寝る間も惜しんで書き続けるって感じでテンションのアップダウンが激しく，長期的なモチベーション維持が苦手なので，毎日コツコツってのは参考になりました

ライブコーディング 「HAUS」

HAUS さんによるライブコーディング... と思いきや，まさかの視聴者参加型

初めは画面上にチャットルームみたいな様子が映っており，そこにHAUSのメンバーの方が文字を入力すると，音が流れるという状態でした
しかし途中から視聴者もそのルームに入れるようにQRコードが映し出され，部屋にいた全員でライブコーディングをするというドタバタに

自分は撮影してなかったので他の方のツイートお借りします


しかもこのライブコーディング環境，自作のプログラミング言語らしいです
P-Codeと呼ばれるもので，ライブ当時はすぐに仕様を理解することはできませんでしたが，見様見真似で適当に文字打ってみても，音がなって楽しかったです

自分の発表

僕自身もLT枠として参加してきました

プログラミング初学者向けの,p5.jsを用いた弾幕プログラミングのすすめ

テーマとしては， 「プログラミング入門」「ゲームプログラミング(弾幕系ゲーム)」，「デジタルアート」 の3軸といった感じで
プログラミングを始めたばかりの人や，プログラミングに苦手意識を感じているけれど，Processingを知っているように人に，
「Processingで弾幕作って楽しく学ぼう！」という話をしてきました

僕自身はどちらかというと弾幕プログラミングが一番メインでやっているのですが，今回のLTでは，プログラミング学習の面を押し出した発表をしました

スライドはこちらに上がっています

PCD Tokyo 2020 LT

LT本番では，実際に弾幕プログラミングのライブコーディングをする予定だったのですが，失敗したためTwitterに動画だけ貼りました




NEORT x PCD2020

今回のPCD Tokyoでは， NEORT さんとコラボしており NEORTに自分の作品をタグ付けでアップすると，当日会場の大型モニターに自分の作品が表示されるようになっていました
自分のLTが終わった後に急いで作ってみたのですが，本当に映っててびっくりしました


終わりに

去年は卒論とかで忙しくて行く余裕もなく，今年は東京に住むことになって初めて参加したのですが，とても楽しかったです！
他の技術系イベントには参加したことがありますが，Processingコミュニティでは初めてだったので，新鮮でした
色んな人の，色んな作品が見られてとてもモチベーションにも繋がったので，再びProcessing(p5)をガッツリ触っていこうともいます
今年LTするにあたって結構運営の方々にお世話になったので，来年はそっち側に回れるといいなっとも思いました
(運営の皆様，他登壇者，全ての参加者の方々等，ありがとうございました)

スターリンク バトル・フォー・アトラス クリムゾンレースの攻略とか

ゲーム Switch スターリンク

動画あげました
キャプチャボードなど持っていないので，Switchの30秒録画機能を繋げあわせています．
完全なプレイ動画も撮りたい...
www.youtube.com

スターリンクについて

www.ubisoft.co.jp

PS4, XBox, Switch で発売されている，オープンワールド&スペースシューティングなゲームです
僕はSwitchのスターターパックを購入しました
スターフォックスでおなじみのアーウィン&フォックスが付いている代わりに，DL版とかより装備が貧弱なやつです

フィギュア

こんな感じでフィギュアと連動して，使用する戦闘機をカスタマイズすることができます

本題: クリムゾンムーン

5月ごろのアップデートで，クリムゾンムーンという惑星が追加されました．
『スターリンク バトル・フォー・アトラス』クリムゾンムーントレーラー - YouTube

レースゲーム(タイムアタック)だったり，殲滅戦(スコアアタック)が遊べます．
その中で，レースゲームが4ステージあるのですが，その内の1ステージで世界1位になったのでその攻略法などを紹介していきます．
(Switch版での1位なので，他のハードを合わせると負けているかもしれませんが)

王の工場

f:id:wgg00sh:20190622233048p:plain

4つあるステージの最終面で，最も長いコースです

装備

武器は，自分は3つしか持っていないので最も使いやすそうなフレームスローアーを選びました．武器は基本的に障害物を破壊するために使うので，射程距離を伸ばす増幅器をつけています．
・ラピッド弾薬5
・射程増幅器5 x 3枚

f:id:wgg00sh:20190622233353p:plain

色んなプレイヤーの情報を探していたら，ステイシス系の武器があれば敵の動きを止められるらしくて，スタート直後のCPUとの接触を回避できるかもしれないです


機体
アーウィンとゼニスしか持っていないのでよくわからないですが，機体性能殆ど関係ない気がします．

f:id:wgg00sh:20190622234149p:plain

・ウォリアーコア5
・グラビティアーマー5
・ホバリングブースター5 x 3枚

コアについて

これもうウォリアーコア1択な気がします
アーボリータムコアとか高性能なコアは他にもありますが，ウォリアーコアのダブルジャンプには勝てないでしょう
これの有無でもう記録が全然変わります，ダブルジャンプがつくウォリアーコア4以上は確保しておいたほうがいいです

アーマーについて

これは他にも選択肢がありそうですが，今はグラビティアーマー5にしています．
理由としてはクラッシュ耐性が中々優秀だからです．
ヒートアーマー5のホバリング時間倍増も試しましたが，あまり良い結果が得られなかったので不採用にしました (他のコースでは活用できるかも)

ブースターについて

これもおそらくホバリングブースターが最適だと思います．
スピードブースターをつけてスピード上げても全然記録変わらなかったので，ブーストできる時間が伸びるホバリングブースターが多分最強です
アイテムによるブーストゲージの回復は，最大値に対する割合なので，ちょっと道中の回復アイテムを取っておくだけで常にブーストし続けられます．

立ち回りについて

2段ジャンプで飛び越えられるところはどんどん飛び越えていきましょう
詳しくは動画を見てください
あまり高く飛び過ぎたりするとコースアウト判定で強制テレポートを食らうこともあります．

f:id:wgg00sh:20190622235035p:plain
f:id:wgg00sh:20190622235102p:plain

終わりに

現時点では，好記録を出すための知識 (装備など) を知っている人が少ないように思えました
自分の記録もちゃんとインコースギリギリを攻めて出した記録ではないので，もっと記録伸ばせるよう頑張ってみたいです．

Windows TerminalでWindowsのCLI環境はどう変わる? 既存のサードパーティ製ターミナルソフトとの違い

Windows Windows 10 WSL cmd PowerShell ターミナル Windows Terminal

2019年5月7日(日本時間)，Microsoftから Windows Terminal が発表されました

www.youtube.com


これまでWindows標準で使用できるシェルは，コマンドプロンプト，PowerShell, WSLがあり，CLI環境としてコマンドプロンプト(cmd.exe)なんかが用意されていました．
この3種のシェルを全て統括して Windows Terminal という1つのソフトで扱えるようになるようです (これまでも実質できてはいた)

github.com

Windows Terminal の特徴

MicrosoftからアナウンスされているWindows Terminalの特徴を上げてみます．

続きを読む