入門編に出てきた単語一覧 No.2 〜 No.12 【 Processing 入門編 No.13 】
こんにちはみおです！！
今回は入門編がここで一旦終わるので、出てきた単語一覧を紹介していきたいと思います。
それでは早速やっていきましょう！
静止画編
No.2 基本図形の描画方法
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
まずNo.2では基本図形の描画方法を紹介していきました！
ここでは5つ紹介しましたね。
- size : 画面の大きさ
size ( 幅, 高さ ) ;
- point : 点
point ( X座標, Y座標 ) ;
- line : 直線
line ( X座標①, Y座標①, X座標②, Y座標② ) ;
- rect : 四角
rect ( 左上X座標, 左上Y座標, 幅, 高さ ) ;
- ellipse : 円
ellipse ( 中心X座標, 中心Y座標, 幅, 高さ ) ;
基本的な図形はここで一気に紹介しています。
特に『size』や『rect』、『ellipse』は頻繁に使われます。
No.3 色の設定方法
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
No.3では色の設定方法について紹介をしていきました。
ここでは3つの単語を紹介していきました。
- background : 背景色を指定
background ( 赤, 緑, 青, 透明度) ;
- stroke : 線の色を指定
stroke ( 赤, 緑, 青, 透明度 ) ;
- fill : 塗りつぶしの色を指定
fill ( 赤, 緑, 青, 透明度 ) ;
色の指定はどの作品でもするので、この3つのコードは毎回出てきます。
構成は全て同じなので、それぞれの意味と単語を照らし合わせて覚えてみてください。
No.4 変数を使って複数の円を描く方法
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
ここからは基本の単語から比べると少し難しくなってきたと思います。
ここの紹介した単語は4つありました。
- float : 32ビット倍精度浮動少数点数
- diameter : 円の直径
- width : 表示したウィンドウの幅
- height : 表示したウィンドウの高さ
float は少し難しいかもしれませんが、収納棚みたいなイメージと思っていただけると簡単だという説明をしました。
ここからは変数が多めになってきます。
No.5 ランダムに図形を描く方法
実行する度に作品が変わる!! ランダムに図形を描く方法【 Processing 入門編 No.5 】 - Processingの基礎と応用
ここでは3つの単語を紹介しています。
- random : 乱数の生成
random ( 最小値, 最大値 ) ;
- dist : 2点間の距離を求める命令
dist ( x1, y1, x2, y2 ) ;
- if / else : 分岐・条件をつける
if (条件式) {
真文
} else {
偽文
}
段々と複雑な単語が増えてきましたね。
まだまだ続きます！！
アニメーション編
No.6 アニメーションを作る方法
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
ここからはアニメーション(動きのある作品)を作っていきました。
まずここで紹介するのは、4つの単語です。
- void : setup や draw の前に付く
void setup / void draw
- setup : 起動時に実行させる関数
void setup () { }
- draw : 起動後に繰り返し実行させる関数
void draw () { }
- frameRate : 1秒間にどのくらい動かすか
setup は最初の1回しか実行されないのに対し、 draw は1巡目が終わっても、2巡目3巡目とどんどん繰り返していきます。
これによって動かすことが出来ます。
No.7 大きさの違う図形を描く方法
アニメーションで"大きさの違う"図形を描く方法【 Processing 入門編 No.7 】 - Processingの基礎と応用
ここでは新しい単語は出てきませんでした。
次に進みましょう！
No.8 図形ごと動かす方法
アニメーション基礎 〜図形を動かしてみよう〜【 Processing 入門編 No.8 】 - Processingの基礎と応用
ここでは3つの新しい単語が出てきました。
- || : AまたはB
A || B
- locationX : X座標の現在位置
- direction : 移動する向き
ちなみに『 || 』ではなく『 && 』を使うと「AかつB」という意味になります。
年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─ 
No.9 大きさと色が変化していくアニメーション方法
"大きさ" と "色" が変化していくアニメーションの作り方【 Processing 入門編 No.9 】 - Processingの基礎と応用
ここでは3つの新しい単語が出てきました。
- hue : 色の指定の時に使われる置き換えの単語
- sin : 三角関数の正弦を求める
- frameCount : 現在のフレーム数
『 hue 』は置き換えの単語でした。
また、『 frameCount 』は『 frameRate 』と似ているので注意してねという話もしました。
No.10 図形を回転させる方法
図形が回る?! 図形を回転させる方法 【 Processing 入門編 No.10 】 - Processingの基礎と応用
ここでは4つの新しい単語が出てきました。
- angle : 回転角度
- rotate : 原点を中心に回転
- rectMode : 四角形の描画モードの変更
- CENTER : 基準点を図形の中心にする
『 rotate 』と『 angle 』はセット「 rotate ( angle ) ; 」のように使う事が多いです。
『 rectMode 』と『 CENTER 』も「 rectMode ( CENTER ) ; 」のようにセットで使う事が多いです。
No.11 画面の中心を軸に図形を回す方法
〇〇を付け足すだけの簡単作業!! 画面の中心を軸に図形を回す方法 【 Processing 入門編 No.11 】 - Processingの基礎と応用
ここでは1つしか新しい単語が出てきませんでした。
- translate : 座標全体を移動させる
translate ( X座標, Y座標 ) ;
座標全体を移動させて、中心を軸にしましたね！
No.12 複数の図形を同時に回転させる方法
複数の図形が同時に回転！？ あるコード〇〇が成功の秘訣 【 Processing 入門編 No.12 】 - Processingの基礎と応用
ここでは2つの新しい単語が出てきました。
- pushMatrix : 現在の座標の状態を一度保存する
- popMatrix : 保存された状態に座標を戻す
pushMatrix() ;
//座標を変更
// 描画
popMatrix () ;
これで複数の円を同時に回転させることが出来ました。
今日のまとめ
今回は入門編の単語を一気に紹介していきました！
分からない単語などがあった方はぜひ見返してみてください！
次回からは実践編に移りたいと思います。
といっても一気に難しくなるわけではないので、一緒に頑張って行きましょう！
という事で今回はこの辺で終わりにしたいと思います。
また次回も見てもらえると嬉しいです。
合わせて読みたい
プログラミングに数学の知識は不要!? もっと必要は事は他にあった‼︎ 【 Processing 番外編 】 - Processingの基礎と応用
オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜【 Processing 応用編 No.1 】 - Processingの基礎と応用
Processingを始めたいor始めたばかりの方へ 〜性格や用途別オススメ参考書４選【 Processing 番外編 】 - Processingの基礎と応用
