（仮題）楽しむプログラミング入門書　第1回　ウインドウを表示する

■使用環境
ーーーーーーーーーーーーーーーーーーーーーーーー

macOS Mojave(Version 10.14.6) 　：　他に利用しているアプリケーションが動かないのでmacOS 10.15 Catalinaを使用しない。
Processing(Version 3.5.4)

■いきなりサンプルコード
ーーーーーーーーーーーーーーーーーーーーーーーー

[ ウインドウを表示する ]

ソースコード1.1

size(300,250);

実行結果1.1

サンプルコードを打ち込んで、実行して雰囲気を感じてほしい。Processingというプログラミング言語は、こんなに簡単にウインドウが表示できるのだ。

size命令に続いて書かれている数値は、表示するウインドウの大きさを横幅、高さの順で表している。

このテキストでは、コンピュータに対して動作を指示するためのキーワードを「命令」と呼ぶ。また、命令に続いてカッコの中で指定する数値や文字のことを「引数」（ひきすうと読む）と呼ぶ。

コンピュータを動かすための指示を書き並べたものを「ソースコード」と呼ぶ。同じ意味で「プログラム」という言葉を使うこともある。ソースコードはプログラムよりも狭い意味で、人間がコンピュータに動作を指示するために書いたテキストを意味する。プログラムは、ソースコードを意味する時もあるし、人間には理解しにくいが、ソースコードをコンピュータが実行しやすい形式に変換されたものを意味する時もある。Processingを学ぶ間は、読者が読み、コンピュータへ入力するもののことはソースコードと呼べば良い。

この後に紹介するソースコードには、詳しい解説を添えていない。先ずはそのまま実行してほしい。次に数値や文字を変更してから実行すれば、それぞれの命令の意味がよく理解できる。

■サンプルコードのバリエーション
ーーーーーーーーーーーーーーーーーーーーーーーー

[ ウインドウのタイトルバーに任意の文字列を表示する ]

ソースコード1.2

size(300,250);
surface.setTitle("Hello, Processing!");

実行結果1.2

ソースコード1.2にある"Hello, Processing!"の部分を「文字列」と呼ぶ。文字データの集合のことである。Processingではデータの種類のひとつでString型（ストリングがた）と呼ぶ。"は文字列のはじめと終わりに付ける希望で、「ダブルクォーテーション」と呼ぶ。

[ ウインドウの表示位置を指定する(画面左上) ]

ソースコード1.3

size(200,100);
surface.setLocation(0,0);

実行結果1.3

[ ウインドウの表示位置を指定する(画面右下) ]

ソースコード1.4

size(200,100);
surface.setLocation( displayWidth  - width,
                    displayHeight - height );  

実行結果1.4

displayWidthはコンピュータの画面幅の値を表すシステム変数、widthはソースコード1.4で表示したウインドウの幅の値を表すシステム変数である。
システム変数とは、Processingがプログラマに提供してくれる、コンピュータシステムの各種の値を提供する変数である。
変数とは、プログラミング言語で数値や文字など各種の値を便利に扱うための名前のこと。例えば、あなたの身長が170cmだとする。紙に170という数字を書いておく。その紙を、「あなたの身長」と書かれた封筒に入れる。このような場合に、プログラミング言語では、封筒が表すものが変数で、中に入っている紙に書かれた数値が変数に設定された値であると例えられる。

[ ウインドウの中に文字を表示する ]

ソースコード1.5

size(200,100);
text("Hello, Processing!",50,50);

実行結果1.5

■演習問題
ーーーーーーーーーーーーーーーーーーーーーーーー

演習1.1　横幅300、高さ150のウインドウを表示せよ。

演習1.2　横幅500、高さ50のウインドウを表示し、タイトルバーには「ながーいウインドウ」と表示せよ。（エディタに日本語が化けて表示される場合は、Processingの設定画面を開き、お好みのフォントに変更する。）

■演習問題の解答例
ーーーーーーーーーーーーーーーーーーーーーーーー

演習1.1

size(300,150);

演習1.2

size(500,50);
surface.setTitle("ながーいウインドウ");

■ちょっと考える必要のある演習問題
ーーーーーーーーーーーーーーーーーーーーーーーー

演習1.3　横幅150、高さ200のウインドウを画面右上隅に表示せよ。
演習1.4　横幅150、高さは画面いっぱいになるウインドウを、画面右端にh

■ちょっと考える必要のある演習問題　の解答例
ーーーーーーーーーーーーーーーーーーーーーーーー

演習1.3

size(150,200);
surface.setLocation(displayWidth - width,0);

演習1.4

size(150,displayHeight);
surface.setLocation(displayWidth - width,0);