not good but great

プログラミング、アート、映画・本の感想について書きます。

Javascript

同じオブジェクト内のプロパティを変数として使う

同じオブジェクト内のプロパティを変数として使いたかった。 var obj = { x : 100, y : x + 100//Uncaught ReferenceError: x is not defined } console.log(obj.y); これではエラーが出てしまった。代替案を考えよう。参考にしたのはこれ。 javascript - Re…

海外のJavascript使いの情報を得るときに見ているもの

JSConf こちらはyoutubeのチャンネル。JSのカンファレンスのプレゼン映像がまとまっている。 JSConf - YouTube Chrome Extensionの投稿者リスト これはTwitterのリスト。Chrome Extensionのクリエイターがリスト化されている。このタイムラインにはJSでクリ…

チルダ2回でMath.floor()の代用をする

チルダの意味とは チルダ「~」はビット反転演算子で、整数をビット反転させると反転させて1引いた数になる。これを説明する前に2進数における、補数や符号付き整数について説明する。以下はこれを参考にしている。 2の補数を理解する (1) - とあるソフトウェ…

連想配列でswitch文を実現する

switchを使う方法 var color = "red"; switch(color){ case "red": console.log("RED"); break; case "blue": console.log("BLUE"); break; case "yellow": console.log("YELLOW"); break; defalut: console.log("different color"); break; } この場合、「R…

jqueryでclick()のコールバック関数に引数(データ)を渡す方法

demo 無名関数を英語にしたら「no name function」だと思っていたが、何だか気持ち悪かったので調べてみると「nameless function」だった。匿名関数(anonymous function)って呼び方もある。 404 Blog Not Found:jargon - 無名関数(nameless function)?匿名関…

javascriptでfor-inを使うのはいつが良いのか

for-inを使うのはいつが良いのか for文でも書ける場合、lengthを書いてると長ったらしくてオシャレにfor-in使いてえなあとふと思った。それで使い方を確認するために下の記事を読む。javascriptのfor-in文は、for-each文の代わりじゃない - うろ覚えメモfor-…

clickとmousedownの違い

clickとmousedownの違い イベント名 内容 mousedown マウスダウンでイベント発生 mouseup マウスアップでイベント発生 click マウスダウンとマウスアップがあるとイベント発生 各イベントの違いがわからなかったので調べた。例えばゲームなどで、マウスダウ…

Canvasでマウスポインタ周りのパーティクルの速度を落とす

demo Creative JSの動画を見たのがきっかけ CreativeJS for Designers from Seb Lee-Delisle on Vimeo.パーティクルをとりあえず動かしてみることを解説している。基本的なところはこれを写経して、後はオリジナルで何かできないかやっていた。 マウスポイン…

Raycasterの当たり判定で壁をつくる

ray detecting click event in THREE.js | ヨモツネット・マウスポインタを消す Pointer Lock and First Person Shooter Controls - HTML5 Rocks

CameraのControlを使うときはバージョンに注意

r51→r52 Moved *Controls to examples/js/controls. Migration · mrdoob/three.js Wiki · GitHubPathControlのようなカメラの動きを使うメソッドはthree.jsとは別にライブラリを読み込む必要がある。

Cubeの各面に異なるマテリアルを使うときはTHREE.jsのバージョンに注意!

Cubeの各面に異なるマテリアルを使う 見事にハマったのでメモしておく。 //Cube var materials = []; for(var i = 0;i < 6;i++){ materials.push(new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ); } var CUBE_WIDTH = 200; var CUBE_…

THREE.jsで多面体をSpotlightで照らす

demo ★inspire three.js webgl - geometry - vertex colors 正二十面体のジオメトリーを作成 var ICOSAHEDRON_RADIUS = 1;//正20面体の半径 var ICOSAHEDRON_DETAIL = 2;//分割回数 var color,f,f2,f3,p,n,vertexIndex, //正20面体のジオメトリー geometry =…

三角関数で波打つパーティクルを作成する

demo 三角関数による位置・大きさの調整 ・参考 https://threejsdoc.appspot.com/doc/three.js/examples/canvas_particles_waves.html https://threejsdoc.appspot.com/doc/three.js/examples/canvas_particles_floor.html particles = new Array(); まずパ…

パーティクルをCloneして、球の中に球を描画する

demo ParticleはCloneできる Cloneはベクトルを複製することを指す。 .clone() Vector3 Clones this vector. THREE.jsのソースはこちら。 https://github.com/mrdoob/three.js/blob/master/src/objects/Particle.js THREE.Particle.prototype.clone = functi…

CanvasRendererを用いたパーティクル描画で数Bの空間ベクトルの知識が役立った話

demo CanvasRendererとは何か? THREE.jsが持つ描画モードの一つ。WebGLを使わずにCanvasのコンテキスト2Dのものを使用して描画している。WebGLを使う描画モードはWebGLRendererである。ドキュメントの説明はこちら。 The Canvas renderer displays your beau…

Lineメソッドを用いて、格子状の背景を設定

demo 平行投影カメラ 平行投影カメラで撮影すると、遠近感がなくなり、近くのものも遠くのものも同じ大きさに見える。反対に遠近法を考慮する透視投影カメラ(PerspectiveCamera)もある。これを使ってカメラワークを回転させると、酔う感じが強い気がする。そ…

Meshの位置を変えて複数の立方体を作成する

demo Meshの位置を変えて複数の立方体を作成する //ジオメトリーを生成 var geometry = new THREE.CubeGeometry(60,60,60); //マテリアル(ランバート反射)を生成 var material = new THREE.MeshPhongMaterial({color:0x660000}); //キューブの個数 var cubeN…

THREE.jsをとりあえず触ってみたいと思ってから、直方体を回転させてみるまでの手順

THREE.jsを使い始めた(再開し始めた?)理由 ズバリかっこいいから!TwitterでTHREE.js作成者のMr.doob氏やその周りのクリエイターがつくったものを見て、自分も作りたいと思った。それらがすべてWebGLを使ったものではないかもしれないけど、見て楽しめるもの…

テキストエリアのサイズを可変する時のバグ

6月にエントリーシートの下書き作成用エディタをつくった。 ES Draft http://naoyashiga.github.io/ES_Draft/ 行数カウンターを設置しているが、それの数え方がうまくいかない。行数をカウントして、テキストエリアのサイズを可変にするようにしていた。しか…

Googleカレンダー追加ボタンの作り方

「リクナビからGoogle Calendar™に登録」を作ったときにGoogleカレンダーのボタンを設置した。それの作り方を書く。 Github https://github.com/naoyashiga/Google_Calendar_From_Rikunavi URLパラメーターの定義 パラメーター 内容 action TEMPLATEで固定 t…

「リクナビからGoogle Calendar™に登録」をバージョンアップさせた

6月に「リクナビからGoogle Calendar™に登録」というChrome拡張をつくった。 https://chrome.google.com/webstore/detail/bmphpfgkflpmkbeaolhhablmbnbbhcgn/publish-delayed 友だちに使ってもらったところ、起動していないときがあった。それの原因が、URL…