ここに説明や解説。
なければつくる(サンプル)
なければつくればいいということで、作ってみました。
パーティクル(サンプル)
微粒子が空中を舞う姿をイメージしてください。このモデルを発展させて、感染や流行のモデルを作成する予定です。
ロボットとの朝食
2040年頃を想定します。ヒューマノイド型ロボットが人間の子どものために、朝食の準備をしている状況を画像で描写してください。
調理機器にもう少し未来感を出せたる工夫が必要かもしれません。次は、ロボットがオリジナル料理を振る舞ってくれる未来を構想したいです。
ノリタケの森
近くに用があったのでノリタケの森に行ってみました
ものすごく穏やかで、レンガの建物や自然がきれいな公園でした
近くにあったノリタケのショップもきれいなお皿やクリスマスのオーナメントなどが並べられていて、みているだけでワクワクしました!
銀テめっちゃ飛んできた
先日、推しのイベントに行ってきました!5列9番という神席を引き当てたのですが、想像以上に距離が近くて最高でした✨

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を読み込めるようにする
このサイトにある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
こたつから顔を出して寝ている猫のイラストを作ってください
2匹の猫と1匹の親猫が寝ています。それぞれ色違いの猫にして、こたつにミカンのかごを載せてください。

癒やされる犬


