• ベストアンサー

ハートグラフの範囲内ランダム配置

x=16sin^3t y=13cost-5cos(2t)-2cos(3t)-cos(4t). http://mathworld.wolfram.com/HeartCurve.html 上記の数式は、上記サイトの6つ目の数式ですが、グラフにするとハートの形になるとのことですが、jQueryで100個の要素をこの曲線グラフの範囲内にランダムに配置するには、どのようにすればよいでしょうか。 ご教授いただけますでしょうか。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

かなり「やっつけ」なかんじ？ これって　もんてかるろほう？ ぜんかくくうはくは、はんかくに。 <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <style> #view > span { 　position: absolute; 　top : 0; 　left : 0; } </style> <body> <div id="view"></div> <script> (function (doc) { 　var sin = Math.sin; 　var cos = Math.cos; 　var pow = Math.pow; 　var pi = Math.PI; 　var step = pi / 45; 　var canvas = doc.createElement ('canvas'); 　var ctx = canvas.getContext ('2d'); 　ctx.beginPath (); 　for (var i = 0, I = pi * 2; i < I; i += step) { 　　x = 16 * pow (sin (i), 3); 　　y = 13 * cos (i) - 5 * cos (2 * i) - 2 * cos (3 * i) -　cos (4 * i); 　　ctx.lineTo (17 + x, 17 - y); 　} 　ctx.closePath(); 　function random () { 　　var r = Math.random; 　　var x, y; 　　do { 　　　x = r (); 　　　y = r (); 　　} while (! ctx.isPointInPath (x * 34, y * 34)); 　　return {x: x, y: y}; 　} 　 　this.randomHeart = random; }) (document); function setInSideOfHeart (ch) { 　var position = randomHeart (); 　var doc = this.ownerDocument; 　var span = doc.createElement ('span'); 　span.appendChild (doc.createTextNode (ch)); 　this.appendChild (span); 　span.style.top = position.y * 300 + 'px'; 　span.style.left = position.x * 300 + 'px'; } var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefhhijklmnopqrstuvwxyz'; str = str + str + str +str; str = str + str + str +str; str.split ('').forEach (setInSideOfHeart, document.getElementById ('view')); </script>

ixkaito
質問者

お礼

babu_babooさんご回答ありがとうございます。 すごいです！バッチリです！ご活用させていただきます！ 確かにモンテカルロ法みたいになりましたね。 以前もパーティクルで大変お世話になりました。 おかげさまで大変勉強になります。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • どうやってグラフを書けばいいかわかりません

    x=e^-t*cos2πt y=e^-t*sin2πt をt＝０から始まり、tが増加するときのx-y平面上での曲線の慨形を図示するという問題なんですが、どーやって書けるのでしょうkか？？ tを消去したくても出来ないし、自分で値を代入してプロットしていけばいいんでしょうか？？ 誰かわかる方教えてください。お願いします。

  • 数学三角関数グラフ

    2つのグラフを一緒の欄に書く y＝2cos(x/3)のグラフは周期6πですよね。 ですが、グラフがまだあるんだという事を示すために、曲線を負の方向にも僅かに延ばすべきですかね？そして、6πも少し先へ僅かに延長させるべきですかね？ あと教科書の例題で言うと y＝2cos(x/3)とy＝sin(2x-π/3)のグラフを書けって問題があるんですが、テストの時同じ解答欄に書くことになるってことはないですかね。 同じ解答欄に書いたら狭くて何がなんだか分からないですし。 とりあえず単体ではかけるようになりましたがorz

  • 複素数の横軸がRe で縦軸がImのグラフの書き方

    z=1-jみたいなグラフならかけるんですけど y(t)=cos(ωt) や x(t)=2sin(ωt)みたいなグラフの書き方がよくわからないです どうやって書くのでしょうか？

  • 媒介変数表示

    x=sin^2t , y=cos^2t　により媒介変数表示される曲線のグラフをかけ。 この問題が分かりません。まず、x、y　をそれぞれtで微分してdy・/dx　を考えるのですか？ すみませんが解き方をお願いします。

  • 媒介変数表示が表す曲線が囲む面積について

    媒介変数表示が表す曲線が囲む面積について求めたく、 (1)x=cost,y=sin2t 　　答、8/3 (2)x=cos^3*t,y=sin^3*t　　答、3π/8 0<=t<=2π　になります。 S=∫y*dx/dt dt を用いて解こうにも (1)は∫sin2t*(-sint)dt から進めず、 (2)は∫sin^3*t*(-3cos^2t*sint)dt から進めず困っています。 解き方分かる方教えていただけないでしょうか？

  • グラフの書き方

    ｘ(y)＝-{e^(-y/2)}[cos(y√3/2) + (1/√3)sin(y√3/2)]のグラフの書き方がわかりません。 たぶんこのグラフはｙ→-∞で発散してｙ→∞で振幅がだんだん小さくなりながら０に収束すると思うんですが、具体的にはどうやって書いたらいいのでしょうか。

  • 媒介変数で表わされた関数のグラフ

    曲線{x=cosΘ(-π<=Θ＜=π)の概形を書け（凹凸は調べなくてよい。） 　　　y=sin2Θ 基本はΘの消去。y^2=sin^2Θ=4sin^2Θcos^2Θ=4(1-cos^2Θ)cos^2Θから y^2=4x^2(1-x^2)となり、概形を書くことができる。 教えてほしいところ 両辺正でないと２乗したら同値性崩れますよね？？？ 今回、２乗したのにもかかわらず、同値性が崩れないといえる理由を説明してほしいです。

  • グラフの描き方

    Q、キーボードからｎの値を読み込み、r=sin(nθ)で表される曲線のグラフをかけ。 ヒント、ｘ＝rcosθ、ｙ＝ｒsinθと与えられた式で（ｘ、ｙ）とすればいい。また、θは度の単位で０°から３６０°まで計算すればよい。 この問題で、、、 SET WINDOW -1.1,1.1,-1.1,1.1 INPUT n FOR i=0 to 360 STEP 10 x=cos(n*θ*PI/180) y=sin(n*θPI/180) PLOT LINES:x,y; NEXT i END これのどこがおかしいでしょうか？ おねがいします。

  • 任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？

    任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？ よろしくお願い致します。 jQueryを使用して、複数の画像をランダムに配置する（読み込むごとに）というページを作成しております。 この場合、予め配置した画像の表示順番をランダムに変えるだけなので、任意のフォルダに数十枚の画像を入れておき、そこからランダムに数枚の画像を呼び出し、かつランダムに表示順番を変えることはできないものでしょうか。 例：images というフォルダに50枚の画像を入れておき、その中から10枚の画像をランダムに呼び出し、かつランダムに配置する。 いろいろ調べてみたのですが、知識が足りず理解出来なかったため質問させて頂きました。 お詳しい方がいらっしゃいましたら、どうかご教授頂けると幸いです。 ■現在のコードです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function shuffle(list) { var i = list.length; while (i) { var j = Math.floor(Math.random()*i); var t = list[--i]; list[i] = list[j]; list[j] = t; } return list; } $(function() { $('#sbox').append(shuffle($('.hogehoge', '#box'))); }); </script> </head> <body> <div id="box"> <div class="hogehoge"><img src="1.jpg"></div> <div class="hogehoge"><img src="2.jpg"></div> <div class="hogehoge"><img src="3.jpg"></div> <div class="hogehoge"><img src="4.jpg"></div> <div class="hogehoge"><img src="5.jpg"></div> </div> </body> </html>

  • 数IIIの微分

    答えがなかなか合いません。 問 ２つの曲線y=2sinx、y=a-cos2xが接するように、定数aの値を定めよ。 ただし、0<=x＜2π（xは０以上2πより小さい）とする。 自分の解答 接すると言うことは接線が同じなので y'=2cosx・・・(1) y'=2sin2x・・・(2) また接点のx座標をtとおくと 2sint=a-cos2t・・・(3) さらに、(1)と(2)より 2cost=2sin2t・・・(4) つまり cost=2sintcost 2sint=1/2 よってt=π/6、5π/6 これを(3)に代入し 1=a-1/2 よってa=3/2 となったのですが、こたえはa=-3、1、3/2となっていました。 力をお貸し下さい。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する