カテゴリー別アーカイブ: 開発環境の使い方

開発環境のセットアップやプロジェクトの作成方法についてです。

JSでmbed

この記事は慶應ロ技研 Advent Calendar 4日目/JavaScript Robotics Advent Calendar 5日目になります

←3日目:F^3RCの話|4日目:レーザー加工機の紹介→

あと10分程で誕生日を迎えます、Piroroです。百合ください。よろしくお願いします。

突然ですが皆さん、JavaScriptはお好きですか?私は大好きです。++[[]][+[]]+[+[]] == 10がtrueになる謎の多い言語仕様や、雨後の筍のように現れては消えていき諸行無常を感じさせる様々なフレームワークなどが大変魅力的ですね。
そんなJavaScriptですが、NodeJSでサーバーサイド、Electronでデスクトップアプリを作りスマホアプリはReactNative、とどんどん活躍の場を広げているものの、組み込み分野ではあまり活躍していません。そこで今回はmbedをJavaScriptで制御する話です。 続きを読む

OpenGLでオセロを作る①「ボードの描画」

岡野です。
初のシリーズ物です。
僕がプログラミングで最初に作ったのがオセロでした。
最初はコマンドライン上で座標を入力して置いてましたが、OpenGLを使ってGUI化してからはクラスでよくドヤ顔してました。

  1. はじめに

    OpenGLを使ってオセロゲームを作ります。
    さらに、敵コンピュータを作って簡単な人工知能を作ってみたいと思います。
    ゲームとそのゲームで動く敵コンピュータを自分で作って闘いながら改良していくのがプログラミングの醍醐味だと思います。

  2. プロジェクトの作成

    まずは、こちらを参考にOpenGLのプロジェクトを作成します。

  3. 早速、オセロボードの作成

    ではさっそく、オセロのゲームボードを表示させてみましょう。
    まず、下のソースコードにをコピペしてください。
    ところどころ、コメントの//が表示されてませんが、コピペはできます。

    
    #ifdef __APPLE__
    	#include <GLUT/glut.h>
    #else 
    	#include <glut.h> 
    	//#include <GL/glut.h> 
    #endif
    
    void display(void)
    {	
    	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    	//ラインを描く
    	glColor3f(0,0,0);
    	glLineWidth(3);//線幅の指定。省略可。指定しなければ1。
    	glBegin(GL_LINES);
    	for(int i=0;i<9;i++){
    		glVertex2i(80+80*i,720);//縦線上端
    		glVertex2i(80+80*i,80);//縦線下端
    		glVertex2i(80,80+80*i);//横線左端
    		glVertex2i(720,80+80*i);//横線右端
    	}
    	glEnd();
    
    	//点を4箇所描く
    	glColor3f(0,0,0);
    	glPointSize(10);
    	glBegin(GL_POINTS);
    		glVertex2i(240,240);
    		glVertex2i(240,560);
    		glVertex2i(560,240);
    		glVertex2i(560,560);
    	glEnd();
    	glutSwapBuffers();
    }
    
    int main(int argc, char *argv[])
    {
    	glutInit(&argc, argv);
    	glutInitDisplayMode(GLUT_RGB | GLUT_DEPTH | GLUT_DOUBLE);	
    	glutInitWindowSize(800,800);//ウィンドウの画面の幅と高さを指定
    	glutInitWindowPosition(0, 0);//ウィンドウの場所を指定
    	glutCreateWindow("Othello");//ウィンドウの名前
    	glClearColor( 0 , 0.7, 0, 1);//オセロ盤の色
    	gluOrtho2D(0, 800, 800,0);//座標系の設定
    	glutDisplayFunc(display);//描画関数を指定
    	glutMainLoop();
    	return 0;
    }
    
    

    visual studioでは「デバッグ」->「デバッグ無しで実行」を押してみると、コンパイルされ、実行されます。
    Xcodeでは、左上の再生ボタンで実行されます。

    実行してみると次のように表示されると思います。
    othello1
    これでオセロボードが作成できました。

  4. 解説

    OpenGLの関数にはgl~やglu~という名前がついています。
    main関数を見ると、OpenGLの初期化に様々な関数が呼び出されていますが、関数名やコメントを見れば、大体察しが付くと思います。
    とりあえず、今回は「おまじない」ということにしてスルーします。
    基本的には、glutDisplayFunc関数の引数に、描画の関数の名前を与えると、描画するときに、その描画関数が呼び出されます。
    サンプルコードの場合は、display関数が与えられているので、描画をする時はdisplay関数が呼び出されます。
    display関数の中で、線や四角形などの図形を描画します。

    基本的には、
    1.glColor3f関数でRGBで色を指定し、
    2.glBegin関数の引数で図形を指定し。
    3,glEnd関数との間に、glVertex2i関数で図形の頂点を指定します。

    glColor3fの引数は0~1で表します。

    glBeginの引数は、ググればいろいろ出てきますが。
    GL_LINESは直線。
    GL_QUADSは四角形。
    などいろいろあります。

    glVertexAB関数では、A={2,3}が次元を表し、B={i,f,d}が引数の型を指定します。
    例えば、3次元で浮動小数点数float型で頂点したい場合はglVertex3fを使います。

    簡単ですが、これだけで、OpenGLは半分理解できたと思っても過言ではありません。

  5. 次回は石を表示させてみましょう。

jsdo.itで手軽にJavascriptゲームプログラミング入門

岡野です。
産まれも育ちも広島で、広島風お好み焼きを愛して止まないのですが、
上京して文化の差で一番驚いたのは、こっちの人はお好み焼きにうどんを入れるという概念が全く無いことです。

豚玉うどんダブルで(^o^ )

という広島では一番オーソドックスな注文をすると、

はぁ(゚∀゚??

という反応をされます。
異国の地に着いたのかと思いました。
でも探してみると、店長が広島出身の広島風お好み焼き店があったりします。日吉や元住吉にも。
ぜひ食べてみてください。

さて、夏休みが近づいてきました。
この時期は、図書館のプログラミングの入門書がごっそり借りられる季節であります。
プログラミングを始める目的として一番多いのは、やはり「ゲームプログラミング」だと思います。
そこで、今日はJavascriptとゲームプログラミング入門にふさわしいJavascriptライブラリのenchant.jsと、Javascriptでのプログラミングに便利なwebサービスであるjsdo.itを紹介したいと思います。

game

ロボットのプログラミングで最も使われる言語は勿論、C言語ですが、
C言語でプログラミングを始めるには、visual studio等の開発環境をパソコンにインストールする必要があります。
さらに、そこからGUIのゲームを作るとなると、OpenGLやDirectXなどのグラフィックライブラリを準備する必要があります。
プログラミングの概念を理解するにはC言語は最適だと私は思いますが、
入門者には、そこまで一人で準備するのはある種の勇気が要り、かなり大変だと思われます。

新入生には、まだ周りにそんなにパソコンに詳しい友達や先輩は少ないでしょうから(経験談)。
そもそも、1年生はまだプログラミングの授業無いですし。。
その点、うちみたいな技術系サークルにはパソコンに詳しい輩が比較的多いですからねぇやっぱり、、特にうちとかねぇ。。壁|ω・) ジー

そこで!今回ご紹介するのは、Javascriptというプログラミング言語と、jsdo.itというwebサービスです。

まず、JavascriptはHTMLやCSSと共にWebで使われるプログラミング言語で、
ホームページに動的な表示をさせたいときなどに使います。

JavascriptはC言語と違い、コンパイラは必要なく、
「メモ帳」などのテキストエディタと、Internet ExplorerやGoogle ChromeなどのWebブラウザさえあれば、すぐにプログラミングを始めることができます。
つまり、新たにパソコンにインストールするソフトはありません。

プログラミング作業の流れは、
テキストエディタでJavascriptのプログラムとHTMLファイルを書いてパソコンの中に保存し、
webブラウザでパソコン内のHTMLファイルにアクセスすると実行できます。

しかし、エディタとブラウザを行ったり来たりするのは少し面倒です。
そこで便利なのはjsdo.itというwebサービスです。
jsdo.itでは↓画像のようにwebブラウザ上の左側のエディタでプログラミングし、右側の画面ですぐさま実行できます。

editing
他の人の作品やソースコードを見ることもできますし、
forkすれば自分もそのプログラムを自分の作品リストにコピーして編集できます。
学術論文と同じで、view数やfork数が多いほどあなたのプログラムは優れているということになります。
他人に見られたくなければ、「private」にして自分にしか見れないようにすることもできます。
また、自宅のパソコンでなく、大学の図書館のパソコンなど別のパソコンでもログインすればいつでも始められます。
jQueryやenchant.jsなど人気のライブラリも多数用意されているので、わざわざダウンロード/アップロードする必要がなく簡単に追加できます。

ユーザ登録にはGoogleやFacebook,Twitterなどのアカウントがあれば一瞬です。
私も最近始めたばかりですが、普段、自宅のパソコンとノートパソコンと研究室のパソコンの3台併用しているので、いつでもどこでも好きな時にプログラミングの続きができるのでかなり便利です。

Javascriptは決してマイナーな言語ではなく、Windows8アプリの開発言語として使われたり、Node.jsなどサーバーサイドスクリプトをJavascriptで書けたり、Titaniumを使えばiPhoneアプリやAndroidアプリが作れるなど、さまざまなシーンで使われる言語らしいです。
名前が似ているJavaに退け劣らず非常に汎用性の高い言語です。
覚えておいて決して損はありません。

初心者の方は、ゼロから書き始めるより、他の人の作品で面白いなと思ったものをforkして、ソースコード読んでみて、書き換えてチートして動作を確認しながら学んでいくのが王道だと思います。

あとは、jsdo.it! ( just do it! )

(追記)
とは言っても、実際にはJavascript”だけ”では簡単にはゲームは作れません。
実際には、jQuery,enchant.js,WebGL,Bootstrap,D3.js等のライブラリを用いてプログラミングをします。
Javascriptでゲームプログラミングする上で、最もおすすめするのは、enchant.jsです。
メリットとしては
・コードが短くかける。ホントに
・日本人が作ったライブラリなので日本語の資料(サイトや本)が多いので初心者にも安心
その他

実際に、ここで僕が書いたサンプルコードなり、コーディングする作業動画があればいいのですが、
既にenchant.jsの開発元が実際にコーディングしながらわかりやすく解説している動画がYutubeにありましたので、ご紹介します。

ライブコーディングは10分あたりから始まります。

Elecrowでプリント基板発注

プリント基板の発注と言えばSeeedStudioのFusionPCBやiTead  StudioのPCB Prototypingなどが有名ですが、今回はElecrowでプリント基板を発注してみました。

Elecrowのウェブサイトに乗っている製造条件などからして、おそらくSeeedStudioやiTeadと同じ製造工場を使っていると思われます。基板サイズや価格はSeeedStudioなどとほぼ同じですが、レジストの色を追加料金なしで、緑のほか、赤、白、青、黒、黄色から選択できます。SeeedStudioの場合、緑以外のレジストは10~20ドルの追加料金がとられるので緑以外の基板を作りたい場合は現時点ではElecrowが最安と思われます。

 

発注

発注時に提出するデータはSeeedStudioのものと同じで大丈夫です。ウェブサイトにはMechanical layer : pcbname.GMLも必要と記載されていますが、他のレイヤに基板外形情報が入っていれば不要です。

今回の発注は下記のようになりました。

  • Qty – 10
  • Layer – 2
  • PCB Thickness – 1.6mm
  • PCB Dimension – 10cm Max * 10cm Max
  • PCB Color – Blue
  • Suface Finish – Hasl
  • E-Test – 100% E-test

Sub-Total : $23.90
Registered Air Parcel (Weight: 210 g. ) : $6.34
Total : $30.24

円安の影響もあり、PayPalへの請求は3118円でした。これでも十分安いです。

 

発注から到着まで

基板を発注したのが日本時間で2013/4/21  13:20で、到着したのが5/1 11:32でした。ちょうど10日で到着したことになります。プリント基板は10回ほど発注したことがありますが今回が最速でした。しかも日本がゴールデンウィーク中だったため通関に1日余計にかかっていることを考えると驚異的なスピードです。(たまたまラッキーだっただけかも知れません)

以下は発送状況です(記載のない限りは日本時間)

2013/4/21  13:20 Order Confirmed
2013/4/21  13:27 New status: Processing
2013/4/21  19:12 New status: In production
2013/4/25  19:19 製造完了と発送と通知する内容のメール。基板の写真が添付されている。
2013/4/30  10:37 New status: Traceable このメールに追跡番号が記載されている。

国内の追跡
tracking2

発注した日が日曜日だったにもかかわらずその日のうちに製造を開始したり、完成した基板の写真をメールで送ってくれるなど、スピード、サービス面の両方で素晴らしいの一言につきると思います。

基板

基板は合計13枚届き、その全てがE Test済みでした。(ちゃんとパッドの上にフライングプローブの痕があったので嘘ではないでしょう)

SONY DSC
SONY DSC

0.5mmピッチのパッドもきれいにできています。

SONY DSC

FusionPCBなどと同じように製造番号は勝手に追加されてしまいます。

SONY DSC

13枚中2枚、許容が難しい傷(レジストが完全にはがれ銅板が露出)と表面処理のムラ(SMDパッドにはんだの山)がありましたが、他の11枚は小さなスリ傷はあるものの、きれいにできていました。

参考画像(部品を実装した状態)SONY DSC

 

これからプリント基板の発注にチャレンジする方はElecrowでカラフルな基板を作りましょう!

山口

Arduinoやらないか。

研究室の窓際の席をじゃんけんで勝ち取った岡野です。
はるか遠くに、東京タワーとスカイツリーが見えます。
SONYのイヤホン「MDR-E931SP」をかれこれ5年愛用しています。
最近はカナル型イヤホンしか店頭に置いてなかったりで、残念ですね。

さて、研究室の研修でArduinoをやって、感動したので紹介しときます。

  1. Arduinoとは?

    Arduinoとは、

    …そんなことはWikipediaさんに任せて早速やってみましょう!

  2. Arduino Unoの準備

    arduino_8led

    アマゾンで買えます。->Arduino Uno

  3. Arduinoのインストール

    こちらより、安定版の「Arduino 1.0.4」をダウンロードしてください。
    ここでは、Windowsを選択します。
    ダウンロードしたzipファイルを展開してください。
    展開先はどこでも構いません。
    以上でインストールは終了です。
    簡単でしょ?

  4. USBドライバのインストール

    インストールは終了しましたが、これではおそらくまだ書き込めないはずです。
    まず、ArduinoをUSBでパソコンと接続します。
    (この状態で、次章に行ってうまく書き込めたら、ここから先はする必要はありません。)

    うまく書き込めない場合、「スタート」->「コンピュータ」->右クリック->「プロパティ」->「デバイスマネージャー」を起動します。
    「ほかのデバイス」を選択し、「不明なデバイス」を右クリックし、「ドライバソフトウェアの更新」を選択し、「コンピュータを参照してドライバーソフトウェアを検索します(R)」を選択。
    参照で先ほどの、展開フォルダ「C:\Users\~~~\arduino-1.0.4」(現在)を選択し、「サブフォルダーも検索する」にチェックが入ってることを確認して「次へ」で終了。

  5. Arduinoの使い方。

    展開先の「arduino.exe」を起動します。
    管理者がどーたらこーたら聞かれたら、「詳細」を押して実行しましょう。
    面倒な人は、デスクトップにショートカットし、タスクバーにドラックアンドドロップするとタスクバーからいつでも起動できます。私もそうしてます。
    すると下のようなエディタが開かれると思います。

    2進数カウンタのプログラム

    コンパイルするには、「ファイル」の下のチェックマークをクリックします。
    Arduinoに書き込んで実行するには、チェックマークの隣の矢印マークをクリックします。
    書き込めない場合は「ツール」->「シリアルポート」のCOMxのxを変えてみてください。

    例として、下のような回路を作り、

    上のソースコードを入力し、実行すると、こんなになります。

    2進数カウンタができました。

    回路はそのまま、少し変更すると、ナイトライダーができます。

  6. サーボモータを使ってみるには?

    サーボモータのクラスを使うとサーボを簡単に使うことができます。
    こんな感じです。

  7. もっと知りたい人へ

  8. 感想

    コンフィグなどのわかりにくい設定も必要なく、使いやすいので、これはいいですね。

Processingでプログラミング入門

研究室が始まった岡野です。

研修でProcessingを教えてもらい、「これはプログラミング入門にイイ!」と思ったので、ここで紹介します。

  1. Processingとは

    …そんなことはWikipediaさんに任せて早速やってみましょう!

  2. Processingのインストール

    Processing.orgのダウンロードページよりダウンロードします。
    対応するOSを選び、ダウンロードします。
    ここではWindows(64bit)を選びます。

    数分後。。

    ダウンロードしたzipファイル「processing-2.0b8-windows64.zip」(現在)を展開します。
    展開先はどこでも構いません。
    これでインストールは終了です。
    簡単でしょ?

  3. Processinの使い方

    展開先の”Processing.exe”を実行します。

    size(200,200);
    text("Hello World!", 30,100);

    と入力し、再生ボタンを押すと実行されます。

  4. 備考

    Processing.orgにはサンプルコードが沢山あるので、いろいろ試してみると良いでしょう。

    main関数が無かったりC言語との違いは多々ありますが、Visual Studioに比べてインストールも一瞬で、アクションゲームなどのGUIアプリケーションも簡単に作れるので、プログラミング入門者にはもってこいだと思います。

    是非みなさんもお試しを。