【初心者学生です】マウスの移動に対して動的に図形が変化しない

Question

実現したいこと

マウスのX,Y座標の変化によって線が集中する場所を動的に変化させたい。

発生している問題・分からないこと

問題のコードはp5.jsで動くコードをprocessingで動くように関数やデータ型を修正したものです。
おそらく該当の部分は float para = min(height,mouseY) / height-0.5;と
line(0, (para + 0.5) * tileHeight, tileWidth, i * tileHeight / count);
line(0, i * tileHeight / count, tileWidth, tileHeight - (para + 0.5) * tileHeight);の部分です。

また、switch()関数のcase1,2,3全てで問題が発生しており、case1はX座標に対して線が増えてますが、2,3ではマウスの動きに対して全く図形が変化しません。
エラーメッセージは出ていません。Processingは最新のバージョンです。
Processingを使ったGenerative Artの魅力的な作例がまとまった本が少なくGenerative Design with p5.jsという本を使って独学していますが、p5.jsをprocessingに変換するとエラーメッセージは出ないが微妙に動かない誤差が頻発してしまうのも悩みです。

該当のソースコード

int count = 0;
int tileCountX = 6;
int tileCountY = 6;

int drawMode = 1;

void setup() {
  size(800,800);
  rectMode(CENTER);
  noFill();
}

void draw() {
  background(255);

  count = mouseX / 20 + 5;//mouseXが0でもcount=5を保証
  float para = min(height,mouseY) / height-0.5;//displayの高さかmouseYとで最小値を高さ-0.5で割る。この値はマウスのY座標が画面の高さに対してどの位置にあるかを-0.5~0.5で表す
  float tileWidth = width / tileCountX;
  float tileHeight = height / tileCountY;

  for (int gridY = 0; gridY <= tileCountY; gridY++) {
    for (int gridX = 0; gridX <= tileCountX; gridX++) {

      float posX = tileWidth * gridX + tileWidth / 2;
      float posY = tileHeight * gridY + tileHeight / 2;

      push();
      //グリッドの中心に座標系を設定
      translate(posX, posY);
      // 押したキーで描画される図形を変更
      switch (drawMode) {
      case 1:
        translate(-tileWidth / 2, -tileHeight / 2);
        for (var i = 0; i <count; i++) {//mouseXの値が大きいほど、線の数は増える。図形の描かれ方はグリッドの中心に縦に並んだ点から左上、右上の頂点に向かって線を引いている。
        //図形がmouseYに応じて傾くということは線の到達頂点がmouseYが小さいほどY座標がずれるということ
          line(0, (para + 0.5) * tileHeight, tileWidth, i * tileHeight / count);
          line(0, i * tileHeight / count, tileWidth, tileHeight - (para + 0.5) * tileHeight);
        }
        break;
      case 2:
        for (var i = 0; i <= count; i++) {
          line(para * tileWidth, para * tileHeight, tileWidth / 2, (i / count - 0.5) * tileHeight);
          line(para * tileWidth, para * tileHeight, -tileWidth / 2, (i / count - 0.5) * tileHeight);
          line(para * tileWidth, para * tileHeight, (i / count - 0.5) * tileWidth, tileHeight / 2);
          line(para * tileWidth, para * tileHeight, (i / count - 0.5) * tileWidth, -tileHeight / 2);
        }
        break;
      case 3:
        for (var i = 0; i <= count; i++) {
          line(0, para * tileHeight, tileWidth / 2, (i / count - 0.5) * tileHeight);
          line(0, para * tileHeight, -tileWidth / 2, (i / count - 0.5) * tileHeight);
          line(0, para * tileHeight, (i / count - 0.5) * tileWidth, tileHeight / 2);
          line(0, para * tileHeight, (i / count - 0.5) * tileWidth, -tileHeight / 2);
        }
        break;
      }

      pop();

    }
  }
}

void keyReleased() {
  if (key == '1') drawMode = 1;
  if (key == '2') drawMode = 2;
  if (key == '3') drawMode = 3;
  if (keyCode == DOWN) tileCountY = max(tileCountY - 1, 1);
  if (keyCode == UP) tileCountY += 1;
  if (keyCode == LEFT) tileCountX = max(tileCountX - 1, 1);
  if (keyCode == RIGHT) tileCountX += 1;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

processing変換前の書籍に載っていた元コードです
データ型や関数をprocessingで動くように修正したほか、自分で式を変えてみたりもしましたがうまくいきませんでした

補足

特になし

Comments

[thkana]

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12293065142
一応ここには以下のローカルルールがあるので対応よろしく。
https://teratail.com/help#posted-otherservice
「やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。 また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。」

Answer 1

processing変換前の書籍に載っていた元コードです

内容が全く違います。
今取り組んでいるのは「P_2_1_3_03」ではないですか？
Generative Design with p5.js［p5.js版ジェネラティブデザイン］ ―ウェブでのクリエイティブ・コーディング

p5.js Web Editor | P_2_1_3_03

Generative DesignはもともとJava版が先で、p5.js版はその一部移植＋αです。

Java版もコードは公開されています。
Code - GENERATIVE DESIGN ―Processingで切り拓く、デザインの新たな地平

コードの詳細は見ていませんが、動作結果は同じに見えました。
Code-Package-Processing-3.x/01_P/P_2_1_3_03/P_2_1_3_03.pde at master · generative-design/Code-Package-Processing-3.x

Processingを使ったGenerative Artの魅力的な作例がまとまった本が少なくGenerative Design with p5.jsという本を使って独学しています

もともとのほうGenerative Design Processingで切り拓く、デザインの新たな地平 | 株式会社ビー・エヌ・エヌは高価でなかなか手が出ませんが、［普及版］ジェネラティブ・アート | 株式会社ビー・エヌ・エヌこちらはお手軽じゃないでしょうか。

p5.jsをprocessingに変換するとエラーメッセージは出ないが微妙に動かない誤差が頻発してしまうのも悩みです。

わたしもOpenProcessing等のp5.jsを移植したりしていますが、思わぬところではまったりしていますｗ
それ自体を楽しめればそれはそれでいいのですが、学習にはあまり向かない気はします^^;
processingへの変換を教えてほしい

Comments

[ryotaro_yamada]

ほ…ほんとだ…。別のコードを載せてしまっていました。また、有益な情報ありがとうございました。processingの方のコードを参照しながら進めてみます

[TN8001]

コードを見てみました。
整数同士の割り算の問題ですね。
JavaScriptでは小数になりますが、Javaでは整数です。
[整数同士の除算演算子の挙動 (C言語、C++、Scala、Java、Rust、Go言語、PHP、JavaScript、Perl、Python、Ruby、Elixir) #Python - Qiita](https://qiita.com/suzuki-navi/items/72fcb1fbf05008cbe8b4)

p5.jsからの移植では割り算が出てきたら要注意です。
全部の変数にキャスト(float)をつける・リテラル（123 等）は全部fを付ける（123f 等）くらいの勢いでいいと思いますｗ

[TN8001]

> for(float i=0; i<=count; i++) {

でもこれはワナっぽい（というかクソ臭がする）よな～ｗ

[ryotaro_yamada]

float para = (float)min(height,mouseY) / height-0.5;にすることで修正できました。
この場合でデータ型をキャストする必要性についての説明を載せておきます。
「float para = min(height,mouseY) / height-0.5; と float para = (float)min(height,mouseY) / height-0.5; の違いは、min(height, mouseY) の結果を float にキャストするかどうかです。
Processingでは、min() 関数は入力のデータ型に基づいて結果を返します。つまり、height と mouseY が整数（int）であれば、min(height, mouseY) の結果も整数になります。その結果を height で割るとき、整数同士の除算が行われ、小数点以下が切り捨てられます。これを避けるために、(float)min(height, mouseY) のようにキャストを使用して、min() の結果を float に変換します。これにより、height で割ったときに小数点以下の値も保持されます。
したがって、height と mouseY が整数である場合、これら2つのコードは異なる結果を返す可能性があります。しかし、height と mouseY がすでに float 型である場合、これらのコードは同じ結果を返します。この違いは、特に height が mouseY よりも大きい値を持つ場合に顕著になります。それは、min(height, mouseY) の結果が mouseY（つまり、より小さい値）になり、その結果を height で割ると、0に近い小数が得られるからです。この小数点以下の値が、整数の除算では切り捨てられ、float の除算では保持されるためです。この違いは、para の値に大きな影響を与え、それによってプログラムの動作が変わる可能性があります。」