参考：Qiita では印刷がうまくできません。プリントしたい人や PDF 化したい人は http://gurakura.sakura.ne.jp/hellomondrian/makecanvas/ を見て下さい（同じ内容です）。
はじめに
プログラムで絵を描くといっても、描く場所がないと始まりません。まずはキャンバス作りから始めていきます。
大きさの指定
Processing では、何もプログラムを書かずに、そのまま実行ボタンを押しても小さなウィンドウが表示されます。このウィンドウこそが、プログラムでアニメーションなどが描かれる場所、キャンバスです。
キャンバス（ウィンドウ）のサイズは size という関数で設定します。いきなり「関数」と言われても、何？という疑問もあるかと思いますが、それは順次説明していくとして、まずは以下のプログラム（コードとも言う）を入力し、実行してみて下さい：
size(400,300);
何も書かないで実行したときに比べて、より大きなウィンドウが表示されたと思います。
size の直後に、「(400,300)」と書いてあります。これは、size 関数の引数（パラメータともいう）です。size 関数は、size(横幅,高さ) という使い方をします。横幅も高さも単位はピクセル数で指定します。
ピクセルというのは画素のことです。英語ではpicture element と書かれます。
それを短縮すると pic-el となり、ひとつの単語として書く場合は pixel と記述されます。
ピクセルについて良くわからない人は、Photoshop の虫眼鏡ツールで画像をずーーーーっと拡大していくと、四角形からなるモザイク画のようになります。その四角形ひとつひとつがピクセル（画素）です。
閑話休題。
ここまでの説明をまとめると、size(400,300) というプログラム片は、描画対象となる領域を、横 400 ピクセル、縦 300 ピクセルにせよ、とコンピュータ（というか Processing）に指示を出していることに他なりません。もちろん、size(700,700) などとすると、正方形のキャンバスが得られます。
エラーが表示された人は、セミコロン（;）の入力を確認して見て下さい。size(400,300) ではなくて、size(400,300); と最後にセミコロンを付ける必要があります。
なぜこのようなものが必要なのか、ものすごく大雑把に言ってしまうと、size(400,300) というのは、size 関数を引数 400 と 300 で呼び出す「文」となります。文の区切りを Processing に伝えるため、文の終わりにセミコロンを付けるわけです。
Processing で使用される言語は Java という言語ですので、この辺りのことを詳しく知りたい人は Java の参考書などを見て下さい。
コラムその１：なぜ size なのか？
なぜ描画対象の大きさを指定するのに size という関数を呼ばなければならないのでしょうか？makeCanvas とか setCanvasSize とかでは何故駄目なのでしょう？そんな疑問を持った人もいるかもしれません。
それは Processing というソフトウェアは人（ヒト）が作りしものであり、
神が作ったものではないからです。要は、作った人（＝Processing の作者）がそのように決めたーという話であり、それ以上でもそれ以下でもありません。
なぜ描画対象の大きさを指定するのは size という関数なのか？という問は、なぜドラゴンクエストにおける体力回復の魔法がホイミという名前なのか？という問題と同様であり、とどのつまり、作った人（達）が、そのように決めたから、という話に他なりません。
このように、プログラミングの学習においては、論理的に導き出されるものと、size 関数の名前のように「そういうものだから」と論理的ではない部分を区別して理解・学習することが重要となります。論理的ではない部分について、「何故そのようになるのか？」と悩んでいても論理的な答えは無いのですから。
コラムその２：プログラミング言語で関数？
高校の数学では、y=f(x) などという記述を見たことがあるかと思います。
f が関数の名前で、f(x) というのは関数 f の引数に x を使っているという意味でした（思い出しましたか？）。size という関数は引数を 2 つ必要とする関数です。size(400,300) という記述は、最初の引数に 400 を、2 番目の引数に 300 という値を与えて、size 関数を実行する（呼び出す、等ともいいます）という意味です。
Processing が利用している Java という言語における関数と、数学の関数は必ずしも同一の概念ではありません。しかし、引数としてある値を与え、それを評価するというところは似ていると思います。関数と呼ぶのも「さもありなん」といったところでしょうか。
地の色（背景色）を指定する
size 関数を呼ぶことで、自由にーといっても、それぞれの計算機毎に制限があり「その制限の中において」という意味ですが（無制限な自由というのは、なかなかありません…）ー大きさが設定できるようになりました。
しかし、皆さんが実際のキャンバス（物理的な描画対象としてのキャンバス）を選定する場合でも、大きさ以外に素材などにも拘るかと思います。特に、キャンバス全体を塗りつぶさず、地の色も活用する場合などでは、キャンバス地の色も重要な要素となります。
このセクションでは、キャンバスの地の色について、その設定方法を説明していきます。
size 関数では、大きさを指定（設定）できましたが、地の色（ウィンドウの背景色）は指定できませんでした。地の色を指定するためには background 関数を使います。background 関数には、様々な使い方がありますが、ここでは RGB 値による指定方法を説明します。background 関数の使い方は、
background(R の値, G の値, B の値 )
となります。R, G, B それぞれの値は 0 から 255 までの値を指定します。
どのような RGB 値がどのような色になるのかは、Photoshop などで事前に調べておくのが良いでしょう。例えば、古代紫（こだいむらさき）という色は、R が 137 で、G が 91、B が 138 だそうです。
コンピュータに限った話ではないのですが、複数の値について言及する場合、
(R,G,B)=(137,91,138)といった表記法がよく用いられます。このシリーズでもこの表記方法を用いていきます。
コンピュータにおける 100% の白は、RGB それぞれが 255 という値をとります。
これは (R,G,B)=(255,255,255) に他なりません。
例えば、100% ホワイトの地の色を持つ、大きさ 400 x 300 のキャンバス（注：size(400,300) の描画領域をこのように示すことがあります）を作る場合は次のようなプログラムとなります：
background(255,255,255);
size(400,300);
このプログラムを実行すると、内部が白で塗りつぶされた、大きさ 400x300 のウィンドウが表示されます。
さて、ここまでで 2 つの関数が出てきました。それぞれの関数はいつ処理される（実行される）のでしょうか？プログラムは基本的に上の行から下の行に向かって順番に実行されていきます。つまり、上のリストの場合、background 関数の後に size 関数が実行されます。
プログラムにおいては、処理の順序（この場合は関数の実行順序ですが）は非常に重要です。そのため、次のプログラムとすぐ上に掲載しているプログラムとは、全く異なるプログラムです。
size(400,300);
background(255,255,255);
念のため、どちらも実行してみて下さい。どちらも同じ結果になったかと思います。
もしかすると、皆さんの中には、「意味の異なるプログラムなのに、違いが無い。変だ。おかしい。訳わからない。」等と思う人もいるかもしれません。実は、プログラムの世界においては、異なるプログラムでも、実行結果は同じとなるものが存在します。
今回の場合、キャンバスの大きさを指定する処理と、地の色を指定する処理では、どちらが先に実行されても構いません。この場合、正解といったものは無いので、好きな書き方をして下さい。
せっかくなので、先程例として示した、古代小豆色の背景色を持つ正方形のキャンバスを設定するプログラムを示して、このセクションは終わりとします。
background(137,91,138);
size(400,300);