ps5.js Web Editor（Processing）のプログラミングでお絵描き、アニメーション作成～ 高校教科書『情報 II 』（東京書籍）

しばらく、プログラミング関連のブログ記事を書いてなかったから、久々に軽く書いてみよう。去年（２０２３年）発売の新しい高校教科書『情報 II 』（東京書籍）。まだ、必修科目の『情報 I 』も『Ｐｙｔｈｏｎ（パイソン）入門』も少ししか見てないけど、気分転換ということで。

必修と違って、教科書が薄いけど、中身は非常に実用的で多様。「幕の内弁当」的に、色んな話を少しずつ取り入れてる。真面目に扱うと、授業時間は全く足りないはず。自主学習に任せるとか、ごく一部に限定するとか、高校の先生の選択と工夫がポイントになる。

今回、最初に私の目に留まったのは、実習編２章「コンテンツ」の第０５節、「プログラムで絵を描こう」という項目。プログラムというより、ウェブ上のアプリの使い方を学ぶといった感じが強い。ただ、プログラミングの基礎知識と英語力を少し持ってないと、意味も分からなくて、入力しにくいとは思う。

　　　　　☆　　　☆　　　☆

いきなり、「準備するもの　p5.jp Web Editor　Processing（プロセッシング）」と書かれてる。どちらも聞いたこともない名前だから、英語版ウィキペディアで検索。

どうも、今現在だと、プロセッシングという描画サービスの関連プロジェクトの１つが、「p5.js」らしい。js は、JavaScript の省略。ウェブ版が、「p5.js Web Editor」ということか。この名前だけでも、初心者にはかなり敷居が高い。

　　　　　☆　　　☆　　　☆

とにかく、検索するとすぐに見つかって、いきなり上のような画面が表示される。あらかじめ、この７行が書かれてるのだ。後はこれをアレンジすればいいらしいけど、後でサンプルを見ると、ものすごく複雑で長いプログラムが示されてた。画面は日本語にも対応してるけど、ここでは基本設定の通り、英語を利用。

まず setup（セットアップ）の createCanvas で、お絵描きするキャンバスの大きさを決める。ここでは教科書より少し小さい、４００×４００ピクセルにしてみた。ちなみに私の端末は、大きいタブレット。新ｉＰａｄ　Ｐｒｏ　１２．９インチを横にして使用。「ほぼ」問題は無かった（後述）。

上図の６行目の「background(220)」は、何も書かれてない背景のことだと想像。ここを色々と書き換えて、簡単な幾何学的アニメーションを作って行く。以下、教科書の記述の流れに沿った実験。

まず、６行目を「ellipse(random(400),random(400),50,50);」と書き換える。「楕円を描いてください。書き始めの（中心の？）ｘ座標とｙ座標は、４００ピクセルからランダムに選択。楕円の幅と高さは５０ピクセル」。幅と高さを同じにしてるから、楕円というより、普通の円。

左上の実行ボタンをタップ（クリック）すると、画面右側の「Preview」のキャンバスに高速でアニメーションが描き出された。以下は、動画からの静止画キャプチャー３枚。動きはかなり速いけど、おそらくスピード調節も出来ると思う。

　　　　☆　　　☆　　　☆　

記念すべき最初の作品をファイル保存しようとしたら、サインインしろとか表示が出て来たから、登録してログイン。教科書の初めの方に使ってるくらいだから、たぶん信用していいと思う（自己責任）。今まで、プログラミング関連でのトラブルは何もない。というか、正確には、何も感じない。見えない裏側で情報がどう流れてるのかは不明。

何もしなくても自動的にファイル名が付いてる。ダウンロードしたｚｉｐファイルを解凍して開こうとしたら、全く関係ない紀伊國屋のアプリ、Kinoppy が開いてしまった♪　知らない間に、この種類のファイルが紀伊國屋アプリに関連づけられてるらしい。

ファイルのアイコンを長押しして、ポップアップ・メニューから新しいウインドウを開くと、下のような長いプログラムが出て来たけど、動画は見れなかった。長過ぎるからなのか、表示もスクロールもかなり重い。

　　　　　☆　　　☆　　　☆

続いて、「fill(255,0,0,80);」と挿入して、透明度８０の赤色（Ｒ）にする。さらに、「noStroke();」と挿入して、円の枠（縁取り）を無しにする。単純な赤、緑（Ｇ）、青（Ｂ）以外の色だと、その色が３つ組の数字で何になるのか、探す必要がある。ここでは、色のパレットみたいなものは表示されなかった。

今度は、透明度９５の緑（0,255,0,95）に色を変えて、楕円の中心をマウス（タブレットだから私の指）に合わせて動かすようにしてみる。中心のＸ座標とＹ座標の入力箇所に、mouseX,mouseY と入力。

すると、確かに私の指の動きに合わせて円が次々と描かれたけど、反応が早過ぎて、上手くお絵描きできなかった。タブレットだから、指を動かすと画面まで上下左右に動いてしまうという問題もある。ゆっくり「ＴＥＮ」と描こうとしても、大量の円が表示されてつながるから、単なる太線の文字みたいになってしまった。

　　　　　☆　　　☆　　　☆

最後は、まず色をランダムに設定。「fill(random(255),・・・」。さらに、円の幅と高さもランダムに。

ただし、同じ幅と高さを保ったままにしたいから、変数Ｘをまず設定して、それを５０以下でランダムに変化させる。「var x;　x=random(50);　ellipse(・・・・・・,x,x）」。

本当は、私の好きな色だけで変化させたいけど、まだその方法までは分からない。

とりあえず、今日のところはこの辺で。。☆彡

　　　　（計　２２９７字）