集中線

エラー&エラー

 焦点をドラッグできます。

   

ソース

  //初期化
  var oIpt = document.getElementById("focusnum");
  var oBtn = document.getElementById("refresh");
  //線の数と円形のサイズは線の太さにも影響する
  var lineNum = 500;//線の数
  var r = 250;//円形のサイズ
  var posA = new Point(view.size / 2);//焦点位置
  var rect = new Path.Rectangle(new Point(0, 0), view.size);
  rect.fillColor = "#111";
  var pathFocus = new Path();
  var pathCopy = new Path();
  var lineLength = new Array();
  //描画
  function draw(){
    for(i = 0; i < lineNum; i++){
      pathFocus.segments[i * 3].point =
        pathCopy.segments[i * 3].point * lineLength[i] + posA * (1 - lineLength[i]);
    }
  }
  //集中線作成
  function makePath(){
    //入力されている値を取り出す
    var focusNum;
    if (isNaN(oIpt.value)){
      focusNum = 50;
    }else{
      focusNum = parseInt(oIpt.value);
      if (focusNum < 10){focusNum = 10;}
      if (focusNum > lineNum){focusNum = lineNum;}
    }
    //パス作成
    pathFocus.removeSegments();
    pathFocus = new Path.RegularPolygon(view.size / 2, lineNum * 3, r);
    pathCopy = pathFocus.clone();
    pathFocus.fillColor = "white";
    //線の長さを設定する
    for(i = 0; i < lineNum; i++){
      if (Math.random() < focusNum / lineNum){
        lineLength[i] = Math.random() * 0.15 + 0.15;
      }else{
        lineLength[i] = 1;
      }
    }
    draw();
  }
  //起動時の描画
  makePath();
  //ドラッグ処理
  function onMouseDrag(event){
    posA += event.delta;
    draw();
  }
  //ボタンを押した時の再設定&再描画
  oBtn.addEventListener('click', function(e){
    makePath();
    view.draw();//ここには画面更新が必要
  }, false);

<paperjs_focus.js>

その他

 ベクトルを自在に扱えると真価を発揮するライブラリでしょう。使いこなせるようになるには時間がかかりそうですが、サンプルを見ると何か色々とできそうで楽しみです。