2019-01-01から1年間の記事一覧

四元数（クオータニオン）を使って３D上で回転

クオータニオンを使ってマウスで回転 // target.addEventListener (n, this, false)); } //_________________________________________________________________ //各イベント処理 handleEvent (event) { let { type, pageX, pageY, target: e } = event; sw…

クオータニオンのメモ

クオータニオンのメモ class Quaternion { constructor (w = 0, x = 0, y = 0, z = 0) { this.w = w; this.x = x; this.y = y; this.z = z; } add ({w, x, y, z}) { this.w += w; this.x += x; this.y += y; this.z += z; return this; } mult ({w, x, y, z}…

文字の色を虹色に変化させるスクリプト

文字の色を虹色に変化させるスクリプトを書いてみた。またくだらないものを書いてしまった。 function getColor (n) { const M = 255; let c = n % 360 / 60 | 0; let x = n % 60 / 60 * M |0; let y = M - x; let [r,g,b]=[[M,0,y],[M,x,0],[y,M,0],[0,M,x]…

JavaScript 行列演算

JavaScript 行列演算 let a =[[1,2], [3,4]]; let b =[[5,6], [7,8]]; let r =[[19,22] [43,50]]; //行列の加算 function add (a, i) { let b = this[i]; return a.map ((a, j) => a + b[j]); } //行列の減算 function sub (a, i) { let b = this[i]; return…

JavaScript: サーバーの時間を取得する

JavaScript: サーバーの時間を取得する 問題があるとすれば、 同期で行っていること リクエスト返ってくるまでの時間差を加味したこと //サーバーの時間を取得する function getUTCDateByServer () { let xhr = new XMLHttpRequest(), tm0, tm1, tm2; xhr.op…

JavaScript: innerHTML したときに中に含まれる script が実行されない件

JavaScript: innerHTML したときに中に含まれる script が実行されない件 function setInnerHTML (node, text) { node.innerHTML = text; let script = node.querySelectorAll ('script'); if (script.length) { let doc = node.ownerDocument, org = doc.cr…

ベジェ曲線を理解する

ベジェ曲線を理解する その前に線分を式にする。端点(p0, p1)とする。 この式は実際の線分の長さはどうであれ t が０から１の範囲で線分上の任意の点を表せるようにするという意味である。 これをJavaScript で関数にすると以下のようになる。t の変化は 0.0…

JavaScript: Promise を理解する

JavaScript: Promise を理解する 順不同の工程を順序立てて行わせるときにい使うもの let obj = new Promise (func); -- 関数 func には実行したい処理を書くのだが、2つの処理用の関数を引数として受け取らなければならない。１つは、成功したあとに行う関…

SVG で描画してみる

SVG で描画してみる // `${x},${y}`).join (' ')); svg.appendChild (poly); } // ]]> <code> <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" id="hoge"> </svg> </code> <script> const doc = document, svg = document.querySelector ('#hoge'), { PI, sin, cos } = Math, cx = 400, cy = 400, polyline = d…

JavaScript 簡易データベースもどきに(?)検索機能を付加してみた

<title>?</title> <meta charset="utf-8"> <style> li label { color: green; font-weight: bold; padding-right: 1ex;} </style> <body> <div> <label>KeyWord:</label> <input type="search" autofocus> <em>space で区切ることも可能</em> <ul id="list"></ul> </div> <script> { //____________________________…</body></meta>

Javascript イベントを遅らせて発火させる

Javascript イベントを遅らせて発火させる class DelayWork { constructor (callBackFunc, wait = 500) { this.callBackFunc = callBackFunc; // func.bind (this) this.wait = wait; this.timerID = null; } start (...arg) { if (! this.timerID) { let cb…

時間間隔をちょっと考えて

時間間隔をちょっと考えて class DateInterval { constructor (begin, end) { this.begin = begin; this.end = end; } isInRange (date = new Date) { let b = +this.begin, e = +this.end, d = +date; return b <= d ? d <= e: false; } copy () { return n…

まだ移譲が不足なのだろうか？

まだ移譲が不足なのだろうか？ <title>?</title> <meta charset="utf-8"> <style> label { color: green; margin: 1ex 1ex 1ex; font-weight: bold;} </style> <body> <div> <label>KeyWord:</label> <input type="search" id="keyword" autofocus> <em>space で区切ることも可能</em> <ul id="list"></ul> </div> <script> { clas…</body></meta>

teratail に登録する

それにしても色々な質問があるものだ。 すべてには答えきれないね。 そこでふと考えた。 解説などしないで、男ならコードだけで勝負しようと思った。 解説などいっさしない！ それに無視することも私の自由だ。 これからは、そうしよう。 タグ別ランキング1…

使われた言葉に数値をつけてみる

https://oshiete.goo.ne.jp/qa/10921080.html 使われた言葉に点数を加算していくのだが、最大値を超えないようにするには？ そんで、考えた。 あっ！光の速度はこえられない！ 相対論的な速度の加算方式を利用しよっと。 <meta charset="UTF-8"> <html lang="ja"> <title>?</title> <style> </style> <body> <h1>Test</h1> <input type="search" value="リンゴ" onblur="dic(this.value)"><br> …</body></html></meta>