[第2回: 図形の描画] Processingで南アフリカ国旗を描く
Processingという言語を使って、プログラミングの基礎を学んでいくシリーズ。
第2回目は南アフリカの国旗を描いていきます。
0. 構想を練る
南アフリカの国旗を見ると様々な色が重なり合っているのが分かります。どの色を先に表示させ、その後にどの色を重ねるかを最初に考えていきましょう。初めのうちは紙とペンを用意して書き出すのもおすすめです。
僕の場合は、「赤色・白色・青色の長方形を縦方向に3等分ずつ描画する」→「白色の三角形」→「緑色の長方形と三角形」→「黄色と黒の三角形」という流れで進めていくことにしました。
ウィンドウのサイズは600×400として、早速進めていきましょう！図形の縁もなくしたいので、noStroke()を追加します。
size(600, 400);
noStroke();1. 赤色・白色・青色の長方形を縦方向に3等分ずつ描画する
まずは土台となる長方形を描画していきます。前回のスイス国旗の回でもやった通り、長方形の描画にはrectを使います！
図形の座標や縦横の長さを表現するのに、width, heightを使っています。これは先ほどsizeで指定した値をそれぞれ指しています。width→600, height→400。これらを使うことで逐一、600・400などの数値を指定せずに済みます。
// 赤い部分
fill(255, 0, 0);
rect(0, 0, width, height/3);
// 青い部分
fill(0, 0, 139);
rect(0, (height/3)*2, width, height/3);
// 白い部分
fill(255);
rect(0, height/3, width, height/3);
2. 白色の三角形を描画する
三角形を描画するには、triangleを使用します。これは以下のような形で数値を指定してあげます。
tiangle(1つ目の頂点のx座標, 1つ目の頂点のy座標, 2つ目のx座標, 2つ目のy座標, 3つ目のx座標, 3つ目のy座標);
南アフリカの国旗では、三角形の頂点が枠外にあるためy座標の頂点として、1部マイナスの値を指定してあげる必要があります。
triangle(0, -100, 380, height/2, 0, height+100);
3. 緑色の長方形と三角形を描画する
次に南アフリカ国旗の緑色の部分を描画していきます。
長方形と三角形を描画します。
// 緑の部分
fill(0, 100, 0);
rect(0, height/2-40, width, 80);
triangle(0, -60, 340, height/2, 0, height+60);4. 黄色と黒の三角形を描画する
最後に黄色と黒の三角形を表示させれば完成です！
一見すると難しく見える図形も、1つ1つのパーツの組み合わせで描画することができます。
// 黄色の部分
fill(255, 215, 0);
triangle(0, 50, 230, height/2, 0, 350);
// 黒の部分
fill(0);
triangle(0, 80, 190, height/2, 0, 320);
コードの全体
南アフリカの国旗が描画できたでしょうか？基本の図形の重ね合わせですが、慣れていないと意外と難しかったのではないかと思います。
全体のコードを共有します！何かわからないことがあったら、お気軽にコメントなどしてください〜〜。それではまた次回の記事でお会いしましょう！
size(600, 400);
noStroke();
// 赤い部分
fill(255, 0, 0);
rect(0, 0, width, height/3);
// 青い部分
fill(0, 0, 139);
rect(0, (height/3)*2, width, height/3);
// 白い部分
fill(255);
rect(0, height/3, width, height/3);
triangle(0, -100, 380, height/2, 0, height+100);
// 緑の部分
fill(0, 100, 0);
rect(0, height/2-40, width, 80);
triangle(0, -60, 340, height/2, 0, height+60);
// 黄色の部分
fill(255, 215, 0);
triangle(0, 50, 230, height/2, 0, 350);
// 黒の部分
fill(0);
triangle(0, 80, 190, height/2, 0, 320);
