JavaScriptとp5.jsを使って Generative Artとカウントダウン

2019年7月17日 20:05

こんにちはKAORIです。
今回は、自己流で勉強しているp5.jsと、先日の勉強会で出たJavaScriptの課題をコラボして学校の１周年記念パーティーまでのカウントダウンページを作成し、初deployまでしました✨✨✨

これを表示させています。
まずは、index.htmlにhtmlとJavaScriptでカウントダウンページを作成します。

 <body>
   <div class="main-wrapper">
     <script src="js/p5.min.js"></script>
     <script src="sketch.js"></script>
     <div id="canvas"></div>
     <div style="position: absolute;">
       <!-- <div style="top: 1500px; position: absolute;"> -->
       <h2>G's FUKUOKA1周年パーティー開催まで</h2>
       <!-- </div>
     <div> -->
       <h1 id="timer">//ここからJavaScript。カウントダウン表示
         あと<span id="day"></span>日<span id="hour"></span>時間<span
           id="min"
         ></span
         >分<span id="sec"></span>秒
       </h1>
     </div>
   </div>

上記はhtmlになります。
idやstyleを使ってカウントダウンやGenerativeを表示させています。

<script>
     // ここにjavascriptの処理を記述しよう！
     // const date = new Date("2019/07/28");
     // date.setMonth(date.getMonth() - 1);
     // date.setDate(date.getDate() + 60);

     var countdown = function(due) {
       var now = new Date();

       var rest = due.getTime() - now.getTime();
       var sec = Math.floor(rest / 1000) % 60;
       var min = Math.floor(rest / 1000 / 60) % 60;
       var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
       var days = Math.floor(rest / 1000 / 60 / 60 / 24);
       var count = [days, hours, min, sec];

       return count;
     };

     var goal = new Date(2019, 6, 28, 13, 0); //コンピューター上では０〜１２表記になるので−１をして設定する。

     var recalc = function() {
       var counter = countdown(goal);
       document.getElementById("day").textContent = counter[0];
       document.getElementById("hour").textContent = counter[1];
       document.getElementById("min").textContent = counter[2];
       document.getElementById("sec").textContent = counter[3];
       refresh();
     };

     var refresh = function() {
       setTimeout(recalc, 1000);
     };
     recalc();
   </script>

コンピューター上では0が１月になるため、実際のカウントと合わせるために設定上６月28日と入力するが、６が７月になるのでこのように入力。
このファンクションではゴール設定されたDATEオブジェクトと現在時刻のDATEオブジェクトを、どちらもミリ秒(1000分の1秒)に変換してから引き算し、その結果から算出します。
いろいろなやり方があるので、みなさんがやりやすい方法でカウントダウンさせてみてください。

[p5.js]
function setup() {
 let canvas = createCanvas(windowWidth, windowHeight); //①
 canvas.parent("canvas"); //②   ※①と②で重ねて表示が可能になる
 noStroke();
 background(255);
 frameRate(3); //アートが出てくる速度を調節できる？(processingだった)
}

function draw() {
 // set random points to the formula
 var c = [
   ceil(random(7)) * 0.1, // a
   ceil(random(7)) * 0.1, // b
   ceil(random(97)) + 3, // m
   ceil(random(20)), // n1
   ceil(random(100)), // n2
   ceil(random(100)) // n3
 ];

 // set random fill color
 fill(
   color(
     "hsla(" +
       ceil(random(360)) +
       "," +
       (ceil(random(50)) + 50) +
       "%," +
       ceil(random(50)) +
       "%," +
       ceil(random(90)) * 0.01 +
       ")"
   )
 );

 // draw anywhere inside the canvas
 translate(ceil(random(width)), ceil(random(height)));

 // start drawing our shape
 beginShape();
 for (var theta = 0; theta < 2 * PI; theta += 0.01) {
   var rad = r(theta, c[0], c[1], c[2], c[3], c[4], c[5]);
   var x = rad * cos(theta) * 50;
   var y = rad * sin(theta) * 50;
   vertex(x, y);
 }
 endShape();
}

function r(theta, a, b, m, n1, n2, n3) {
 return pow(
   pow(abs(cos((m * theta) / 4.0) / a), n2) +
     pow(abs(sin((m * theta) / 4.0) / b), n3),
   -1.0 / n1
 );
}

p5.jsは説明が難しいですが、今のところ色んなところで使用可能なことがわかってきました|qд･,,)ㄘら
最近は、ストーリーと連動してアートを次々と表示が変化していくように出来るようになるにはどうしたらいいか考えています。
データサイエンスとのコラボも面白そうだなと思っています。

①回目にnoteで投稿した記事で、p5.jsの勉強方法やz.dogのことを書いていますので良かったら読んでみてください。[マリオ(z.dog)]

最後までお読みいただきありがとうございます(^ ^)*+:.

プログラミング初心者おすすめ参考書↑

現在、福岡でプログラミンなどの勉強したり、フリーランスとして活動中です。温かい目で見守って頂けますと幸いです。よろしくお願いします⋆｡˚ ༘*