.. note::

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

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

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

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

.. _draw_a_matchmaker:

マッチメーカーを描画しよう
============================

あなたは現在、Processing開発環境（または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)``: スクリーンに線を描画します。

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