人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

7個の丸を、ある程度ランダムな配置で、円に並べるプログラムを組みたいと思うのですが、どういった記述をすればよいでしょうか?
出来ましたら、PHPでのソースでご返信下さい。

●質問者: makocan
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から

間違いました。
PHPではなく、HTML5かjavascriptでした。


1 ● だわかき
●50ポイント ベストアンサー

円の中心からの角度をランダムに発生させて、その上に丸を描くプログラムを作ってみました。PHPにGDが入っていることが前提です。

<?php
define(X0, 250); //丸を乗せる円の中心座標(X0, Y0)
define(Y0, 250);
define(R0, 200); //丸を乗せる円の半径
define(R1, 20); //丸の半径

//ランダムに丸の中心座標を求める
function getCoordinate() {
 $d = deg2rad(rand(0, 359));
 $x = R0 * cos($d) + X0;
 $y = R0 * sin($d) + Y0;

 return array($x, $y);
}

header("Content-Type: image/png");
$img = imagecreatetruecolor(500, 500);
$white = imagecolorallocate($img, 0xFF, 0xFF, 0xFF);
$blue = imagecolorallocate($img, 0x00, 0x00, 0xFF);
imagefill($img, 0, 0, $white); //背景を白色

//丸を7個ランダムに描く
for ($i = 1; $i <= 7; $i++) {
 list($x, $y) = getCoordinate();
 imagefilledarc($img, $x, $y, R1, R1, 0, 360, $blue, IMG_ARC_PIE);
}
imagepng($img);
?>

2 ● a-kuma3
●50ポイント

こんな感じでしょうか?

<script type='text/javascript'>

CoordSupport = function() {
 this.init = function(cw, ch, x_min, x_max, y_min, y_max) {
 this.width_ = cw;
 this.height_ = ch;
 this.x_min_ = x_min;
 this.x_max_ = x_max;
 this.y_min_ = y_min;
 this.y_max_ = y_max;
 this.dx_ = (x_max - x_min) / cw;
 this.dy_ = (y_max - y_min) / ch;
 };
 this.pixel = function(x, y) {
 var px = (x - this.x_min_) / (this.x_max_ - this.x_min_) * this.width_;
 var py = (this.y_max_ - y) / (this.y_max_ - this.y_min_) * this.height_;
 return {"x": px, "y": py};
 };
 };

function drunk_circle7() {

 var canvas = document.getElementById('canvas-d');
 if (!canvas || !canvas.getContext) {
 alert("not support CANVAS !");
 return false;
 }

 var cs = new CoordSupport();
 cs.init(300, 300, -2, 2, -2, 2);
 canvas.width = cs.width_;
 canvas.height = cs.height_;

 var ctx = canvas.getContext('2d');

 var PI2 = Math.PI * 2.0;
 var dt = PI2 / 7;
 var R = 1.0;
 var R_S = 20; // 円のずれ具合(ピクセル単位)
 var RAND_D = 10
 for (var i = 0 ; i < 7 ; ++i) {
 t = PI2 / 4 - (PI2 / 7 * i)
 var x = R * Math.cos(t)
 var y = R * Math.sin(t)

 p = cs.pixel(x, y);
 dx = Math.random() * RAND_D - RAND_D / 2
 dy = Math.random() * RAND_D - RAND_D / 2

 // ちょっとずれてる円
 ctx.strokeStyle = "green";
 ctx.beginPath();
 ctx.arc(p.x + dx, p.y + dy, R_S, 0, PI2, false);
 ctx.stroke();
 ctx.closePath();

 // ずれてない円
 ctx.strokeStyle = "pink";
 ctx.beginPath();
 ctx.arc(p.x, p.y, R_S, 0, PI2, false);
 ctx.stroke();
 ctx.closePath();

 }

}

window.onload = function() {
 drunk_circle7();
};
</script>


<canvas id="canvas-d"></canvas>


jsFiddle で試したのが、こちらです。
http://jsfiddle.net/a_kuma3/QTh35/embedded/result/

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ