Category: ダイアリー

日々感じることをメッセージとしてまとめてください。

Posted on

名古屋港

名古屋港に行ってきました。近くにイルミネーションがありとてもきれいでした。外は寒いので防寒対策をして冬のイベントを楽しみましょう！

Posted on

大阪の某テーマパークに行ってきました

先日、大阪にある某テーマパークに行ってきました。
ゲームの世界に入り込めるエリアの滞在時間を5分にしたところ、乗りたかったアトラクションすべてを40分以下で乗ることができました。
ある家族を中心にしたスパイ作品とのコラボアトラクション目当てで行きました。
XRライドは技術がすごいですね。楽しかったです。

Posted on

トリプルブッキング

インターンと説明会と友達とのご飯という三つの予定を同じ時間帯に入れてしまうというありえないやらかしをしました。カレンダーは使っています。予定管理が苦手です。

Posted on

ノリタケの森

近くに用があったのでノリタケの森に行ってみました

ものすごく穏やかで、レンガの建物や自然がきれいな公園でした

近くにあったノリタケのショップもきれいなお皿やクリスマスのオーナメントなどが並べられていて、みているだけでワクワクしました！

Posted on

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で○○するコードを作成してください。」と話すだけで色々作ってくれます。楽しいので是非遊んでみてください！