差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
lecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/16 09:34] – [視聴者側(localhost:3000)の修正] baba | lecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/16 10:10] (現在) – [OBSの準備] baba | ||
---|---|---|---|
行 48: | 行 48: | ||
では最初に視聴者側のファイル修正から行います.視聴者側に必要な機能はテキストを送信することに加えて,リアクションボタンを追加します.文字色を変えたり音声読み上げとかもありますが,一旦はなるべくシンプルに作成して,プロトタイピングのループを一度回して「動作させること」に集中しましょう. | では最初に視聴者側のファイル修正から行います.視聴者側に必要な機能はテキストを送信することに加えて,リアクションボタンを追加します.文字色を変えたり音声読み上げとかもありますが,一旦はなるべくシンプルに作成して,プロトタイピングのループを一度回して「動作させること」に集中しましょう. | ||
- | すでにsimplechatのexampleが手元では動いていおり,このページではテキストボックス,名前ボックスに入力した内容をサーバ側に送信することができます.canvasは必要ないので省きます.またこれら機能の他,リアクションボタンをまずは素のhtml(cssできれいにしていないただのタグ)で作っていきます. | + | すでにsimplechatのexampleが手元では動いていおり,このページではテキストボックス,名前ボックスに入力した内容をサーバ側に送信することができます.canvasは必要ないので省きます.またこれら機能の他,リアクションボタンをまずは素のhtml(cssできれいにしていないただのタグ)で作っていきます.ただしbootstrapを利用していきます.bootstrapとはtwitter社が提供しているライブラリで,cssやjavascript等,モダンなウェブサイトを構築するために必要な機能がセットになっています. |
<WRAP group> | <WRAP group> | ||
<WRAP half column> | <WRAP half column> | ||
- | < | + | < |
< | < | ||
<html lang=" | <html lang=" | ||
行 100: | 行 100: | ||
<WRAP half column> | <WRAP half column> | ||
- | < | + | < |
var socket; | var socket; | ||
var chatlog = { | var chatlog = { | ||
行 149: | 行 149: | ||
===== 配信者側(localhost: | ===== 配信者側(localhost: | ||
+ | 配信者側では,p5のキャンバスだけを表示し,そこにユーザからのコメントやリアクションを載っけていきます.なお🎉とパンチの音は以下からダウンロードして利用してください. | ||
+ | * 🎉の音:{{ : | ||
+ | * 👊の音:{{ : | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <link rel=" | ||
+ | <meta charset=" | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | <script src="/ | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <file js sketch.js> | ||
+ | var socket; | ||
+ | var chatlog = []; | ||
+ | var sound_cracker; | ||
+ | |||
+ | function preload() { | ||
+ | sound_cracker = loadSound(' | ||
+ | } | ||
+ | |||
+ | function setup() { | ||
+ | createCanvas(displayWidth, | ||
+ | socket = io.connect(window.location.origin); | ||
+ | socket.on(' | ||
+ | textSize(24); | ||
+ | |||
+ | // 初期化 | ||
+ | for (let i = 0; i < 50; i++) { | ||
+ | chatlog[i] = { | ||
+ | name: '', | ||
+ | message: '', | ||
+ | alpha: 0, | ||
+ | x: 0, | ||
+ | y: 0 | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function gotMessage(chatdata) { | ||
+ | console.log(chatdata); | ||
+ | // メッセージを空いてる配列(alpha==0)に代入する | ||
+ | for (let i = 0; i < 50; i++) { | ||
+ | if (chatlog[i].alpha == 0) { | ||
+ | chatlog[i].name = chatdata.name; | ||
+ | chatlog[i].message = chatdata.message; | ||
+ | chatlog[i].alpha = 255; | ||
+ | chatlog[i].x = random(50, width - 50); | ||
+ | chatlog[i].y = random(50, height - 50); | ||
+ | |||
+ | if (chatlog[i].message == " | ||
+ | console.log(" | ||
+ | sound_cracker.play(); | ||
+ | } | ||
+ | i = 50; // loopは終了 | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function draw() { | ||
+ | background(220); | ||
+ | |||
+ | // | ||
+ | |||
+ | for (let i = 0; i < 50; i++) { | ||
+ | fill(0, 0, 0, chatlog[i].alpha); | ||
+ | text(chatlog[i].message, | ||
+ | if (chatlog[i].alpha > 0) { | ||
+ | chatlog[i].alpha = chatlog[i].alpha - 1; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== OBSの準備 ===== | ||
+ | OBSをまだインストールしていない人は,まず最初にOBSをインストールしてください. | ||
+ | * https:// | ||