キー入力を取得して、インタラクティブなものを作ります。キーの状態によって処理を変更したり、キーが押されたときの処理の書き方を見ていきます。キー入力を取得できると、キーによる操作ができるようになります。なお、この記事はドットインストールとい…

マウスの座標を取得して、インタラクティブなものを作ります。マウスの状態によって処理を変更したり、クリックされたときの処理の書き方を見ていきます。マウスの座標を取得できると動きのあるものが作れるようになるので、楽しくなると思います。なお、こ…

図形の変形について書きます。図形のパラメータを変更するのではなく、座標空間を変更して変形させます。移動、回転、拡大、縮小などが使えるようになると表現の幅が広がります。おまけで回転するアニメーションのサンプルコードを書きました。なお、この記…

テキストの描画について書きます。いくつか設定できるものがあります。テキストは、fill()とstroke()で文字の色と境界線の色を指定できます。それぞれの設定の詳細については、p5.jsのリファレンスで確認してください。なお、この記事はドットインストールと…

図形の塗りと線の設定について書きます。まず、初期値を確認します。その後、塗りと線の設定をします。また、設定を無効化できることを確認します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 塗りと線…

ellipse()で楕円、line()で直線を描画します。パラメータの数はいくつなのか、パラメータにはどんな値を指定するのかを確認します。おまけで円のアニメーションのサンプルコードを書きました。なお、この記事はドットインストールというプログラミング学習サ…

定義済み変数を利用して図形を描きます。rectMode()は、長方形のパラメータの解釈の方法を変更して、描画する位置を変更する関数です。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 定義済み変数のwidth…

色の指定方法は複数あるので、それぞれ見ていきます。色はグレースケール、RGB、HSBで指定します。色の指定と合わせて、不透明度も指定できます。他にCSSの記法でも指定できます。その時に応じた指定の仕方を使えると良いです。なお、この記事はドットインス…

今回は、四角形をアニメーションさせてみます。draw()に再描画の内容を記述するので、その書き方をご紹介します。また、background()を記述する位置を変えるとどのような変化があるのかを見ていきます。 四角形をアニメーションさせる background()の記述位…