Open Processing の使い方に関する大切な知識2選。
この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。
新規 Sketchの作り方。
初期設定するコード。
新規 Sketchの作り方。
Open Processing では、作品のことを Sketch スケッチ と呼びます。
プロフィールページの右上にある Create a Sketch をクリックします。
サンプルコードが既に用意されていると思います。
サンプルコードの動作を見るために画像で赤枠で囲まれた部分にある画面上部の ▶︎ を押してコードを実行してみます。
マウスを動かすと、灰色の背景に白い円が書かれるようなサンプルコードになっています。
以下のアニメーションと同様の動きをしているかと思います。
初期設定するコード。
以下のコードでは、Sketch の初期状態を決めています。
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
p5.js では、function setup() { ~~~ } というコードを書くと、{} の中の処理が最初に 1 回だけ実行されます。
つまり createCanvas(windowWidth, windowHeight); と background(100); というコードが実行時に 1 回処理されます。
2 行目の createCanvas(windowWidth, windowHeight); は画像処理を行う領域（キャンバスサイズ）を設定しています。
ここでは createCanvas 関数に windowWidth と windowHeight の 2 つの値を渡していますね。
createCanvas 関数は 2 つのパラメータを受け取り、1 つ目のパラメータは横幅を、 2 つ目のパラメータは縦幅として指定できます。
ですから横幅に対応するものとして 1 つ目に windowWidth を、縦幅に対応するものとして 2 つ目に windowHeight を渡していたのです。
windowWidth はブラウザの横幅を、 windowHeight はブラウザの縦幅を表す環境変数です。
環境変数は変数の仲間で、システムなどに設定されている値を変数として私たちユーザも利用できるものです。
まとめ
今回はOpen Processing の使い方に関する知識を二つ解説してみました。OpenProcessingもGitHubと同じようにまだまだ使い方など分かっていませんが、しっかり学んだことを知識にしていきたいです。