通話画面をp5.jsインスタライブ風にしてみた

商業ディベロッパーに勤める非エンジニアです。
単身赴任中の夫と離れていても楽しく暮らしたいをテーマに色々作っています。

1. 単身赴任中の夫とのコミュニケーションをもっと楽しくしたい

過去、Lineやobnizで色々作ってみましたが、今度はこんな感じのものを思案中です。

プニッとタッチKimochiは勢いで動画を作り、夫に説明してみましたが撃沈。

一度の撃沈ぐらいでは諦めません。
仕事は忙しいですが、久々の一人暮らし。
夫は傍にいないけれども家にいる時間を夫と充実させたいのです。

1-1. やりたいこと

最近、お互いに家にいる時は、Alexa通話を繋ぎっぱなしにしています。

これをさらに楽しい体験に出来ないかなと思い、
テレビ電話中に「会話」と「表情」以外のリアクションが発生するような仕掛けが欲しいと考えました。

目指す方向は
When
LINEやAlexaでの通話中(テレビ電話)
Where
お互いの家(遠隔)
Who
私と夫
What
デバイス(フニフニ握れるもの)を操作して、
通話画面にハートなどのリアクションを発生させる。

となります。
一番のポイントは夫が楽しんでくれなくてはいけないので、
サクッと作って夫に色々試して貰うことを最優先します

1-2. Howを考える

今週は夫と会う予定が無いため、手元で触るデバイス部分よりも、
通話画面にハートを出す方法を模索してみました。

Alexaで通話をしているのでAlexaスキルを開発できれば良いのですが、
通話画面を操作するスキルが見つけられずにいます。
とりあえず画面に写したいイメージを作ることにしました。

私のイメージは、インスタライブのようにハートをタップすると画面にハートが飛ぶモノです。

1-3. タップするとハートを飛ばすHTML。

ChatGPTに「HTMLでクリックすると画面にハートが飛ぶコードを書いて」とお願いしたところ一発で出ます。

派手で良いのですが、もう少しインスタライブっぽくワンクリックでハートが一個出て上方に飛ぶものに変更します。

さらに通話画面に出したかったので、カメラを起動した状態でハートを飛ばすようにもしたいです。
こちらの記事でp5.jsを使用してからの起動をされていたので参考にします。

1-4.完成したもの

すごくそれっぽくできました。

作成したコード

const facingModeList = ["インカメラ", { exact: "environment" }];

const options = [];

let capture;
let hearts = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  resizeCanvas(windowWidth, windowHeight);

  for (mode of facingModeList) {
    options.push({
      video: {
        facingMode: mode,
      },
      audio: false,
    });
  }

  for (let i = 0; i < options.length; i++) {
    const button = createButton(JSON.stringify(facingModeList[i]));
    button.position(10, 10 + 35 * i);
    button.size(160);
    button.mousePressed(function () {
      capture = createCapture(options[i]);
      capture.hide();
    });
  }

  capture = createCapture(options[0]);
  capture.hide();
}

function draw() {
  image(capture, 0, 0, width, height);

  for (let i = hearts.length - 1; i >= 0; i--) {
    const heart = hearts[i];
    heart.update();
    heart.draw();
    if (heart.isFinished()) {
      hearts.splice(i, 1);
    }
  }
}

function mouseClicked() {
  if (capture) {
    const heartX = mouseX;
    const heartY = mouseY;
    const heartSize = random(20, 50);
    const heartSpeedX = random(-2, 2);
    const heartSpeedY = random(-5, -2);
    const heart = new Heart(
      heartX,
      heartY,
      heartSize,
      heartSpeedX,
      heartSpeedY
    );
    hearts.push(heart);
  }
}

class Heart {
  constructor(x, y, size, speedX, speedY) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speedX = speedX;
    this.speedY = speedY;
    this.opacity = 255;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.opacity -= 2;
  }

  draw() {
    fill(255, 0, 0, this.opacity);
    noStroke();
    heart(this.x, this.y, this.size);
  }

  isFinished() {
    return this.opacity <= 0;
  }
}

function heart(x, y, size) {
  const curveSize = size / 2;

  beginShape();
  vertex(x, y + size / 4);
  bezierVertex(
    x + size / 2,
    y - curveSize / 2,
    x + size,
    y + size / 4,
    x,
    y + size
  );
  bezierVertex(
    x - size,
    y + size / 4,
    x - size / 2,
    y - curveSize / 2,
    x,
    y + size / 4
  );
  endShape(CLOSE);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

"インカメラ"の下の{ exact: "environment" }ボタンで外カメラが起動します。
ボタンの名前とかも変えた方がお洒落ですが今回はサクッとを優先してこのままにします。

2. 夫に触ってもらう

こちらで実際に作ったものが試せます。

2-1.夫の反応はいかに

実際にLINE通話で触ってもらいました。

ブラウザをLINE通話で画面共有してもらって、画面タップ。
ハートが出た瞬間「おおーイイねー」という反応でしたが、すぐに飽きた様子。

2-2.物足りない部分

夫の反応をまとめると、

*ハート以外も出たら楽しいのに
*自分の画面にハートが出ても楽しくない。そっちの画面にハートが飛べばいいのに。

とのことでした。
ハート以外のモノを出すのは何とかなりそうですが、
自分の画面にハートが出ていても相手に送っている感じにならないので、つまらないとのことです。

2-3.今後の方針

今回やってみたことは、相手の通話画面をリアルタイムで操作するってハードルが高そう。
ということです。
Alexaのスキルなどで通話画面ハックができるものを探すのが良さそうです。
通話画面だけだと限界がありそうなので、プニプニするとスイッチ(クリック操作)になりそうなツールも探してみようと思います。