p5.jsのWebエディターでコードを保存する
ログインは Github もしくは Google のアカウントでも可能ですが、p5.js の Web エディター専用にアカウント登録をすることもできます。以下、アカウント登録する流れを説明します。
まず、書き上げたコードを何かしらのテキストエディター（メモ帳など）にコピペしておいてください。続く作業で万が一消えてしまったときのバックアップです。
次に、p5.js の右上のほうに「Log in or Sign up」という薄い文字が書かれているので、「Sign up」のほうをクリックします。
以下のようなアカウント登録の画面が開きます。
特に迷うところはないと思います。好きなユーザー名（User Name）を決めてください。ちなみに私のユーザー名は ojk です。
登録した Email アドレスに確認を求めるメール（Email Verification）が p5.js から届きますので、忘れずに「Verify Email」を押してください。迷惑メールボックスに届くこともあるので注意しましょう。
完了したら、登録したユーザー名とパスワードで Log in してください。おそらくはさっきのソースコードが残っているかと思いますが、もし消えていたら事前にコードを退避しておいたテキストエディターから p5.js のエディターにコピペします。
まず最初にプロジェクト（コードを含む p5.js の関連情報）の名前を設定しておきます。
p5.js では、Web エディターを開いた時点で自動的に名前が付けられているので、これを変更します。再生／停止ボタンの行の右端に、以下の例では「Alder acrylic」と書かれた部分がありますが、これがプロジェクト名です。名前の右側の鉛筆マークをクリックすると名前が変更できます。
そして、左上の File メニューから「Save」を選べば、いま表示しているソースコード（プロジェクト）が p5.js 上に保存されます。
この際、PC 上のどこに保存する…といったダイアログは表示されません。プロジェクトは自分の PC に保存するのではなく、クラウド上（インターネット上）に保存されるので、家の PC でも学校の PC でもどこから p5.js にログインしても保存したプロジェクトを開くことができます。
過去に保存したプロジェクトを開くには、File メニューから「Open」を選べば一覧が表示されます。一覧に表示された各プロジェクトの右側にある ▼ マークから削除（Delete）や複製（Duplicate）などができます。
なお、プロジェクトを一度保存すると、File メニューの内容が変化します。複製やダウンロードに加え、共有（Share）という項目が登場します。
共有ダイアログ（Share This Sketch）の中の Present という部分に書かれた URL を誰かに伝えれば、自分の作ったプログラムを見てもらったり体験してもらったりすることが簡単にできます。これが p5.js（の Web エディター）の素晴らしいところですね。
例えば、［ここから］私が作ったサンプルプログラムを触ってもらえます。マウスの左右のボタンをドラッグしてみてください。
Discussion