Javascript
ベクトルの外積は便利だ。ベクトルAとベクトルBの外積を求めたときに値がマイナスであれば、ベクトルBはベクトルAの右側にいるということが分かる。 試してみよう。 ベクトルA(6,6)、ベクトルB(6,0)としよう。 外積は下記の式になる。 Ax * By - Bx * Ay よ…
０度〜360度のcosθの値をグラフに出してみよう。HTML canvasを使おう。 See the Pen cosθ by edo1z (@edo1z) on CodePen. 一番上が１を表している。真ん中が0で、一番下が-1である。一番左が0を表していて縦の目盛線は、45ずつに引いている つまり、0度はcos…
ベクトルの内積を研究する。 まずV,Uをそれぞれ、(3,5)、(6,3)としよう。 ベクトルの内積は下記のようになるものをいうらしい。 V●U = Vx * Ux + Vy * Uy よって、内積は、 3 * 6 + 5 * 3 = 33 となる。 内積ではもう一つ成立する式があるらしい。 V●U = |V|…
Math.sin(rad)でサインを求められる。引数のradはラジアン。ラジアンがよく分からない。 コンピュータゲームの物理という私のバイブルによると、ラジアンは角度を表す方法の１つのようだ。我々は360度で一周する方法をいつも使っているが、この360という中途…
document.write(Math.PI); document.write(Math.PI);
Math.atan2(y, x) http://www.ajaxtower.jp/js/math_class/index15.html ここの説明が分かり易そうだ。 atan2関数は座標の逆正接(アークタンジェント)を計算して返します。引数に指定した原点と座標(x, y)、そして座標からX座標へ降ろした点の3点からなる三…
See the Pen walk by edo1z (@edo1z) on CodePen.
マウスドラッグの向きにプレイヤー（青いボール）が動きます。動いている途中のパスが敵か自分に当たったらプレイヤーが死にます。ボールを動かして陣地を80％以上確保したらステージクリアです。敵を閉じ込めたら敵を倒せてボーナス点数がもらえます。（キ…
Pythonだと余裕で出来た気がするんだけど、javascritpだと配列の比較は、要素ごとにやらないといけないんすかね。 何かいい方法あったら教えてください。 <script type="text/javascript"> var a = [0,1]; var b = [0,1]; //これだと違うよになる。 if(a == b) alert('同じだよ'); else aler…
こんな感じでマウスクリック時の座標を検知する。 var mouseX; var mouseY; //イベントリスナーの登録 canvas.addEventListener("mousedown", mouseDownHandler, false); function mouseDownHandler(e) { var rect = e.target.getBoundingClientRect(); mous…
上からボールを落として跳ね返る様。重力があり跳ね返り係数があるのだ。オランダの科学者が重力はないといっており、他の著名科学者、物理学者が一定の賛同をしているようだ。これが本当なら重力がある前提で全ての物理の教科書がつくられている現代におい…
地球には重力がありますので、飛んでもしまいには落ちます。飛ぶときは初速度がありますが、この速度は毎秒9.8m/s2重力によって減速します。当然落下中は毎秒9.8m/s2速度が増します。この9.8m/s2を重力加速度といいます。9.8m/s2というのは大体の数値で、場…
くまのアニメーション。ランダムでキャラ選ぶ。ランダムで向きと速度決める。 See the Pen Kuma by edo1z (@edo1z) on CodePen.
x,y座標ともに指定できるモンスター関数です。 See the Pen jvxdRm by edo1z (@edo1z) on CodePen.
xだけをインプットして、yは勝ってに決まってしまういけていないモンスター描画関数です。 See the Pen monster function 1 by edo1z (@edo1z) on CodePen. ちなみにgoogleのPac-Manです。
Canvasリファレンスや、MDC Docsというやつのチュートリアルを参考に色々な絵をCanvasを使って書いてみよう。下の絵は全部他のサイトからパクってきたものだよ。ちゃんとパクリ先は明示しておきますよ。パクってきたのは、上2つのサイトですよ。HTML5 Canvas…
フェルマーは色々なことを発見したらしいが、これもフェルマーが発見したそうだ。下記グラフに描かれているのは、61本の直線ですが、全てy=x2のグラフ上のある点の接線であります。結果的に、y=x2のグラフが浮かび上がってくるのだ。こういうのを包絡線とも…
Visualizationを覚えよう。やはりjavascriptを使うようだが、若干複雑になっている。 google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.Da…
せっかくだからなんかグラフにしようと思う。フェルマーが発見したのは、y=xの2乗のグラフ上のある点(a,a2乗)の接線のy切片は、-a2乗になるということだ。これはどの点をとってもそうなるらしい。google chart apiの問題は数値を0〜100しか扱えないことだ。…
Google chart apiのURLを作るpythonスクリプトを今日中につくるぞ。やりたいのは、超低レベルなんだけど、本当に２次関数というのは放物線を描くのかを自分でデータをつくってグラフ化して試したいのだ。一次関数が一直線なのは当たり前に分かるからな。 Goo…
<div class="pic1"><img id="hf36" src="http://hoge.hoge/hoge.jpg" /></div> 上記のようなHTMLがあったときに、pic1クラスの子供のimg要素のid属性を取得するには、こうやってやる。 var key = $('.pic1 > img').attr('id'); 上記でid属性の値が取得できる。変数keyを宣言しつつ、keyにid属性の値を格納している様。
HeartRails ExpressのAPIを使って、JQueryで駅データ取得するスクリプト。しかし、GAEで駅データベースをしっかり作ろうとした場合、APIに逐一アクセスするのはかなり遅くなりそうでいやだし、駅名とか県名とか路線名そのものでアクセスや検索をするのは、か…
HeartRails Expressで駅データをAjaxで取得・表示したい。まずは、県データを取得・表示するコード。 <h3>駅データの取得</h3> <script type="text/javascript"> $(function(){ $(window).load(function () {get_ken();}); }); function get_ken() { $.ajax({ dataType: "jsonp", data: {"method":'ge…
