見出し画像

Open Processingをもっと使う上で覚えておいた方が良い知識2選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

  1. 逐次処理(ちくじしょり)を行うコード。

  2. リファレンスを読む。

逐次処理(ちくじしょり)を行うコード

以下の処理について見ていきます。

function draw() {
 circle(mouseX, mouseY, 20);
}

p5.js では、function draw() { ~~~ } というコードを書くと、{} の中の処理が 1 秒間に 60 回の頻度で実行され続けます。
つまり circle(mouseX, mouseY, 20); というコードが毎秒 60 回処理されていることになります。
circle(mouseX, mouseY, 20); というコードは、マウスカーソルのある位置に半径 20 ピクセルの円を表示するという処理を行なっています。
circle 関数は、指定された場所に円を描画(表示)するという処理を行います。
circle サークル は円という意味です。
() の中には、左から順に 描画位置のX座標、描画位置のY座標、円の半径を設定します。
mouseX, mouseY を指定すると、処理実行時のマウスカーソルの X 座標、Y 座標が指定できるので、マウスカーソルの位置に円を書くという処理が実現できます。
試しに 7 行目を circle(mouseX, 200, 20); とコードを改変して実行してみます。
Y 座標が上から 200 ピクセルの場所に固定され、半径 20 ピクセルの円が描かれるスケッチになります。

リファレンスを読む。

リファレンスとは、仕様や操作方法などについて書かれた文書のことです。

background 関数や circle 関数、 fill 関数や random 関数など、様々な関数を使ってきました。
これらはいずれも p5.js で用意されている関数であり、p5.js のリファレンスに使い方が書いてあります。
p5.js 公式リファレンス
Open Processing のエディタには p5.js のリファレンスが組み込まれており、エディタ右側メニューの本のマークをクリックすることでリファレンスへのリンク一覧が表示されます。
メニューを開くと以下の画像の赤枠で示した部分に本のマークがあると思います。
それをクリックしてください。
クリックすると以下のようにレファレンスが表示され、気になった関数について検索することができます。

まとめ

今回はOpen Processingの応用的な知識を解説して行きました。リファレンスを読むなどは根本的なプログラミングのコードを理解していないと読めないなと思いました。しっかり様々な種類がある関数一つ一つをしっかり覚えていく必要があると考えました。


この記事が気に入ったらサポートをしてみませんか?