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

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

1T2R3M4

2021/01/26 03:53

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10237858570 以下ご対応ください。 https://teratail.com/help#posted-otherservice

行動規範の内容に同意します

回答1件

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

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

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

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

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

Processing
1import fisica.*;
2
3FWorld world;
4PImage rinkaku;
5
6void setup() {
7  size(400, 400);
8  Fisica.init(this); // Fisicaの初期化
9  world = new FWorld(); // 物理演算ワールドの作成
10
11  // 画像素材の読み込み
12  PImage image = loadImage("https://1.bp.blogspot.com/-qza2l3fEbcg/WAhy0Ca1kMI/AAAAAAAA_G8/KtKWN22FmgEahbu01gRA2yzAD-93gg8FgCLcB/s400/fukuwarai_okame_parts.png");
13  rinkaku = image.get(0, 0, 260, 371); // 画像から指定位置・サイズで切り取った新たな画像（背景用輪郭）
14
15  // 右目
16  FBox me1 = new FBox(44, 24); // 四角の作成
17  me1.attachImage(image.get(265, 128, 44, 24)); // 画像設定
18  me1.setPosition(random(200) + 100, random(200) + 100); // 位置をランダムに
19  me1.setStatic(true); // 静止物体（物理演算しない）
20  world.add(me1); // ワールドに追加
21
22  // 左目
23  FBox me2 = new FBox(44, 24);
24  me2.attachImage(image.get(345, 128, 44, 24));
25  me2.setPosition(random(200) + 100, random(200) + 100);
26  me2.setStatic(true);
27  world.add(me2);
28
29  // 鼻
30  FCircle hana = new FCircle(58); // 丸の作成
31  hana.attachImage(image.get(298, 170, 58, 58));
32  hana.setPosition(random(200) + 100, random(200) + 100);
33  hana.setStatic(true);
34  world.add(hana);
35
36  // 口
37  FBox kuti = new FBox(60, 34);
38  kuti.attachImage(image.get(297, 248, 60, 34));
39  kuti.setPosition(random(200) + 100, random(200) + 100);
40  kuti.setStatic(true);
41  world.add(kuti);
42}
43
44void draw() {
45  background(255); // 背景白
46  image(rinkaku, 60, 20); // 背景用輪郭の描画
47
48//  world.step(); // 物理演算をまったく活用していないのでいらないが、通常step -> drawの流れ
49
50  world.draw(); // ワールドにある物体の描画
51//  world.drawDebug(); // 当たり判定の四角や丸の表示 調整中はコメントを外すと少し楽
52}