チェックボックスは複数の項目にチェックを入れるものである。   チェックボックスはは以下のように作成する。trueを指定した項目はチェックが入る。項目がチェックされているかはcheckbox1.checked(...

ラジオボタンは項目の中から１つを選択するものである。 ラジオボタンは以下のように作成する。ラジオボタンのチェックが変化したときの処理を行う関数はchangedメソッドにその関数名を指定する。選択されている項目の内容はra...

GUI（Graphical User Interface）要素は、ユーザーがコンピューターやデバイスと対話するために使用される視覚的なコントロールである。 p5.jsで標準で使えるGUI要素として以下がある。 GUI要素...

マウスがクリックされたとかドラッグされたときのイベント処理を記述できる。 マウスイベントを処理する関数として以下がある。これらの関数内でグローバル変数のmouseXとmouseYを使ってマウス位置を取得することができる。...

忍者のコスチュームを変えながら表示する。 例題 4-8-1 忍者を横に移動する。attack00.png～attack06.pngまでの７つのロボットのコスチュームを0.1秒置きに切り替えて表示する。frameRate(...

球を回転しながら画面上を移動させる。 例題 4-7-1 ｘ軸（横）方向に移動する画面の左右端で跳ね返す。 コード 練習問題4-7-1 球体（sphere）を、Y方向に上下に動かしなさい。一番上または下まで動いたら、跳ね返...

立方体に変えてトーラス（円環面）を使う。 例題 4-6-1 立方体の代わりにトーラス（円環面）を使う。2つのトーラスを90度の角度で交差させ、鎖のように配置する。 コード 練習問題4-6-1 2つのトーラスを、それぞれ独...

p5.jsの3D機能を利用すると、3次元空間内に立体的なオブジェクトを描画したり、カメラを移動したり、光源を制御したりすることができる。 createCanvas関数の第３引数に定数WEBGLを指定することで、３D関連の...

アニメーションを行うにはframeRateとframeCountを使う。 p5.jsでアニメーションを行うための基本的な機能として以下がある。 ・frameRate(n)  draw関数を１秒間に呼び出す回数を...

例題 4-2-1：写真をスライド表示 1秒ごとに画像が1枚ずつ切り替わるスライドショーを作ります。frameRate(1) を使うことで、draw() 関数が1秒に1回実行されます。 コード 練習問題4-2-1 上の例題...