Processing.jsでWeb時計

お仕事の都合でJSやCSSの調べ物をしていてたまたま見付けたこちらの記事、
 

CSSとjQueryを使ったカラフルな時計
ここでは、基本的なCSSとJavaScriptを使用して、どのように時計が作成できるかを説明している。

DEMO

すごくシンプルできれいなデザインですけど、CSSとjQueryの組み合わせで書いてるので、えらくソースが長くないですか？

Processing.jsを使っても同じようなことができます。これ☟

Web Clock (Fill)
 

Source code: webClockFill.pjs

しかも、ソースコードはCSS+jQueryのものよりずっと短くて済みます。

color bgClr = color(255); //background color
PFont font; 

void setup(){
  int w = 400; //width
  size(w,w * 0.5);
  background(bgClr);
  smooth();
  frameRate(2); //frame rate:2 per 1 second
  font = loadFont("Helvetica-48.vlw");
}

void draw(){
  background(bgClr);
  noStroke();
  color arcClr = color(#041643); //arche color
  float arcSize = height/2; //arche size
  float arcStart = PI * 1.5; //start from 0 degree
  color tClr = color(#E8A700); //text color
  float tSize = 48; //text size
  
  textAlign(CENTER);
  textFont(font, tSize);
 
  //hour
  fill(arcClr);
  arc(width * 0.2, height * 0.5, arcSize, arcSize, arcStart, arcStart + radians(map(hour() % 12, 0, 12, 0, 360)));
  fill(tClr);
  text(hour(), width * 0.2, height * 0.5 + tSize/3);
 
  //:
  text(':', width * 0.35, height * 0.5 + tSize/3);
 
  //minute
  fill(arcClr);
  arc(width * 0.5, height * 0.5, arcSize, arcSize, arcStart, arcStart + radians(map(minute(), 0, 60, 0, 360)));
  fill(tClr);
  text(minute(), width * 0.5, height * 0.5 + tSize/3);
 
  //:
  text(':', width * 0.65, height * 0.5 + tSize/3);
 
  //seconds
  fill(arcClr);
  arc(width * 0.8, height * 0.5, arcSize, arcSize, arcStart, arcStart + radians(map(second(), 0, 60, 0, 360)));
  fill(tClr);
  text(second(), width * 0.8, height * 0.5 + tSize/3); 
}

上のサンプルはarcheを塗りつぶしていますが、strokeだけで表現するとこんな感じになります☟

Web Clock (noFill)
 

Source code: webClockNoFill.pjs

やっぱりProcessing(.js)は短くシンプルにコーディングできるところが素晴らしいですよね。

今回紹介したWeb時計をブログなんかのWebサイトに埋め込みたい！という方はどうぞご自由にソースコード使って下さい。
Processing.jsをWeb上に埋め込む方法は、過去記事で書いてます。
 

WordPressでProcessing.jsを動かす方法
basicwerk.com/blog/archives/68

記事ではWordPressに埋め込む事を前提に書いてますが、レンタルサーバ上の特に制約のないWebサイトに埋め込むのであれば、プラグインとか要らないのでもっと簡単な筈です。

 
 
追記
この記事をアップしたあと、Web時計の数字が2フレーム目以降、textSizeで指定したポイント数を無視してしまう不具合がありました。
何故か1フレーム目は指定した大きさで表示される・・・。
原因は分からないんですが、任意のFontを使用＋textSize()でポイント指定という方法を取り下げて、PFontでFontファイルを読み込み＋textFont()で使用Fontとポイントを指定する方法を採用したら不具合は解消されました。
 
参考までに報告しておきます。