.. note::

    こんにちは、SunFounderのRaspberry Pi & Arduino & ESP32愛好家コミュニティへようこそ！Facebook上でRaspberry Pi、Arduino、ESP32についてもっと深く掘り下げ、他の愛好家と交流しましょう。

    **参加する理由は？**

    - **エキスパートサポート**：コミュニティやチームの助けを借りて、販売後の問題や技術的な課題を解決します。
    - **学び＆共有**：ヒントやチュートリアルを交換してスキルを向上させましょう。
    - **独占的なプレビュー**：新製品の発表や先行プレビューに早期アクセスしましょう。
    - **特別割引**：最新製品の独占割引をお楽しみください。
    - **祭りのプロモーションとギフト**：ギフトや祝日のプロモーションに参加しましょう。

    👉 私たちと一緒に探索し、創造する準備はできていますか？[|link_sf_facebook|]をクリックして今すぐ参加しましょう！

棒人間を描く
========================

これで、Processing Development Environment（PDE）を実行しています。 
それほど多くはありません。 広い領域はテキストエディタで、上部にボタンの列があります。 
これがツールバーです。 エディタの下にはメッセージエリアがあり、その下にはコンソールがあります。 
メッセージエリアは1行のメッセージに使用され、コンソールはより技術的な詳細に使用されます。

Processing を使って棒線画を描くことに慣れましょう。

**スケッチ**

以下のスケッチをProcessingにコピーして実行します。 新しい表示ウィンドウが表示され、応援の仲人が描かれます。

.. code-block:: arduino

    size(200,200);
    background(92, 168, 0); 
    rectMode(CENTER);
    rect(100,120,20,60);
    ellipse(100,80,45,45);
    line(90,150,80,170);
    line(110,150,120,170);
    line(90,110,70,100);
    line(110,110,130,100);

.. image:: img/draw_one1.png

.. note:: 

    それを実行し、メッセージ領域が赤くなり、いくつかのエラーが報告された場合は、スケッチに問題があります。 サンプルスケッチを正確にコピーするようにしてください。数字は括弧で囲み、各数字の間にコンマを入れ、行はセミコロンで終了する必要があります。


**原理**

ここで重要なのは、表示ウィンドウを正方形の紙として扱うことができることを理解することです。

表示ウィンドウの各ピクセルは、空間内のポイントの位置を決定する座標（x、y）です。 座標の原点（0,0）は左上隅にあり、X軸の正の方向は水平方向に右、Y軸の正の方向は垂直方向に下向きです。

重要なのは、これらのピクセル座標にどのような形と色を表示するかを指定することです。

たとえば、座標（100,120）を中点として、幅20、高さ60の長方形を描画します。

.. code-block:: arduino

    rectMode(CENTER);
    rect(100,120,20,60);

.. image:: img/draw_one_coodinate.png

表示ウィンドウと軸の関係を理解したら、このスケッチは難しくありません。いくつかの簡単なグラフィック描画ステートメントを理解する必要があります。

    * ``size(width, height)``: 表示ウィンドウの幅と高さの寸法をピクセル単位で定義します。
    * ``background(red, green, blue)``: 表示ウィンドウの背景色を設定します。
    * ``rectMode(mode)``: ``rect()`` に指定されたパラメーターの解釈方法を変更することにより、長方形が描画される場所を変更します。
    * ``rect(x, y, width, height)``: 画面に長方形を描画します。
    * ``ellipse(x, y, width, height)``: 画面に楕円（楕円）を描画します。
    * ``line(x1, y1, x2, y2)``: 画面に線（2点間の直接パス）を描画します。

詳細については、 `Processing Reference <https://processing.org/reference/>`_ を参照してください。