<div id="canvasArea"><canvas id="canvas" width="400" height="400"></canvas></div>
  <div class="export_log"><span>Click exprot, you can get value.</span></div>
<span class="src">src by http://kkoo.hateblo.jp/entry/2015/02/18/192007</span>
	body
	{
    margin: 0;
		background-color:#cccccc;
    background: #000;
	}

	#canvasArea{
		background-color:#ffffff;
    position: absolute;
    top: 0;bottom: 0;left: 0;right: 0;
    margin:auto;
		width:400px;
		height:400px;
	}

span.src{
  display: inline-block;
  width: 100%;
  font-size: 0.8em;
  text-align: center;
}

.export_log{
  display: none;
  span{
    position: absolute;
    top: 4px;
  }
  p{
    margin: 20px 8px;
  }
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  min-height: 10px;
  background: #000;
  color: #fff;
  height: 10px;
  height: 4em;
  &:hover{
    height: 50%;
  }
}
View Compiled
var circle;

var MAX = 10;
var RADIUS = 100;
var wobblyPitch = 50; 
var wobblyPitchGap = 50; 
var wobblyVol = 50; 
var wobblyVolGap = 50; 
var circleColor = '#000000';
var strokeColor = '#ff0000';
var gbColor = '#ffffff';
var strokeWidth = 0;
var maskFlag = false;

var img = document.createElement('img');
img.src = 'http://creatorsblog.nijibox.jp/wp/wp-content/uploads/2016/07/doya_cat_s.png';
var FPS = 60;
var canvas, ctx, timer, point;
var CENTER = {x:200, y:200};

var Point = function(c, r, rota)//ポイントを打つ(canvasの中央, 半径, 角度)
{
  this.x, this.y;
  this.centerX = c.x; //CENTER.x (200)
  this.centerY = c.y; //CENTER.y (200)
  this.radian = rota * (Math.PI / 180); //
  this.radius = r;

  this.speed = Math.random() * 10 * (wobblyPitchGap / 50) + 5 * (wobblyPitch / 50); //ぐらつきのスピード(サイン波の周期)
  this.r = Math.random() * 0.1 * (wobblyVolGap / 50) + 1 * (wobblyVol / 50); //ぐらつきの幅とばらつき度
  this.rota = 0;


  this.update = function(){ //ぐらつきを足してあげている
    var plus = Math.cos(this.rota * (Math.PI / 180)) * this.r; //サイン波を足してあげる(ここのrotaはサイン波をランダムにするため)

    this.radius += plus; 
    var cos = Math.cos(this.radian) * this.radius;
    var sin = Math.sin(this.radian) * this.radius;

    this.x = cos + this.centerX;
    this.y = sin + this.centerY;

    this.rota += this.speed;

    if(this.rota > 360){ this.rota -= 360; };
  }  
}

function initialize() //初期化 point配列を作るよ
{
  var rota = 360 / MAX;
  var i;
  for(i = 0; i < MAX; i++)
  {
    point[i] = new Point(CENTER, RADIUS, rota * i);
  }
}

function update() //update point配列を
{
  for(var i = 0; i < MAX; i++)
  {
    point[i].update();
  }
  draw();
}

function draw() //描画関数 Pointをパスで描く
{
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  if(maskFlag == true){ //おまけの画像
    ctx.drawImage(img, 0, (canvas.width - (RADIUS * 2.5))/2, RADIUS * 4, RADIUS * 2.5);
  }
  ctx.fiiStyle = "rgba(0, 0, 0, 0)";

  ctx.beginPath();

  var xc1 = (point[0].x + point[MAX - 1].x) / 2;
  var yc1 = (point[0].y + point[MAX - 1].y) / 2;

  ctx.moveTo(xc1, yc1);

  for(var i = 0; i < MAX - 1; i++){

    var xc = (point[i].x + point[i + 1].x) / 2;
    var yc = (point[i].y + point[i + 1].y) / 2;

    ctx.quadraticCurveTo(point[i].x, point[i].y, xc, yc)
  }

  ctx.quadraticCurveTo(point[i].x, point[i].y, xc1, yc1);
 
  ctx.strokeStyle = strokeColor;

  if(maskFlag == true){            //画像マスク時。画像の上に穴あき図形を重ねてマスクする
    ctx.fillStyle = bgColor;
    ctx.lineWidth = strokeWidth * 2;
    ctx.rect(0, 0, canvas.width, canvas.height)
    if(strokeWidth > 0){
      ctx.stroke();
    }
    ctx.closePath();
    ctx.fill("evenodd");
  }else{                           //通常時
    ctx.fillStyle = circleColor;
    ctx.lineWidth = strokeWidth;
    ctx.closePath();
    ctx.fill();
    if(strokeWidth > 0){           //strokeWidth = 0;でもなぜか線が出てたので、とりあえずこれで対応
      ctx.stroke();
    }
  }
}

var guiControls = function(){
  this.MAX = 10;
  this.RADIUS = 100;
  this.wobblyPitch = 50; 
  this.wobblyPitchGap = 50; 
  this.wobblyVol = 50; 
  this.wobblyVolGap = 50; 
  this.circleColor = '#000000';
  this.bgColor = '#ffffff';
  this.strokeColor = '#ff0000';
  this.strokeWidth = 0;
  this.maskFlag = false;
  var count = 1;
  this.export = function(){ //ログをとります
    var log = count + "回目の値<br>";
    for(var key in circle){
      if(key == "export" || key == "maskFlag"){ continue;}
      log += "var " + key  + " = " + circle[key] + ";</br>" ;
    }
    $(".export_log").prepend("<p>" + log + "</p>");
    count++;
  }
};

function setVal(){        //変化したパラメータを更新
  MAX = Math.round(circle.MAX);
  RADIUS = floatFormat(circle.RADIUS);
  wobblyPitch = floatFormat(circle.wobblyPitch); //(0~200)
  wobblyPitchGap = floatFormat(circle.wobblyPitchGap); //(0~100)
  wobblyVol = floatFormat(circle.wobblyVol); //(0~200)
  wobblyVolGap = floatFormat(circle.wobblyVolGap); //
  circleColor = circle.circleColor;
  bgColor = circle.bgColor;
  strokeColor = circle.strokeColor;
  strokeWidth = floatFormat(circle.strokeWidth);
  maskFlag = circle.maskFlag;
  
  $("#canvasArea").css("background-color",bgColor);
  point = [];  
  initialize();  
  
  //logのためにcircle更新
   circle.MAX = MAX;
   circle.RADIUS = RADIUS;
   circle.wobblyPitch = wobblyPitch;
   circle.wobblyPitchGap = wobblyPitchGap;
   circle.wobblyVol = wobblyVol;
   circle.wobblyVolGap = wobblyVolGap;
   circle.circleColor = circleColor;
   circle.bgColor = bgColor;
   circle.strokeColor = strokeColor;
   circle.strokeWidth = strokeWidth;
}

 function floatFormat(n){
  return Math.round(n * 100)/100;  
}

window.onload = function() {
  circle = new guiControls;
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  point = [];
  initialize();
  timer = setInterval(update, 1000 / FPS); //fpsでupdate関数を実行

  var gui = new dat.GUI();
  
  var f1 = gui.addFolder('wobbly value');
  f1.add(circle, "MAX", 3, 100).onChange(setVal);
  f1.add(circle, "RADIUS", 0, 200).onChange(setVal);
  f1.add(circle, "wobblyPitch", 0, 200).onChange(setVal);
  f1.add(circle, "wobblyPitchGap", 0, 100).onChange(setVal);
  f1.add(circle, "wobblyVol", 0, 200).onChange(setVal);
  f1.add(circle, "wobblyVolGap", 0, 100).onChange(setVal);
  
  var f2 = gui.addFolder('color');
  f2.addColor(circle, "circleColor").onChange(setVal);
  f2.addColor(circle, "bgColor").onChange(setVal);
  f2.addColor(circle, "strokeColor").onChange(setVal);
  f2.add(circle, "strokeWidth",0 ,20).onChange(setVal);
  f2.add(circle, "maskFlag").onChange(setVal);
  
  gui.add(circle, "export").onChange(setVal);
};
Rerun