2015/11/28

プログラムを学んでみるには

プログラミングを始めてみようかと考えている方向けに、NAVERまとめに「プログラミングを学んでみるには」というまとめを作りました。いろいろな手段があるのですが、コーディングから学ぶのであれば、まずは Small Basic をおすすめします。文字通り小さな言語なので簡単に覚えられます。ただ簡単なだけに複雑な機能がありません。Small Basic で物足りなくなってきたら、HTML5 + JavaScript をおすすめします。学べるサイトも充実してきています。テキストエディターとブラウザがあれば一通りのことができる点もいいと思います。Small Basic で学んだ色や図形に関してはほぼそのまま SVG や Canvas に応用できるでしょう。

NAVERまとめ

その他、以下のまとめも作りました。
Microsoft Small Basic まとめ
プログラミングのアイディアをまとめてみました。

| | コメント (0) | トラックバック (0)

2015/11/18

プログラミング講座(169) プログラムで絵を描く

コンピュータ上の絵としては、ソフトウェア(ペイント)などを使って自分で描くのも、それはそれで味がありますが、プログラミングを知っている方なら、プログラムに描かせてみるのも面白いのではないでしょうか。

今回はプログラムで絵を描くことについて、いろいろな例を Small Basic で示してみたいと思います。

繰り返しを使う
絵を描いていて同じようなものを繰り返し描くのが面倒に感じたことはありませんか?プログラムを使うと簡単に繰り返しが行えます。模様をプログラムを使って描いた例を示します。プログラムIDはJTH842です。この例ではX方向への繰り返しの中で2つの模様を交互に描いています。それをY方向へも繰り返しています。

図160 模様
【図160 模様】

繰り返しをさらに複雑にしたのが以下の万華鏡です。プログラムIDはGTB559-4です。 このプログラムでは Shapes を利用し、元の図形の反転図形を作り、さらに回転図形を作りそれを繰り返しコピーしています。

図161 万華鏡
【図161 万華鏡】

乱数を使う
星や花が乱れているような絵を描くには乱数を使うとよいでしょう。以下のプログラムID XKB601 では、乱数を使って X, Y 座標を決め 1000 個の星を背景に描いています。

図162 星(I AM YOUR FATHER)
【図162 星】

プログラムID VFC190-0 では同様に乱数を使って X, Y 座標を決め、Shapes で 3000 個のサクラの花びらを描いています。

図163 サクラ
【図163 サクラ】

数列や関数を使う
プログラム WRG641 では MoveArc というサブルーチンの中で円弧(ゾウの鼻としっぽ)を描いています。円弧は Shapes の円を扇状に並べていて、その座標は三角関数を使って計算しています。Small Basic には円弧を描くオペレーションはありませんが、三角関数を使えば描くことができます。

図164 ゾウ
【図164 ゾウ】

プログラム KFJ748-2 は木目を描くプログラムですが、基本的には木目の中心点からの距離を計算して木目の色を決めています。木目の色は年輪間の径の距離に対して負(凸)の2次曲線になるように計算しました。そうすることで濃い部分を細くできました。

図165 木目
【図165 木目】

プログラム KCG090-0 はヒマワリの花を描いています。サクラ同様、花の位置には乱数を使っています。種の部分の小さな四角の角度には黄金比を使い、位置には三角関数を用いました。黄金比の詳細についてはこちらのサイト(英語)に書かれています。

図166 ヒマワリ
【図166 ヒマワリ】

描いた絵を変換する
コンピュータで描かれた絵はデータとしてさらに加工することが可能です。

以下のアイコンエディターというプログラムではラスター(点)の絵をPPMというファイル形式へ変換し保存できます。PPMはフリーソフトのGIMPで読み込むことができます。GIMPでBMP形式やアイコン(ICO形式)に変換することもできます。

図167 アイコンエディター
【図167 アイコンエディター】

図168 GIMPに読み込んだPPMファイル
【図168 GIMPに読み込んだPPMファイル】

また、図形エディター(Shapes)で作成したベクター(線)の絵をSVG形式に変換できます。SVGはテキストベースのファイル形式なので、Small Basic で SVG を出力するプログラムを作ることができます。プログラム XMZ657-1 は碁盤の SVG を含む HTML を出力します。

図169 碁盤 SVG ジェネレーター
【図169 碁盤 SVG ジェネレーター】

図170 作成された碁盤のHTML
【図170 作成された碁盤のHTML】

SVG は HTML5 に直接記述できるようになったことが最大の特徴だと思いますが、GIMP, Inkscape といったフリーソフトの他、Illustrator でも扱えるのでいろいろ応用できそうです。Inkscape では Windows メタファイルや拡張メタファイルに出力できるので、PowerPoint などの Office 製品からクリップアートとして利用することもできます。

以上、Small Basic を使ったさまざまな絵の描き方を紹介してきましたが、これはほんの基本です。現在コンピューターグラフィックス (CG) の世界は大きな進歩を遂げ、映画やアニメも本当に高品質になってきました。

Small Basic でできることは限られますが、いろいろ工夫して楽しいアニメ作成ツールを作っていきたいと思います。

| | コメント (0) | トラックバック (0)

2015/11/16

JavaScript (39) MathJax について

JavaScript と直接関係ないのですが、HTML の話も JavaScript の連載の一環として取り扱おうと思います。以前の記事「数式の入力」でも紹介した、MathJax という数式整形スクリプトが新しくなっているようなので、再度解説したいと思います。

MathJax 自身は JavaScript で書かれていますが、利用するのに JavaScript の知識はほとんど必要ありません。むしろ数式を記述するための言語、MathML, TeX, AsciiMath などの知識が必要です。

今回是非紹介したいと思ったのは、HTML上に表示された数式の上でマウスの右ボタンをクリックすると、メニューが表示されるようになったことです。以前はこの機能はなかったと思います。

下図は本連載の「グラフ理論を用いた囲碁 数式一覧」というページです。数式の上で右クリックしメニューが表示されています。

図34 MathJaxのメニュー
【図34 MathJaxのメニュー】

このメニューから数式のソース(MathML コードや TeX コマンド)が取り出せるほか、数式のズーム(拡大)の設定やメニューの言語選択を行うことができます。下図は数式を拡大表示したところです。

図35 数式のズーム(拡大)

【図35 数式のズーム(拡大)】

どちらのスクリーンショットも Microsoft Edge で撮ったものです。MathJax はブラウザに依存せずに利用できるのも魅力です。

| | コメント (0) | トラックバック (0)

2014/12/20

プログラミング講座(166) SVG エディター

図形エディターの入出力を Small Basic プログラム形式から SVG (スケーラブル ベクター グラフィックス)形式に変更したものをプログラムID TLW744-7 で発行しました。

図153 SVG エディター
【図153 SVG エディター】

このプログラムで作成した SVG データを .svg の拡張子のファイル (UTF-8) で保存すると GIMP から読み込むことができます。また、.html ファイルに内部 SVG として組み込むと HTML5 対応のブラウザで表示することができます。

この SVG エディターのソースコードが2900行近くになっています。仕方なく発行する際はコメントを削除して2500行強に縮めました。コメント付きの全ソースコードについては、マイクロソフトの CodePlex (コードプレックス)という開発中のコードを管理できるホスティングサービスに公開しました。

図154 CodePlex
【図154 CodePlex】

ローカル側のコード管理は JavaScript の開発に使っている Aptana Studio 3 (統合開発環境)とともにダウンロードされた Git Gui というソフトを使いました。

図155 Git Gui
【図155 Git Gui】

Git Gui と CodePlex の使い方については TechNet Wiki の記事に詳しくまとめました。ただし英語です。

ところで、前回 viewer の訳語をビューアーに決めるときにマイクロソフトのランゲージポータルを使いました。このサイトにはマイクロソフトの用語が豊富にあるので、訳語に迷ったときとても便利です。今回も editor の訳語を確認したところエディターとなっていたので、そちらを使うことにしました。これまでは富士通の情報処理用語集などに倣ってエディタとしていましたが、マイクロソフト製品に関連した記述が多いので、今後はなるべくマイクロソフトのランゲージポータルに合わせるようにしたいと思います。

 

| | コメント (1) | トラックバック (0)

2014/11/25

プログラミング講座(165) SVG ビューアー

SVG (Scalable Vector Graphics) というファイル形式があります。SVG は XML (Extensible Markup Language) の一種で、HTML と同様のタグで構成されたテキストです。実際、HTML5 の仕様ではインライン SVG などの規格により、HTMLの中でも SVG が扱えます。Small Basic の Shapes オブジェクトで扱う図形は拡大・縮小ができるので、この SVG 形式に変換することが可能です。

これまで Shapes (図形エディタ) の出力は Small Basic のソースコードにしていましたが、将来的には SVG に変更しようと考えています。SVG という標準的なファイル形式を採用することで、他の様々なツールで扱えるようになります。例えば、GIMP, Visio での編集やブラウザでの表示も可能になります。

その前段階として、SVG ビューアーを作り始めました。プログラムID HFT825 でそのパイロット版を発行しました。

図152 SVG ビューアー
【図152 SVG ビューアー】

今のところ長方形と楕円を表示できるようにしています。回転はまだサポートしていません。今後は Shapes オブジェクトでできる範囲を扱えるようにする予定です。

ところで SVG について勉強してみたいという方には、英語ですが w3schools.comMDN がおすすめです。

| | コメント (0) | トラックバック (0)

2012/10/30

プログラミング講座(91) コードブロックの生成

TechNet Wiki 向けに Small Basic のコードブロックを生成するツールが完成しました。プログラムID SKC235-1 で発行しました。

このツールについての記事を TechNet Wiki にも載せました。まだ英語のみですが、Small Basic: How To Format Code Block という記事です。そのうち日本語訳するつもりです。
図91 TechNet Wiki
【図91 TechNet Wiki】

前回の版 1.1b から10箇所以上も修正する羽目になりました。その中でよくある間違いなど3点ピックアップします。

(1) 数字が化ける
文字列をつなぐときに + でつなぐと、その文字列に数字が入っていると足し算になってしまいます。今回は"1" + "." + "2" が "3" になってしまいました。文字列としてつなげる場合、Text.Append(Text.Append("1", "."), "2") とすれば "1.2" になります。

(2) コードをコピーした後
似たようなコードが続く場合、前のところからコピーして修正することがよくあると思います。そのときコピーしたものをちょっと修正するわけですが、修正漏れが往々にして起きます。何箇所か修正するうちの1箇所を忘れたりします。コピーして修正、というのは簡単にできるので、そういうときほど、よく見直しをしたいものです。(反省;)

(3) HTMLを生成するとき
HTMLを出力するプログラムでは、"<" と ">" と "&" に注意が必要です。これらをブラウザ上で正しく表示させるには、"&lt;", "&gt;", "&amp;" とします。

| | コメント (0) | トラックバック (0)

2012/10/01

iOS6、Windows共通のフォント

iPad2 の iOS を iOS6 にアップグレードしました。ブラウザ safari の標準のフォントが明朝体になったらしく、私の作ったホームページも一部明朝体になっていました。これまで、iOS のフォントは全く気にしていなかったので、仕方ない話なのですが。

ということで、ホームページのフォントを見直す予定です。iPhone / iPad 用の Typefaces というフリーソフトで iOS6 のフォントを調べてみました。75ファミリ、217種類もフォントが入っていました。そのうち Windows と同じ名前のフォントを基本的に使っていきたいと思います。iOS6 と Windows (Vista)で共通の名前のフォントは、

Arial [Bold] [Italic]
Courier New [Bold] [Italic]
Georgia [Bold] [Italic]
Symbol
Times New Roman [Bold] [Italic]
Verdana [Bold] [Italic]

の6種類でした。日本語のフォントは共通のものはないので、iOS用とWindows用を双方指定する必要がありそうです。

[iOS6]
ヒラギノ角ゴ ProN W3
ヒラギノ角ゴ ProN W6
ヒラギノ明朝 ProN W3
ヒラギノ明朝 ProN W6

[Windows]
MS Pゴシック または メイリオ
MS P明朝

| | コメント (0) | トラックバック (0)

2012/05/18

JavaScript (12) レイヤーで絵を重ねる

局面のオブジェクト Pos を使って、囲碁の局面をベクトルと行列で表し、着手禁止や取りの計算を行えるようにしました。goban04.js として公開します。
図12 Goban 0.4
【図12 Goban 0.4】

取った石をスマートに消したい。と思い、レイヤーのように Canvas を重ねる手法を使いました。碁盤上は石が近いので、影が重ならないよう、影のレイヤーも設けました。最初は CSS で position: relative; top : -480px としていたのですが、微妙にずれが生じます。しかも、Chrome と Firefox でずれの度合いが違うのでこの方法はやめにしました。position: relative と position: absolute を組み合わせて、どちらのブラウザでもうまく表示できるようになりました。

今回、JavaScript の囲碁のプログラムにオブジェクト Pos を初めて組み込んだわけですが、Java では全く気にならなかった計算速度が結構遅いことに気づきました。Google Chrome の JavaScript コンソールに Profiles という性能測定ツールがあるので、それを使って遅いところを書き直しました。それでも6ベクトルの計算は時間がかかるので、今回は取り外しました。

ということで、ブラウザの JavaScript エンジンの限界が早くも見えてきました。これで AI を組むのはちょっとつらそうです。JavaScript は iPad でも表示できるグラフィックスの部分に特化させ、AI は別の方法で走らせたほうがよさそうです。

今のところ選択肢を2つ考えています。ひとつは Ajax。Google マップなどで使われているサーバーとの非同期通信です。もうひとつは囲碁のプログラムでよく使われている GTP (Go Text Protocol) というプロトコルです。

サーバー側をどのようにするか、いろいろ調べてみたいと思います。

(つづく)

| | コメント (2) | トラックバック (0)

2012/05/17

JavaScript (11) ボタンの設置

グラフ理論の取り込みがまだなのですが、[パス] ボタンを設置し、それなりに石を並べられるようになったので、goban03.js として公開します。
図11 Goban 0.3
【図11 Goban 0.3】

今回は HTML 上に、

<input id="white" type="button" value="パス Pass" onclick="pass()">

といったタグでボタンを作り、JavaScript のソースの中でボタンが押されたときの関数 pass() を定義しています。JavaScript の例題としては、非常にポピュラーな内容と言えるでしょう。

それから、Aptana Studio 3 を統合開発環境 (IDE) にすると、ブラウザは Firefox を使うように促されるのですが、Goban 0.2 では石が置けないことが判明しました。調べた結果、マウスイベントの処理方法がブラウザによって違うためと分かりました。なるべく修正が少なくなるよう、対応しました。

先日、iPad を購入したことを受け、Safari もダウンロードしてみたので、私の PC には、IE, Chrome, Safari, Firefox の4種類のブラウザがインストールされています。性能や機能が微妙に違うので、時と場合に応じて使い分けています。

JavaScript も EcmaScript という標準の仕様が出てきたものの、まだまだブラウザによって非互換もあるので、大変そうですが、なるべく基本的な機能を使って、どの環境でも動くプログラムが作れるようにしたいと思います。

とにかく、今作っている JavaScript プログラムは iPad で動いているので、そのことに関しては満足しています。Small Basic も Java アプレットも iPad では動きませんでしたから。

引き続き、Goban を改良していきます。

(つづく)


| | コメント (0) | トラックバック (0)

2012/05/07

JavaScript (3) Audio でサウンド再生

phi さんのブログの記事「JavaScript で HTML5 Audio を使ってサウンド再生. 連続再生対策してるからゲームの SE にも使えるよん♪」にトラックバックしています。

上記の記事の内容を元にJavaScriptから Audio を再生するプログラムを作りました。sound.js で公開します。Java の囲碁プログラムで使っていた3つの効果音(着手のときの音、ボタンを押したときの音、エラー時の音)を再生できます。

図2 Audio 再生ボタン
【図2 Audio 再生ボタン】

Java のプログラミングではフリーの .wav 形式の音源を .au 形式に変換して利用しましたが、JavaScript では、複数のブラウザに対応するため、 .wav, .mp3, .ogg の3つの形式を用意します。変換にはフリーソフト Switch を利用しました。

絵が描けて、音が出せれば、ゲームは作れそうですよね。

(つづく)

| | コメント (0) | トラックバック (0)