読者です 読者をやめる 読者になる 読者になる

not good but great

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

event.middlePointとevent.deltaを線や円に応用してみる

用語解説 Paper.jsでマウスのドラッグスピードに合わせて、線の太さが変わるように頑張ってみた - not good but great 上記エントリで用語解説はしたのですが、リファレンスの別ページに詳しく載っていたので、改めて書きます。 middlePointとは? event.midd…

Paper.jsでマウスのドラッグスピードに合わせて、線の太さが変わるように頑張ってみた

お絵かきツールをつくる demo マウスのドラッグで線を引けるようにしています。 Paper.js Editor var path; function onMouseDown(e){ path = new Path({ strokeColor:"black", strokeWidth:10 }); } function onMouseDrag(event) { path.add(event.point); …

パスをSmoothing、Simplifying、Flatteningさせる

まずは用語解説 セグメントとは? Paper.jsにおいて出てくるセグメントとは、イラストレーターにおけるセグメントと同じ意味だと思います。セグメントはポイントとポイントを結ぶ線です。ここでいうポイントはイラストレータで言うアンカーポイントを指します…

Paper.jsでセグメントを消す、色やスタイルの設定をする

セグメントを消す demo code var circle = new Path.Circle(new Point(100,70),50); circle.strokeColor = "black"; circle.selected = true; //左 circle.removeSegment(0); //上 //circle.removeSegment(1); //右 //circle.removeSegment(2); //下 //circl…

Paper.jsで長方形、円、角丸、多角形を描いてみる

Pathを描画する smooth()で正方形を円にする smooth()を使うことで、ポイントとポイントを繋ぐ線が滑らかになります。 http://paperjs.org/tutorials/paths/working-with-path-items/ いろんな図形を描く http://paperjs.org/tutorials/paths/creating-prede…

Paper.jsで使うPaperScriptの特徴と、直接Javascriptで実行するときの違い

Paper.jsとは? canvasを用いて、ベクターグラフィックをjsを簡単に描画できるようにしたライブラリです。サンプルはどれもかっこいいです。 Paper.js - Paper.js PaperScriptを使う PaperScriptとは? Paper.jsではJavascriptを独自拡張したPaperScriptという…

TitaniumでTableViewにrowを追加するときは、insertRowAfterよりもappendRow

背景 下までスクロールしたら、新しくTableViewに要素を追加しようと思いました。 insertRowAfterがうまくいかない 調べると「insertRowAfter」というのが出てきました。 insertRowAfter( index, row, [animation] ) : voidParameters index : Number Index …

yql.query.multiで個別に読み込み件数を指定してフィードを読み込む

前回までの問題 前回の問題は下の通りでした limitの制限がJRAと楽天競馬の二つを合わせたフィードに適用されていないこと 二つのフィードを日時順にソートできていないこと ・前回エントリ YQLで複数フィードを読み込む件数を指定しても反映されない、ソー…

Titaniumで共通な処理をexportsに関数として設定して、requireで読み込む

CommonJS準拠に書き直してみよう 前回エントリでCommonJSについて少し知ることが出来ました。それまで書いていたコードをCommonJSに従って書き変えることにしました。具体的にはexportsで関数を作成して、requireで読み込むことをします。・前回エントリ Tit…

Titaniumで共通な処理をexportsに関数として設定して、requireで読み込む

CommonJS準拠に書き直してみよう 前回エントリでCommonJSについて少し知ることが出来ました。それまで書いていたコードをCommonJSに従って書き変えることにしました。具体的にはexportsで関数を作成して、requireで読み込むことをします。・前回エントリ Tit…

TitaniumでCommonJS仕様に乗っ取って、ファイルをincludeする

前回のエントリの最後で外部ファイルの読み込みをどうすれば良いのだろうかというのを書きました。調べてみて書き方が少しわかったので、記録しておこうと思います。 ・前回エントリ TitaniumのYQLで複数フィード読み込み、Backボタンの文字色を変える - not…

TitaniumのYQLで複数フィード読み込み、Backボタンの文字色を変える

競馬ニュースとまとめサイトを読み込む タブを2つ設けて、競馬ニュースメニューとまとめサイトメニューにしてみました。タブを押せば、ニュースやまとめサイトに切り替えることができます。 フィードを複数読み込む var query = "select * from rss where ur…

TitaniumでJRAのRSSフィードを読み込んで、ショボい競馬ニュースアプリを作ってみる

競馬ニュースアプリみたいなのを作る 競馬をやるときに、シンプルにニュースだけ読みたいアプリがあったらいいなと思っていました。そこでTitaniumでRSSフィードを読み込んで表示するだけのものを作ってみることにしました。ニュース元はJRAが配信しているニ…

Titaniumでタブグループを使って、タブメニューを作る

タブメニューを作成する ドットインストールを参考にしました。 #25 タブグループを作ってみよう (2) | Titanium Mobile入門 - プログラミングならドットインストール タブグループを作成 var tabGroup = Ti.UI.createTabGroup(); ウィンドウを作成 var win1…

Titaniumでファイルの読み書きを行う

ファイルに読み書きを行う ドットインストールを参考にしました。 #20 ファイルの読み書きをしてみよう | Titanium Mobile入門 - プログラミングならドットインストール データを定義 var data = {"tanaka":100,"satou":200,"yamada":340}; データを配列で定…

Titaniumで地図にピンを表示する、フォームを作る

地図にピンを表示する ドットインストールを参考にしました。 #17 地図を表示させてみよう (2) | Titanium Mobile入門 - プログラミングならドットインストール コード var ebisu = Map.createAnnotation({ latitude:35.645, longitude:139.71, title:"ebisu…

Ti.Map.createViewがundefinedのときは、ti.mapモジュールを追加する

地図を表示する var map = Ti.Map.createView({ mapType:Ti.Map.STANDARD_TYPE, region:{latitude:35.456,longitude:139.71,latitudeDelta:0.01,longitudeDelta:0.01}, animate:true, regionFit:true, width:300, height:400 }); ドットインストールを参考に…

Titaniumで真木よう子の画像を表示してみる

折角なので真木よう子で練習しよう Titaniumで画像を表示するというチュートリアルを見ました。サンプル画像を表示させてもおもしろくないので、自分の好きな女優である真木よう子を表示させることにしました。#14 画像を表示させてみよう | Titanium Mobile…

Titaniumでフリップアニメーションでページを切り替える

ドットインストールでウィンドウの切り替えのチュートリアルを見ました。実際自分でコードを書いてみることにしました。 #12 ウィンドウを切り替えてみよう (1) | Titanium Mobile入門 - プログラミングならドットインストール フリップ効果でページ切り替え…

Titaniumでボタンを押してアラートを表示させてみる

ボタンを設置する var button = Ti.UI.createButton({ title:"push me", top:100, height:30, width:200 }); ボタンの文字は「text」ではなく「title」であることに注意します。位置や大きさを決めるところはラベルと同じです 押したときの処理 button.addEv…

Titanium MobileでHello Worldする

ドットインストールを見ながら使い方を学んでいます。先日環境設定ができたので「Hello Wolrd」をさせてみようと思います。 ソース window,view,labelに分けて考えるみたいです。 //win var win = Ti.UI.createWindow({ backgroundColor:"#EBE2D9" }); //vie…

Titanium Mobileで"java.net.SocketTimeoutException: Read timed out"が出たらProxyの設定を確認

Titanium Mobileを使い始めてみた スマホアプリの開発をやってみたいと思い、「Titanium Mobile」の使い方を勉強し始めました。 なぜTitanium Mobile? 「Titanium Mobile」を選んだ理由は、作ってみたいアプリがゲームのような難しいものでもなく、大規模な…

CreateJSで外心と外接円を描画してみた

ボロノイ図を作ろうと思ったが難しい イケテルボロノイ図のデモを見ていたら、自分でも作りたくなりました。 Voronoi Graffitiボロノイ図はものすごくざっくり言うと、各点の垂直二等分線をいい感じに繋いだものです。 HTML5のCanvasでボロノイ図をかいてみ…

CreateJSでただ円を移動させて、自作スクリーンセーバー

demo Pixel Fire - CodePen こういうのをつくろうと思っていましたが、揺れの動きを作るのが難しいです。sin,cosで座標の位置を変えると少しはそう見えるんですけど、同じ動きをしている円がすぐ目につくようになってしまいます。そのへんはあきらめて、ぼー…

CreateJSでパーティクルをアニメーションさせてオリンピックのロゴをつくってみた

demo ソチ冬季オリンピックなんで何か作ってみようかと思いました。以前に下のサイトを見たことがあり、こういう感じで五輪を描画できないかなと思い、やってみることにしました。Chrome Experiment #500 工夫したところ RAFでアニメーションの高速化 cj.Tic…

Javascriptでパーティクルのクラスみたいなのを作って等速円運動させてみた

デモ こちらのサイトを見ていると、等速円運動のやり方が書いてありました。 http://www.fumiononaka.com/Business/html5/FN1401004.html: パーティクルのクラスを作る クラスについてよくわかっていない Javascriptでは正確に言うと、クラスはないというの…

CreateJS(EaselJS)で円を移動させて、大きさも変えてみた

CreateJSでWebGLが使える WebGL公式サポートにより、描画スピードが向上したと聞き、興味を持ちました。触ったことがないので、やってみることにしました。 ・参考 WebGL公式サポートで爆速になったCreateJS - GUGENKAブログ デモ 円が移動して、大きさが変…

Chart.jsを使って円グラフをアニメーションさせてみた

綺麗なチャートが作れる Chart.jsはCanvasにチャートを描画できるライブラリです。アニメーションもできて、デザインを工夫すれば、おしゃれな図を作成することができます。動きや配色によって、チャートのわかりやすさは大きく変わると思うので、このような…

Googleマップのデザインを変更して、線路のないGoogleマップを作ってみた

Google Mapのデザインは変えられる 世界中のデザイナーがGoogle Mapのデザインを投稿するサイトを見ました。Snazzy Maps - Free Styles for Google Mapsとてもかっこよかったです。自分も作ってみることにしました。 デモ 東京の地図から線路と道路を消して…

「○んこ」から連想する言葉を投稿するWebサービスをつくった

nko nko 「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。naoyashiga/nko · GitHub GitHub Pagesに公開させた。コードはここに公開してある。サービスを作る上でやったことを以下にメモしておく。 Tweetボタンの設定 Tweetボタンを作成…

jQueryのappendを使ってulの中に入れ子でliを追加する方法

デモ appendでネストさせるやり方 完成イメージ <div> <ul> <li>sample text</li> </ul> </div> ulの中にliが入って入れ子(ネスト)状態になることを目指す。 html,cssの準備 <div></div> div要素だけ書いておく。 div ul{ height:20px; background:#888; } div > li{/*入れ子失敗*/ color:red; } div …

Javasciptで二重否定を使う意味、「関数名」と「関数名()」の違い

二重否定「!!」の意味 以下はブラウザがCanvasをサポートしているかチェックしているソースである。 ・ソース元 http://tympanus.net/Development/InteractiveParticlesSlideshow/js/particlesSlideshow.js var canvas = document.createElement('canvas'); …

Youtubeのローディングアニメーションもどきを作ってみた

demo 以下の参考サイト見て、Youtubeのローディングデモを自分でもつくってみようと思った。自分でつくるといっても、ほとんど書き写しただけだが。下のデモでは影をつけたり、アニメーションのボタンをjsで操作する際にライブラリを使ったりしている。自分…

SVGをアニメーションさせて線を描画する

デモ ボタンを押すと線がアニメーションして描画される。SVGを使ったアニメーションするチェックボックスが新鮮だったので、自分もやってみることにした。 Animated Checkboxes and Radio Buttons with SVG | CodropsそこでSVGのアニメーションについて紹介…

Canvasで着物の柄である「毘沙門亀甲」を描画する

紋様の科学 (伏見康治コレクション (1))作者: 伏見康治,江沢洋出版社/メーカー: 日本評論社発売日: 2013/06/10メディア: 単行本この商品を含むブログを見るCanvasで遊ぶことが多いのだけれど、もう少し数学を使って描画やアニメーションをつくればおもしろい…

JavascriptでKeyの同時押しを判定する

demo codepenを見ていたら、綺麗なグラデーションでパーティクルが回るデモがあった。 Canvas Sparkle Light Trailこれを参考にシューティングゲームみたいなものを作れないかなと思った。しかし途中で挫折したww プレイヤーから弾が出るところまでは作った…

Content ScriptからBackground Scriptにメッセージ送り、popupに表示させる方法

何を作ったか? 以前、Youtubeの埋め込みコードに開始時間を設定する拡張を書いた。 YouTubeを途中再生できるように埋め込みコードを改変するChrome拡張をつくった - not good but great Chrome Web Store - Embed Screen Jump Code for YouTube™それの技術的…

nodejs,ntwitterでStreaming APIを使う

・参考 node.js + socket.ioでTwitterのStreaming APIを使ってみる - 大人になったら肺呼吸参考ページを9割以上書き写して、実行したらつぶやきを取得できた。ドキュメントも英語だけど、眺めたりしている。 User streams | Twitter Developers わからないこ…

nodejsでexpressコマンドが見つからない時の解決法

nodejsの環境構築 jsでサーバーサイドの処理が出来ると聞いて、nodejsを触ってみることにした。なぜか自分の環境にはすでにnodeが入っていた。 $node -v v0.8.19 バージョンは上の通り。 $npm -v 1.2.10 パッケージマネージャーのnpmもインストール済みだっ…

WebGLでフィルターを使用するライブラリ「 WebGLImageFilter」

Fast Image Filters with WebGL - PhobosLabインスタグラムっぽい加工ができるフィルターライブラリ。また被写体がテスラ、バッドマン使用でかっこいいんだこれがw 「なぜWebGLでやる必要があるのか」という疑問があるが、読んでみると、そっちのほうが早い…

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

同じオブジェクト内のプロパティを変数として使いたかった。 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とは別にライブラリを読み込む必要がある。