画像のランダム配置について

Question

前提・実現したいこと

web初心者のため、伝わらなかったら申し訳ないのですが、
500近くある画像をphpでランダムに50個抽出し、且つ配置をランダムにしたいです。

該当のソースコード

<?php 
	echo '<div class="test"><div class="test2">';
	$name = array(
		'1',
		'2',
		'3',
		 ・
		 ・
		 ・
		'500'
	);
	$check = array_fill(0,500,0);
	$a = 0;
	while($a < 50){
		$i = rand(0,499);
		if( $check[$i] != 1 ){
		$check[$i] = 1;
		echo '<img src="test/'. $name[$i] .'.png">';
		$a++;
		}
	}
	echo '</div></div>';
 ?>

.test{
	position: relative;
	width: 100vw;
	height: 100vh;
}
.test2 img{
	position: absolute;
}

↓https://teratail.com/questions/27367 こちらのものをコピペさせて頂きました。

// 引数で渡した範囲内のランダムな整数を生成するための関数
var getRandomInt = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

// 要素の取得
var $container = $('.test'),
  $wordList = $('.test2').find('img'),
  containerWidth = $container.width(),
  containerHeight = $container.height();

console.log(containerWidth, containerHeight)

// liそれぞれをランダムに配置
$.map($wordList, function(item, index) {
  var $item = $(item),
    topPos = getRandomInt(0, containerHeight),
    leftPos = getRandomInt(0, containerWidth);

  // 取得したランダム座標を設定
  $item.css({
    top: topPos,
    left: leftPos
  });
});

以上のコードで、ランダムに抽出、配置はできるのですが、
画像が思いっきり重なって表示されてしまいます。
画像の数が今後増える可能性もあり全て読み込むのは避けたいためランダム抽出自体はphpで行いたいです。
画像が重ならないように(重なっても数px程度に)変更できれば理想で、
ランダムに配置する際、画像の向きもランダムにすることが可能でしたら、方法やヒントを教えて頂きたいです。
よろしくお願いいたします。

Comments

[m.ts10806]

画像名は1~~500.pngでいいんですか？

[so68_so78]

はい！画像の名前は連番になっております。

[m.ts10806]

画像の縦横はそれぞれバラバラなんでしょうか？

[m.ts10806]

あと「可能ですか？」だと「可能です」としか答えようがないので
そのあたり、欲しいアドバイスが得られやすいように調整いただけたらと

[so68_so78]

いえ、全て正方形です。画像自体は500×500なのですが、ランダム配置が上手くいきましたら大きさを調整しようと思っておりました。

[so68_so78]

申し訳ありません。修正を致しました。

Answer 1

とりあえず.test2 imgの position: absolute;を外すかrelativeに変更すれば重ならなくなります。
あとは「どう表示させたいか」ですね。

画像の向きもランダムにすることが可能でしたら、方法やヒントを教えて頂きたいです。

となるとGDライブラリとかで画像表示前に回転させるとかですかね。
HTMLにPHPコード埋め込むより<img src="img.php?id=1">のようにしてimg.phpで画像読み込み→ヘッダーContent-type: image/png送信して表示
させたほうがコードとしてはスッキリしそうです。

---

余談：
画像が連番であればもっと簡単にリストを作れます。

$imglist = array_fill(1, 500, 'img');
$keys = array_rand($imglist, 50);
var_dump($keys);

• array_fill()
• array_rand()

※これはあくまで配列関数一覧を眺めて組み合わせたらいけそうかなと思って使ったもので、確立されたやり方があるわけではなく発想です

Comments

[so68_so78]

お礼が遅くなり、大変申し訳ありません。ありがとうございます！GDライブラリのリンクが大変参考になりました。もう少しで思い通りにできそうなので、頑張ってみます。本当にありがとうございました。

[m.ts10806]

解決されたようで何よりです
PHPマニュアル活用してくださいね