【enchant.js】スマホで勝手に拡大されてボケるのをなんとかする方法
さいきんちまちまゲーム作ってます。
Enchant.jsでゲーム作ってると、画面が勝手に拡大されるのが気になります。
スマートフォンごとの画面サイズを気にするのも面倒です。
<meta name="viewport" content="width=device-width,user-scalable=no">
この一行で、きれいに拡大されるようになります。
幅をいっぱいにしたいのであれば
<div id="enchant-stage"></div>
bodyにこれを追加します。
拡大はブラウザに任せたほうがよいということ
簡単ですね。
パーリンノイズアルゴリズムのお勉強
ふと頭のなかでパーリンノイズ生成の妄想をしていたので、
形にしようかと思う。
パーリンノイズのもととなる考え方はフラクタルである。
やりかたとして、
- 大きい波を用意
- 小さい波を掛けあわせていく。
が基本理念となるが、その方法は様々である。
今回アルゴリズムを組んだのは、１次元のパーリンノイズです。
- ざっくりとした山を作る。
- 点の間に中点をとり、ランダムで上下させる。
ということで、できたのがこれ。
http://yohawing.com/exp/sketch/04/
簡略化したアルゴリズムはこれ
- １０個のランダムな点で波を作り、配列に格納
- 中点を追加して、前後の点を見て上下させる。
- 前の配列の値の間に中点の値を入れて、配列に格納
- 繰り返し。
function perlinNoise2d(noise){ NUM = 10 noise = []; noise[0] = new Array(NUM) for (var i=0; i<NUM; i++) { if(i==0) { for (var j=0; j<noise[0].length; j++) { noise[0][j] = rand(-height/2, height/2) } }else{ //べき乗で波の細かさを増やしています。 noise[i] = new Array(Math.pow(2,i)*NUM); set(noise[i],noise[i-1]); } } } //点の中点を上下させるアルゴリズム。 //正直もうちょいスマートにできたと思う。 function set(arr1, arr2){ for (var i=0; i<arr1.length; i++) { if (i%2 == 1) arr1[i] = (i==arr1.length-1)? height/2: rand( arr2[(i-1)/2], arr2[(i+1)/2]) else arr1[i] = arr2[i/2]; } return arr1; }
こういうアルゴリズムを一行で作る人を尊敬したい。
日本のダブバンドまとめ
ダブと言っても広義なのであしからず。
ダブバンドとは・・・
- スネアにリバーブとディレイ掛けるやーつ
- 低音だけでうねってるべーす ﾎﾞ- ﾎﾞ- ﾎﾞﾎﾞﾎﾞ- ﾎﾞ-
- 鍵盤かギターで裏打ち ﾁｬｯ ﾁｬｯ ﾁｬｯ ﾁｬｯ
犬式 ★★
最近、選挙フェスだとかなんとか言ってた政治家も元はレゲエバンドのVoでした。
声がいいね。
MUTE BEAT ★★★
日本初のダブバンドらしい。
時代感あるけど、すばらしい
nego ★★★
インプロ中心のごちゃまぜダブ
ROVO・・・
https://soundcloud.com/nego-sound
DUB ROCKERS ★
わりとスタンダードなレゲエやってる感じ。
DRY&HEAVY ★★
日本のダブの古典
Bonobos ★★
実はシングル曲以外でちゃんとダブやってる。
Fishmans
言わずと知れてる感。日本で一番ドラッグが似合う男 佐藤
Tam Tam ★★★
歌がまじでいい。
あらかじめ決められた恋人たちへ ★★
最近知名度ある。たぶん、バンド名で得してる。
KILLA SISTA ★★
ギャルバンでインストダブ
割りと忠実にダブ
squarepusher cover
squarepusherをバンドでカバーしたので、その時の打ち込み音源やらを配布します。
i covered squarepusher with my band. i give you sampling and backing track.
Squarepusher Theme guitar cover （L:guitar and R:click）
https://www.dropbox.com/s/vu3qapomot7wzxw/squarepusherTheme_%E6%89%93%E3%81%A1%E8%BE%BC%E3%81%BF_1.2.mp3
アコギを録音した後、切り貼りしました。
コードは使いまわしたので、厳密ではありませんが、オケとしては十分に使用できるかと思います。
Squarepusher Band cover
https://www.dropbox.com/s/s4y5j6vh4cnqn8g/SquarepusherTheme_8%3A22_01.mp3
ミス多数ですが、ベース・ドラムのコピーの参考になればと。
演奏した曲は、
- squarepusher Theme
- My Red Hot Car
- Hello Meow
- Iambic 9 poetry
です。
iOS Developing 事始めも。
iPhoneアプリをお作りするお勉強をしておりまする。
勉強して行くうちにObj-Cへの抵抗感も無くなってきたので、
お勉強したことをメモしてゆきます。
//Objective-C事始め
まずクラス作るところから。
//header @interface ClassName: NSObject{ //宣言部分 @public @private @protected } @property (retain)NSString* str1; @property (retain)NSString* str2; +(ClassName)ClassMethod; -(void)InstanceMethod:(NSInteger) arg; @end
ざっとこんな感じに書くのがObj-C。
@interfaceでクラスを宣言するのがObj-C流
コロン挟んで継承元を指定。
スコープとかは、＠を先頭に付けて区切る。
何も指定しないと、自動でProtectedになってしまうが、それでも大丈夫
propertyさんが頑張ってくれます。
propertyで宣言した変数は、synthesizeすると自動でget,setメソッドを作ってくれます。
//ClassName.h @implementation ClassName; @synthesize str1; //main.m id cls = [[ClassName alloc] init]; [cls setstr1:@"hogehogeman"]; //-> str1に文字列をセット [cls str1];//->hogehogemanが返される
普通にPublicで良いじゃん。って初心者の僕は思う訳です。
堅牢なアプリを作れるという安心感をpropertyさんは与えてくれます。
(?)C++とはInterfaceの指してる意味が違うのか？
+(ClassName)ClassMethod; -(void)InstanceMethod:(NSInteger) arg;
クラス内でしかアクセスできないメソッドは+で始めます。
あんまり使わないらしい。コンストラクタとかでよく使うらしい。
（-）から始まるやつはインスタンス化されたときに使えるメソッド。
こっちはよく使う。基本的に
引数は括弧で型をくくって宣言 二つ目以降はスペースで区切る。
（＋ー）はよいとして、引数の宣言の仕方が気に食わない。
ああ、気に食わないとも。
id cls = [[ClassName alloc] init];
id型は、オブジェクトを格納する汎用的な型みたいです。
ぜひともいろんな型をぶち込んでみたいですね。
インスタンスメソッドにアクセスする方法は、[]鍵括弧・・・。
まぁ、割と便利なきがする。
#import <Foundation/Foundation.h>
ちゃんと覚えれば、便利な機能が豊富に用意されてるObj-C
Foundationクラスが優秀なんではないでしょうか。
がんばろう！
Paper.js でベクトルグラフィック をやってみた雑感
ちょっと前からPaper.jsをポチポチしてる。
http://paperjs.org/
Webでベクターでグニョグニョするのは、Flashの専売特許だったけど、
Canvasで似たような事が出来るのは、とてもよいね。
Paper.jsとよく比較されるのが、Raphael.js
PaperとRaphaelの違い列挙
- SVG描画とCanvas描画の違いー＞それによるブラウザ対応の違い
- Paperのが、サイトのセンスが良い Raphaelはダサい
- Raphal軽量
- Paper書き方が独特 （Paperscriptというらしい配列丸ごと計算してくれる）
- Raphael触ってないから甲乙つけがたい
- Paper サンプルがかっちょよい。これだけでモチベアゲアゲ。
- canvasのプラグインロクなのないけど、両方共よい。
こんなとこですかね。
ベクターは動きが気持ちいいですね。
ピクセルだとこうも気持ちよく動かないので、期待感MAX
インタラクティブなグラフとかお絵かきアプリに強いイメージ
僕は、これ使って気持ちいいUIとか作ってみたいなと妄想したり。
スマホでも随分さくさく動作してくれます。
フラットデザインだとか何だとか、わりと騒がれすぎて鎮火してきたイメージですが、
本番の勝負はこれからですね。
事の本質は、スキュアモーフィング的な立体光沢Web2.0デザインの飽和という所でしょうか。
デッサンやってきた美大生が、文字組しだすようなものですかね・・・
Appleさんは、「おめーらフラットとかフラットとか言ってるけど、おれらそんな範疇に収まってね～から。おれらなりのやり方でWeb2.0脱却すっから。」とでも言ってるかのように、iOS7発表してコケてるんですけどね。
まぁ、彼らは次世代のアフォーダンスを作る役目になってる感があるので、少しぐらい挑戦してもらわないと困るのですが。
立体使わずに、「この■押せるよ〜」感をだすためには、リンクに下線引いたり、ホバーで色変えたりマウスポインタ変えたり
いろいろやり方はあるんでしょうけど、タッチ世代の方々にはなかなか難儀なようで。
そこで、Paper.jsに無理やりつなげるんですが、「この□押せるよ〜」感を出すために
ウニョウニョと四角がうごめいていたら、押したくなるんじゃないですかね？
ブヨブヨしてるものは触りたくなる論 とでも。
脱立体して、押せる感のある四角を演出する一つの方法として心のなかにメモしときましょう。
という事で作ってみました。
http://yohawing.com/exp/paper/exp2.html
paper.install(window); onload = function(){ var canvas = document.getElementById('canvas'); paper.setup('canvas'); var path = new Path.Rectangle( [100,100,120,80]); path.fillColor = "blue"; path.smooth(); num = []; for(i=0;i<path.segments.length*2;i++) num[i] = Math.random()*3+3; path2 = path.clone(); path2.position.x += 200; var text = new PointText({ point: path.position , fillColor:'white', content: 'リンク', justification: 'center', fontSize: 30 }); text.position.y += 10; var text2 = text.clone(); text2.position.x += 200; text2.content = 'ボタン'; view.onResize = function(event){ path.position = view.center; }; var c = project.activeLayer.children; view.onFrame = function(event) { var b = path.segments.length; for(i=0;i<b;i++){ path.segments[i].point.y += Math.cos(event.count / num[i]) ; } } tool.onMouseMove = function(event){ project.activeLayer.children[0].fillColor = "blue"; project.activeLayer.children[1].fillColor = "blue"; if (event.item) if(event.item.type == 'path') event.item.fillColor = "red"; } tool.onMouseUp = function(event) { if(event.item.index%2 == 0) location.href = "http://google.com"; else location.href = "http://yohawing.com"; } }
幾分かは押したくなる気がする・・・
チューリング不安定性で、サイケデリックプログラミングしたい忘備録
洞窟壁画は我々の偉大なる先祖が麻薬でヨタって描いていたことが判明
http://www.gizmodo.jp/2013/07/post_12778.html
Gizmodoでこんな記事を発見。
この記事のこの画像のCとDに注目。
チューリング不安定性というらしい。
この図柄どこかで見たことあるぞ・・・
これだ。
Qubibi氏（http://qubibi.org/works/hello_texture/index.html）の十八番ビジュアルだ。
qubibi氏がこういったビジュアルを作っているのは、ドラック漬けだからなのか、チューリング不安定性を題材にしているのかは不明・・・
だけど、限りなく近似している。
偶然にせよ必然にせよ、かなりおもしろいと思いました。
世の中の謎がひとつ解けた所で、このアルゴリズムを探してみるも・・・
http://groups.csail.mit.edu/mac/users/rauch/turingweb/
・・・なんのことかさっぱりである・・・
まぁ、Qubibi氏の専売特許が簡単にコピれたら苦労しないか・・・
他にも、世の中の自然なものはすべてフラクタルになっているとか、
フラクタルに波形掛け算していって、パーリンノイズ生成とか
そういった、人類の生み出した美しい数式たちを
プログラムに生かせれば、楽しいなと思いました。
フラクタルといえば、渦巻き模様。
面白いアプリをご紹介
ミミクリーカメラ
http://www.nhk.or.jp/kids/mmcs/
世の中の渦巻きをアーカイブする試み？
なんにせよ、フラクタル（拡大しても同じような形）を日常に見出す
事例としてはとてもおもしろい。
フラクタルの代表的な例として、山脈の形とか、木の葉と木とか、沿岸とか、アンモナイトとか
アンモナイトにいたっては、フィボナッチ数列が見出される・・・
やっぱり、自然って必然の上に生まれてるのだなぁと。
プログラミングでは、必ずしも自然的である必要は無いけど、
自然に寄せていくことで表現できる世界もあるのは確かで
そんなことを考えながら生活するのも、また一興な感じですね。
