Vscode でコードを書き始める

p5.js フォルダを開く

1. Alt + RでP5.jsのプロジェクトを開きます。

p5.js プロジェクトを作成する

1. cmd + shift + pでコマンドパレットを開き、Create a standard p5.js projectを実行。
2. Do you want to create a new directory?と聞かれるので、Yesを選択。
3. What is the name of the new directory?と聞かれるので、適当な名前を入力。
4. Do you want to use a local or a hosted version? と聞かれるので、Hostedを選択。

プロジェクトファイルの構成

• プロジェクト名（フォルダ）
  • index.html（プレビューを表示する時に開くファイル）
  • sketch.js（メインのコードを書くファイル）

vscode の画面の表示

1. プレビューは、プロジェクト名 > index.htmlを開き、右上の虫眼鏡アイコンをクリックすることで表示できます。
   
   
2. エディターには、サイドバーで選択したファイルが表示されます。プロジェクト名 > index.htmlファイルが開かれていることを確認します。
3. パネルは、出力結果を表示したい時に開きます。
   1. Ctrl + Jでパネルを開きます。（非表示にする場合も同じキーCtrl + Jを押します）
   2. Output（出力）タブを選択します。
   3. ドロップダウンから、埋め込みのライブプレビュー（Embedded Live Preview Console）をクリックします。
      
      
4. サイドバーの表示・非表示は、Ctrl + Bで切り替えることができます。

テストの提出をする

描画を要求する問題のテンプレート

• vscode のスニペットp5-setupを使って、setup()関数を作成します。

function setup() {
    createCanvas(400, 400);
    // 図形を描画するコード
}

出力を要求する問題のテンプレート

• vscode のスニペットp5-setupを使って、setup()関数を作成します。
• print()関数を使って、出力を行います。

// 例: 1 + 1 の計算結果を出力
function setup() {
    createCanvas(400, 400);
    print(1 + 1);
}