![見出し画像](https://assets.st-note.com/production/uploads/images/128388999/rectangle_large_type_2_8a347fc115e0039fc8443eeba3db29a6.png?width=1200)
Hello! p5.js. - 使ってみよう!
JavaScriptはHTML,CSSと一緒に使われてます。もっと簡単にJavaScriptだけで簡単に面白いものができるように作られたものがp5.jsです。基本的にはJavaScriptです。
次のリンクをクリックするとコードを書くエリアとプレビューエリアのページが表示されます。
Start creating with the p5 Editor!
![](https://assets.st-note.com/img/1705301198179-s46pMcPNFF.png?width=1200)
開いて左上の三角のスタートボタンを押すと左側に書いてあるコードが実行され右側のプレビュー画面に四角が表示されます。コンソール はプログラムのエラーがあるときなどに表示される部分です。
使いやすいように設定します。
![](https://assets.st-note.com/img/1705305468709-pmhe4KTc3X.png?width=1200)
日本語に設定ができます。あと右側にある歯車マークを押すて
![](https://assets.st-note.com/img/1705305514544-ShtyNAnj9G.png?width=1200)
赤丸のように"オン"にします。これで自動でコードエディタでコードを書くときに補完機能が使えるようになります。一文字打てば候補が出てくるので便利です。
それでは書いてみましょう。 background(220);の下に
ellipse(100,100,100,100)
と書いて左上の右矢印を押して実行してみましょう。
![](https://assets.st-note.com/img/1705305790936-wGyinVAZ46.png?width=1200)
白い円が出てきたと思います。 ellipseは円を描く命令です。後の数字が左から中心のx座標、y座標、円の直径x、円の直径yとなります。
いろんな命令があります。図形は"shape"のところにたくさん書いてあります。円形でも欲しい形によって命令を変えて使います。
この記事が気に入ったらサポートをしてみませんか?