マルチスレッドを用いた際の複数アニメーション描画・JavaFX（Exception in thread、duplicate children added）

Question

前提・実現したいこと

SceneBuilderとJavaFXで、4つの四角から円が流れていくアニメーションを作成しようとしています。
マルチスレッド機構を必ず使い、制作したいです。

発生している問題・エラーメッセージ

スレッドを2つ以上同時にstart()させると以下のようなエラーメッセージが出てきます。
また、表示されるウインドウにはアニメーションをつけている円以外(各GUI要素・四角)は表示されます。円は一つも表示されません。
duplicate children added:　から、複数の図形を描画する際のgetChildren().add(machine)で追加できないような問題が起きていると思うのですが、解決方法がわかりません。

Exception in thread "Thread-4" Exception in thread "Thread-3" java.lang.IllegalArgumentException: Children: duplicate children added: parent = BorderPane@61af5816
        at javafx.graphics/javafx.scene.Parent$3.onProposedChange(Parent.java:561)
        at javafx.base/com.sun.javafx.collections.VetoableListDecorator.add(VetoableListDecorator.java:205)
        at application.Material.run(Material.java:55)
java.lang.IllegalArgumentException: Children: duplicate children added: parent = BorderPane@61af5816
        at javafx.graphics/javafx.scene.Parent$3.onProposedChange(Parent.java:561)
        at javafx.base/com.sun.javafx.collections.VetoableListDecorator.add(VetoableListDecorator.java:205)
        at application.Material.run(Material.java:55)

該当のソースコード

Mainクラス、Materialクラス（アニメーションを持つ円）、Machineクラス（通過点の四角）でできています。
MaterialクラスにThreadクラスを継承させ、run()のオーバーライドでアニメーションを設定しPlay()させています。
エラー発生部分はMainクラス内のmatR.start();matB.start();の辺りと考えられます。

package application;
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.scene.shape.*;
import javafx.scene.paint.*;


public class Main extends Application {

    // @FXML
    // private Circle circle1;

    public static void main(String[] args) {
    launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
    //Pane setup
        URL location = getClass().getResource( "Main.fxml" );
        FXMLLoader fxmlLoader = new FXMLLoader( location );
        Pane root = (Pane) fxmlLoader.load();
        final int width = 600;
        final int height = 400;
    
    //path setup
        final int startRedX = 100;
        final int startRedY = 100;
        final int moveWidth = 350;
        final int moveHeight = 200;

        Path pathRB = new Path();
        pathRB.getElements().add(new MoveTo(startRedX, startRedY));
        pathRB.getElements().add(new LineTo(startRedX + moveWidth, startRedY));
        Path pathBG = new Path();
        pathBG.getElements().add(new MoveTo(startRedX + moveWidth, startRedY));
        pathBG.getElements().add(new LineTo(startRedX + moveWidth, startRedY + moveHeight));
        Path pathGY = new Path();
        pathGY.getElements().add(new MoveTo(startRedX + moveWidth, startRedY + moveHeight));
        pathGY.getElements().add(new LineTo(startRedX, startRedY + moveHeight));
        Path pathYR = new Path();
        pathYR.getElements().add(new MoveTo(startRedX, startRedY + moveHeight));
        pathYR.getElements().add(new LineTo(startRedX, startRedY));

    //machine setup
        Machine machineRed    = new Machine();
        Machine machineBlue   = new Machine();
        Machine machineGreen  = new Machine();
        Machine machineYellow = new Machine();

        machineRed.set(root,Color.RED,80,70);
        machineBlue.set(root,Color.BLUE,440,70);
        machineGreen.set(root,Color.GREEN,440,280);
        machineYellow.set(root,Color.YELLOW,80,280);

        machineRed.view();
        machineBlue.view();
        machineGreen.view();
        machineYellow.view();

    //material setup
        //threads
        Material matR = new Material();
        Material matB = new Material();
        Material matG = new Material();
        Material matY = new Material();

        matR.set(root, pathRB); matR.colorSet(Color.RED);
        matB.set(root, pathBG); matB.colorSet(Color.BLUE);
        matG.set(root, pathGY); matG.colorSet(Color.GREEN);
        matY.set(root, pathYR); matY.colorSet(Color.YELLOW);

        // MaterialThread matRthread = new MaterialThread(matR);
        // MaterialThread matBthread = new MaterialThread(matB);


        matR.start();//エラー発生？
        matB.start();
        // matG.start();
        // matY.start();
        // matR.move();
        // matB.move();

        // matRthread.start();
        // matBthread.start();

        primaryStage.setScene( new Scene( root , width , height ) );        
        primaryStage.show();
    }
}

package application;
import javafx.scene.shape.*;
import javafx.animation.*;
import javafx.util.Duration;
import javafx.scene.layout.Pane;
import javafx.animation.PathTransition;
import javafx.scene.paint.*;



public class Material extends Thread{
	protected Circle circle = new Circle(10);
	protected Pane root;
	protected Path path;
	protected PathTransition animation;
	protected Color color;

	public void set(Pane root, Path path /*,double x, double y*/){
		this.root = root;
		this.path = path;
	}

	public void colorSet(Color color){
		this.color = color;
		circle.setFill(color);
	}

	public void move(){
		animation = new PathTransition();
		animation.setNode(circle);
		animation.setDuration( Duration.seconds( 4 ) );   
		animation.setPath( path );
		animation.setInterpolator( Interpolator.LINEAR );   
		animation.setAutoReverse(false);
		animation.setCycleCount(0);

		root.getChildren().add(circle);        
		animation.play();
	}

	@Override
	public void run(){
		this.animation = new PathTransition();
		this.animation.setNode(this.circle);
		this.animation.setDuration( Duration.seconds( 4 ) );   
		this.animation.setPath( this.path );
		this.animation.setInterpolator( Interpolator.LINEAR );   
		this.animation.setAutoReverse(false);
		this.animation.setCycleCount(0);
		this.root.getChildren().add(circle);        
		this.animation.play();
	}
}
// class MaterialThread extends Thread{
// 	private Material material;
// 	public MaterialThread(Material material){
// 		this.material = material;
// 	}
//     @Override
//     public void run(){
//         this.material.move();
//     }
// }

package application;
import javafx.scene.shape.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.*;
public class Machine{

    protected int width = 80;
    protected int height = 60;
    protected int x,y;
    protected Rectangle machine = new Rectangle(x,y,width,height);
	protected Pane root;
    protected Color color;

    protected Thread t;

    public void set(Pane root, Color color, int x, int y){
		this.x = x;
        this.y = y;
        this.machine = new Rectangle(x,y,width,height);
        this.root = root;
        this.color = color;
    }
    
    public void view(){
        machine.setFill(color);
        root.getChildren().add(machine);   
    }
}

追記

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Main">
   <top>
      <HBox prefHeight="15.0" prefWidth="600.0" BorderPane.alignment="CENTER">
         <children>
            <Button mnemonicParsing="false" text="Start" />
            <Button mnemonicParsing="false" text="Stop" />
         </children>
      </HBox>
   </top>
   <bottom>
      <Slider BorderPane.alignment="CENTER" />
   </bottom>
   <center>
      <AnchorPane prefHeight="331.0" prefWidth="600.0" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>

試したこと

・マルチスレッド機構を用いずにMaterialクラスにrun()と同じ内容のメソッドを作成したうえでそのメソッドを同じように複数呼び出すと同時にアニメーション描画することが出来ました。
・調べている中でGroupを用いると直りそうな気がしましたが、まだよくわかっていなのできちんとしたアドバイスをいただきたいです。

追記
先程、Mainクラス内で複数のstart()の間にthread.sleep(..)を挟んで実行するとうまくいきました。これがなぜなのかもわからず、、皆様の知恵を貸してくだされば大変助かります。よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

JavaFX Scene Builder 17.0.0

解決後の追記

皆さんのご協力で何とか解決いたしました！
ベストアンサーですが、追記依頼のコメント内でご指摘頂いた皆さんにも宛てるつもりでshiketaさんの回答につけさせていただきます。
本当にありがとうございました！

Comments

[TN8001]

普通はUIスレッド以外からUIをいじると
IllegalStateException: Not on FX application thread
が出るんですが確かに
IllegalArgumentException: Children: duplicate children added
が出ますね。。。

sleepを入れると動いちゃうほうがイレギュラーだと思います^^;

とはいえ、これThreadの意味全くなくないですか？
Materialのコンストラクタでplayまでしちゃっても、見た目？は何も変わらないと思うのですが。

[magutyan0814]

コメントありがとうございます！
そうなんですね、、どのスレッドからUIをいじるかでもエラーが出るのですね。勉強になります。
Threadですが、実は学校課題の条件でマルチスレッド機構を必ず使わなければならず、初期開発段階ですがどんな感じだろうと思って使ってみたらこのエラーにぶつかった形です。最終的にスレッドが使えないと困るため質問させて頂きました。
仰る通り、materialコンストラクタ内で全て済ませてもいいのです。(実際動きました)ですが、この後図形の四角に丸が当たったら丸をその色に塗り替えて別pathでアニメーションplayというようにまた開発を進めていく予定のため、threadを試したいのもありこのように作成しました。

[TN8001]

なるほどこの後もあるわけですね。

少なくとも add(circle) はコンストラクタに移せるはずです。
それで duplicate children added はなくなると思います。

が、今度は play でエラーが出ると思います（手元ではArrayIndexOutOfBoundsExceptionが出たりしました）

Platform.runLater(() -> { animation.play(); });
のようにUIスレッドに回せばエラーは出なくなりました（playがだめなのか作成もダメなのかは未確認）

[jimbe]

> Threadですが、実は学校課題の条件でマルチスレッド機構を必ず使わなければならず

マルチスレッドと動作結果(表示)以外に、課題として何が条件として決まっているのでしょうか。

[magutyan0814]

@TN8001 さん
ご指摘ありがとうございます。結論から言うと確実に動くようになりました。本当にありがとうございます。
回答のshiketaさんの意見も併せて直してみたところ、IllegalArgumentExceptionのエラーはなくなりました。しかしやはり、TN8001さんと同じようにArrayIndexOutOfBoundsExceptionが出てしまっていました。(時々エラーが出ずに動いたり、全く動かなかったりします。そこの理由は本当にわかりません。)
そこで、教えて頂いた　Platform.runLater(() -> { animation.play(); });　をrun()内play()の代わりに使うと百発百中で動くようになりました！初めのご指摘通り別スレッドからGUIをいじるときに出るエラー文はIllegalStateExceptionらしくエラー文が食い違っていますが、別スレッドからアニメーションを動かそうとしていたのは一因だったのかもしれません。
ArrayIndexOutOfBounceは何の配列に対して出ていたか本当にわかりませんが、ひとまず動いて一安心できました。本当にありがとうございました。
もし何かこのArrayIndexOutOfBounceに関してなんとなく原因がわかるようでしたら、教えて頂けると助かります。ありがとうございました。

[magutyan0814]

@jimbi さん
他には条件はありません！マルチスレッド同士で同期機構をつけると尚良い、という風に言われています。

[jimbe]

> マルチスレッド同士で同期機構をつけると尚良い

マルチスレッドにすることと同期機構をつけることは同じではありませんが、マルチスレッドだけで良いのでしょうか。

[magutyan0814]

@jimbe さん
今はまだ初期開発段階で、当たり判定などある程度のところまで作ってから同期機構をつけようと思っています。
もしかしたらこのままでは同期機構で問題が出そうなところ等ありますかね、、？

[jimbe]

同期で問題といいますか、そもそも先にコメントで書かれていますように、現状スレッドの意味がありません。その上で同期させるといっても、結局コードに同期のコードが書いてあるだけでプログラムとしては意味が無いものとなり得ます。
課題が何をさせようとしているのか、何の為にスレッドを使い、何の為に同期が必要なのかをはっきりさせないと、ただ長いだけのプログラムになります。
例えば、円を移動させるのに PathTransition を使っていますが、これを自作で行うとしたらどうでしょう。
何を同期させるか(スレッドそのものか、フィールドアクセスか)ははっきりしませんが、マルチスレッドの意味は成立すると思います。

[magutyan0814]

@jimbe さん

わざわざアドバイスありがとうございます泣 助かります！

私の制作テーマとして、工場生産ラインをアニメーションで再現するというものに決めてこのコードを書いています。ですので、円の移動に手をかけるというより、例えば生産ラインの処理機械に見立てた四角形が円を受け取ったとき、その四角形を何らかの処理をしているような色に差し替え、処理が終わったら元の色に戻り次の四角形へ色が変わった円をアニメーションで送り出す、というような形にしたいです。
そこで各四角形が差し変えられる色が異なっていたり、各四角形で円を受け取るタイミングが違う場合にも対応できるなどスレッドを使えば色々なことができるかなぁと思っております。（まだ作っていない者の想像ですが）また、同期処理はオプションで、必須というわけではありません。

この質問はマルチスレッド機構を使ってみようということで簡単に書いたコードです。せっかくお答えいただいたのですが、ばっさり変わってしまう可能性もあります。しかし解決しておかないと困ると思いまして質問させていただきました。

[jimbe]

コードの背景が大分見えてきました。ご説明ありがとうございます。

ご質問自体とは離れてしまいますが、「工場生産ラインをアニメーションで再現」であれば、円の移動アニメーションの"開始"をスレッドにするのは「マルチスレッド機構を使ってみよう」という程度の意味とは言え、ちょっと意味が無かったと思います。

java はオブジェクト指向であり、オブジェクトを基本単位として処理を記述します。そのメタファーとして例えば「車」を「エンジン」「タイヤ」等の組み合わせとするなど、実際のモノを用いたりすることも良くあります。
その延長として、工場生産ラインを材料・処理機械・コンベア等のオブジェクトとして表現（表示処理も含む）し、処理機械をコンベアの端のとして接続、独自に動作するモノである処理機械とコンベアをスレッドとして動作させ、材料を最初のコンベアの端に載せるとコンベアによって運ばれて処理されていく・・・といった形が出来ます。

もちろん課題は magutyan0814 さんのお考えで達成されるものですのでこれは雑談レベルの私の案ですが、スレッドを投げっぱなしのアニメーションの開始だけでは、スレッドで難しい部分、動作中のデータの入出力・同期等に全く触れませんので、もう少し表現構造にあった形でのお試しをされたほうが良かったのではと感じました。
例えばコンベア(常時動いており、材料を乗せると一定速度で逆側に移動させていき、端に付いたら予め登録(接続)されている別のオブジェクト(=スレッド)に材料を渡す。材料が移動中でも次の材料を乗せられる)をスレッドで(動作・移動の表現・アニメーションも含めて)どう書くか、です。

[magutyan0814]

お返事ありがとうございます。
確かに、もう少し制作テーマを考慮してマルチスレッドを試してみればよかったです。
コンベアに流れ着いた材料を別の機械に流す作業をスレッド化するということですね！並列作業になっていますし、学べる点が多くありそうです。チャレンジしてます。

今は、少し考えてMachineクラスをスレッドクラスのサブクラスにし、Cubbyholeなど使って材料が流れ着いた/ついていないの状態をなんとかMachineインスタンス間で共有(接続)できないかなと試行錯誤しているところです。流れ着いた→色を変えて次に流す の認識部分を作ろうとしています。

多くのアドバイス本当にありがとうございました。

Answer 1

JavaFX で無く Swing ですが、流れるものを作って見ました。
(結構テキトウです。)

package teratail_java.q377216;

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.*;

import javax.swing.*;

public class Q377216 extends JFrame {
  public static void main(String[] args) {
    new Q377216().setVisible(true);
  }

  Q377216() {
    super("Q377216");
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setSize(600, 480);
    setLocationRelativeTo(null);

    getContentPane().setLayout(null);

    Conveyor conveyor1 = new Conveyor(Conveyor.Anchor.SOUTH, Conveyor.FlowDir.LeftToRight);
    conveyor1.setBounds(100, 300, 200, 50);
    add(conveyor1);

    Machine machine = new Machine();
    machine.setBounds(300, 280, 100, 100);
    add(machine);

    Conveyor conveyor2 = new Conveyor(Conveyor.Anchor.EAST, Conveyor.FlowDir.BottomToTop);
    conveyor2.setBounds(320, 80, 50, 200);
    add(conveyor2);

    //コンベア1 から マシン を通って コンベア2 へ繋げる
    conveyor1.setNext(machine).setNext(conveyor2);

    JButton button1 = new JButton("投入");
    button1.addActionListener(new ActionListener() {
      private Random random = new Random();
      private Color[] colors = new Color[]{ Color.PINK, Color.RED, Color.CYAN, Color.WHITE, Color.GREEN, Color.YELLOW, Color.ORANGE };
      @Override
      public void actionPerformed(ActionEvent e) {
        conveyor1.set(new Material(colors[random.nextInt(colors.length)], random.nextInt(3)));
      }
    });
    button1.setBounds(50, 50, 100, 30);
    add(button1);

    conveyor1.start();
    machine.start();
    conveyor2.start();
  }
}

class Material {
  private static final int WIDTH = 20;
  private static final int HEIGHT = 20;
  private int x = Integer.MIN_VALUE;
  private int y = Integer.MIN_VALUE;
  private Color color;
  private int count;
  Material(Color color, int count) {
    this.color = color;
    this.count = count;
  }
  void setX(int x) { this.x = x; }
  void setY(int y) { this.y = y; }
  void setColor(Color color) { this.color = color; }
  void setCount(int count) { this.count = count; }

  int getX() { return x; }
  int getY() { return y; }
  int getWidth() { return WIDTH; }
  int getHeight() { return HEIGHT; }
  int getCount() { return count; }

  Rectangle getRectangle() {
    return new Rectangle(x, y, WIDTH, HEIGHT);
  }

  void paint(Graphics g) {
    g.setColor(color);
    g.fillOval(x, y, WIDTH, HEIGHT);
    g.setColor(Color.BLACK);
    g.drawOval(x, y, WIDTH, HEIGHT);
    g.drawString(""+count, x+7, y+15);
  }
}

interface InGate {
  void set(Material m);
}

interface Repeater extends InGate {
  Repeater setNext(Repeater next);
}

class Machine extends JPanel implements Repeater {
  private ArrayList<Material> mlist = new ArrayList<Material>();
  private Thread thread;
  private InGate nextGate;

  Machine() {
    super(null);
    setBackground(Color.WHITE);
  }

  @Override
  public Repeater setNext(Repeater next) {
    this.nextGate = next;
    return next;
  }

  @Override
  public void set(Material m) {
    synchronized(mlist) {
      mlist.add(m);
      mlist.notify();
    }
  }

  void start() {
    stop(); //念の為
    thread = new Thread(new Runnable() {
      @Override
      public void run() {
        try {
          while(!Thread.currentThread().isInterrupted()) {
            Material m;
            synchronized(mlist) {
              while(mlist.isEmpty()) mlist.wait();
              m = mlist.remove(0);
            }
            m = work(m);
            if(nextGate != null) nextGate.set(m);
          }
        } catch(InterruptedException ignore) {
        }
      }
    });
    thread.start();
  }
  void stop() {
    if(thread != null && thread.isAlive()) {
      thread.interrupt();
      try {
        thread.join();
      } catch(InterruptedException e) {
        e.printStackTrace();
      }
    }
    thread = null;
  }

  private Material work(Material m) {
    try {
      m.setCount(m.getCount() + 1);
      Thread.sleep(2000); //処理に2秒掛かることにする
    } catch(InterruptedException e) {
      e.printStackTrace();
    }
    return m;
  }

  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);

    g.setColor(Color.BLACK);
    g.drawRect(0, 0, getWidth()-1, getHeight()-1);
  }
}

class Conveyor extends JPanel implements Repeater {
  private enum Axis { X_AXIS, Y_AXIS } //縦横
  enum FlowDir { //何処から何処へ流れるか
    BottomToTop(Axis.Y_AXIS, 0,-1), LeftToRight(Axis.X_AXIS, 1, 0),
    TopToBottom(Axis.Y_AXIS, 0, 1), RightToLeft(Axis.X_AXIS,-1, 0);
    final Axis axis;
    final int sx, sy;
    FlowDir(Axis axis, int sx, int sy) {
      this.axis = axis;
      this.sx = sx;
      this.sy = sy;
    }
    int moveX(int x, int dx) { return x+(dx*sx); }
    int moveY(int y, int dy) { return y+(dy*sy); }
  }
  enum Anchor { //どの辺に沿って描画するか
    NORTH(Axis.X_AXIS), EAST(Axis.Y_AXIS),
    SOUTH(Axis.X_AXIS), WEST(Axis.Y_AXIS);
    final Axis axis;
    Anchor(Axis axis) {
      this.axis = axis;
    }
  }
  private static final int BOARD_SIZE = 5;
  private static final int BOARD_THICK = 2;
  private static final int TRANSPORT_STEP = 2;

  private Anchor anchor = Anchor.SOUTH;
  private FlowDir flowdir = FlowDir.LeftToRight;
  private ArrayList<Material> mlist = new ArrayList<Material>();
  private Thread thread;
  private int offsetX = 0, offsetY = 0;
  private InGate nextGate;

  Conveyor(Anchor anchor, FlowDir flowdir) {
    super(null);
    if(anchor.axis != flowdir.axis) throw new IllegalArgumentException();
    this.anchor = anchor;
    this.flowdir = flowdir;
    setBackground(Color.WHITE);
  }

  @Override
  public Repeater setNext(Repeater next) {
    this.nextGate = next;
    return next;
  }

  @Override
  public void set(Material m) {
    setPosition(m);
    synchronized(mlist) {
      mlist.add(m);
    }
  }

  private void setPosition(Material m) {
    if(flowdir == FlowDir.LeftToRight) {
      m.setX(- m.getWidth());
    } else if(flowdir == FlowDir.RightToLeft) {
      m.setX(getWidth());
    } else if(anchor == Anchor.WEST) {
      m.setX(BOARD_THICK);
    } else { //anchor == Anchor.EAST
      m.setX(getWidth() - BOARD_THICK - m.getWidth());
    }
    if(flowdir == FlowDir.TopToBottom) {
      m.setY(- m.getHeight());
    } else if(flowdir == FlowDir.BottomToTop) {
      m.setY(getHeight());
    } else if(anchor == Anchor.NORTH) {
      m.setY(BOARD_THICK);
    } else { //anchor == Anchor.SOUTH
      m.setY(getHeight() - BOARD_THICK - m.getHeight());
    }
  }

  private void move() {
    offsetX = flowdir.moveX(offsetX, TRANSPORT_STEP);
    if(offsetX <= -BOARD_SIZE) offsetX += BOARD_SIZE*2;
    else if(offsetX >= BOARD_SIZE) offsetX -= BOARD_SIZE*2;

    offsetY = flowdir.moveY(offsetY, TRANSPORT_STEP);
    if(offsetY <= -BOARD_SIZE) offsetY += BOARD_SIZE*2;
    else if(offsetY >= BOARD_SIZE) offsetY -= BOARD_SIZE*2;

    synchronized(mlist) {
      for(Iterator<Material> ite=mlist.iterator(); ite.hasNext(); ) {
        Material m = ite.next();
        m.setX(flowdir.moveX(m.getX(), TRANSPORT_STEP));
        m.setY(flowdir.moveY(m.getY(), TRANSPORT_STEP));

        if(!getRectangle().intersects(m.getRectangle())) {
          ite.remove();
          if(nextGate != null) { nextGate.set(m);}
        }
      }
    }
  }

  private Rectangle getRectangle() {
    return new Rectangle(0, 0, getWidth(), getHeight());
  }

  void start() {
    stop(); //念の為
    thread = new Thread(new Runnable() {
      @Override
      public void run() {
        try {
          repaint();
          while(!Thread.currentThread().isInterrupted()) {
            Thread.sleep(100);
            move();
            repaint();
          }
        } catch(InterruptedException ignore) {
        }
      }
    });
    thread.start();
  }
  void stop() {
    if(thread != null && thread.isAlive()) {
      thread.interrupt();
      try {
        thread.join();
      } catch(InterruptedException e) {
        e.printStackTrace();
      }
    }
    thread = null;
  }

  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);

    g.setColor(Color.BLACK);
    if(anchor.axis == Axis.X_AXIS) {
      int y = anchor == Anchor.NORTH ? 0 : getHeight() - BOARD_THICK;
      for(int x=offsetX; x<getWidth(); x+=BOARD_SIZE*2) {
        g.fillRect(x, y, BOARD_SIZE, BOARD_THICK);
      }
    } else {
      int x = anchor == Anchor.WEST ? 0 : getWidth() - BOARD_THICK;
      for(int y=offsetY; y<getHeight(); y+=BOARD_SIZE*2) {
        g.fillRect(x, y, BOARD_THICK, BOARD_SIZE);
      }
    }

    synchronized(mlist) {
      for(Material m : mlist) m.paint(g);
    }
  }
}

Comments

[magutyan0814]

なんと、、！！すごいですね！！本当にありがとうございます。私はまだ勉強中ですが、それくらいぱっと用意できるプログラマーになりたいです。

お返事を見てから頂いたコードとにらめっこしており、お返事が遅くなってしまいました。Java初学者の私では学べる点が本当に多くありました。恐縮なのですが、わからない点について解説頂いてもよろしいでしょうか、、？
・interfaceのRepeater/Ingate の詳しい役割・動作
・Conveyorクラス内のpaintComponentの動作
調べながら解読してみたのですが、以上の点がどうしてもよくわからず、、全体の構造と関連付けてご説明頂けると大変助かります。どうかよろしくお願い致します。

[jimbe]

InGate は、実装するクラスが
void set(Material m);
メソッドを実装していることを示し。それはこのプログラムとしては "Material を受け取ることが出来るクラス(オブジェクト)" であることを示します。
実装しているのは Machine と Conveyor で、現状 "コンベア→機械→コンベア" と繋げていますが、"コンベア→コンベア" や、機械を並べて直接"機械→機械"ということも出来るということであり、別に何か工場要素として作成した場合も InGate を実装することでコンベアや機械からマテリアルを受け取ることが出来るということです。
(ただし、コンベア→コンベアは表示の整合性が出来ていません。)

Repeater は実装から生まれたもので、

//コンベア1 から マシン を通って コンベア2 へ繋げる
conveyor1.setNext(machine).setNext(conveyor2);

という繋げた書き方(ストリーム風)をするためのものです。
プログラムとしては

conveyor1.setNext(machine);
machine.setNext(conveyor2);

でも良いんですが、繋がって書いたほうが「機械が繋がっている風」に見える…ということで。
(void setNext(InGate next); もあったほうが良さそうですが。)

コンベアの paintComponent は・・・描画しているだけですが ^^;
Swing はコンポーネントを paintComponent で g を使って画面に描画します。Machine と Conveyor は Swing のコンポーネントである JPanel を継承しているため、 paintComponent で自身を描画しています。
前半がコンベアの"点々"を書く部分、後半(synchronized 内) がコンベアに乗っている材料を書く部分です。
(Material は Swing のコンポーネントにしていないため、 コンペアが描画しています。というか、コンペアが描画するので Swing のコンポーネントにする必要が無い、というべきでしょうか。)

前半がごちゃごちゃしているのは、点々をコンベアの描画領域内でどこに書くか(Anchor: 東(右)西(左)南(下)北(上))をコンストラクトパラメータで指定できるようにしたため、それにあわせて x,y 座標を計算しつつ点々を書いているためです。

[jimbe]

回答のコードでは Machine がただの四角で殺風景だったのでキュー(mlist)のインジケータ等を付けてみたのですが、回答の文字数を超えてしまったので GitHub に入れました。

https://github.com/Jimbe-github/teratail_java/blob/master/workspace2/teratail_java/src/teratail_java/q377216/Q377216.java

機械とマテリアルが変わった程度のはず・・・だったかﾅ?

[magutyan0814]

ご回答ありがとうございます！
なるほど、機械やコンベアをつなげるためのインターフェイスなのですね。ありがとうございます。また、インジゲータをつけてみたサンプルも大変ありがたいです。調べながら読んでみます。

すみません、読んでいるうちにもお聞きしたいことができたのですが、
・conveyorクラスのmove()メソッドの動作(特にoffsetX/Yの役割、当たり判定(if文内？)の動作)
・conveyorクラスのstart()メソッドの動作(repaintで何を行っているのかがよくわかりません、座標をずらして再描画し、アニメーションとしているのでしょうか？)

についてお聞きしたいです。何でも聞くような形になってしまい本当に申し訳ないです。どうかよろしくお願いいたします。

[jimbe]

move メソッドは、コンベア(と乗っている材料)が一単位時間当たりどう動くかを計算しています。move メソッドで各座標 (offsetX,offsetY 及び乗っている材料の座標) を求めておき、 paintComponent でその座標に表示、となります。
offsetX と offsetY は(名前がちょっとダメですけど) コンベアの "点々" の描画開始位置です。
先のコメントで書きましたように "点々" を書く位置が4方向のいずれかであり、また "点々" は具体的には "黒い部分" と "黒くない部分" の繰り返しで、描画するのは "黒い部分" だけですので、その「 4 方向のうち描画する方向の、黒い部分の開始位置」を求めています。
if 文で書いてあるのは、例えば"黒い部分"が移動していき、次の"黒くない部分"が一定幅を超えると次の"黒い部分"が出てくることで"点々"になりますので、その次の部分に位置を戻しています。

start メソッドはスレッドの開始です。
repaint は Swing に対して"このコンポーネントを都合の良い時に再描画させてください (=paintComponent を呼び出してください)" と要求するメソッドで、Swing のコンポーネントは皆持っています。
つまり、 start によって開始されるスレッドは、 100ms待ち、move で移動位置を計算し、repaint で再描画を要求し、また100ms待ち・・・を繰り返し、これでアニメーションしています。

私のコードに対するご質問であれば、出来る限りお答えするつもりです。私のコードを一番分かっているのは私のはずですので。
まぁ、余り時間を掛けたコードではありませんので、先のインターフェース等は何かの拍子にマズイことが分かるかもしれませんし、スレッドも動き続ける前提にしてますので、stop して start したらどうなるかまで考えていない等、結局習作というかサンプルというか、そんなレベルでしかありませんが ^^;;;

[jimbe]

move メソッドの後半の材料の座標の計算で、乗っていた材料がコンベアから出た場合の判定を Rectangle の intersects メソッドで行っています。
intersects メソッドは良く当たり判定等で使われ、「交差するかを返す」と表現されたりしますが、実際に返すのは「二つの Rectangle に共通部分が有るか」です。
この場合はコンベアの描画領域内に材料の描画範囲が(少しでも)入っているかをチェックし、入っていなければ端に到達として自身から削除(ite.remove)し、次のゲートに繋がっていれば(nextGate!=null) そのゲートに入れています(nextGate.set(m))。

[magutyan0814]

お返事大変遅れました。こちらのコードを参考にさせていただきながら、JavaFXに移行させなんとか作品を完成させることが出来ました。質問に答えて頂き、丸ぱくりではなくいろいろな工夫もできたので本当に良かったです。ありがとうございました。

Answer 2

内容はまったく理解していませんが、TN8001さんの指摘、

少なくとも add(circle) はコンストラクタに移せるはずです。

もふくめて、わたしならこう書くかな、という案を。

ちなみに、何度もコピペするのがめんどうなので、インナークラスにしていますが、そこは如何様にでも。

package application;

import javafx.animation.Interpolator;
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.net.URL;

//
public class Main extends Application {

  // @FXML
  // private Circle circle1;

  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage primaryStage) throws Exception {
    //Pane setup
    final URL location = getClass().getResource("Main.fxml");
    final FXMLLoader fxmlLoader = new FXMLLoader(location);
    final Pane root = (Pane) fxmlLoader.load();
    final int width = 600;
    final int height = 400;

    //path setup
    final int startRedX = 100;
    final int startRedY = 100;
    final int moveWidth = 350;
    final int moveHeight = 200;

    final Path pathRB = new Path();
    pathRB.getElements().add(new MoveTo(startRedX, startRedY));
    pathRB.getElements().add(new LineTo(startRedX + moveWidth, startRedY));

    final Path pathBG = new Path();
    pathBG.getElements().add(new MoveTo(startRedX + moveWidth, startRedY));
    pathBG.getElements().add(new LineTo(startRedX + moveWidth, startRedY + moveHeight));

    final Path pathGY = new Path();
    pathGY.getElements().add(new MoveTo(startRedX + moveWidth, startRedY + moveHeight));
    pathGY.getElements().add(new LineTo(startRedX, startRedY + moveHeight));

    final Path pathYR = new Path();
    pathYR.getElements().add(new MoveTo(startRedX, startRedY + moveHeight));
    pathYR.getElements().add(new LineTo(startRedX, startRedY));

    //machine setup
    final Machine machineRed = new Machine(root, Color.RED, 80, 70);
    final Machine machineBlue = new Machine(root, Color.BLUE, 440, 70);
    final Machine machineGreen = new Machine(root, Color.GREEN, 440, 280);
    final Machine machineYellow = new Machine(root, Color.YELLOW, 80, 280);

    //    machineRed.set(root, Color.RED, 80, 70);
    //    machineBlue.set(root, Color.BLUE, 440, 70);
    //    machineGreen.set(root, Color.GREEN, 440, 280);
    //    machineYellow.set(root, Color.YELLOW, 80, 280);

    machineRed.view();
    machineBlue.view();
    machineGreen.view();
    machineYellow.view();

    //material setup
    //threads
    final Material matR = new Material(root, pathRB);
    final Material matB = new Material(root, pathBG);
    final Material matG = new Material(root, pathGY);
    final Material matY = new Material(root, pathYR);

    //    matR.set(root, pathRB);
    matR.colorSet(Color.RED);
    //    matB.set(root, pathBG);
    matB.colorSet(Color.BLUE);
    //    matG.set(root, pathGY);
    matG.colorSet(Color.GREEN);
    //    matY.set(root, pathYR);
    matY.colorSet(Color.YELLOW);

    // MaterialThread matRthread = new MaterialThread(matR);
    // MaterialThread matBthread = new MaterialThread(matB);


    matR.start();//エラー発生？
    matB.start();
    matG.start();
    matY.start();
    matR.move();
    matB.move();

    //     matRthread.start();
    //     matBthread.start();

    primaryStage.setScene(new Scene(root, width, height));
    primaryStage.show();
  }

  //
  static class Machine {
    private static final int width = 80;
    private static final int height = 60;
    private final int x, y;
    private final Rectangle machine;
    private final Pane root;
    private final Color color;

    //    private Thread t;

    public Machine(Pane root, Color color, int x, int y) {
      this.x = x;
      this.y = y;
      this.machine = new Rectangle(x, y, width, height);
      this.root = root;
      this.color = color;
    }

    public void view() {
      machine.setFill(color);
      root.getChildren().add(machine);
    }
  }

  //
  static class Material extends Thread {
    private final Circle circle = new Circle(10);
    private final Pane root;
    private final Path path;
    //    private PathTransition animation;
    private Color color;

    public Material(Pane root, Path path /*,double x, double y*/) {
      this.root = root;
      this.path = path;
      this.root.getChildren().add(circle);
    }

    public void colorSet(Color color) {
      this.color = color;
      circle.setFill(color);
    }

    public void move() {
      final PathTransition animation = new PathTransition();
      animation.setNode(circle);
      animation.setDuration(Duration.seconds(4));
      animation.setPath(path);
      animation.setInterpolator(Interpolator.LINEAR);
      animation.setAutoReverse(false);
      animation.setCycleCount(0);
      //      root.getChildren().add(circle);
      animation.play();
    }

    @Override
    public void run() {
      final PathTransition animation = new PathTransition();
      animation.setNode(this.circle);
      animation.setDuration(Duration.seconds(4));
      animation.setPath(this.path);
      animation.setInterpolator(Interpolator.LINEAR);
      animation.setAutoReverse(false);
      animation.setCycleCount(0);
      //      this.root.getChildren().add(circle);
      animation.play();
    }
  }
}

Comments

[magutyan0814]

再びの回答ありがとうございます。
頂いたコードとTN8001さんの指摘( Platform.runLater(() -> { animation.play(); }); })も併せて工夫し実行したところ確実に動くようになりました！本当にありがとうございました。

Answer 3

すべてのソースが提示されていないので、再現のしようがない。なので、

java.lang.IllegalArgumentException: Children: duplicate children added: ...

を再現する例だけ提示しておく。"duplicate children added error"ボタンを押下すれば再現できる。

スレッドどうのこうの関係ない。たぶん。原因は、単に、すでにどこかに追加済みのNodeを別の親に追加しようとしているから。どうしても使いまわしたいのであれば、元の親から削除してから別の親に追加すればいい。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class DupError {
  public static void main(final String[] args) throws Exception {
    Application.launch(App.class, args);
  }

  public static class App extends Application {
    private Rectangle newReac() {
      final Rectangle rect = new Rectangle(10, 10);
      rect.setStyle("background: red");
      rect.setFill(new Color(Math.random(), Math.random(), Math.random(), 1.0));
      return rect;
    }

    @Override
    public void start(final Stage stage) throws Exception {
      final Rectangle hogeRect = newReac();

      final HBox hbox1 = new HBox(hogeRect);
      final HBox hbox2 = new HBox();
      final TextArea text = new TextArea();

      final Button button1 = new Button("add new rect");
      button1.setOnAction(event -> hbox1.getChildren().add(newReac()));

      final Button button2 = new Button("duplicate children added error");
      button2.setOnAction(event -> {
        try {
          hbox1.getChildren().add(hogeRect);
        } catch (Exception e) {
          text.setText(text.getText() + e + "\n");
        }
      });

      final VBox vbox = new VBox(hbox1, button1, button2, hbox2, text);

      stage.setScene(new Scene(vbox));
      stage.setWidth(800);
      stage.setHeight(400);
      stage.show();
    }
  }
}

Comments

[magutyan0814]

コメントありがとうございます！
ご指摘で、FXMLのソースを掲載し忘れていたことに気が付きました。急いで追記いたしました。
頂いた回答を基に自分でも試行してみます。もしソースコードを見て気づいたことがございましたらお返事くださると大変嬉しいです。よろしくお願い致します。