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

asaのブログ

プログラミングの勉強まとめ

NetbeansでJOGL環境の構築

 NetbeansでJOGLが使えるようにするための環境構築方法をまとめました。

 筆者の環境は下の通りです。

 

 1. JOGLのダウンロード

 まず始めにJOGLをダウンロードします。下のサイトから入ります。

  https://jogamp.org/

 JogAmpはJOGLやJOCLなどJavaクロスプラットフォームライブラリをまとめてい

 ます。

f:id:asa_r:20170524081259p:plain

 

 ここのBuilds / Downloads ⇒ Current [ zip , index , android ]のzipをクリックしてください。zipを開くと下の画面に移りますのでjogamp-all-platforms.7zをクリックしてダウンロードしてください。

 

 2.解凍からライブラリ登録

 そのまま解凍すると”jogamp-all-platforms”というフォルダが任意の場所に作られます。その下のディレクトリに"jar"というフォルダがあります。たくさんのjarファイルがありますが、使用するのは下の2つです。

  • gluegen-rt.jar
  • jogl-all.jar

これを任意の場所に保存してNetbeansのライブラリに登録します。今回はCドライブ直下にJavaPathというフォルダを作って先ほどのファイルを保存しました。

 

 Netbeansを開き、ツール ⇒ ライブラリに進みます。左隅の”新規ライブラリ(N)”をクリックします。ライブラリ名を入れるダイアログが出てくるので”JOGL”などと分かりやすいよう入力して”OK”を押します。

 

f:id:asa_r:20170524100226p:plain

 

 すると左のツリーに先ほど作ったライブラリが登録されます。そのライブラリを選択した状態で”JAR/フォルダの追加”をクリックします。先ほど保存したgluegen-rt.jar、jogl-all.jarを追加するとライブラリの登録は終了です。

 

 3.動作確認

 JOGLが動作するかを確認します。新規プロジェクトを選択し、Javaアプリケーションを選択してください。プロジェクト名を”JOGLdemoSwing”としてもらうと後で載せるコードを貼り付けるだけで動作確認ができます。

 

 JOGLdemoSwingをプロジェクトウィンドウで開きます。ライブラリを右クリックし”ライブラリの追加”を選択します。ここでさっき登録したJOGLライブラリを選択します。

 

 これでJOGLを使用できるようになりました。動作を確認するため下のコードを貼り付けてみてください。

gistcf580594cd6f5f5373455562f23cda53

 

 下の画面が表示されたら成功です。

 

DPL_1_B ナップザック問題

 ゼミの教科書に出ていてどんな問題か気になっていたナップザック問題の近似解が解けました。NP困難な問題として知られるナップザック問題ですが、貪欲法ではなく動的計画法で解くことで近似解をだすことができます。

 

 N個の品物についてナップザックに入れる入れないを全て調べると2のN乗の計算量がかかりますが、動的計画法を使うことで重さWとしたときNWで求めることができます。参考書は例によってこれ。

 

プログラミングコンテスト攻略のためのアルゴリズムとデータ構造

プログラミングコンテスト攻略のためのアルゴリズムとデータ構造

 

 

 コード

gist1efd241fd2079a22fd7a6147a4348e98

 

ALDS_10_C 最長共通部分列

 今日はアルゴリズムの日。問題を複数まとめて書くとごちゃごちゃして見ずらいので問題ごとに分けて書いています。参考書はこれ。

  文字列から最も長い共通部分を取り出すアルゴリズムです。最初配列が出てきて、ん?となりましたが、コードを眺めて追っているうちに把握できました。

 Javaでの解答が31個とかなり少なめでしたので解いてみたコードを載せておきます。たぶん全員が書き方が違うけれどおなじやり方で解いていたと思います。

 

 コード

gist63071cbdaca29f338b9ab0e89fc171ff

 

 

ALDS1_10_A フィボナッチ数列と動的計画法

 研究でナップザック問題が出てきたので、久しぶりにアルゴリズム問題を解いています。使用している参考書は下の本です。

  例のごとく、この参考書はCとC++で解答が書かれていますので、Javaで解いた解答を載せておきます。

 

 コード

 最初に素朴に解いたものです。フィボナッチ数列を計算するメソッドを書いてそれを再帰的に呼び出しています。ただ、これだとすでに一度計算した分の項も再度計算することになり時間がすごくかかります。AIZU ONLINE JUDGE通りません。

gistb9d7efc948c35cf808a5ebd03175afae

 そこで、一度計算した値を配列に保管しておき、再計算しなくていいようにコードを書き直します。メモリの使用が大きくなりますが計算時間は遥かに短くて済みます。

gistc1097f1cc58ba934282c622bad67abd1

 クラス名をMainに変えて、余分な文字を消すとそのままJUDGEが通りました。

 

ペイントソフトの開発フローまとめ

 現在のところUIを大枠作って機能の実装に入ろうとしています。しかしながら何を作ってよいのやら当たりがつかなかったので、調べたり考えたりして開発フローをまとめてみました。

 

 最初に何を実装するのか確認

 先週あたりペイントソフトの機能を洗い出していました。

 ペイントソフトの機能の書き出し - asaのブログ

そこで上げられていた機能として

  1. 描く
  2. 保存する
  3. 保存したデータを読み出す

はmustでした。それに付随していろいろな機能がくっついているのでした。そこでstackoverfllowやGithubなどを見たところ、ある程度のところまではJavaFXでやっている人がいるようです。しかしそこから先は、やはり画像処理に長けたOpenGLで実践や知識がまとまっている印象がありました。

 

 なので、pixiv Insideで佐藤さん@ゆで (@SuperSatoSan) | Twitterさんがお絵かきツールの作り方をスライドで流していましたが、ええ、その通りで時代はOpenGLで間違いありませんでした。

 

 まとめると、UIはJavaFXでいいけど機能面はOpenGLで作れということになります。ちなみにスライドはここから↓

inside.pixiv.blog

 

 ブランチ

 さてやることがたくさんありますし、覚えることもたくさんあります。加えてやることは単純作業ではなくて結構重ための仕事です。

 そういう仕事は平行してやると結局完成しないことが確定的なので、これやるって決めたらそれに集中するスタイルで細かく処理していきます。

 

 そこで、ペイントツールのプロジェクトをブランチを運用して切り分けていきます。絵でいったら中央線を引くくらいの作業として

  1. UI
  2. 機能

に分けます。しかしさらに枝葉末節伸びていきます。

 

 UIは今のところ機能をどう実装できるか分からないと完成させられません。なのでブランチをCSSの適用とだけ伸ばしおきます。

 あと機能面は結局OpenGLを使わないことには今のところ手のだしようもありません。そしてOpenGLほとんど知りません・・・。というわけでまずはOpenGLの基本的なところを学習してそれからです。JavaOpenGLを使うのにはJOGLがありますのでそこから攻めていきます。

 

 学習方法

 リンクを詰め込んでおきます。

 ・http://asa-no-blog.hatenablog.com/?page=1494428663Inkscapeは役に立つ)

 ・java - Paintbrush stroke in JavaFX - Stack OverflowJavaFXでブラシ作ってます)

 ・JavaFXの練習5:Drag&DropでNodeを移動する - プログラムdeタマゴ(Nodeの移動

  について書いてあります。ありがたい)

 ・JavaFX 画像表示・画像処理(ピクセル操作)|軽LabJavaFXで画像処理)

 ・ava - How to use OpenGL in JavaFX? - Stack Overflow(これで今回の方針がだいた

  い決まった)

 ・OpenGL ES入門 その1 -描画の仕組みとバッファ- - A Day In The Life

 ・brush - Photoshop-style brushes in OpenGL - Stack Overflow

 ・http://www.cs.brandeis.edu/~cs155/chinese_brush_painting.pdf

 ・JavaFX アプリケーションを素敵に着飾ってみる - Qiita

About this blog

 Preface

 Thank you for watching my blog !

 I just started this blog only to write down programing technique for my study at university. I major in Algrithmic Game Theory. I interested in a system that allocate items optimally.

 

 But now I noticed that I truly want to apply my study for supporting creative activities. They bring us a new perspecitve and idea. It is so dreamy! So I think I should only make allocation system that people can check someone's work easily but also create a software or app to act people confortable.  

 

 That's why I make softwares. See below.

  1. Circe ・・・A painting tool
  2. Agola ・・・A Web app for browsing and publishing pictures

I want many people have fun and many point of view through someone's work.  

 

 Details

 I’mlearnig Java, programing skills and image processing to accomplish my goal. So this blog will offer you below things.

  1. Basics of Java
  2. Basics of Algorithms
  3. Basics of developing Android apps
  4. Knowledge and application of  javaEE, JavaFX and image processing
  5. How to get useful informaiton about developing.
  6. Recent news

 And I sum up information about drawing so that I can make a good paintg software (Ofcourse I love to draw a painting).

 Check the branch of my blog.

http://blog.hatena.ne.jp/asa_r/asa-no-kobeya.hatenablog.com/

 

 I'm looking forward to your comment ! 

JavaFX-スライダー、リスト・ビューの作成とCanvasの中央揃え

 今回はUIにブラシを調整するためのスライダーと、ブラシを選択するためのリスト・ビューを作成しました。あと、キャンバスが左上に表示されるのを、中央に表示されるようにしました。

 

 インターフェースの左はレイヤー管理と、微調整用のメンテナンスをTiledPaneでおいています。ただ実装は今のところ見当がついていないのでUIの大枠はこれで終了です。

 

 とりあえずバージョンCirce0.0.3くらいの位置づけです。0.1.0で最低限動作するというのを目標にしているので、これからMVCでいうとMとC辺りに入っていきます。

 

 スライダー

 JavaFXのUIコンポーネントの1つで、Sliderクラスのインスタンスを作ることで使えます。setMinでスライダーの最小値、setMaxでスライダーの最大値、setValueでデフォルトの位置を指定できます。

 

 メモリや値の表示を出したいときはsetShowTickMarks、setShowTickLabelsをtrueにすることで表示させることができます。

 

 リスト・ビュー

 項目をリスト表示するときに使うUIコンポーネントです。今回はブラシを選択するためのブラシ・チューザーとして使いました。リスト・ビューは一旦ObservableListにデータを入れてから、それをリストビューに渡して作成します。

 作ってみると見た目がかなりきれい。

 

 Canvasの中央表示

 CanvasのラッパーにしていたペインをGridPainに変えて、setAlignmentメソッドを使って中央に持っていった。

 

 Circe(0.03) View

 なんかそれっぽいねみたいな感じにはなりました(笑)。ただもっときれいにしたいのでこれはこれとして攻めていきたいです。

f:id:asa_r:20170518103649p:plain

 

 コード

 コードが徐々に見ずらくなってきてます(汗)。後々のことも考えて、共通するところをInterfaceにまtめて、UIのまとまり毎にクラスに切り分けてimplementsしたほうがいいですかね…?

 デザインパターン読み直そうと思います。

gistf156b2ca03cadc43318646e0c32baa6c