p5.js

入力値の範囲を制限する方法を書きます。前回は、数値の入力のみでした。今回からは、それ以外の入力(スライダー、プルダウンメニュー)について書きます。値の範囲の制限と合わせて確認してください。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 値の範囲の制限:min, max ステップ数:step リストから値を選択:options まとめ 参考サイト 値の範囲の制限:min, max addInput()内で、その値がとれる最小値と最大値を設定する。 min:最小値を設定 max:最大値を設定 const params = { radiusX: 50, …

パラメータを調整できるように入力フォームを作ります。数値を入力して値を指定できるようになります。これができると、インタラクティブに値を変更できるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 パラメーターの調整:addInput() まとめ 参考サイト パラメーターの調整:addInput() ここでは、パラメータの値の変更を立体に反映させる。実装内容は以下の通り。 パラメータの情報を持つparamsオブジェクトの定義 ペイン(GUI用の領域)の生成 addInput()で、ペインにパラメータの情報をセット。 図形のパラメータに、ユ…

パラメータ調整用のライブラリであるTweakpanをp5.jsと組み合わせて使います。パラメータの値の変更が、即座に反映されるので、作業の効率化になります。今回は、Tweakpaneの導入までの内容を記します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 Tweakpaneとは Tweakpaneのイメージ Tweakpaneの導入 下準備(立体の表示) まとめ 参考サイト Tweakpaneとは パラメータ調整用のGUI。インタラクティブに値を変えることができるので、シミュレーションやジェネラティブデザインをするときに便利なライブラリ。 公式サ…

p5.jsで生成されるcanvasタグを任意の場所に表示させる方法について書きます。デフォルトのままでは都合が悪いので、コードを少し変更します。まずは、デフォルトの挿入位置を確認します。その後、対応コードを記述します。 canvasタグのデフォルトの挿入位置 canvasを任意の場所に表示 表示例 まとめ canvasタグのデフォルトの挿入位置 p5.jsのデフォルトでは、bodyの閉じタグの直前にcanvasタグが挿入される。 ... <main><canvas></canvas></main> </body> </html> 任意の場所に表示したいので、コードを変更する。 canvasを任…

テキストの描画について書きます。いくつか設定できるものがあります。テキストは、fill()とstroke()で文字の色と境界線の色を指定できます。それぞれの設定の詳細については、p5.jsのリファレンスで確認してください。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 text() テキストのその他の設定 まとめ 参考サイト text() テキストを描画する。テキストの左下がxy座標になる。 text(s, x, y, w, h):文字列、xy座標、幅、高さ 幅と高さを省略すると文字列の幅と高さになる function setup(){ creat…

図形の塗りと線の設定について書きます。まず、初期値を確認します。その後、塗りと線の設定をします。また、設定を無効化できることを確認します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 塗りと線の初期状態の確認 fill()とnoFill() stroke()とstrokeWeight()とnoStroke() まとめ 参考サイト 塗りと線の初期状態の確認 function setup(){ createCanvas(200, 200); background(127); //初期状態:塗りが白、線が黒 ellipse(width/2, heigh…

ellipse()で楕円、line()で直線を描画します。パラメータの数はいくつなのか、パラメータにはどんな値を指定するのかを確認します。おまけで円のアニメーションのサンプルコードを書きました。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 ellipse() line() 円のアニメーション まとめ 参考サイト ellipse() 楕円を描画する。楕円にもellipseMode()がある。 ellipse(cx, cy, w, h):中央のxy座標、幅、高さ ellipseMode(CENTER):デフォルト値 ellipseMode(RADIU…

更新日時 2021/07/07/07:00 Qiita Trends Daily 1位 ※前日1位 DDD,要件定義 Qiita Trends Daily 2位 ※前日3位 JavaScript,プログラミング,翻訳,React,react-hooks Qiita Trends Daily 3位 ※前日2位 JavaScript,firefox,mozilla,rfc Qiita Trends Daily 4位 [New] PHP,JavaScript,AWS,初心者,YouTubeAPI Qiita Trends Daily 5位 [New] Python Qiita Trends Dail…

p5.jsで描画したものを画像ファイルにしたかったので、その方法を調べました。静止画とgifアニメーションにできることが分かりました。ただ、gifアニは元のアニメーションと全く同じ速さで動いているわけではなさそうなので、そこだけ注意です。 saveCanvas():静止画として保存 gifアニメーションとして保存 使い方 まとめ 参考サイト saveCanvas():静止画として保存 p5.jsのsaveCanvas()を使うとjpgかpngで書き出しできる。 saveCanvas(selectedCanvas, [filename], [extension]) selectedCanvas:…

先日、twitterのタグで #2021年自分が選ぶ今年上半期の4枚 といいうものがあり、 自分でもやってみました。 今年の6月までの間にp5.jsで作った作品の中から4つを選び出してみました。 #2021年自分が選ぶ今年上半期の4枚 良い機会なので、自分のために振り返っておきます。色々作ったけどカラフルな作品は作ってて楽しい。 pic.twitter.com/QwN579z0Rt— ギン (@gin_graphic) 2021年6月10日 折角なので、一つずつ振り返っておこうと思います。

p5.jsでは、DOMに要素を追加することができます。例えば、スライダー、ボタン、セレクトボックス、チェックボックス、ラジオボタンなどを作り、配置することができます。それらを操作して、図形の値を変更することができます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 crerateSlider():スライダーで値を変更する createButton():ボタンを作成し、クリックしたときの処理を追記する まとめ 参考サイト crerateSlider():スライダーで値を変更する createSlider(min, max, [value], [ste…

ポケモンのモンスタボールをp5.jsで描きました。 シンプルに円と線で描けます。 最近は和柄を描いていたので、その影響でモンスターボールを並べて柄っぽくしています。 色合いは赤と緑をそれぞれ作ってみたした。 結構良い出来です。満足。

乱数を使うとランダムな数字を生成することができます。色々と試すと面白いことができて、表現の幅が広がると思います。乱数を使ったサンプルコードを掲載します。私も色々な値を乱数にして、試してみようと思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 乱数:random() ランダムな円を生成するアニメーション 色をランダムにする まとめ 参考サイト 乱数:random() random():0.0～1.0の間でランダムな数値を生成 random(n):0～nの間でランダムな数値を生成 random(n, m):n～mの間でランダムな数値を生成 ラン…

キー入力を取得して、インタラクティブなものを作ります。キーの状態によって処理を変更したり、キーが押されたときの処理の書き方を見ていきます。キー入力を取得できると、キーによる操作ができるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 keyIsPressed:キーの状態を取得する 特定のキーを押したときの処理 keyTyped():特殊なキーを無視する keyIsPressed():大文字小文字を区別しない まとめ 参考サイト keyIsPressed:キーの状態を取得する キーが押されているかどうかを取得する。ここでは、キーが押され…

色々なアイテムを作れるsuzuriを初めてみました。 suzuri.jp 自分がp5.jsで作った作品を何か形にしたいと思いました。 まずは自分で購入したいものを作って、買ってみます。 長袖Tシャツは単純に欲しいんだけど、suzuriのやつは袖口が締まるってるタイプみたい。 それはちょっと違う気もする。 タオルハンカチとか、小物から試そうかな。

マウスの座標を取得して、インタラクティブなものを作ります。マウスの状態によって処理を変更したり、クリックされたときの処理の書き方を見ていきます。マウスの座標を取得できると動きのあるものが作れるようになるので、楽しくなると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 mouseX,mouseY:マウスの座標を取得する マウスの位置に図形を描画する mouseIsPressed:マウスの状態を取得する mousePressed():クリックされたときの処理を記述する まとめ 参考サイト mouseX,mouseY:マウスの座標を取得する m…