processingで図形を選択して動かす方法

Question

Processingを用いたプログラミングについての質問です。 画面に表示された図形をマウスで掴んで、好きなところに移動させられるようなプログラムを作りたいのですがどのような関数を用いれば良いでしょうか？
プログラムの内容としては、福笑いのゲームのようなものを考えています。

Comments

[1T2R3M4]

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10237858570

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

退会されてしまいましたが、題材としてはありがちなのとせっかく準備したので回答しておきます。

できるだけ簡単にできるように、ライブラリを使ってみましょう。

メニューの「スケッチ」-「ライブラリをインポート...」-「ライブラリを追加...」から、Fisica | A wrapper for JBox2D, a 2D physics engine.をインストールします。

本来は２Dの物理演算をするライブラリですが、マウスで移動だけに使います。
メニューの「ファイル」-「サンプル...」に、本来の使い方がいろいろ入っていますので試してみてください。

四角や丸を追加すると、マウスでドラッグ移動ができます。
四角や丸に画像を張り付ければ、福笑いのようになります（つまり見た目通りの当たり判定ではありません）

import fisica.*;

FWorld world;
PImage rinkaku;

void setup() {
  size(400, 400);
  Fisica.init(this); // Fisicaの初期化
  world = new FWorld(); // 物理演算ワールドの作成

  // 画像素材の読み込み
  PImage image = loadImage("https://1.bp.blogspot.com/-qza2l3fEbcg/WAhy0Ca1kMI/AAAAAAAA_G8/KtKWN22FmgEahbu01gRA2yzAD-93gg8FgCLcB/s400/fukuwarai_okame_parts.png");
  rinkaku = image.get(0, 0, 260, 371); // 画像から指定位置・サイズで切り取った新たな画像（背景用輪郭）

  // 右目
  FBox me1 = new FBox(44, 24); // 四角の作成
  me1.attachImage(image.get(265, 128, 44, 24)); // 画像設定
  me1.setPosition(random(200) + 100, random(200) + 100); // 位置をランダムに
  me1.setStatic(true); // 静止物体（物理演算しない）
  world.add(me1); // ワールドに追加

  // 左目
  FBox me2 = new FBox(44, 24);
  me2.attachImage(image.get(345, 128, 44, 24));
  me2.setPosition(random(200) + 100, random(200) + 100);
  me2.setStatic(true);
  world.add(me2);

  // 鼻
  FCircle hana = new FCircle(58); // 丸の作成
  hana.attachImage(image.get(298, 170, 58, 58));
  hana.setPosition(random(200) + 100, random(200) + 100);
  hana.setStatic(true);
  world.add(hana);

  // 口
  FBox kuti = new FBox(60, 34);
  kuti.attachImage(image.get(297, 248, 60, 34));
  kuti.setPosition(random(200) + 100, random(200) + 100);
  kuti.setStatic(true);
  world.add(kuti);
}

void draw() {
  background(255); // 背景白
  image(rinkaku, 60, 20); // 背景用輪郭の描画

//  world.step(); // 物理演算をまったく活用していないのでいらないが、通常step -> drawの流れ

  world.draw(); // ワールドにある物体の描画
//  world.drawDebug(); // 当たり判定の四角や丸の表示 調整中はコメントを外すと少し楽
}

画像の切り出し位置の調整が面倒ですが、プログラム自体はそれほど難しくないと思いますがどうでしょうか？

いらすとや様の画像をお借りしました。
福笑いのイラスト（おかめ） | かわいいフリー素材集 いらすとや