ベストアンサー

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

2013/02/07 02:59

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

ixkaito
お礼率47% (29/61)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2013/02/07 14:30 回答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>

質問者