どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】
こんにちはみおです！
今回は初めての実践編です。
実践編といっても、入門編を少しだけ応用した物なので、そんなに難しくはありません。
よかったら皆さんも一緒にやってみてください。
まずProcessingってなに？という方はこちらをチェック
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
今回紹介するコードを少しアレンジして出来る作品がこちらです
静止画にするとこんな感じになります。
このコードは最後に紹介するので、ぜひ最後まで見てもらえたら嬉しいです！
「腰のお肉がヤバい!?」エルセーヌのエステ体験行ってみた！【画像あり】 
今日使う新しい単語
ここでは今日使う新しい単語について軽く説明をしていきます。
詳しい説明はまた出てきた時にするので、軽く見流す程度で大丈夫です！
1. 入門編のコードを使って準備をしよう
まずは入門編のコードを使って準備作業をしていきます。
下記のようにコードを入力してみてください。
分からない単語があるからは下からチェックしてみてください。
- size が分からない方
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
- background / stroke / noFill が分からない方
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
- void setup / void draw / frameRate が分からない方
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
ここまで入力出来たら、いよいよやっていきましょう！
2. ランダムに広がるアニメーションを作ろう
『 int 』を使って宣言をしよう
まずは『 int 』と『 num 』を使って宣言をしていきます。
- int / num が分からない方はここからチェック
複数の円を効率よく描く方法【 Processing 応用編 No.2 】 - Processingの基礎と応用
void setup () { } の上に行を空けて、
int num = 10000 ; // 配列の数
float x = new float[num] ; // X座標
float y = new float[num] ; // Y座標
と入力してみてください。
- float が分からない方はここからチェック
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
これで宣言が出来ました。
『 P2D 』を使って高速な2次元の作品を作る指示をしよう
ここでは新しい単語の P2D を使用します。
P2Dとは、高速な2次元の描画に適している描画モードの事です。
size()の中に3つ目の要素として、P2Dを入れてください。
size ( 800, 600, P2D ) ;
コードはこのように書けていますか？
ここまで出来たら次に進みましょう！
『 for 』を使って図形を動かす指示をしよう
次は『 for 』を使って図形を動かしていきます。
- for が分からないという方はここからチェック
複数の円を効率よく描く方法【 Processing 応用編 No.2 】 - Processingの基礎と応用
まずは、void setup() { } の中に、
for ( int i = 0; i < num; i ++ ) {
x [ i ] = width / 2.0 ; // X座標を左右の中心にする
y [ i ] = height / 2.0 : // Y座標を上下の中心にする
}
入力出来ましたか？
それでは次に、void draw () { } の中に、
for ( int i = 0; i < num; i ++ ) {
point ( x [ i ], y [ i ] ) ; // 点を描画
x [ i ] = x [ i ] + random ( -2.0, 2.0 ) ;
// X座標をランダムに移動
y [ i ] = y [ i ] + random ( -2.0, 2.0 ) ;
// Y座標をランダムに移動
}
- point が分からないという方はここからチェック
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
ここまで入力出来ましたか？
コードがこのようになっているか確認してみてください。
『 belndMode 』を使って画面をフェードさせよう
続いては新しい単語の『 blendMode 』と『 BLEND 』を使っていきます。
blendModeとは、色を混ぜる際のブレンド（混色）のモードを変更する単語です。
そして、blendMode とセットで使われる BLEND は、線わくに色を補正する役割があります。
それではコードを入力してみましょう！
void draw() { } の中に、
blendMode ( BLEND ) ; // 塗りつぶしを線形な混色に
fill ( 0, 5 ) ; // 半透明な黒で塗る
noStroke () ;
rect ( 0, 0, width , height ) ;
と入力してみてください。
入力出来ましたか？
これで完成です！
下のコードと見比べて確認してみてください。
間違いがなかったらプログラムを実行してみてください。
今日の作品のコード紹介
最後に今日の作品のコードを紹介していきたいと思います。
コードはこちらです
今日のまとめ
今回は実践編という事で、入門編の応用という感じでしたね。
皆さんもこのコードを使って色々なアレンジをしてみてください！
という事で今回はこの辺で終わりにしたいと思います。
最後まで見てくださり本当にありがとうございました。
また次回も見てもらえたら嬉しいです！
合わせて読みたい
入門編に出てきた単語一覧 No.2 〜 No.12 【 Processing 入門編 No.13 】 - Processingの基礎と応用
意外と知らない⁉︎ Processingの歴史・ライセンスは必要？ 【 Processing 番外編 】 - Processingの基礎と応用
オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜【 Processing 応用編 No.1 】 - Processingの基礎と応用
