マウスがクリックされたとかドラッグされたときのイベント処理を記述できる。 マウスイベントを処理する関数として以下がある。これらの関数内でグローバル変数の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 上の例題...

サムネイル表示した３枚の写真をクリックすると、その写真が大きく表示される。 ■マウスイベント処理 マウスがクリックされるとmousePressed関数が呼び出される。マウスクリックした位置は予約変数のmouseX,mou...

p5.jsではイメージの処理を簡単に行うことができる。 ■イメージのアップロードimgフォルダ（名前は任意）を作成し、イメージファイルをアップロードしておく。 ■イメージのロードと表示次の手順でイメージのロードと表示を行...

アニメーションはp5.jsの最も得意な分野の一つである。この章で取り上げる内容は大きく分けると以下の３種類である。 イメージ処理 以下の３段階でイメージ処理を行う。 アニメーション アニメーションを行うための基本的な機能...