lecture:design_with_prototyping:p5.js編:22.commentableをつくる

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
lecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/16 09:39] – [視聴者側（localhost:3000）の修正] babalecture:design_with_prototyping:p5.js編:22.commentableをつくる [2021/06/16 10:10] (現在) – [OBSの準備] baba
行 149: 行 149:
  
 ===== 配信者側(localhost:3000/broadcast）の修正 ===== ===== 配信者側(localhost:3000/broadcast）の修正 =====
 +配信者側では，p5のキャンバスだけを表示し，そこにユーザからのコメントやリアクションを載っけていきます．なお🎉とパンチの音は以下からダウンロードして利用してください．
 +  * 🎉の音：{{ :lecture:design_with_prototyping:p5.js編:cracker.mp3 |}}
 +  * 👊の音：{{ :lecture:design_with_prototyping:p5.js編:punch.mp3 |}}
  
 +<WRAP group>
 +<WRAP half column>
 +<file html index.html>
 +<!DOCTYPE html>
 +<html lang="en">
 +
 +<head>
 +  <script src="p5.js"></script>
 +  <script src="p5.sound.min.js"></script>
 +  <link rel="stylesheet" type="text/css" href="style.css">
 +  <meta charset="utf-8">
 +
 +</head>
 +
 +<body>
 +  <script src="/socket.io/socket.io.js"></script>
 +  <script src="sketch.js"></script>
 +</body>
 +
 +</html>
 +</file>
 +</WRAP>
 +
 +<WRAP half column>
 +<file js sketch.js>
 +var socket;
 +var chatlog = [];
 +var sound_cracker;
 +
 +function preload() {
 +  sound_cracker = loadSound('./sounds/cracker.mp3');
 +}
 +
 +function setup() {
 +  createCanvas(displayWidth, displayHeight);
 +  socket = io.connect(window.location.origin);
 +  socket.on('gotMessage', gotMessage);
 +  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);
 +
 +  //text(chatlog.name, width / 2, height / 2)
 +
 +  for (let i = 0; i < 50; i++) {
 +    fill(0, 0, 0, chatlog[i].alpha);
 +    text(chatlog[i].message, chatlog[i].x, chatlog[i].y);
 +    if (chatlog[i].alpha > 0) {
 +      chatlog[i].alpha = chatlog[i].alpha - 1;
 +    }
 +  }
 +}
 +</file>
 +</WRAP>
 +</WRAP>
 +
 +
 +===== OBSの準備 =====
 +OBSをまだインストールしていない人は，まず最初にOBSをインストールしてください．
 +  * https://obsproject.com/ja
  
  
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/attic/lecture/design_with_prototyping/p5.js編/22.commentableをつくる.1623803960.txt.gz
  • 最終更新: 2021/06/16 09:39
  • by baba