見出し画像

Daily coding のススメ 【はじめる編】

こんにちは、Almina です。
もうすっかり秋ですね...風が涼しくなって、最近は過ごしやすいです。

そして秋といえば、そう、芸術の秋ですよね!ね!!
さぁ今日からアナタも Daily coding はじめましょう!!!!

...ということで今回は、自分流「Daily coding のススメ」をご紹介します。

自分用の覚書も兼ねてはいますが、クリエイティブ・コーディングに少しでも興味のある方、これから始めてみようと思っている方のご参考になれば、幸いです。

はじめに

さて、"Daily coding" なんて小難しく言ってますが、カンタンに言えば「ほぼ日で作って投稿する」ことです。シンプル。

でも一見カンタンですが、実は2つの大きなハードルがあると思います。
1. "作る → 投稿する" を始めること
2. ほぼ日で続けること

特に2番目のハードルが高い気がします。続けるって、意外とムズカシイんですよね...。
1番目のハードルについては、調べるとたくさん記事があったりします。でも2番目の「続ける」に関しては具体的な導線設計が少ない...。

なので、Daily coding の「はじめかた」と「続けるコツ」の両方をご紹介できればと思います。
今回は、まず「はじめかた」についてご紹介します。

あくまで自己流ですが...少しでもお役に立てば何よりです。

画像2

作ってみる

何はともあれ、まずは作るところから。早速ひとつ作ってみましょう!

ここからの内容は、こちらの超スバラシイ資料を参考にさせていただきながら進めていきます。(感謝の気持ちを忘れずに...。)
今回はあくまで要約になってるので、ぜひ本文も読んでみてください!

準備

まずは作るための環境を用意します。
といっても、環境を用意するのに時間を割きたくないですよね...。
そこで今回は、p5.js というものを利用します。

p5.js は、カンタンに言うと「Web ブラウザ上で作れるツール」です。
自分の PC にいろいろ入れたりせず、アカウント登録するだけでスグに作り始められます。スケッチの管理もカンタンにできちゃうので便利ですよ!

まずは p5.js のサイトにアクセスして、アカウント登録してください。

アカウント登録が終わったら、さっそく初スケッチです!
下記のコードをコピペして、画面左上の再生ボタンをポチッと押してみてください。

function setup() {
 createCanvas(400, 400);
}

function draw() {
 background(220);

 /** 以下を追記 **/
 fill(0);  // 黒で埋める
 circle(200, 200, 100);  // 丸を描く : (中心x座標, 中心y座標, 直径)
}

画像19

わーい!プログラミングで丸が描けたーーーーーー!!!!
感動的な第一歩ですね。これでアナタも creative coder です。

はじめてのスケッチ

さて、せっかくなら、もうちょっと作品っぽいものが作りたいですよね。
なので、もう少し作品っぽくしてみましょう!

その前に、このあとも考えて、円の描き方をちょっと工夫します。
円を「中心が (cx, cy) で d x d の大きさの枠内に描く」に変えます。
(なお、以降もこのコードをベースに進めていきます。)

function setup() {
 createCanvas(600, 600);  // 画面を大きく (600x600)
 noLoop();
 
 angleMode(DEGREES);
}

function draw() {
 background(220);

 /** 以下に変更 **/
 let cx = width / 2, cy = height / 2;  // 枠の中心座標
 let d = 300;  // 枠の大きさ

 push();
 translate(cx, cy);  // (0,0) の点を (cx,cy) に平行移動
 noStroke();  fill(0);
 circle(0, 0, d);  // (cx,cy) の位置に描画される
 pop();
}

これで準備万端。では作っていきましょう!

先ほどは `circle` という関数を使って円を"1つ"描きました。
そこで次は、単純にグリッド状に"並べて"みましょう。

ひとまず、以下のコードをコピペして動かしてみてください。

function setup() { ... }

function draw() {
 background(220);
 
 /** 以下を追記 **/
 let num = 6;  // グリッドの数
 let offset = width / 5;  // 画面端にならないようスキマを空ける
 let d = (width  - offset * 2) / (num - 1);  // 枠の大きさ
 for (let i = 0; i < num; i++) {
  for (let j = 0; j < num; j++) {
   let cx = d * i + offset;
   let cy = d * j + offset;
     
   push();
   translate(cx, cy);
   noStroke();  fill(0);
   circle(0, 0, d);
   pop();
  }
 }
}

画像6

見事にグリッド状に並びました。新手のタピオカでしょうか。映えますね。
では、これが円じゃなくて”四角”だとどうなるでしょうか?

function setup() { ... }

function draw() {
 ...

   push();
   translate(cx, cy);
   fill(0);
   /** 四角に変更 **/
   rect(-d/2, -d/2, d, d);  // 四角を描く : (左上角のx座標, 左上角のy座標, 幅, 高さ)
   pop();

 ...
}

画像7

おとと...真っ黒になってしまった...。
こういう思いがけないことがあるから面白いんですよね!プンスコ!

さてさて、落ち着いてよく見ると、となり同士の四角がピッタリと合わさっているんですね。
なのでスキマを作ってあげます。これをマージン(mergin)と呼びます。

function setup() { ... }

function draw() {
 ...
 
 let num = 6;
 let offset = width / 5;
 let margin = offset / 10;  // 枠どうしのスキマ
 let d = (width  - offset * 2 - margin * (num - 1)) / (num - 1);
 for (let i = 0; i < num; i++) {
  for (let j = 0; j < num; j++) {
   let cx = (d + margin) * i + offset;
   let cy = (d + margin) * j + offset;
   
   ...
  }
 }
}

画像8

やった!キレイに並びましたね!でも、まだ ”並べただけ" って感じ...。
そこで次は、丸と四角を混ぜこぜにしてみましょう。

function setup() { ... }

function draw() {
 ...

   /** 変更 **/
   if (random(100) > 50) {  // もし0~99のランダムな値が50以上なら...
     circle(0, 0, d);
   } else {                 // 50未満なら...
    rect(-d/2, -d/2, d, d);
   }

 ...
}

画像9

お、なんかそれっぽい!
しかも、ランダムな値は実行のたびに変わるので、実行するたび違う絵ができます。これぞプログラミングお絵描きの醍醐味よ。

さらにアレンジで、他の図形もランダムに混ざるようにしましょう。
例として、三角形と扇型は以下のように描けます。

// 三角形を描く : (点1のxy座標, 点2のxy座標, 点3のxy座標)
triangle(-d/2, -d/2, d/2, -d/2, d/2, d/2);

// 扇型を描く : (中心のxy座標, x軸方向の半径, y軸方向の半径, 始点の角度, 終点の角度)
arc(-d/2, -d/2, d*2, d*2, 0, 90);

これも混ぜると、こんな感じ。

function setup() { ... }

function draw() {
 ...

   /** 変更 **/
   let mode = int(random(4));  // 0~3のランダムな値
   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);
   }

 ...
}

画像10

これはイイ...!随分と様になってきました!
最後にもう一工夫。三角形と扇型の向きが揃ってるので、これもバラバラにしちゃいましょう。

function setup() { ... }

function draw() {
 ...

   let rot = int(random(4)) * 90;  // 0,90,180,270のランダムな角度
   push();
   translate(cx, cy);
   rotate(rot);  // rot度だけ回転
   fill(0);
   ...
   pop();

 ...
}

画像11

おお...もう立派な作品ですね...!ひとまず最初の作品は完成です!!

なお、最終的なコードはこちら。

function setup() {
 createCanvas(600, 600);
 noLoop();

 angleMode(DEGREES);
}

function draw() {
 background(220);

 let num = 6;
 let offset = width / 5;
 let margin = offset / 10;
 let d = (width - offset * 2 - margin * (num - 1)) / (num - 1);
 for (let i = 0; i < num; i++) {
   for (let j = 0; j < num; j++) {
     let cx = (d + margin) * i + offset;
     let cy = (d + margin) * j + offset;
     let rot = int(random(4)) * 90;
     let mode = int(random(4));

     push();
     translate(cx, cy);
     rotate(rot);
     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();
   }
 }
}

画像3

投稿してみる

さて、これでアナタの記念すべき第1作目ができました。
あとは投稿するのみ!さっそく投稿してみましょう。

投稿先は様々な選択肢があります。SNS や投稿サイト、はたまたポートフォリオサイトに載せたり、note みたいなブログもいいですよね。
わたしの一番のオススメは SNS で、特に Twitter と Instagram です。手軽ですし、非常に幅広い不特定多数の人に見てもらえます。

でも今回はせっかくなので、NEORT というサイトに投稿してみましょう。

NEORT に投稿

NEORT をカンタンに紹介しますと、「デジタルアート投稿サイト」です。
幅広い形式のデジタル作品が投稿可能で、毎日たくさんのクリエイターさんたちが投稿されています。
また、サイト上で作品を作ってそのまま投稿もできちゃいます!他の作品のコードも見れちゃうので、ぜひ気に入った作品を見つけてみてください。

では、まずはサイトにアクセスして、アカウントを登録してください。

次は投稿していきます。
右上にある [CREATE ART] をクリックし、[JS / HTML / CSS] を選択してください。すると、こんな画面になります。

スクリーンショット 2019-10-22 19.52.43

スクリーンショット 2019-10-22 19.52.58

次に、画面上部にある歯車マークをクリックして、p5.js 用のライブラリを設定します。検索で "p5.js" と入れると一番上に出てくるので、それを選択してください。

スクリーンショット 2019-10-22 19.54.17

これで準備完了!あとは、先ほど作ったコードをコピペするだけです。

スクリーンショット 2019-10-22 19.55.22

おや、なんか画面が偏ってますね...。ちょっとヤダ。

そういえば、画面の大きさを 600x600 に手動で設定していましたね。
これがウィンドウの大きさと違うので、こうなってしまっているようです。

なので、ウィンドウの大きさに合わせるようにします。コードを下記のように修正してください。

function setup() {
 /** 変更: ウィンドウサイズにキャンバスサイズを合わせる **/
 createCanvas(windowWidth, windowHeight);

 ...
}

function draw() {
 ...

 /** 変更: offsetの大きさをタテとヨコで変える **/
 let num = 6;
 let offset = min(width, height) / 5;
 let margin = offset / 10;
 let d = (min(width, height) - offset * 2 - margin * (num - 1)) / (num - 1);
 let x_offset = (width - d * num) / 2;
 let y_offset = (height - d * num) / 2;
 for (let i = 0; i < num; i++) {
   for (let j = 0; j < num; j++) {
     let cx = (d + margin) * i + x_offset;
     let cy = (d + margin) * j + y_offset;
     let mode = int(random(4));

     ...
   }
 }
}

スクリーンショット 2019-10-22 20.04.51

これでヨシ!バランスよく中央に寄りましたね。

最後に投稿します。右上の [POST] ボタンをクリックし、作品タイトルやキャプションを入れて [SUBMIT] をクリックすれば投稿完了です。

スクリーンショット 2019-10-22 20.05.55

これで "作る → 投稿する" の流れが一通り体験できました!
記念すべきアナタの Daily coding の第一歩です。おめでとうございます。

SNS に投稿

さて、せっかくならもうひとつ、SNS への投稿の流れもご紹介します。
やり方は自由ですが、ここでは基本的な「画像をキャプチャして投稿」の流れを体験しましょう。

まず画像をキャプチャします。p5.js にはキャプチャ用の関数があるので、それを利用しましょう。
以下のコードをコピペして追加してください。

function keyPressed() {
 // enter キーを押したら "screenshot.png" が保存される
 if (keyCode == ENTER) { save('screenshot.png'); }
}

あとは、画像をクリックした状態で enter キーを押せば、"screenshot.png" という名前で画像が保存されます。
保存した画像を SNS で投稿すれば終わりです。ぜひ Twitter や Instagram で投稿してみてくださいね!

画像4

おわりに

さて、長くなりましたが、これで「はじめる編」は以上となります。いかがだったでしょうか?

今回は、Daily coding の第一歩である "作る → 投稿する" の流れを体験してもらいました。なんにせよ、一通りやってみるって大事だと思います。
今回の記事が少しでも Daily coding やクリエイティブ・コーディングに興味を持つきっかけとなれば幸いです。

また、今回は p5.js の関数などの細かい説明は割愛させていただきました。
もし細かい部分が気になる方は、ぜひ今回参考にさせていただいた資料を読んでみてください!(もっと丁寧で分かりやすいので...。)

さて、次回はいよいよ「つづける編」をご紹介しようと思います。
「いざ興味は持ったものの、続けるのが難しい...。」という人のために、実際に手を動かしながら、続けるためのコツをご紹介できたらと思います。

具体的には、こんな感じのものを作ったりする予定(たぶん)。

画像18

なんか複雑に見えますが、実は今回の作品のアレンジにすぎないのです。
もし少しでも興味を持っていただけた方は、ぜひ今回と合わせて、次回の記事も読んでみてください。

画像20

あとがき

...ふぅ、疲れた。文章を書くのは相変わらずムズカシイですね。
しかも「これホントに需要あるかな?」という葛藤もあって、余計に...。
でも、少しは誰かの役に立っていればいいな、と思ってます。

そして ”次” はいつ書けるか...?そもそも書いてる余裕があるの...?
という感じなので、気長に待ってもらえると助かります。

以上、ここまで読んでくださってありがとうございました!
ご指摘やコメント等、ぜひお待ちしております。

ではでは、ごきげんよう〜。

画像19

参考


この記事が気に入ったらサポートをしてみませんか?