JavaScriptで16進数の数値をバイナリー表示したりビット演算

1ピクセルの情報は、RGBAの32bitで各要素が8bitです。ピクセルを操作する場合は、RGBAの各成分に分割したり、すべての成分を32bitにまとめたりします。

JavaScriptで、32bitの数字を8bit毎に分割する方法や、逆に8bitの数値4つを、32bitにまとめるコードをCodePenに書きました。

See the Pen print binary from hex value and bit operation. by dev001hajipro (@dev001hajipro) on CodePen.0

HTMLのCanvasでピクセルソート(Pixel sort)

Canvas要素に画像を貼り付けてピクセルを操作できます。JavaScriptには、型付き配列というものがあります。これを使うことで、RGBA単位の操作またはピクセル単位の操作をうまく切り替えることができます。

参考資料

https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas

CanvasのImageData.data属性の、型付き配列Uint8ClampedArrayとその使い方のチュートリアルです。このチュートリアルやデモを見ると画像をCanvasに表示して、グレースケールにする方法などが分かります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays

型付き配列の説明です。型付き配列にはちょっと名前とは違い、バッファーとビューという概念があるためこれが理解する必要があります。逆にこれを使わずに、Uint8ClampedArrayを使うと、ループ処理のステップアップする数の調整などが非常に面倒になります。

 

デモ

See the Pen Pixel sort by dev001hajipro (@dev001hajipro) on CodePen.0

ソースコード

解説

5行目のimg.crossOrigin=”Anonymous”;は外部サイトの画像ファイルをCanvasに読み込むとセキュリティーエラーが発生するので、記述しています。

画像はWikipediaの320×320の画像で、Canvasのサイズを640×320にして、左側に修正していない画像を貼り付けて、右側にピクセルソートした結果を表示しています。

ctx.drawImage(img, 0, 0)が、オリジナルの画像をCanvasに描画している部分です。これはCanvasの入門情報を調べるとすぐに分かります。

var imageData = ctx.getImageData(0, 0, 320, 320);でCanvasに描画したピクセルデータが入ったImageDataオブジェクトを取得します。(ImageData -MDN) ImageData.dataプロパティーには、Uint3ClampedArray型のピクセルデータが入っています。何か難しい型に感じますが、単純に、RGBAのデータが並んでいるだけです。

単純にfor文で、ステップをi += 4にして、ループすることで、RGBAを操作することも可能です。

 

初期設定では、imageData.dataは、Uint8ClampedArray型で、ループなどをする場合は、ステップを4にする必要があります。ピクセルの移動のようにピクセル単位で操作したい場合は、forループなどのステップが1の場合の方が都合がよいです。そのような場合は、imageData.data.bufferから、Uint32Array型を用意して操作します。

ピクセル単位のソート処理

ピクセル単位に操作できるようになったので、Arrays.sortでソート処理を行います。引数p1は1ピクセルを表し、Uint32型なので符号なしの32ビットです。つまり以下のように、ABGRの順で1ピクセルを表します。

ビット演算

ビット演算は、RGBのr,g,bを各8bitとして取り出したいので、以下の手順で行います。

  1. シフト演算で、8bit単位で下位にずらす。
  2. 0xFF=11111111と論理積(AND)でマスクをする。

ビット演算の経験がなくちょっとわかりづらい場合は、ピクセルソートはひとまず置いておいて、ビット演算のみを勉強してみるとすんなり理解できると思います。

ビット演算で、r,g,bを取得できたので、とりあえずの明度としてr+g+b/3で値を用意して、比較しています。

あとは、putImageDataで、右側に書き込むだけです。

 

まとめ

最初は、Processingでピクセルソートをする動画を見たので試しました。Processingでのピクセル操作は分かりやすかったのですが、バブルソートで非常に遅く、原始的にRGBAを操作するのではなく、colorオブジェクトのように少しラップされたAPIのため、逆に分かりづらかったです。

そのためp5.jsなどがありますが、素のJavaScriptでピクセルソートを試してみました。Uint32Arrayと型付き配列を理解出来たら、あとは配列を操作するだけなので手間はありますが、非常に理解しやすかったです。

 

 

p5.jsでワードカウント

p5.jsで特定サイトの単語を数えるプログラムを書いてみました。HTMLを取得したら、doucment.textContentで、タグ内に書かれた文字列をすべて抽出します。次に、空白や改行などの記号を区切りとして単語に分割し、それを連想配列(Map)に格納します。

単語を抽出して連想配列にする場合は、関数型プログラミングの方法で実装するとすっきりするようです。

 

 

JavaScriptとCanvasでモンテカルロ法で円周率を求める

モンテカルロ法を使うと、2つの乱数と計算で、円周率を近似値として求めることができるので試してみました。

時間がたつと精度が上がる

 

モンテカルロ法の仕組みは以下で求められます。

  1. 点(X,Y)のXとYを乱数で求める。
  2. ピタゴラスの定理で、原点(0,0)から点(X,Y)の距離が単位円1に収まるかどうか確認する。収まる場合はinCountで保持。
  3. 最後に、(4*inCount)/全体の回数で、円周率πを求めることができます。

乱数が0.0から1.0の範囲なので、XY座標では、単位円の4分の1です。そのため4倍に円周率を求めるときにします。乱数を-1から1の範囲にしたら、inCount/Counterになります。

 

WordPressのoEmbed Gistプラグインが簡単で便利

WordPressにgist用のプラグインoEmbed Gistを導入してみました。gistを追加する方法には、Wordpressの関数を修正する方法もありますが、関数を追加していくと後々運用が面倒になるので、oEmbed Gistを試してみました。

GistのURLをコピペすると、Youtubeの動画やWordpressの記事のようにページに組み込まれるのですごく便利です。

https://ja.wordpress.org/plugins/oembed-gist/

 

VisualStudio2017でLinux用のビルドをする方法(Inferior loaded対応)

VisualStudio2017ではgdbと連携してLinux環境のC/C++開発がVisual Studioで出来るようになりました。Bash on WindowsやHyper-V上のLinuxのGUIアプリなども問題なくビルドできます。この仕組みは「Visual C++ for Linux Development」というそうです。またgithub上で開発されています。

Visual C++ for Linux Development

https://marketplace.visualstudio.com/items?itemName=VisualCPPTeam.VisualCforLinuxDevelopment

https://blogs.msdn.microsoft.com/vcblog/2017/02/08/targeting-windows-subsystem-for-linux-from-visual-studio/

Loaded ‘/lib/x86_64-linux-gnu/libc.so.6’. Cannot find or open the symbol file.

実際に上記のURLなどを参考に環境を構築して試してみて見たら以下のエラーが発生しました。

対応としては、初期設定のデバックモードをgdbserverからgdbに変更すればひとまず対応できるようです。

初期設定はgdbserverですが、gdbの場合は、Linux環境にシェルで接続してgdbを動かすようです。gdbserverの場合はローカル(=Windows)でgdbを動作させてgdbserverに接続するようなのでポート設定などが必要なのかもしれません。

 

https://github.com/Microsoft/VSLinux/issues/86

 

一次元セルオートマトンのルール30を作成

ライフゲームはXY座標の二次元ですが、もっと単純化した一次元のセルオートマトンがあるので調べてみました。一次元セルオートマトンでは、自分と左右のセルの状態で、次の世代のセルの状態を決めるのでとてもシンプルです。今回は勉強のためルール30を実装しました。

一次元の場合は、配列1行が現在の状態を表すので、それをもとに、次の世代(行)を作成します。そのためゲームループのような仕組みは必要ありません。また、数字を入れてみればわかるのですが、Cells[0][0]を確認するときは、Cells[0][0+maxColumns-1%maxColumns]がそのセルの左のセルになります。つまり配列の一番最後の要素で、最も右側にあるのが隣にあることになります。剰余で求めることができるので以下のように書きます。

以下のソースコードでmaxColumns=5、x=0の時などをやってみるとすぐ理解できます。

 

 

デモ

http://hajimete-program.com/demo/cellular_automaton_rule30.html

github

https://gist.github.com/dev001hajipro/c75124209419833b46f16632b0319de5

参考資料

http://home.a00.itscom.net/hatada/lp2012/c06/c06.html

 

JavaScriptでセル・オートマトンのワイヤーワールドを作りました。

logisimやマインクラフトで回路を作ったりしていてデジタル回路を学んでいるときに、セル・オートマトンのワイヤーワールドを見つけました。セル・オートマトンでは、コンウェイのライフゲームが有名ですが、このワイヤーワールドは回路図と同じような仕組みなので非常に興味深いです。またライフゲームに比べると規則が非常にシンプルです。

規則

状態

セルは以下の4つの状態のどれかです。色は特に必要なくて、グレースケールなどでも問題ないです。見やすいように、導体(電子が流れるところ)を黄色にして、電子を青赤で表現するのが多いようです。

  • 空(Empty)は黒
  • 導体(Conductor)は、黄色
  • 電子の頭(Electron Head)は、青
  • 電子の尾(Electron Tail)は、赤

世代ルール

世代は単純に、ゲーム中の1ループのことです。

  • 電子の頭は、電子の尾になる
  • 電子の尾は、導体になる
  • 導体は、近傍セル(その導体の周りのセルの事)のうち、1つまたは2つのセルが、電子の頭であった場合、その導体セルは、電子の頭になる

最後がちょっとわかりづらいので画像で説明します。

中央の導体セルから、周り8個を見る

上記図は、中央の導体セルから、周り(近傍きんぼう)の8個のセルを見ると、画像の左側は、青が1つ、画像の右側は青が2つあります。この時に次の世代に進むと、以下画像になります。

注目してほしいのは、中央の導体セルが黄色から、世代ルールにより、青に変わったところです。

たったこれだけのルールですが、これコンピュータが作れます。

まさに電子(Electron)のよう!

ゲームループを動かすと、世代ルールが適用されて電子の頭(青)と電子の尾(赤)が移動しているのが分かります。

 

ダイオード

 

NOT回路・インバーター

確かに、世代ルールが適用されて、電子が流れなくなるので、NOT回路と同じになります。ですがこれだけ単純だと不思議な感じがします。

 

ソースコードをもう少し綺麗にしたらデモもアップロードしようと思います。現在のソースコードはgithubにアップロードしました。

ソースコード

https://github.com/dev001hajipro/wireworld

参考資料

ゲートICやレジスターを作るには以下が参考になりそうです。

https://www.quinapalus.com/wi-index.html

ワイヤーワールドでデジタル回路のNOT回路やOR回路など基本的なものを作るときの参考になりそうです。

http://karlscherer.com/Wireworld.html

 

便利なレッドストーン回路シミュレータの一覧とソースコード

マインクラフトでレッドストーン回路をやってみると、単純な回路でもかなりの大きさになるのがわかります。移動してブロックを設置するのも結構面倒です。ちょっと回路を試す場合はレッドストーン回路シミュレータが便利です。

レッドストーン回路シミュレータを調べると英語版でいくつか種類が見つかったので有名なものををまとめてみます。

Baezons redstone simulator

http://www.minecraftforum.net/forums/mapping-and-modding/minecraft-tools/1260528-baezons-redstone-simulator-v2-2

Baezonsさんが作成したレッドストーンシミュレータです。Baezonさんのシミュレーターを基本として、いろんな人が拡張したようです。ソースコードはgithubにあります。

https://github.com/digama0/MCRedstoneSim

 

Simnik Circuit Simulator

http://www.minecraftforum.net/forums/minecraft-discussion/redstone-discussion-and/344005-circuit-simulator-v0-82-1-0-0-compatibel

リピーターを使えるようにした物です。現在はソースコードはダウンロードできないようです。

Circuit Simulator v0.81-rek

http://www.minecraftforum.net/forums/minecraft-discussion/redstone-discussion-and/342852-circuit-simulator-v0-81-rek

Simnik Circuit Simulatorをフォークしてピストンを追加したものです。ソースコードはzipファイル内にあります。

Mordritch’s JavaScript Redstone Simulator

オンラインですぐ試せるレッドストーン回路シミュレータです。コンパレータはありませんが、リピーターやピストンもあるので一通り遊べそうです。

http://mordritch.com/mc_rss/

Minifyしたソースコードは公開していますが、元のコードは公開していないようです。ですが、以下githubに似たようなコードがあるようです。

https://github.com/JonathanLydall/JavaScript-Redstone-Simulator

 

Twitterで特定ユーザーの画像と動画を抽出するコード(Java8 StreamAPI)

数日前に、「Twitterで特定ユーザーの画像と動画を抽出するコード」でJavaのTwiterライブラリーTwitter4jを使ってユーザーの画像を動画を一括で取得するソースコードを書きました。Java8のStreamAPIを勉強しながら書き直してみました。

ソースコード

https://github.com/dev001hajipro/twime

StreamAPIの感想

Java8のStream APIを勉強しながらTwitter4jでTwitterクライアントを実装しましたが、練習問題ではなく実用的なものを作ってみるとStream APIの問題点もわかってきました。

基本的なメソッドがまだ足りない

まず、Java8 Stream APIは、関数型プログラミング言語でよく使われるAPIが揃っていないようです。Java9になるとtakeWhileメソッドなどが導入されるようです。Java8の場合は自作するか、https://github.com/poetix/protonpack などを使う必要があります。

Javaプログラマはー、まずはfor文をStream APIで変えたりするところから始めると思うので、takeWhileなどはJava8で導入してほしかったです。

既存のライブラリーと組み合わせるのは面倒

Java7までStream APIやOptionalがないため、Javaのよく使われるライブラリーはStream APIで呼び出されることを想定していません。そのためTwitter4jライブラリーもそうですが、既存のライブラリーは、普通のJavaプログラムとして例外処理を行い、戻り値をOptionalでラップしていないため、Stream APIとOptionalを使った書き方をすると{}ブロックを使う必要が出てきます。

以下のコードなどはひとまず動くようにはなったのですが、ラムダ式は1行で綺麗に書けるほうが良いので、うまい方法を今後さがすのが課題です。

 

その他

Twitter4J 4.0.6では、Extended Media Entityは廃止

http://qiita.com/takke/items/0bd8be655bc95ab78185