ともろーの日記

Initializing . . .

Processing ではじめるプログラミング 4日目(いろいろなプログラムを書いてみる)

  1. Point(点)
  2. f:id:tomorrow63:20160417223933p:plain:w300
    point(50,50);
    

    point(x座標,y座標); と書きます。


  3. Line(線)
  4. f:id:tomorrow63:20160417224612p:plain:w300
    line(0,0,100,50);
    

    line(始点のx座標,始点のy座標,終点のx座標,終点のy座標); と書きます。


  5. Triangle(三角形)
  6. f:id:tomorrow63:20160417225338p:plain:w300
    triangle(10,10,40,20,30,50);
    

    頂点を点A,B,Cとすると triangle(点Aのx座標,点Aのy座標,点Bのx座標,点Bのy座標,点Cのx座標,点Cのy座標); と書きます。


  7. Quad(四角形)
  8. f:id:tomorrow63:20160417225833p:plain:w300
    quad(10,10,20,60,50,70,60,30);
    

    頂点を点A,B,C,Dとすると quad(点Aのx座標,点Aのy座標,点Bのx座標,点Bのy座標,点Cのx座標,点Cのy座標,点Dのx座標,点Dのy座標); と書きます。


  9. Rect(長方形)
  10. f:id:tomorrow63:20160417230320p:plain:w300
    rect(10,20,50,40);
    

    長方形の左上の頂点を基準点とします。 rect(基準点のx座標,基準点のy座標,長方形の幅,長方形の高さ); と書きます。


  11. Ellipse(だえん)
  12. f:id:tomorrow63:20160417230937p:plain:w300
    ellipse(50,50,40,60);
    

    円の中心を基準点とします。 ellipse(基準点のx座標,基準点のy座標,横の直径,縦の直径); と書きます。

これらは座標の値を自由に決めることができます。いろいろな形を作ってみましょう。

プログラムは上から順番に読み込まれます。すなわち、上に表示したいものは後に書くといいです。

f:id:tomorrow63:20160417231335p:plain

ellipse(50,50,50,60);
point(40,40);
point(60,40);
line(40,60,60,60);

このようなこともできます。

Processing ではじめるプログラミング 3日目(実際にプログラムを書いてみる)

それでは実際にプログラムを書いてみましょう。

Processingで線はこのように書きます。

line(10,20,50,60);

実行するとこのようになったのではないのでしょうか

f:id:tomorrow63:20160414235321p:plain:w300 f:id:tomorrow63:20160415143939p:plain:w300

"line()"とは線を描くということを表しています。

そして中の(10,20,50,60)は、「(10,20)から(50,60)に向かって線を引いてね」ということを意味しています。

ディスプレイウィンドウには座標というものがあります。

f:id:tomorrow63:20160415000300p:plain

左上が(0,0)で右方向にX座標、下方向にY座標となっています。

ディスプレイウィンドウのサイズを変えてみましょう

size(300,300);
line(10,20,50,60);

ディスプレイウィンドウのサイズが変わりました。

f:id:tomorrow63:20160415143918p:plain:w300

線を複数書くこともできます。

size(300,300);
line(10,20,50,60);
line(60,70,100,110);


f:id:tomorrow63:20160415201032p:plain:w300

これを工夫するとこのようなことができます。


f:id:tomorrow63:20160415202251p:plain:w300

size(300,300);
line(150,20,220,280);
line(220,280,50,100);
line(50,100,250,100);
line(250,100,80,280);
line(80,280,150,20);

某大学 理系学部 第二回コンピューター授業

先週、大学でのコンピューター授業がパソコンの起動から始まったということを書きました。


tomorrow63.hatenablog.com

そして、その内容を友人数名に聞いたところ彼ら全員が「この授業はとても簡単」と述べていました。

ということは、大学生の能力に問題があるというわけではなさそうです。

恐らくガイダンスだったので、このような授業になったのでしょう。


そして、第二回のコンピューター授業はWordの使い方の講座でした。

主にWordの数式入力の練習でした。(けっこうしんどい)

あと、僕が知らなかったこととしては数式を入力するときのフォントがJIS(日本工業規格)で決まっているということぐらいですかね。なんとなく習慣があるのかなと感じていましたが、JIS(日本工業規格)で決まってるとは意外でした。


来週はもっと楽しい授業になりますように ☆ミ

Processing ではじめるプログラミング 2日目(きほん)

Processingを起動するとこのような画面が出てきます。

f:id:tomorrow63:20160414231936p:plain:w300

名称はこんな感じです。

f:id:tomorrow63:20160414232028p:plain:w300

  • Runボタン
  • Stopボタン
    • 実行中のプログラムを停止するときに使います。
  • テキストエディタ
    • 実際にコードを書くときに使います。
  • コンソール
    • プログラムが出力する文字列を表示します。

    実際にプログラミングをするとなると、

    1. テキストエディタソースコードを書く
    2. Runボタンを押す
    3. コンソールに文字列/ディスプレイウィンドウが表示される

    という具合です。

    Processing ではじめるプログラミング 1日目(インストール)

    まず processingのウェブサイトへ行きます。

    https://processing.org

    f:id:tomorrow63:20160413231739p:plain:w300
    Download Processing をクリック
    f:id:tomorrow63:20160413232041p:plain:w300
    寄付金額を選んでDownloadボタンをクリック
    f:id:tomorrow63:20160413232334p:plain:w300
    自分のパソコンに合ったものをクリックしてダウンロード

    ダウンロードしたものを開くとアプリケーションが出てくるので、わかりやすい場所(自分のアプリケーションフォルダの中)に移動させればOKです。


    おまけ なぜ初めてのプログラミング言語にProcessing が良いと思ったのか

    Processingの特徴は、少しのプログラムを書くだけで直線や、四角形、丸などを作ることができます。

    プログラミングを勉強し始めた人の多くは、cやjavaといった言語から始めます。 そして、"Hello World."の文字をコンソールに出すことから始めます。


    この段階で挫折してしまう人がいます。その人達は、「これができてどうなるの?」と思っているのではないでしょうか?

    "Hello World."の文字列が出てきても、結局は「文字列がでてきている」だけなので正直つまらないと思います。(私はそうでもないですが、)

    そこでProcessingを用いることで、「自分の書いたコードが形を変えて出てくる」という感動が生まれます。