Vertices of icosphere

Icosphere(polyhedron?)の頂点が欲しくて生成するプログラムを探してたところ有りました。

Fast Icosphere Mesh

これを丸ごとコピーしてthree.jsで描画してみました。

Three.jsに「IcosahedronBufferGeometry」があってこれでも多面体の生成は可能ですが頂点が共有されておらず、正二十面体なら頂点12のところ60になってしまうので使えませんでした。

まるごとコピーは後ろめたいな…。完成版はnpmパッケージでISCライセンスで公開されているので問題は無いんでしょうけど。

今回のソースはデモから確認してください、JavascriptはHTMLに直書きです。

ところで、オリジナルのコードを記載してるObservableってサービスはなんだろ?Jupyter NotebookのJavascript版かな?


Electron+Javascript

Electron+JavaScriptをMainもRendererもWebpackでバンドルするテンプレートプロジェクト。

過去にも作ったことはありますが、Typescriptだったりglupとbrowserifyでビルドしてたりで開いても理解できず…自分がつくったのに。


お時計3

どうせなら時計をiPhoneでも動かしてみたいって事で、javascriptをあーしてこーして動かしてみるの巻。

なんでiPhoneのSafariで動かないかって言うと、javascriptのバーションes2015は実行出来るもののモジュールのimportには対応していないからです。なのでモジュールを結合(バンドル)する必要があります。

es2015をes5にトランスパイルします、babelのお仕事です。それからwebpackを使ってバンドルします。んで、iPhoneでも動くヤツ

スクリプトは書き換えてないので、マウスオーバー(rollover)が動きません。スマホにマウスはありませんから…。

以降は設定もろもろ。

続きを読む “お時計3”

時計

この前は子供に時計作ってやりましたけど、今度は自分用。時計が欲しいんじゃなくて昨日に続いてWebStormでCreateJSのお勉強用。

ES Moduleを使ってバンドルもせずにやってみましたが便利ですねexport/import。スクリプトをtype=”module”で読み込むとグローバルからアクセス出来ないのが良くも悪くも、って所です。あとCreateJSはShapeインスタンスのサイズ取得(getBounds())が出来ないのが難点。ActionScriptは取得できたと思うんですが、いろいろ差異はありますね。

以下WebStormのプロジェクト一式です。LiveEditなりサーバ上で動かさないとCORSエラーが出て動きません。


WebStorm

JavascriptでCreateJSのお勉強。

いままで静的型付がいいと思ってVisual Studio CodeとTypescriptでやってましたが、時間空けては勉強する度にnpmプロジェクトの設定方法(特にwebpackの設定)を忘れては振り出しにもどるだったので。今回はJavascriptで始める!

あとVSCodeは忘れてWebStorm(デモ版)です。HTMLに埋め込んだリモートのCreateJSを指示されるがままにローカルにキャッシュするとJSDoc付(minify前)のソースがローカルに作られて、自分の.jsファイルからもメソッドのアノテーションが見れるとか、どういう仕組み?

PyCharmデモ版を少し使って、変数や関数の命名で怒られて挫折しました、そもそもPythonをMaya用に書くだけだったので使用頻度も少なかったのもあります。WebStormはElectronアプリの勉強も進めたいので、買い!かも。