JavaScriptのY軸回転について学習中にわからないこと
- cnt=0;の意味がわかりません。cntの初期値を変えても何も変化しない。
- "imgならば・・"の意味がわかりません。画像と関連しているのかどうか知りたい。
- <BODY onload="setInterval('rotZIMG()',100)">の意味がわかりません。回転の動作をボタンで制御する方法を教えてほしい。
- ベストアンサー
Ｙ軸回転
JavaScriptのＹ軸回転について、 http://oshiete1.goo.ne.jp/qa3189044.htmlを参考に、色々手を加えながら勉強していますが、 ここの質問と回答でもわからない事があったので質問します。 質問（1） cnt=0;の意味がわかりません 説明では、「cnt++は0.1秒ごとに１°ずつ追加していくということ」とありますが、 このcnt=0;を変更（1や100に）してもなにも変化ありませんでした。 質問（2） 質問の回答者が説明している、 (2)(3)にある、 img0ならば・・・・・・ img1ならば・・・・・・ ここでいう”imgならば・・”何の意味ですか？ imgなので、画像の事かな？とは思ってますが・・ 質問（3） <BODY onload="setInterval('rotZIMG()',100)"> この意味がわかりません。 で、この回転の動作を止めて、（「右」、「左」）のボタンを押す事で、回転させるように したいんですが・・・ 何かアドバイスがあったら宜しくお願いします。
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 新たな疑問が出たようですね？ （１） 画像の初期配置(cnt=0のとき)は [img0] [img5] [img1] [img4] [img2] [img3] になります これをcntを増やしていくことによって画像を右に回転させてます (例)cnt=100のとき [img4] [img3] [img5] [img2] [img0] [img1] という感じになります （２） 一応iListの方になるのですが結論的に言えば画像のことです img0 → 0.gif img1 → 1.gif ん～～うまく言葉で説明し直せてるか分からないですけど・・・【】内が説明 for (i=0; i<iList.length; i++) 【iListの配列の数だけループを繰り返します】 { n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; //(1)？ 【基準となる『n』の値を決めます】 y = cy - Math.cos(n) * ry;//(2)？ 【配列それぞれの高さの数値を決めます】 z = 100 - Math.cos(n) * 50; // (3)？ 【配列それぞれの奥行きを決めます】 document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx;//(4)？ 【それぞれの配列を画面左からどれ位の位置で表示するか】 document.images[iList[i]].style.pixelTop = y;//(5)？ 【それぞれの配列を画面上からどれ位の位置で表示するか】 document.images[iList[i]].style.zIndex = z;//(6)？ 【それぞれの配列の奥行き(重なり）の順番をどのように重ねていくか】 document.images[iList[i]].style.width = z / 1.5;//(7)？ 【それぞれの配列(画像)の幅はどれ位にするか】 document.images[iList[i]].style.height = z / 2;//(8)？ 【それぞれの配列(画像)の高さはどれ位にするか】 } } ようはまずiList[0](=img0)の配置を決め、画像の大きさを決めて もう一度上に戻ってiList[1](=img1)の配置、画像の大きさを決め、 また上に戻ってiList[2](=img2)の配置、画像の大きさを決めて・・ をiList[6](=img5)まで繰り返しているのです ・・・逆に分かりにくくなっちゃったかな～～(汗) （３） 画面の表示が終わったら0.1秒ごとにfunction rotZIMG()を作動させる ＞この回転の動作を止めて、（「右」、「左」）のボタンを押す事で、回転させるように こんな感じになります <SCRIPT language=JavaScript><!-- iList = ["img0","img1","img2","img3","img4","img5"]; cx = 150; // 回転の中心Ｘ座標 cy = 100; // 回転の中心Ｙ座標 cnt = 0; rx = 140; // 回転半径（横） ry = 70; // 回転半径（縦） function rotZIMG(obj) { for (i=0; i<iList.length; i++) { if(obj == "right") { n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; } if(obj == "left") { n = (i * (360 / iList.length) + cnt--) * Math.PI / 180; } y = cy - Math.cos(n) * ry; z = 100 - Math.cos(n) * 50; document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx; document.images[iList[i]].style.pixelTop = y; document.images[iList[i]].style.zIndex = z; document.images[iList[i]].style.width = z / 1.5; document.images[iList[i]].style.height = z / 2; } } // --></SCRIPT> </HEAD> <BODY onload="tID=setInterval('rotZIMG(\'right\')',100)"> <IMG style="POSITION: absolute" src="sample0.gif" name=img0> <IMG style="POSITION: absolute" src="sample1.gif" name=img1> <IMG style="POSITION: absolute" src="sample2.gif" name=img2> <IMG style="POSITION: absolute" src="sample3.gif" name=img3> <IMG style="POSITION: absolute" src="sample4.gif" name=img4> <IMG style="POSITION: absolute" src="sample5.gif" name=img5> <input type="button" value="逆転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'left\')',100)"> <input type="button" value="停止" onClick="clearInterval(tID)"> <input type="button" value="正転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'right\')',100)">
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 昨日送る前にFirefoxでの不具合があったのですが、修正中に寝てしまってそのまま忘れて回答を送ってしまいました（－－；） 締め切られてたらどうしようかと思ってましたが間に合ったようで良かったです（＾＾） Firefoxでは・・・ <img src="" style="position:absolute;top:100px;left:100px;width:50px;heihgt:50px;"> のように『**px』という風にしていないときちんと表示してくれないようです（style属性が無視されてしまったため左上に画像が重なって表示されただけになっていました） 修正ソースはこちらになります <script language=JavaScript><!-- iList = ["img0","img1","img2","img3","img4","img5"]; cx = 150; // 回転の中心Ｘ座標 cy = 100; // 回転の中心Ｙ座標 cnt = 0; rx = 140; // 回転半径（横） ry = 70; // 回転半径（縦） function rotZIMG(obj) { for (i=0; i<iList.length; i++) { if(obj == "right") { n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; } if(obj == "left") { n = (i * (360 / iList.length) + cnt--) * Math.PI / 180; } y = cy - Math.cos(n) * ry; z = 100 - Math.cos(n) * 50; lpos = cx + Math.sin(n) * rx; iwidth = z / 1.5; iheight=z / 2; document.getElementById(""+iList[i]+"").style.left = lpos +"px"; document.getElementById(""+iList[i]+"").style.top = y +"px"; document.getElementById(""+iList[i]+"").style.zIndex = z; document.getElementById(""+iList[i]+"").style.width = iwidth+"px"; document.getElementById(""+iList[i]+"").style.height = iheight+"px"; } } // --></script> </head> <body onload="tID=setInterval('rotZIMG(\'right\')',100)" hight=100%> <div style="height:250px;position:relative;"> ↑これは↓でposition:absolute;しているので作画スペースを設けるものです <img style="position: absolute" src="sample0.gif" id="img0" > <img style="position: absolute" src="sample1.gif" id="img1"> <img style="position: absolute" src="sample2.gif" id="img2"> <img style="position: absolute" src="sample3.gif" id="img3"> <img style="position: absolute" src="sample4.gif" id="img4"> <img style="position: absolute" src="sample5.gif" id="img5"> </div> <input type="button" value="逆転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'left\')',100)"> <input type="button" value="停止" onClick="clearInterval(tID)"> <input type="button" value="正転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'right\')',100)">
お礼
詳しい説明ありがとうございました。
関連するQ&A
- このサンプル(画像をＹ軸回転させる)コードの説明をお願いします。
javascriptに興味がありネットでサンプルを見ながら使い方を 勉強しているものです。 ネットで以下のサンプルをみつけコードを解釈しようとしたのですが よくわかりません。はじめから多少コメントがついてるのですが 数字の(1)～(8)の部分がわかりませんでした。 これはjavascriptというより数学的な意味を把握できないため 分からないと思うんですが解説をして頂けたらと思い質問させて頂きます。 <HEAD><TITLE>画像をＹ軸回転させる</TITLE> <SCRIPT language=JavaScript><!-- iList = ["img0","img1","img2","img3","img4","img5"]; cx = 150; // 回転の中心Ｘ座標 cy = 100; // 回転の中心Ｙ座標 cnt = 0; rx = 140; // 回転半径（横） ry = 70; // 回転半径（縦） function rotZIMG() { for (i=0; i<iList.length; i++) { n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; //(1)？ y = cy - Math.cos(n) * ry;//(2)？ z = 100 - Math.cos(n) * 50; // (3)？ document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx;//(4)？ document.images[iList[i]].style.pixelTop = y;//(5)？ document.images[iList[i]].style.zIndex = z;//(6)？ document.images[iList[i]].style.width = z / 1.5;//(7)？ document.images[iList[i]].style.height = z / 2;//(8)？ } } // --></SCRIPT> </HEAD> <BODY onload="setInterval('rotZIMG()',100)"> <IMG style="POSITION: absolute" src="0.gif" name=img0> <IMG style="POSITION: absolute" src="1.gif" name=img1> <IMG style="POSITION: absolute" src="2.gif" name=img2> <IMG style="POSITION: absolute" src="3.gif" name=img3> <IMG style="POSITION: absolute" src="4.gif" name=img4> <IMG style="POSITION: absolute" src="5.gif" name=img5> あと、こういった図形を描画するプログラムは大変面白いと思うのですが 文系人間のためsin cos などがでてくると分かりません。 もう一度基礎ぐらいは勉強してみたい気持ちがあるので どういった分野（例えば高校数学の三角関数とか）の勉強をすればいいのかなども教えていただければうれしいです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- 一つのページで二つ動かすのはできないですか
画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか？ 無理だったら、他に何かいい方法があれば教えてください。 これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- num = 18; nme = "img" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- JavaScriptのことで教えて！
１シートにJavaScriptを２つ使うことは出来ないのでしょうか？ 画像が点滅するJavaScript と画像が入れ替わるJavaScript 両方を１シートで使用できませんか？ この部分は入力できるのですが <SCRIPT language="JavaScript"> <!-- num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "../img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> 勿論、点滅のJavaScriptも記載済みです。 ところが、 <BODY onload="blink()"> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> このように並列して書くとエラーになります。 ２つのavaScriptは使用できないのでしょうか？ 精通されている方、居られましたら宜しくご指導願います。
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像を入れ替えたい
こんにちは。初心者であまりよく分からないので教えていただきたいのですが・・・下記のプログラムで画像を入れ替えるというのをやりたいのですが、ずっと入れ替え続けるのではなくて、１枚目から２枚目に入れ替えるだけで終わらせたいのです。for文を使えばいいとのかなと思うのですが、どこにforを入れたら良いのか分かりません。あるいはもっと簡単なやり方があるのでしょうか・・・。急いでやらないといけないので教えていただけたらと思います。どうぞよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 画像をフィルターを使って入れ替えたいです
再度恐れ入ります。画像を入れ替えるときに、フィルターを使いたいのです。トップページの画像１枚をもう一枚と入れ替えて、最初の一枚に戻って終わりたいのですが・・・。今のままだと２枚の画像の入れ替えが延々と繰り返すことになるので、それを１回で止めたいのです。本当に初心者な質問で申し訳ございませんが、教えていただけると助かります。どうぞよろしくお願いいたします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; img.filters.revealTrans.Apply(); img.src = nme + cnt + "." + exp; img.filters.revealTrans.Play(); } //--> </SCRIPT> </HEAD> <!-- 画像を入れ替える間隔(ミリ秒単位) --> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',5000)"> <IMG src="img/img0.jpg" name="img" border="0" style="filter:revealTrans(duration=2,transition=8)"><BR> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 回転した座標軸と一致させるための回転軸と角度の算出
こんにちは。お知恵をお借りしたく質問致します。 プログラミング中で出た話題なのですが、計算の問題ですので数学カテゴリが適しているだろうと思い、投稿いたします。 ちょっと説明しにくく図を添付致しましたので併せてご覧いただければと思います。(線がふるえていて申し訳ないです。) 図のように、xyz座標を回転してXYZ座標の向きに一致させたいと考えています。 また、「指定した軸(α,β,γ)を回転軸としてθ度回転する」という関数があるので、それを活用しようと考えています。α,β,γはコサイン値(方向余弦)です。回転方向は、ベクトルの向きに時計回り…右ネジの法則みたいな感じです。 x軸から見たXの角度(θxX), y軸からのX(θyX), z軸からのX(θzX) 同様にx軸から見たY(θxY),θyY,θzY、θxZ,θyZ,θzZ といったように、それらの角度(コサイン値)は分かっています。 (=xyz座標からみたXベクトルの方向余弦、Yベクトルの方向余弦、Zベクトルの方向余弦が分かっている。) z軸とZ軸の外積を取ったベクトルを回転軸として、θzZが分かっているのでその角度で回転することでZ軸は一致しますけど、XY軸は合いません。(当然ですが…) そのXY軸を合わせるためにまた回転するというのも遠回りで、任意の軸1本を中心に何度か回転するだけ(上記関数を1度使用するだけ)で、必ず向きが一致する解があると思うのですが、その任意軸と角度を算出する方法が分かりません。 一般にどういう計算をするのでしょうか。アドバイスいただければ幸いです。 なお、上記関数を用いない方法でも構いません。 「X軸（Y軸、Z軸）を回転軸としてφ度回転する」という関数もあるので、オイラー角を求める方法でも構いません。 その他、説明不足な点がありましたら随時追記致しますので、ご指摘願います。 どうかよろしくお願いいたします。
- ベストアンサー
- 数学・算数
- リアルタイムに時計を表示するときのsetIntervalについて
いつもお世話になっています。 いつも以上に稚拙な質問で申し訳ないのですが、ご助力願います。 <html> <head> <script type="text/javascript"> <!-- var today = new Date(); window.onload = function dispTime(){ document.getElementById("showTime").innerHTML = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); setInterval('dispTime()',1000); } //--> </script> </head> <body> <div id="showTime"></div> </body> </html> できるだけ<body onload="">を使いたくないので、window.onloadにしてあります。 イメージとしては、document.getElementById("showTime").innerHTMLでshowTimeに時間が表示され、setIntervalで再度disptimeが呼ばれ、という無限ループになればよいと考えてこのソースになりました。 ただ現状は、ロード時に時刻が表示され、そのまま動きません。 たぶんsetIntervalの場所とか使い方がおかしいような気がするのですが、どうもよくわかりません。 参考にしたサイトによってsetInterval("dispTime()"...だったり setInterval("disptime"...だったりと記述がバラバラで、 ほとんどのところでは、body onload="setInterval("...とonload扱いでした。 body onloadは使わずに、1秒ごとに動く時刻表示をするには、どこを直せばよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 片もち構造の軸回転について
機械設計の初心者です。 軸の回転偏芯に悩んでいます。 機械設計に詳しい方、ご教授下さいませ。 ●状況 片もち構造の軸があったとします。 軸仕様は、 軸芯は真直にかぎりなく近く、振れや真円度は精度◎、 Φ５０のＳＵＳ、長さ６００mm程度。 片もちの構造仕様は、 軸を受けて井いる方向（強度がある側）は、 側板内にベアリングがあり、軸を受けておりかつ回転可能。 この側板側に、motorがあり軸を回転可。 この軸は片もち構造ゆえに、片もち側に近づくにつれて 軸の撓みが大きくなります。 ●ご質問です。 この構造の軸にダイヤルゲージを当てて回転させると、 軸の軸線方向のダイヤルゲージを当てたpointで、 振れ量が異なります。 振れが大きいのは片もち側で、 振れが小さいのは軸の剛性がある側（側板側）です。 この理由を理屈で説明すると、 軸芯が傾くことにより回転偏心が起きるから。 すなわち、 剛性がある方向の軸は（側板側の軸）、まだ軸芯が真っ直ぐで振れは小、 片もち側は、回転軸芯である剛性側よりも軸芯が下方に倒れてしまうため、 振れが大きくなってしまう、 という理屈でよいのでしょうか？ ご回答をお待ちしております。
- 締切済み
- 機械設計
- 角丸うまくいきません
Javascript初心者です。 自分のサイトでRico.jsというライブラリを使って角丸ボックスを作ろうとしましたが、できませんでした。 で、検証していくと、どうやらbodyタグのonloadに原因があるようでした。 <body onload="MM_preloadImages('img/8hoverfloormop.gif','img～～> 実際にonload以下を外したら角丸が作れたのですが、どういうことでしょうか？ この記述はどこにすればよいのでしょうか？ ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
- 段付き回転軸のねじりモーメント
段付き中実回転軸があり太い方の直径を2R,細い方を2rとします。(R>r) 許容せん断応力τ[Pa]および応力集中係数K,角速度ω[rad/s]が与えられているときに,軸の許容するねじりモーメントM[Nm]と、伝わる動力W[W]を求めよという問題があるのですが、 ある教科書を読んでいたら同じような問題で使ってる値が違うので混乱してしまいましたので質問させていただきました。 τ>=K*(M/Ip)*半径 (Ip:断面2次極モーメント) を満たすようにMを決めて,Wはただ単純にMωとすればいいと思うのですが、僕が混乱してしまったのは Ipおよび半径でどちらの値を使えばいいかということです。 問題のうち片方はRを用いていて、もう一方はrを用いているため、教科書がどっちか間違っているような気がしてならないのですが・・・・ http://oshiete1.goo.ne.jp/qa3791792.html こちらの質問を参考にするとrを用いるほうが正しいような気もするのですが、よくわかりません。 どちらを使うのか理由と共にお答えいただけるとありがたいです よろしくお願いいたします。
- ベストアンサー
- 物理学
お礼
詳しい説明ありがとうございました。
補足
初心者の私でもなんとなく理解できました。 ボタンのソースありがとうございました。 cx =150; // cy = 100;で、位置を決めるようですが、これを、例えば、<center> のよな感じで、中央ぞれえに したいときは、どのようにすればよいですか？ 色々試しましたが、（中央には揃いますが）、回転しなくなったりと・・・ その試した内容は、 外部ファイルの方に<center>でくくったり、ＨＴＭＬの方をくくったり、一応、cx,cyで、中央ぞろえにしましたが、これだと、見るスペックによって、位置が変わってしまうので・・