informationhttps://reona396.com/よろしくです〜〜〜!!!!!ドメイン取って念願のSSL対応しました(いまさら)ポートフォリオや実績などをまとめてあります。メインビジュアルは昨年9月の個展用に使ったものを再利用しました。WordPressのBlosというテーマを利用しました。「スーパー正男」というブラウザゲームをご存知でしょうか。面白FLASH倉庫的なムーブメントとほぼ同時(?)くらいに流行っていたブラウザゲームです。マリO的な見た目と操作感、ステージデータをさくっと作成できるお気軽さ(マリOメーカーですね!)でかつてのインターネットを牽引する存在でした。作者様のページはこちら。福田直人のホームページ細かい歴史など、詳細はこちらがわかりやすかったです。大百科もう平成も終わりますし、せっかくなのでJoy-Con対応させてみました。ゲーム自体はこちらからダウンロードしました(いわゆるJSまさお、Canvas正男)。JSまさお置き場ゲームステージはプレーンな1番最初のステージを利用しました。22:48:49スティック左右入力で左右移動、Xボタンでジャンプ、HOMEボタンでタイトルに戻ります。ダッシュからの大ジャンプも可能!コード載せておきます。ゲームのhtmlで読み込めばきっとJoy-Con対応できるはず。やっていることはJoy-Conのボタン・スティック操作をキーボード操作に振り替えています。OpenProcessingこのスケッチはemojiをランダムにtextとして設定しつつ、位置をかぶらないように配置しなおしています。"位置をかぶらないように"については以下の記事に書いています。学習帳emojiをランダムに設定するときどき豆腐が出ちゃうんですが、こんな感じでランダムに設定しています。String.fromCodePoint(this.emojiCode);emojiCodeをランダムな数値として設定し、その値からemojiに変換しています。この数値はUnicodeの16進数の数字を10進数に変換したものです。😀ならUnicodeはU+1F600なので、1F600を10進数に変換して128512となります。Wikipediaそれをjs的にemojiに変換するためには以下のように書きます。String.fromCodePoint(128512)話を戻して、p5.jsスケッチ上ではこの数値をランダムに設定しているのですが、スマイリーアイコン(黄色くてまんまるの顔で感情を示すやつ)とその他のアイコンとで出現確率を変えています。レオナTweet2018年10月21日p5.jsでPS4とSwitchのコントローラ(Joy-Con)を接続してブラウザ上で操作するp5.jsとPS4のコントローラ、Switchのコントローラ(Joy-Con)が接続できるか調べてみました。ブラウザと各種ゲームコントローラがつながるので色々面白いことができそうです。Sierra)、使用ブラウザはChromeです。Controller」に接続してください。デモページは以下です。https://reona396.github.io/p5_gamepads_ps/適当にボタン押したら反応すると思います。押されたボタン名に枠が付きます。アナログスティックの動きは上部に反映させています。接続方法は以下を参考にしました。Gerolianコードはこちらのリポジトリに置いてます。reona396/p5_gamepads_psスケッチのファイルだけ抜き出したものが以下です。以下の記事のコードを参考にp5.jsに組み込みました。Qiitaボタンとアナログスティック(コード中はaxes)について、それぞれ別に管理しています。ボタンに割り振られている番号が素直に並んでて良い感じです。p5.jsとSwitchのコントローラ(Joy-Con)を接続あらかじめ、両方のJoy-Conをモニターから外し、外した断面(?)のSR・SLボタンの間にある小さいまるいボタンを押してください。ランプが光ったら、PS4と同じくMacの環境設定のBluetoothから「Joy-Con(L)」「Joy-Con(R)」に接続してください。デモページは以下です。https://reona396.github.io/p5_gamepads_sw/ボタンが押されたら横の円に色がつきます。デザインは以下の記事を参考にさせていただきました。左黒丸がLスティック、右黒丸がRスティックの動きとしてニュートラル位置+8方向を反映します。コードはこちらのリポジトリに置いてます。reona396/p5_gamepads_swスケッチのファイルだけ抜き出したものが以下です。以下の記事のコードを参考にp5.jsに組み込みました。APIそもそもコントローラが2つもあったり、ボタンに割り振られた番号が素直な並びじゃなかったり、スティックの方向も素直な向きじゃないので無理やり補正したり...とかなり苦労しました。まとめp5.jsと各種コントローラは接続できると確認できたので、ゲーム制作など色々と幅が広がりそうです。modeスケッチに別々のデータを渡して生成したい1つのwebページ内に複数のp5.js製スケッチを並べたいとします。いうことたまにありますよね。modeでスケッチを生成するとして、生成する際にそれぞれのスケッチに別のデータを渡したいケースについて書きます。データビジュアライズのためのスケッチを複数並べて、それぞれの参照データは異なるものにしたい、というケースです。参照したいデータが単純ならば良いのですが、取得や成形に手がかかる場合、p5.jsスケッチとして描画する前によしなに手を加えておいて、あとは加工済データのみ渡してあげた方がスクリプト的に優しい感じがします。棒グラフとして表示する例を書いてみました。ついでに、グラフの色もスケッチごとに変えてみました。API叩いてjsonを...とか、特定の期間だけ抜き出して...とか一手間加わる時もあると思うので、そういう時はp5スケッチ外で作業してから渡してあげるのが良さそうかなと思います。