こんにちは。コメ吉です。

本日は文字を使ったプログラグラミングが学べる「Processing」についてのお話になります。

コメ吉の上の子供は実際にプログラミングスクールで「Processing」から学習をスタートしましたので、実体験も踏まえつつ、また実演しつつ、コメントさせて頂きます。

 

プログラミングでデザインに挑戦!？　初心者でも取り組みやすいProcessingを体験！

Processingとは

Processingはビジュアルアートやデザインのために開発された言語で以下の特徴があります。

テキスト言語

プログラミングはScratchのようにコンピュータへの指示（前へ進む等）が書かれているブロックを使ってプログラムを作成するビジュアル言語と、コンピューターへの指示を１行ずつ文字や数字といったコードで書くテキスト言語があります。

テキスト言語の中には、人工知能の分野でも使われるPythonや、スマホアプリ等で使われるJavaなどの言語があり、「Processinng」もその一つです。

コメ吉の子供は、プログラミングスクールに入塾後、Pythonをやってみたいと希望したものの、まずはテキスト系の言語に慣れるために、この「Processing」の学習をすすめられました。

「Processing」の学習を通じて、他の言語にも通じるプログラミングの基礎が習得できるようです。

操作が簡単

スケッチと呼ばれるProcessingエディタにコードを入力し、矢印の形をした再生ボタンを押すだけで実行できます。後で実際のスケッチを表示しつつ詳しくお伝えします！

プログラミング開始までの難しい設定なども一切ありませんでした。

プログラミング入門、テキスト系の言語を体感するという意味で、取り組みやすい言語だと思います。

 

無償で利用可能

どなたでもご自身のパソコンにダウンロードすることで無償で利用が可能です。

 

なお、ここまでが概要になりますが、Processingについて、本でお読みになられたい方向けに、オススメの本になりますのでご興味があればご参照下さい。

 

ダウンロードから日本の国旗を書いてみるところまで

実際に手を動かした方が、理解しやすいと思いますので、今回は実演形式で順に説明させて頂きます。

コメ吉の長男はプログラミングスクールで学習済みですが、長男のサポートを得ながら、下の子供と一緒にダウンロードから図形を描くところまでやってみました。

ダウンロード

下記のように「processing ダウンロード」でグーグル検索することで、一番上に表示されました。

 

ご利用のパソコンのOS別にダウンロードのファイルを選択します。

 

「processing.exe」を実行します。そうするとスケッチが使えるようになります。

 

スケッチの使い方

下記がスケッチになります。コードを入力したら画面上部左の矢印ボタン（三角の形）を押すと実行できます。この後、実際にコードを入力してみます。

 

簡単なデザインにチャレンジ！

画面サイズの指定、文字テキストの入力、座標の調整

最初に文字を入力して、表示させたいと思います。やることは画面サイズの指定と文字の位置の指定になります。

まずは実際のスケッチの入力画面から、下記のように入力してみます。（最後はセミコロンなので注意下さい。コメ吉は最初コロンと間違えてエラーになりました笑）

“size”は画面のサイズを指定するコードで”size(横幅、縦幅）”といった使い方になります。

“text”とは文字を表示させる命令のコードになりまして、”text(文字,横の位置,縦の位置）“といった使い方になり、コードを入力後、三角矢印の実行ボタンを押すと下記のような表示がされます。

「Processing」といた文字が表示されました。実際にテキストに入力してみて体感頂くのが理解が早い気がします。

四角形を書いてみる

次に図形、正方形を描いてみたいと思います。スケッチに下記のように入力します。

“rect”は四角形を書くコードになります。ちなみに”rect”はrectangle(長方形）の略のようです。英語の勉強にもなりますね。

“rect”の入力内容としては、“rect(四角形の左上の角の横の位置,四角形の左上の角の縦の位置,図形の横幅,図形の縦幅）”といった感じです。これも実際に手を動かして入力頂くのが、理解が早い気がします。

入力後実行ボタンを押すと下記のように表示されます。

無事に正方形が表示されました。

円を書いてみる

次に円を書いてみます。スケッチには下記のように入力します。

円を描く際には、“ellipse”を使います。”ellipse”は英語で楕円ですね。

“ellipse”の入力方法としては“ellipse(円の中心の横の位置,円の中心の縦の位置,円の横の直径,円の縦の直径）” になります。このように書いても分かりにくいので、こちらも実際に手を動かして入力して頂くと理解が早いかと思います。

例によって、実行ボタンを押すと下図のように無事に円が表示されました。

色をつけてみる⇨日本の国旗を書いてみる

最後に今まで描いてきた図形を組み合わせて、色をつけて、日本の国旗を書いてみようと思います。すごくシンプルなケースで描いてみました。

スケッチには下記のコードを入力します。

２行ずつ、3段に分かれています。段落の上から順に図形を書いて塗りつぶす命令になりますので、書く順番を考えならがコードを書いていく必要があります。

1段目：画面サイズの設定と背景の色をつける

１段落目はsizeで画面サイズを指定し、backgroundで画面の背景に色をつけています。backgroundは画面全体を塗りつぶす命令で、中の数字は色の種類を示しています。

中の数字の入力方法はいろいろあるのですが、例として、今回使った０〜255の数字を一つだけ指定して塗りつぶす方法と、赤、緑、青の光の三原色のそれぞれの色の度合いを調整して色を指定する方法もあります。三原色の色を調整することで、どんな色でも作れるってことが体感できますね！

三原色の方法ですが、”background(赤,緑,青）”といった入力方法で、赤、緑、青、の部分には0〜255の数字を入れます。例えば赤だったら”background(255,0,0)”といった感じです。

2段目：四角の図形と四角に白色をつける

2段目に行くと“fill“というコードが出てきますが、これは図形に色をつけるコードです。rect=図形を指定し、”fill”で色をつける、つける色は“255”で白を指定、といった感じです。

3段目：四角の中に円を描く、描いた円に赤色をつける

最後の3段目は”ellipse”=円を描く、“fill”で円に色をつける、つける色としては”fill(赤,緑,青）”の赤の色をつける趣旨で、赤の部分だけ255、他は０にする、といったやり方をしています。

実行ボタンを押すと下記のように日本の国旗のようなデザインが書けました。

この辺り、指定する色の数字を変えてみたり、手を動かして頂くと、楽しみながら、プログラミングでの簡単なデザインが楽しめるのではないでしょうか！？

 

コメ吉の長男によると上記は、Processingのほんの入口にすぎないとのことで、今後も楽しみつつ、下の子供と一緒にprocessingを習得できればと思っています。

お読み頂きありがとうございました。

以下関連記事になりますので、ご興味がありましたらご参照頂ければ幸いです。

「IT教育、プログラミング？子供に何を学ばせれば良いか考えてみる」https://comekichi.com/2022/08/20/it教育、プログラミング%E3%80%80子供に何を学ばせれば良/

「どうやってプログラミングスクールを選ぶ？IT教育として有効？　実体験に基づいた最適な選び方」https://comekichi.com/2022/08/31/どうやってプログラミングスクールを選ぶ？%E3%80%80it教/

「ITパスポートの勉強方法は？独学で受かるのかな？　おすすめの問題集は」https://comekichi.com/2022/08/30/itパスポートの勉強方法は？%E3%80%80独学で受かるのかな/