DIR : /home/kozerus/public_html/jkwii/js/jsdoit/Colorful-Lines/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/Colorful-Lines

/**
 * Colorful Lines
 * 
 * @author clockmaker
 * @see http://clockmaker.jp/blog/
 * 
 * forked from wonderfl
 * http://wonderfl.net/c/qlFz
 */

// -----------------------------------------
// 定数
// -----------------------------------------
var FPS = 60; // フレームレート
var FRAME_MSEC = 1000 / FPS >> 0; // インターバル時間
var CENTER_X = 235; // 中心X座標
var CENTER_Y = 235; // 中心Y座標
var MAX = 220; // ループ回数

// -----------------------------------------
// 初期化
// -----------------------------------------

// 変数の初期化
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var n = 0; // カウント

// イベントハンドラの登録
setInterval(intervalHandler, FRAME_MSEC);

// -----------------------------------------
// イベントハンドラ
// -----------------------------------------

/**
 * タイマー
 */
function intervalHandler(){
  // 描画をリセット
  context.clearRect(0, 0, 465, 465);
  
  // 変数
  var oldX = CENTER_X;
  var oldY = CENTER_Y;
  
  // 模様を描く
  for (var i = 0; i < MAX; i++) {
    context.beginPath();
    context.lineWidth = 1;
    context.strokeStyle = getColorHSV(i/MAX*360+n*4000);
    context.moveTo(oldX, oldY);
    context.lineTo(
      oldX = CENTER_X + (i * Math.cos(i + (i * n))), 
      oldY = CENTER_Y + (i * Math.sin(i + (i * n))));
    context.stroke();
  }
  
  // カウントを更新
  n += .00025;
}

// -----------------------------------------
// ユーティリティー
// -----------------------------------------

/**
 * HSVカラーを取得する関数です。
 * @param {Number} h
 * @return {String} "rgb(r, b, g)"の文字列です。
 */
function getColorHSV(h){
  var ht = (((h %= 360) < 0) ? h + 360 : h) / 60;
  var hi = Math.floor(ht);
  var r, g, b;
  var f = Math.round;
  switch (hi) {
    case 0: r = 0xff; g = f(0xff *(ht-hi));     b = 0; break;
    case 1: g = 0xff; r = f(0xff *(1-(ht-hi))); b = 0; break;
    case 2: g = 0xff; b = f(0xff *(ht-hi));     r = 0; break;
    case 3: b = 0xff; g = f(0xff *(1-(ht-hi))); r = 0; break;
    case 4: b = 0xff; r = f(0xff *(ht-hi));     g = 0; break;
    case 5: r = 0xff; b = f(0xff *(1-(ht-hi))); g = 0; break;
  }
  return "rgb(" + r + ", " + g + ", " + b + ")";
}