魚のような動きを作りたい

Question

前提・実現したいこと

魚の文字が魚のようにうねっているプログラミングを作成したいです。試しに魚の画像で作成して見たのですが，魚自体がうねりすぎて魚の形すらわからなくなりました。何かいい方法はないでしょうか。また，文字をうねらせる際にテキスト入力と文字の画像はどちらが扱いやすいでしょうか。

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

エラーメッセージ

該当のソースコード

float theta;
float t;
float xspeed;
int direction=1;
PImage img;

void setup() {
size(500, 200);
smooth();
noStroke();
img = loadImage("sakana.png");
}

void draw() {
background(180, 200, 100);
t=20noise(1, 1);
fill(0);
for (int i=0; i<100; i++) {
image(img,i+xspeed, height/2+tsin(theta+0.1i), 31, 31);
//ellipse(i+xspeed, height/2+tsin(theta+0.1i), 31, 31);
}
theta+=0.1direction;
xspeed+=0.7*direction;
}

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Comments

[thkana]

著作権上問題があるとかいうことでなければ、画像ファイルも貼り付けていただけませんか?
適当な画像を用意してやらないと試すこともできないので。

それと、プログラムは「あなたの指示したとおりに動く」だけのものです。あなたが「魚がうねるように」というのをちゃんと指示できないとコンピュータはそのようには動きません。また、「魚がうねるように」とだけ言われても私もどう考えていいのか困ります。

どのような動きを期待しているのか、図に描くとかできませんか?

Answer 1

Processing：うねうねうごく物体 : PROCESSING入門

こちらが元ネタですね。
参考コードがある場合は質問に明示してください。

魚自体がうねりすぎて魚の形すらわからなくなりました。

そのページに「円を多数描いて」とあります。
コードの詳細は分からなくても、位置をずらしながらellipseを100回描いていることはわかると思います。

画像が重なっていけば、当然わけのわからない物体になるでしょう。

文字をうねらせる際にテキスト入力と文字の画像はどちらが扱いやすいでしょうか。

どちらにもメリット・デメリットがあるでしょう。
テキストベースなら文字を簡単に入れ替えられます。
画像ベースなら凝った色使いとか加工（目を入れるとか）も自在です。

魚の文字が魚のようにうねっているプログラミングを作成したいです。

やり方はいろいろあるでしょうが、今のコードを尊重してみました。
画像が重ならないように、縦に細切れにして描きました。

py0nnさんの思っている動きかは、自信がありませんが^^;

float theta;
float xspeed;
int direction = 1;
PImage img;

PGraphics g;
PImage[] images;

void setup() {
  size(500, 200);
  smooth();
  noStroke();

  g = createGraphics(31, 31); // PGraphics（描き込めるPImageのようなもの）作成
  g.beginDraw(); // 描画開始
  //g.background(255); // 文字の大きさがちょうどいいか確認用
  g.fill(0);
  g.textFont(createFont("メイリオ", 20));
  g.textSize(20);
  g.textAlign(CENTER, CENTER); // 上下左右の中央にテキストを描画
  g.text("魚", 0, 0, g.width, g.height); // 描画範囲を全体に指定 ↑と合わせて大体中央に
  g.endDraw(); // 描画終了

  images = new PImage[g.width]; // 縦に1pxずつ細切れのPImage配列
  for (int i = 0; i < g.width; i++) {
    images[i] = g.get(i, 0, 1, g.height);
  }
}

void draw() {
  background(180, 200, 100);
  float t = 20 * noise(1, 1);
  fill(0);

  for (int i = 0; i < 100; i++) {
    ellipse(i + xspeed, height / 3 + t * sin(theta + 0.1 * i), 31, 31);
  }

  for (int i = 0; i < images.length; i++) {
    image(images[i], i + xspeed, height / 3 * 2 + t * sin(theta + 0.1 * i));
  }

  theta += 0.1 * direction;
  xspeed += 0.7 * direction;
  if (width < xspeed) xspeed = 0; // 画面外に行ったらもう一周

  //image(g, 0, 0); // 文字がちゃんと書けているか確認用
}

Comments

[退会済みユーザー]

ありがとうございます。思い描いていた動きです！