<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
}

var finishDate = new Date(2018, 2-1, 3);

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

function draw() {
  var now = new Date();
  background(220);
  textSize(24);
  text("卒業研究発表会まであと", 0, 50);
  textSize(160);
  text(diffDays(now, finishDate) + "日", 0, 250);
  textSize(24);
  text("です", 0, 350);
}

function diffDays(d1, d2)
{
  var ndays;
  var tv1 = d1.valueOf();  // msec since 1970
  var tv2 = d2.valueOf();

  ndays = (tv2 - tv1) / 1000 / 86400;
  ndays = Math.round(ndays - 0.5);
  return ndays;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.