p5.jsのサインアップ
この授業では、プログラミングを記述する（=コーディング）ためにp5.jsという開発環境を使用します。
p5.jsを活用するためには、アカウントを作成するためのサインアップが必要になります。
以下の手順に従ってサインアップしましょう。
１）ウェブブラウザからp5.jsのEDITOR画面にアクセスする。
２）EDITOR画面の右上にあるSign upボタンをクリックしてサインアップ画面を表示する。
３）必要な項目を入力する。
・User Name には開発環境で使用するハンドルネームを記載します。本名を使用する必要はありません。
・Email を入力します。
・Password を入力します。（パスワードは忘れないようにメモしておきましょう。）
・Confirm Password に上で入力したパスワードと同じ記号を確認のため入力します。
・Sign upボタンを押して登録ができれば準備完了です。
４）次回からp5.jsのEDITORを使用するときは、毎回 Log inして使用するようにしましょう。
・Log inにはメールアドレスとパスワードの入力が必要になります。
コーディングの準備
１）Examplesを選ぶ
FileメニューからExamplesを選択し、Examples画面で、Hello P5: shapesを選択します。
２）コードの複製
Hello P5: shapesのオリジナルのコードを複製しましょう。
FileメニューからDuplicateを選択すると、コードの複製が作成されます。
コードを記述するエリアの上部に、コード名が Hello P5: shapes copy として表示されるので、コード名をクリックします。コード名を編集できるので、Hello P5: shapes 0000cmu などのように、名称を変更しておきましょう。
注意：日本語は使用できません。必ず文字入力を半角英数入力に設定を切り替えて名称を入力するようにしましょう。
コードを変更してみる
はじめに、オリジナルのコードの動作確認をしてみましょう。再生ボタンをクリックしコードを実行するとPreviewエリアにコーディング結果が表示されます。
次に、コードを変更してみましょう。コードの８行目 background(200); の数値を以下のように変更して実行してみましょう。
background(255,0,0);
コードの変更によって、背景色が赤く表示されます。（色表示の仕組みについては今後の授業で解説します）
更に、17行目の ellipse(240, 240, 80, 80); の数値を自由に変更してみましょう。
コードの保存
コードの変更が出来たら保存をしてみましょう。FileメニューからSaveを選択するとクラウド上にコードが保存されます。次にコードを使用する際は、FileメニューからOpenを選択し、必要なコードを開きます。
コードのシェア
作成したコードをシェア（他者と共有）することができます。FileメニューからShareを選択すると、コードをシェアするためのウィンドウメニューが表示されます。メニューのPresentの欄に表示されている文字列をコピーしてメモ帳やWordなどにコピーすると、コーディングで作成した作品へのリンクができるようになります。
課題３ p5.jsのEDITORで Hello P5: shapes プログラムを複製しコードを自由に書き換えてシェアしてください。 １）p5.jsのEDITORのFileメニューからExamplesを選択し、サンプル・プログラムのリストから Hello P5: shapes を選ぶ。 ２）Hello P5: shapes の名称を変更する。（例 Hello P5: shapes 0000cmu） ３）コード内の数値を自由に書き換えてオリジナルの作品を作る。 ４）作品が完成したら保存のうえ、FileメニューからShareを選択し、ウィンドウメニューからPresentの欄に 表示されている文字列をコピーして、文書作成ソフト（Wordなど）にペーストする。 作成した作品へのリンク用文字列が記述された文書を、 A4サイズ・縦位置・横書き PDF形式のファイルにしてアップロードしてください。 締切：10月22日（木）17:00まで