Daily coding のススメ 【つづける編】
こんにちは、Almina です。
最近は冷え込む日が増えてきましたね...。体調に気をつけましょう。
さて、今回はいよいよ「つづける編」です。
前回の「はじめる編」では、”作る → 投稿する” の流れを体験してもらいました。
さぁ、あとはこのサイクルを毎日繰り返すだけ！今日からアナタも Let's daily coding!!!!
...とは言うものの、最初はこんな方も多いハズ。
「いざ自由に作ろうとしても、何を作ればいいのか分からない...。」
「毎日作るって大変そう...どうすれば作り続けられるの？」
なので今回は、そんな方たちに向けた記事にしたいと思います。
実際に手を動かしてもらいながら、「自分流 ”作り続ける” ための考え方」をご紹介したいと思います。
今回もあくまで自己流にすぎないのですが、本記事を通してアナタなりの ”続けるコツ” を掴むキッカケになれば幸いです。
あ、ちなみに前回の記事はこちら。ぜひ本記事の前に読んでみてください。
はじめに
導入のために、少しだけ、わたし自身のお話をさせてください。
（＊「早く手を動かしたい！」という方は読み飛ばしてください。）
さて、肝心のわたしが日頃どう作っているかと言うと...
実は下記の２パターンしかありません。
１. 前に作った作品を ”ほんの少し” アレンジする
２. 思いつきを ”シンプルに” 作ってみる
...はい、お察しの通り、普段は全く新しい作品を作っているわけではないんですよね。実際のところ、大半は前の作品のアレンジなのです。
そう、daily coding って、別に毎日全く新しいもの作らなくていいんです。
人にも依りますが、わたしは daily coding で重要なのは「アウトプットし続けて引き出しを増やすこと」だと思っています。その目的において、むしろ負担をかけすぎることの方が NG です。疲れちゃいます。
それよりも、軽快に ”作る → 投稿する” のサイクルを回すことが重要です。
質よりも量。肩の力を抜いて、気楽に作ってください。
...でも、そうは言っても「アレンジだってむずかしい」ですよね？
ご安心ください。そのための今回の記事なのです！（模範的導入）
ここからは実践を交えながら、「アレンジの考え方」と「具体的なアレンジパターン」をご紹介します。
これを終えるころには、アナタだけの新しい作品が作れているハズ...！
では早速、はじめていきましょう！
アレンジしてみる
ここから先は、前回の記事で作った作品をベースに話を進めていきます。
準備として、下記のコードをコピペしておいてください。
function setup() {
createCanvas(600, 600);
noLoop();
angleMode(DEGREES);
}
function draw() {
background(220);
let offset = width / 5;
let margin = offset / 10;
let d = (width - offset * 2 - margin * 5) / 5;
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
let cx = (d + margin) * i + offset;
let cy = (d + margin) * j + offset;
let mode = int(random(4));
push();
translate(cx, cy);
rotate(90 * int(random(4)));
noStroke();
fill(0);
if (mode == 0) {
circle(0, 0, d);
} else if (mode == 1) {
rect(-d / 2, -d / 2, d, d);
} else if (mode == 2) {
triangle(-d / 2, -d / 2, d / 2, -d / 2, d / 2, d / 2);
} else if (mode == 3) {
arc(-d / 2, -d / 2, d * 2, d * 2, 0, 90);
}
pop();
}
}
}
function keyPressed() {
if (keyCode == ENTER) {
save('screenshot.png');
}
}
アレンジのコツと実践
まずは１つ、一緒にアレンジを考えてみましょう。
ここでアレンジを考えるコツを１つ。それは「要素に分解すること」です。
いきなり全体でアレンジを考えようとすると、選択肢が多すぎてしまい、どこをどうアレンジするのがいいのか考えにくくなります。
なので、いったん要素に分解し、分解した要素の一つだけを変えてみる、というのが一番やりやすいと思います。
というわけで、今回の作品のアルゴリズムを要素に分解してみましょう。
はじめはザックリと、こんな感じでしょうか。
1. ある位置にランダムな図形を描く
2. (1) をグリッド状に繰り返すでは次に、１つの要素にアレンジを加えてみます。
ここでは試しに【1. 図形を描く】 に対するアレンジを考えてみましょう。
まず、今までは fill() と noStroke() で塗りつぶしにしていました。
試しにこれを noFill() と stroke() に変え、塗り潰さないようにしてみます。
function draw() {
...
push();
translate(cx, cy);
rotate(90 * int(random(4)));
/** 変更 **/
stroke(0); noFill(); // 塗り潰さないように
if (mode == 0) {
...
}
pop();
...
}
おっ、たったこれだけでも雰囲気が変わりますね...。イイカンジ！
ちょっと線が細いかな？と感じた方は、strokeWeight() を使って線の太さを変えてみてくださいね。
今でも十分なアレンジですが、もう少し複雑性を加えたいカモ...。試しに、塗る・塗らないをランダムにしてみましょうか。
`random(100) > 50` として、「塗る・塗らない」が 50:50 のバランスになるよう変えてみます。
function draw() {
...
push();
translate(cx, cy);
rotate(90 * int(random(4)));
/** 変更 **/
if (random(100) > 50) { noStroke(); fill(0); } // 塗りつぶす
else { strokeWeight(5); stroke(0); noFill(); } // 塗り潰さない
if (mode == 0) {
...
}
pop();
...
}
わ、これはもう、最初の作品とは完全に別な作品ができましたね...！
これで最初のアレンジ作品は完成です！！せっかくなので、作ったらぜひ投稿してみてください！
アレンジパターンの紹介
さて、アレンジを考える感覚は掴めたでしょうか？
ここからは、先ほど要素に分解した考え方をベースに、アレンジの具体例をイッキに紹介していきたいと思います。
(1) 色を変える
【1. 図形を描く】にアレンジを加えたものです。
stroke() や fill() の色を変えるだけですが、イッキに鮮やかさが出ます。
/**
* color pallet
*/
let pal = ["#6e44ff","#b892ff","#ffc2e2","#ff90b3","#ef7a85"];
function setup() {
...
pal = shuffle(pal); // カラーパレットをシャッフル
...
}
function draw() {
background(pal[4]); // 背景色をカラーパレットから設定
...
let cid = int(random(4)); // カラーパレットからランダムに色を選択
if (random(100) > 50) { noStroke(); fill(pal[cid]); }
else { strokeWeight(5); stroke(pal[cid]); noFill(); }
...
}
なお、今回のカラーパレットは下記のサイトを利用させていただいてます。
ボタン１つでカラーパレットが作れるのでオススメです！
(2) カタチを変える
【1. 図形を描く】にアレンジを加えたものです。
カタチも様々ですが、ここでは「隣り合うと繋がって見えるような」図形を考えてみました。
function draw() {
...
if (mode == 0) {
arc(-d/2, -d/2, d, d, 0, 90);
} else if (mode == 1) {
arc(-d/2, -d/2, d, d, 0, 90);
arc( d/2, d/2, d, d, 180, 270);
}
...
}
これ以外のカタチも、いろいろ考えられると思います（六角形とか...）。
ぜひ色々と作って試してみてください！
(3) 影をつける
【1. 図形を描く】にアレンジを加えたものです。
図形を描く前に、ほんの少し位置をズラして半透明黒色で図形を描いてあげるだけです。たったこれだけですが、グッと奥行きが出ます。
function draw() {
...
let bFill = random(100) > 50; // 塗る・塗らないのモード
let rot = 90 * int(random(4)); // 図形の回転角
/** shadow **/
push();
translate(cx + 5, cy + 5); // ほんの少しズラす
rotate(rot);
// 半透明の黒色で影をつける
if (bFill) { noStroke(); fill(0, 50); }
else { strokeWeight(5); stroke(0, 50); noFill(); }
if (mode == 0) { ... }
pop();
/** tile **/
push();
translate(cx, cy);
rotate(rot);
// 通常の色でタイルを描く
let cid = int(random(4));
if (bFill) { noStroke(); fill(pal[cid]); }
else { strokeWeight(5); stroke(pal[cid]); noFill(); }
if (mode == 0) { ... }
pop();
...
}
(4) グリッドを重ねる
【2. グリッド状に並べる】にアレンジを加えたものです。
ただ重ねるのもイイですが、重なりすぎると見えにくくなってしまいます。なので一工夫して、徐々に図形を小さくしながら重ねてみました。
function draw() {
...
for (let k = 0; k < 4; k++) { // グリッドを重ねるためのfor文ループ
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
...
let scale = map(k, 0, 4-1, 1, 0.2); // 徐々に小さく、1~0.2まで変化
let siz = d * scale; // タイルのサイズを変える
...
// d --> sizに変更
if (mode == 0) {
circle(0, 0, siz);
} else if (mode == 1) {
rect(-siz / 2, -siz / 2, siz, siz);
} else if (mode == 2) {
triangle(-siz / 2, -siz / 2, siz / 2, -siz / 2, siz / 2, siz / 2);
} else if (mode == 3) {
arc(-siz / 2, -siz / 2, siz * 2, siz * 2, 0, 90);
}
...
}
}
}
使う図形は変えなくとも、重ねるだけで、さらに複雑な図形が生まれます。
今回は図形の中心を揃えて重ねていますが、ぜひ違う重ね方も試してみてください。
おわりに
長くなりましたが、今回の「つづける編」はいかがだったでしょうか？
お伝えしたかったのは２つで、まず「daily coding って気楽でいいんだよ」ってことです。
今回ご紹介した例のように、一箇所をほんの少し変えるだけでも、十分新しい作品が作れちゃいます。”毎日作る” なんて聞くと身構えてしまいますが、まずは凝りすぎず、むしろ「作り続けること」を大切してください。
もう１つは、作り続けるための具体的な方法の１つとして「アレンジする」をご紹介しました。「要素に分解 → １つの要素を変えてみる」という自分流の考え方を、少しでも体感してもらえてたらいいなと思います。
また、今回ご紹介したアレンジのパターン以外にも、世の中にはたくさんのパターンが溢れてます（再帰、分岐、反復...）。
なので、ぜひ色々と調べてみてください。そして調べたら、それらを使って今回の作品のさらなるアレンジに挑戦してみてくださいね！
あとがき
...ふぅ、なんとか書き上げることができた。頑張りました。
いやはや、前回の記事から随分と時間が空いてしまったなと猛省してます。
チマチマと書き進めてはいたのですが、文章をまとめるのがどうも苦手で...時間がかかってしまいました。
それでも文章が拙いし長くなってしまいます...文章ってムズカシイ！
今後も精進してまいりますが、ぜひアドバイスなどいただけたら幸いです。よろしくお願いします。
さて、次回のテーマですが...今のところ具体的な予定はナシです。
今回紹介しきれなかったアレンジパターンとか、シリーズ作品の解説とかを書こうかな？とボンヤリ考えていますが...
もし何かご要望があればコメントください。お待ちしております。
以上、ここまで読んでくださってありがとうございました！
ご指摘やコメント等、ぜひお待ちしております。
ではでは、ごきげんよう〜。
この記事が気に入ったらサポートをしてみませんか？