Posted on by みづこ

p5.js入門講座を見たよ

授業終わりに一気見しました。https://dotinstall.com/lessons/basic_p5js
皆さんは見ましたか？個人的に分かりにくいなと思ったポイントを、超初学者の方向けに解説してみようと思います。Windowsを使っているので、macの人は微妙に違う部分があるかもしれません。補足や訂正があればコメントにお願いします！

🌟テキストエディタ―

ドットインストールの講座ではAtom（？）を使っていましたが、講義で使ったVScodeで大丈夫だと思います。index.htmlファイルをデスクトップに新規作成して、VScode上で開きます。

追記

河合先生が用意してくださったチュートリアルでは、テキストエディタ―としてp5.js Web Editorを推奨していました、すみません！右画面でプレビューがすぐ確認できるので、効率的に開発を進められると思います。VScodeにp5.jsの拡張機能を入れてもプレビューが確認できるので、私はVScodeを使っていこうと思います！

🌟htmlの雛形のショートカット：半角の「!」を入力して、Tabキーを押す

一瞬でこれが入力されて便利

河合先生も授業内で説明していた気がしますが、念のため！

🌟p5.jsを読み込めるようにする

p5.js公式ダウンロードページ

このサイトにあるCDN(Content Delivery Network)をコピーして、先ほど作った雛形のbodyタグの中に貼り付けます。p5.jsの機能をCDNから直接読み込むため、ファイルをダウンロードしなくてもp5.jsを利用できるようになります！以下のコードをコピペするだけで大丈夫です。

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.min.js"></script>

🌟myscript.jsを読み込めるようにする

ここからは、myscript.jsというファイルを別で作って、そこにコードを書いていきます。この際の注意点としては、デスクトップ、もしくは同じフォルダ内にindex.htmlとmyscript.jsを置くことです！


別の階層に置くとファイルのパスが変わるので、パスの指定を修正しないと<script src="myscript.js"></script>が正しく読み込まれなってしまいます！以下がここまでindex.htmlの中身全文です。コピペしてもらって大丈夫です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.min.js"></script>
    <script src="myscript.js"></script>
</body>
</html>

🌟コメントアウトのショートカット：Windowsでは Ctrl + /、Macでは Cmd + /

コメントアウトをすると、そのコードを無効化することができます。
htmlでは<!-- あいうえお -->
Javascriptでは// あいうえお　もしくは/* あいうえお */
みたいな感じで使います。灰色の文字はコメントアウトされてるやつです。これも打つのはめんどくさいのでショートカットキーを使うことをおすすめします。

完成品の例

黒板を作りました。絵を描けます。
ドットインストールのp5.js入門講座の他、以下のサイトを参考にしました。
https://qiita.com/Damien/items/5f8d4691723b01f370b9

ChatGPTなどの生成AIに「p5.jsで○○するコードを作成してください。」と話すだけで色々作ってくれます。楽しいので是非遊んでみてください！

2 Replies to “p5.js入門講座を見たよ”

Leave a Reply