Myu

2017年4月2日日曜日

関数型プログラミングの基礎　P２７７

リスト７．９１、７．９２のmatchiの定義を exp.call(pattern,pattern)から、exp(pattern)にかえてみた。これでも動くようだが、call(pattern,pattern)を使う意味がいまいちわからない。

<script>
 /* #@range_begin(algebraic_type_maybe) */
      var maybe = {
        match: (exp, pattern) => {
          return exp(pattern);
        },
        just: (value) => {
          return (pattern) => {
            return pattern.just(value);
          };
        },
        nothing: (_) => {
          return (pattern) => {
            return pattern.nothing(_);
          };
        }
      };
      /* #@range_end(algebraic_type_maybe) */

var MAYBE = {
        /* #@range_begin(maybe_monad) */
        /* unit:: T => MAYBE[T] */
        unit: (value) => {
          return maybe.just(value);
        },
        /* flatMap:: MAYBE[T] => FUN[T => MAYBE[U]] => MAYBE[U] */
        flatMap: (instanceM) => {
          return (transform) => {
            return maybe.match(instanceM,{
              /* 正常な値の場合は、transform関数を計算する */
              just: (value) => { 
                return transform(value);
              },
              /* エラーの場合は、何もしない */
              nothing: (_) => { 
                return maybe.nothing();
              }
            });
          };
        },
        /* ヘルパー関数  */
        getOrElse: (instanceM) => {
          return (alternate) => {
            return maybe.match(instanceM,{
              just: (value) => {
                return value;
              },
              nothing: (_) => {
                return alternate;
              }
            });
          };
        },
        /* #@range_end(maybe_monad) */
      };

      
       var add = (maybeA,maybeB) => {
          return MAYBE.flatMap(maybeA)((a) => {
            return MAYBE.flatMap(maybeB)((b) => {
              return MAYBE.unit(a + b);
            });
          });
        };
        var justOne = maybe.just(1);
        var justTwo = maybe.just(2);

alert(MAYBE.getOrElse(add(justOne,justOne))(null) );
   alert(MAYBE.getOrElse(add(justOne,maybe.nothing()))(null));
   
        
</script>

2017年3月31日金曜日

関数型プログラミングの基礎　代数的データ構造のmatch関数

scalaにある便利なパタンマッチをjavascriptで実現する方法が書いてあった。

var empty = () => {
return (pattern) => {
return pattern.empty();
};
};

var match = (data,pattern) => {
return data(pattern);
};

match(empty(),{
empty: (_)=> {
return true;
},
cons: (head,tail) => {
....
}
}); //ここでは、empty()にマッチして　trueが返される。

2017年3月29日水曜日

関数プログラミングの基礎　P67

無限ストリームの例が出ていた。twoStepは任意の関数として、さまざまな無限数列がつくれるということのようです。
var iterate = (init) => {
return (step) => {
return [init, (_) => {
return iterate(step(init))(step);
}];
};
};

var twoStep = (n) => {
return n+2;
};

var evenStream = iterate(2)(twoStep);
　ただ、ふと、この数列の値はどうやってとりだすのか考えてしまった。
evenStream[1]()　
evenStream[1]()[1]()
evenStream[1]()[1]()[1]()
という具合に、入れ子になった状態のストリームの中身を確かめるしかないのだろうか？
と思っていたら　P69にelemAtという要素を求めるために関数が出てきており疑問は解決しました。

2017年3月28日火曜日

関数型プログラミングの基礎

javascriptでも関数型プログラミングができるということで、上記の書籍を読んでみた。
さっそく、リスト２．４で　少し混乱する。
　var get = (key, obj) =＞ {
return obj(key); 　
};
var set = (key, value, obj) => {
　　return (key2) => {
if(key === key2) {
return value;
　 } else {
　 return get(key2,obj);
}
};
　};

var ob;
ob=set('a',1,ob); １
ob=set('b',2,ob);　２
などと試し見た。
get('a',ob);
1
get('b',ob);
2

と、確かにできた。

１ではob('a')が1へ対応する関数
(key2) =＞ {
if ('a'===key2) {
return 1;
} else {
return ob(key2);
}
};
};　ができて
２ではob('b')が２へ対応する関数
(key2) =＞ {
if ('b'===key2) {
return 2;
} else {
return ob(key2);
}
};
};
ここのob(key2)は
ob('a')が１へ対応するもの、つまり１の関数がきている
これを再帰的に繰り返しているということだろうか？

2017年3月25日土曜日

二次方程式を解く javascript

javascriptの勉強のためにつくってみた。

利用させていただいたサイト
https://www.mathjax.org/
http://d.hatena.ne.jp/kochann/?of=6
問題を乱数で出題するようにしています。
.netなどでつくるより、つくりやすいところとそうでないところがあり、一長一短があるような気がします。
javascriptは、型の定義の融通がきく半面、何の型なのか常に意識する必要はあるようです。画面上の細かい調整にいまいち慣れてないので、レイアウトでけっこう時間がかかってしまいます。あと、^2など２乗の計算を認識しない？ようです。*+-は大丈夫なようですが。
　さまざまなパータンの二次方程式に対応させるため、だいぶ長くなってしまいました。
2017.5.9 bug fix　有理数解のときのメッセージ表示に不具合あったものを修正しました。

 
 <!DOCTYPE html>
<html>
  <head>
    <title>２次方程式</title>

<style type="text/css">
<!--

div {font-size:50px;}
span#hyoka {color:#ff0000;font-size:30px;}
button {font-size:40px;}

-->
</style>
</head>
  
  <body >
      <script type="text/javascript"  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    TeX: { equationNumbers: { autoNumber: "AMS" }},
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    },
    "HTML-CSS": { matchFontHeight: false },
    displayAlign: "left",
    displayIndent: "2em"
  });
</script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <br>
 二次方程式を解の公式をつかって解きましょう　　<button id="btn" value="ans" style="font-size:20px;">答えを見る</button><br><br>
    <input type="radio" name="ptrn" value="kihon"  checked >
    <label >レベル０（aの係数が１）</label> 
    <input type="radio" name="ptrn" value="noroot" >
    <label >レベル１（ルート計算なし）</label> 
    <input type="radio" name="ptrn" value="yaku" >
    <label >レベル２（約分あり）</label>
    <input type="radio" name="ptrn" value="seisu">
    <label >レベル３（有理数解）</label> 
   <button id="btn" value='shutudai' style="font-size:20px;">を出題</button><br><br>

<table width=1000>
<tr>
<td width=40% valign=top>
<div id='mondai'>
</div>
<div id='waku'>
</div>
<span id='hyoka' ></span><br>
</td>
<td>
<button id="btn" value='7'>7</button>　
<button id="btn" value='8'>8</button>　
<button id="btn" value='9'>9</button><br>
<button id="btn" value='4'>4</button>　
<button id="btn" value='5'>5</button>　
<button id="btn" value='6'>6</button><br>
<button id="btn" value='1'>1</button>　
<button id="btn" value='2'>2</button>　
<button id="btn" value='3'>3</button><br>
<button id="btn" value='0'>0</button>　
<button id="btn" value='×'>*</button>　
<button id="btn" value='\pm'>±</button>　 
<button id="btn" value='-'>-</button>　
<button id="btn" value='+'>+</button><br>
<button id="btn" value='('>(</button>　
<button id="btn" value=')'>)</button>　
<button id="btn" value='x='>x=</button>
<button id="btn" value=','>,</button>
<button id="btn" value='frac' style="font-size:30px;">分の</button>
<button id="btn" value='sqrt' >√</button><br>
<button id="btn" value='cls' style="font-size:30px;">１行消</button>
<button id="btn" value='bs' style="font-size:30px;">１字消</button>
<div id='ans' style='display:none;'>
</div>
</td>
</tr>
</table>
<script>
var mode='';  var bunbo='';  var bunshi='';  var root='';  var gyo=0;
var nk;
var a,b,c;
var seikairafter; var aseikaivpre; var aseikaisi ; var aseikaibo;
var flg1,flg2,kmm;

 $(function() {
  $('button').click(function(e) { 
       var st=e.target.value;
       

       
       if(st=='ans') {
        $('#ans').toggle();
        exit;
       }
       
    if(st=='shutudai'){//***********************************************shutudai
     mondai();
     exit;
    }
  //****************************************************************************
    if (st.trim()==','){
     kmm=true;     
    }
  
    if (st=='sqrt'||st=='frac'||st=='default') {
     if (bunsi=='1' && st=='frac') {
      alert('分母１は分数になりません');
      bunbo='1';
      bunsi='';
      mode='nofrac';
     }else if(bunsi!='1' && st=='frac'){    
      if (mode=='nofrac'){ //分数状態でなければ「分の」をクリックすると、それまでの入力を分母にコピーする
       bunbo=bunsi;
       bunsi='';
       mode='frac';
      }else {//それ以外の状態ならば「分の」をクリックすると、そのままルートの外を変更できる
       mode='frac';
      }

     }else{
      mode=st;  
     }     
     nk.disp(bunbo,bunsi,root,mode);
     exit;
    }
  
    if (st=='x=') {
      bunbo='1';bunsi='';root='';
      mode='nofrac';      
      gyo=gyo+1; 
      nk=new Keisan('s'+gyo);
      nk.disp(bunbo,bunsi,root,mode);

     exit;
    }
  
    if (st=='cls'){
     $('#s'+gyo).remove();
     gyo=gyo-1;
     kmm=false;
    }
    
   
  
 switch (mode){
    case 'frac':
    case 'nofrac':
      if (st=='bs') {
        if(bunsi.substr(bunsi.length-3)=='\\pm')
        {bunsi=bunsi.substr( 0, bunsi.length-3) ;} 
       else
        {bunsi=bunsi.substr( 0, bunsi.length-1) ;}
      }else{
       bunsi=bunsi+st;
      }
      break;
     case 'sqrt':
      if (st=='bs') {
       root=root.substr( 0, root.length-1 ) ;
      }else{
       root=root+st;
      }
      break;
     default:
      if (st=='bs') {
       bunbo=bunbo.substr( 0, bunbo.length-1 ) ;
      }else{
       bunbo=bunbo+st;
      }
      break;
     }

     nk.disp(bunbo,bunsi,root,mode);  
     hanbetu(bunbo,bunsi,root);
    
  });
});


 //****************************::::
 function hanbetu(bunbo,bunsi,root) {
    var bunbox=bunbo;
    var bunsix=bunsi;
      
    if (bunsix.substr(-2,2)=="pm"){//末尾±なら削除
     bunsixx=bunsix.substr(0,bunsix.length-3);
     rpr="1";
     
    }else if(bunsix.indexOf("pm")>=0){  
     tmp=bunsix.replace("\\pm",",");
     var bsx=tmp.split(",");
     bunsixx=bsx[0];
     rpr=bsx[1];      
    }else {       
     bunsixx=bunsix;rpr="1";
    }
        //    alert(bunsi+" "+bunsixx+" "+rpr);

    var rootx=root;
    bunbox=bunbox.replace(/×/g,"*");
    bunsix=bunsixx.replace(/×/g,"*");
    rootx=rootx.replace(/×/g,"*");

    bo=eval(bunbox);  si=eval(bunsix);  ro=eval(rootx);
  
    rpre=eval(rpr)*aOfaRootb(soinsu(ro));
    rafter=bOfaRootb(soinsu(ro));
      
  // alert(bo+" "+si+" "++"root"+);
   //*********************ここから先にまだエラーがあり

  gc=gcd3(bo,si,rpre);
  abo=bo/gc;
  asi=si/gc;
  arpre=rpre/gc;



// alert("最終計算値＝正解  "+abo+"="+aseikaibo+" "+asi+"="+aseikaisi+" "+arpre+"="+aseikairpre+" "+rafter+"="+seikairafter);
  //入力値                 : bunbox      bunsix    rpr              rootx
  //入力値からの最終計算値 ：abo 分母    asi分子　　apreルートの外　　rafterルートの中
  //正解                   :aseikaibo    aseikaisi   aseikaipre       seikairahter
  


  if(bunbox==aseikaibo.toString(10) && bunsix==aseikaisi.toString(10) && rpr==aseikairpre.toString(10) && rootx==seikairafter.toString(10)  ) {
   if(rootx!='1') {  $('#hyoka').text('正解');} //ルートがとれないときはこれで正解
  }else if(abo==aseikaibo && asi==aseikaisi && arpre==aseikairpre && rafter==seikairafter){//無理数解で、途中計算Okの場合          
   $('#hyoka').text('あと少し');
  }else if(seikairafter==1){//有理数解の場合
        a1=aseikaisi+aseikairpre;a2=aseikaisi-aseikairpre;
        gc1=gcd(Math.abs(a1),aseikaibo);gc2=gcd(Math.abs(a2),aseikaibo);
        seikai1si=a1/gc1;   seikai1bo=aseikaibo/gc1;
        seikai2si=a2/gc2;   seikai2bo=aseikaibo/gc2;
        
      //  alert(seikai1si+'/'+seikai1bo+'?'+bunsix+'/'+bunbox);
      if (eval(bunbox)<0) {
         bunsix=(eval(bunsix)*(-1)).toString(10);        
         bunbox=(eval(bunbox)*(-1)).toString(10);
        }//もし、分母をマイナスにしていたら、便宜上、分子にマイナスをかけ、分母を＋に 分母は常に＋として評価したいので
      flg1=flg1||(eval(bunbox)==seikai1bo&&eval(bunsix)==seikai1si);
      flg2=flg2||(eval(bunbox)==seikai2bo&&eval(bunsix)==seikai2si);
      
     if(flg1&&flg2) {
       $('#hyoka').text('正解');
     }else if(flg1||flg2) {
       //$('#hyoka').text('もうひとつの解は？');
     }
        
  }else{
   $('#hyoka').text('');
  }
  
 }

 function soinsu(n){
 if (n==1) {
  return "1";
 }else{
  st="";
  i = 2;
  while (i <= n) {
   while (n % i == 0) {
   st=st+"*"+i;
   n = Math.floor(n/i);
   }
  i = i+1;
  }
   return st.substr(1);
 }
 
 }

 function aOfaRootb(soinsu) {
 var insu=soinsu.split("*");
 var out=1;
  if (insu.length>0) {
   for(var i = 1; i < insu.length; i++) {
     if (insu[i-1]==insu[i]) {
      out=out*eval(insu[i]);
      insu[i]=1;
     }
   }
   return out;
  
  }else{
   return 1;
  }

 }


 function bOfaRootb(soinsu) {
 var insu=soinsu.split("*");
  var out=1;
  if (insu.length>0) {
   for(var i = 1; i < insu.length; i++) {
     if (insu[i-1]==insu[i]) {
       insu[i-1]=1;insu[i]=1;
     }
   }
  
   for(var i = 0; i < insu.length; i++) {
      out=out*eval(insu[i]);
   }
  
   return out;
  
  }else{
   return 1;
  }

 }

 //*************************
 function gcd3(m,n,l) {
    return gcd(gcd(m,n),l);
 }

var gcd = function(a, b){
    var gcd_temp = function(a, b, n, p){
        var smaller = function(a, b){
            return a < b ? a : b;
        }
        if(0 == a % n && 0 == b % n){
            return gcd_temp(a, b, (n + 1), n);
        }else{
            if(n > smaller(a, b)){
                return p;
            }else{
                return gcd_temp(a, b, (n + 1), p);
            }
 }
    }
    return gcd_temp(a, b, 1, 1);
}

//*****************************************************************************************:
  function Keisan(id) {     
        this.bo=" ";   this.si=" ";  this.ro=" ";     this.id=id;
       
        if(kmm == true){
           $('div#waku').append('<div id="'+id+'" style="display:inline;" >
</div>
');
         }else{
            $('div#waku').append('<div id="'+id+'" >
</div>
');
         }
     
     }     
    
     Keisan.prototype = {
        disp : function(bunbo,bunsi,root,mode){
        this.bo=bunbo;     this.si=bunsi;    this.ro=root;
        switch (mode){
         case 'init':
            $('#'+this.id).text('$x='+this.bo+'$');
           break;  
         case 'frac':
          if(eval(this.bo)<0) {
            $('#'+this.id).text('$x=-\\frac{'+this.si+'}{'+(eval(this.bo)*(-1)).toString(10)+'}$');
          }else{
            $('#'+this.id).text('$x=\\frac{'+this.si+'}{'+this.bo+'}$');
          }
           
          break;
         case 'sqrt':
          if(this.bo=='1'){
           $('#'+this.id).text('$x='+this.si+'\\sqrt{'+this.ro+'}$');
          }else{
           $('#'+this.id).text('$x=\\frac{'+this.si+'\\sqrt{'+this.ro+'}}{'+this.bo+'}$');
          }          
           break;
         case 'nofrac':
           $('#'+this.id).text('$x='+this.si+'$');
          break;
         default:
           $('#'+this.id).text('$x=\\frac{'+this.si+'\\sqrt{'+this.ro+'}}{'+this.bo+'}$');
           break;
         }
        MathJax.Hub.Typeset($("#test")[0], function() { console.log("Done"); });
       }
     }
//****************************************:::
  function mondai(){
  
   flg1=false;flg2=false;kmm=false;
   $('#hyoka').text('');
   while (gyo>=0){
       $('#s'+gyo).remove();
     gyo=gyo-1;
   }

  switch ( $("input:radio[name='ptrn']:checked").val()) {
    case 'kihon' :
       a=rand(1,1);
      do {
        b=Math.pow(-1,rand(1,2))*rand(1,8);
        c=rand(-8,8);
       }while (c==0||b*b-4*a*c<=0|| aOfaRootb(soinsu(b*b-4*a*c)) > 1 ||bOfaRootb(soinsu(b*b-4*a*c))==1 || Math.abs(2*a/gcd3(2*a,b,aOfaRootb(soinsu(b*b-4*a*c))))==1)
                                     //ルートの計算がある場合や    、ルートの中が１つまり整数解のものはのぞく　分母が１のものは除く
      break;
    case 'noroot':
      a=rand(1,3);
      do {
       b=Math.pow(-1,rand(1,2))*rand(1,8);
       c=rand(-8,8);
      }while (c==0||b*b-4*a*c<=0|| aOfaRootb(soinsu(b*b-4*a*c)) > 1 ||bOfaRootb(soinsu(b*b-4*a*c))==1 || Math.abs(2*a/gcd3(2*a,b,aOfaRootb(soinsu(b*b-4*a*c))))==1)
                                    //ルートの計算がある場合や    、ルートの中が１つまり整数解のものはのぞく　分母が１のものは除く
      break;
   
    case 'yaku'://約分あり
        a=rand(1,3);
      do {
       b=Math.pow(-1,rand(1,2))*rand(1,8);
       c=rand(-8,8);
      }while (c==0||b*b-4*a*c<=0 ||bOfaRootb(soinsu(b*b-4*a*c))==1 || Math.abs(gcd3(2*a,b,aOfaRootb(soinsu(b*b-4*a*c))))==1)
                                  //、ルートの中が１（有理数解）のものはのぞく 約分できないもの除く　　　
      break;
    case 'seisu'://有理数解
        a=rand(1,3);
      do {
       b=Math.pow(-1,rand(1,2))*rand(1,8);
       c=rand(-8,8);
      }while (c==0||b*b-4*a*c<=0 ||bOfaRootb(soinsu(b*b-4*a*c))!=1 )
      break;
  }
  
   aa=a;   bb=b;   cc=c;
   if(bb>1){bb='+'+bb;}
   if(cc>0){cc='+'+cc;}
   if(aa==-1){aa='-';}
   if(bb==-1){bb='-';}
   if(aa==1){aa='';}
   if(bb==1){bb='+';}
  
  
   $('#mondai').text('$'+aa+'x^2'+bb+'x'+cc+'=0$');
   
  //*****************ここで、正解を作成
  seikaibo=2*a;  seikaisi=-1*b; 
  seikairpre  =aOfaRootb(soinsu(b*b-4*a*c));
  seikairafter=bOfaRootb(soinsu(b*b-4*a*c));
  gc=gcd3(seikaibo,Math.abs(seikaisi),seikairpre);  
  aseikaibo=seikaibo/gc;
  aseikaisi=seikaisi/gc;
  aseikairpre=seikairpre/gc;
     //alert('kotae:'+aseikaisi+'±'+aseikairpre+'r'+seikairafter+'/'+aseikaibo);
     
  if (aseikaibo==1){
       if(seikairafter==1){//ルートなし
         $('#ans').text('$x='+(aseikaisi+aseikairpre).toString(10)+',x='+(aseikaisi-aseikairpre).toString(10)+'$');
       }else{
         $('#ans').text('$x='+aseikaisi.toString(10)+'\\pm'+ichinasi(aseikairpre)+'\\sqrt{'+seikairafter+'}$');
       }       
  }else{
      if(seikairafter==1){//ルートなし
         a1=aseikaisi+aseikairpre;a2=aseikaisi-aseikairpre;
         gc1=gcd(Math.abs(a1),aseikaibo);gc2=gcd(Math.abs(a2),aseikaibo);
         //alert(gc1+' '+gc2);
        $('#ans').text('$x='+bunsu(a1/gc1,aseikaibo/gc1)+',x='+bunsu(a2/gc2,aseikaibo/gc2)+'$');
       }else{
         $('#ans').text('$x=\\frac{'+aseikaisi.toString(10)+'\\pm'+ichinasi(aseikairpre)+'\\sqrt{'+seikairafter+'}}{'+aseikaibo+'}$');
       }       
    
  }
   
   MathJax.Hub.Typeset($("#test")[0], function() { console.log("Done"); });
 }
  
 function bunsu(bs,bb){
  if (bb==1) {
   return bs.toString(10);
  }else{
   if (bs<0) {
    return '-\\frac{'+((-1)*bs).toString(10)+'}{'+bb.toString(10)+'}';
   }else{
    return '\\frac{'+bs.toString(10)+'}{'+bb.toString(10)+'}';
   }
  
  }
 
 } 
  
 function rand(min,max){
   return Math.floor( Math.random() * (max+1-min)) + min ; 
 }
 
 function ichinasi(n){
  if(n==1){
   return "";
  }else{
   return n.toString(10);
  }
 }


</script>


  </body>
</html>

github pagesで公開してみました
https://gh6141.github.io/gitdrill/nijihote.html

2017年3月14日火曜日

javascript でクラスを使ってみる

canvasという便利な図形表示の仕組みがいつのまにか
使えるようになっている。これをオブジェクト指向で（クラスで）使ってみた。
クラスを使わないと、ちょっと複雑になると、手に負えなくなりそうだ。

ドラッグ&ドロップをしてみたかったので、まずこちらを参考にさせていただいた。
http://qiita.com/kyrieleison/items/26fcfb3a1d94bc92c596

さっそく、イベントの追加でthisの使い方がわからず悩む
がhttps://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
に解決方法がかいていあった。

力の合成を表すものですが、矢印は
http://qiita.com/frogcat/items/2f94b095b4c2d8581ff6
の中のライブラリをつかわせていただきました。

それを参考に少しためしてみたのが、以下のソース

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>力の合成</title>
    
    <style>
      #canvas {
        background: #FFF;
      }
    </style>
  </head>
  <body onLoad="init()">
  <p><b>力の合成</b>　<font color=red>■</font>を動かしてみてください　　<font style='font-size:40px;color:blue'>→</font>は <font style='font-size:40px;color:red;'>→</font>の合力です。</p>
    <canvas id="canvas" width="1200" height="800"></canvas>
    <script>
//********************************************
    (function(target) {
  if (!target || !target.prototype)
    return;
  target.prototype.arrow = function(startX, startY, endX, endY, controlPoints) {
    var dx = endX - startX;
    var dy = endY - startY;
    var len = Math.sqrt(dx * dx + dy * dy);
    var sin = dy / len;
    var cos = dx / len;
    var a = [];
    a.push(0, 0);
    for (var i = 0; i < controlPoints.length; i += 2) {
      var x = controlPoints[i];
      var y = controlPoints[i + 1];
      a.push(x < 0 ? len + x : x, y);
    }
    a.push(len, 0);
    for (var i = controlPoints.length; i > 0; i -= 2) {
      var x = controlPoints[i - 2];
      var y = controlPoints[i - 1];
      a.push(x < 0 ? len + x : x, -y);
    }
    a.push(0, 0);
    for (var i = 0; i < a.length; i += 2) {
      var x = a[i] * cos - a[i + 1] * sin + startX;
      var y = a[i] * sin + a[i + 1] * cos + startY;
      if (i === 0) this.moveTo(x, y);
      else this.lineTo(x, y);
    }
  };
})(CanvasRenderingContext2D);
//****************************************
    
    
       canvas = document.getElementById("canvas");
       context = canvas.getContext('2d');
       wx = canvas.width;
       hx = canvas.height;
       
       
        objWidth = 10;
        objHeight = 10;
        startx=300;
        starty=200;
        var x, y, relX,relY;
        var offsetX = canvas.getBoundingClientRect().left;
        var offsetY = canvas.getBoundingClientRect().top;       
        otherX=10;
        otherY=10;

     
     
     function Arrow(ix,iy) {       
         this.objX=ix;
         this.objY=iy;
         this.dragging = false;
   
         //https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
         canvas.addEventListener('mousedown', this.onDown.bind(this) , false);
         canvas.addEventListener('mousemove', this.onMove.bind(this) , false);
         canvas.addEventListener('mouseup', this.onUp.bind(this), false);

     }      
       Arrow.prototype = {
        getobj : function(obj){
         this.obj=obj;
         this.drawRect();
        },
        onDown :function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.objX < x && (this.objX + objWidth) > x && this.objY < y && (this.objY + objHeight) > y) {
          this.dragging = true;
          relX = this.objX - x;
          relY = this.objY - y;
        }      
        },
        onMove : function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.dragging) {
          this.objX = x + relX;
          this.objY = y + relY;
          this.drawRect();
        }
        },
        onUp : function(e) {
        this.dragging = false;
        },
        goseidrawRect : function(iix,iiy) {
         
        context.strokeStyle = "rgb(0,0, 200)";
        context.fillStyle = "rgb(0,0, 255)";
        context.beginPath();        
        context.arrow(startx, starty, iix,iiy, [0, 5, -20, 5, -20, 15]);
  context.fill();     
        },      
        drawRect : function() {
        
             context.clearRect(0,0,wx,hx);
      //２つの力の矢印
        context.fillStyle = "rgb(200, 0, 0)";
        context.arrow(startx, starty, this.objX, this.objY, [0, 5, -20, 5, -20, 15]);
        context.arrow(startx, starty, this.obj.objX, this.obj.objY, [0, 5, -20, 5, -20, 15]);
  context.fill();
  context.fillRect(this.objX, this.objY, objWidth, objHeight);
  context.fillRect(this.obj.objX, this.obj.objY, objWidth, objHeight);
  

         this.goseidrawRect(this.objX+this.obj.objX-startx,this.objY+this.obj.objY-starty);    
     
      //平行四辺形の細い線
       context.strokeStyle = "rgb(200,0, 0)";
        context.beginPath();
        context.lineWidth=1;
        context.moveTo(this.objX, this.objY);
        context.lineTo(this.objX+this.obj.objX-startx,this.objY+this.obj.objY-starty);        
        context.moveTo(this.obj.objX, this.obj.objY);
        context.lineTo(this.objX+this.obj.objX-startx,this.objY+this.obj.objY-starty);        
        context.stroke();       
        }
     }

         ar1 = new Arrow(startx+120,starty+20);    
         ar2 = new Arrow(startx+40,starty+110);          
    
         ar1.getobj(ar2);
         ar2.getobj(ar1);
 

        


    
    </script>
  </body>
</html>

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>力の分解</title>
    
    <style>
      #canvas {
        background: #FFF;
      }
    </style>
  </head>
  <body onLoad="init()">
  <p><b>力の分解</b>　<font color=blue>■</font>を動かしてみてください　　
  <font style='color:red;font-size:40px;'>→</font>が<font style='color:blue;font-size:40px;'>→</font>の分力です</p>
    <canvas id="canvas" width="1200" height="800"></canvas>
    <script>
//********************************************
    (function(target) {
  if (!target || !target.prototype)
    return;
  target.prototype.arrow = function(startX, startY, endX, endY, controlPoints) {
    var dx = endX - startX;
    var dy = endY - startY;
    var len = Math.sqrt(dx * dx + dy * dy);
    var sin = dy / len;
    var cos = dx / len;
    var a = [];
    a.push(0, 0);
    for (var i = 0; i < controlPoints.length; i += 2) {
      var x = controlPoints[i];
      var y = controlPoints[i + 1];
      a.push(x < 0 ? len + x : x, y);
    }
    a.push(len, 0);
    for (var i = controlPoints.length; i > 0; i -= 2) {
      var x = controlPoints[i - 2];
      var y = controlPoints[i - 1];
      a.push(x < 0 ? len + x : x, -y);
    }
    a.push(0, 0);
    for (var i = 0; i < a.length; i += 2) {
      var x = a[i] * cos - a[i + 1] * sin + startX;
      var y = a[i] * sin + a[i + 1] * cos + startY;
      if (i === 0) this.moveTo(x, y);
      else this.lineTo(x, y);
    }
  };
})(CanvasRenderingContext2D);
//****************************************
    
    
       canvas = document.getElementById("canvas");
       context = canvas.getContext('2d');
       wx = canvas.width;
       hx = canvas.height;
       
       
        objWidth = 10;
        objHeight = 10;
        startx=300;
        starty=200;
        var x, y, relX,relY;
        var offsetX = canvas.getBoundingClientRect().left;
        var offsetY = canvas.getBoundingClientRect().top;       
        otherX=10;
        otherY=10;

     
     function Arrow(ix,iy) {       
         this.objX=ix;
         this.objY=iy;
         this.dragging = false;

     }      
       Arrow.prototype = {
        getobj : function(obj,objg){
         this.obj=obj;
         this.objg=objg;
         this.drawRect();
        },
        getobj2 : function(obj1,obj2){
         this.obj1=obj1;
         this.obj2=obj2;
         this.drawRect();
        },
        onDown :function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.objX < x && (this.objX + objWidth) > x && this.objY < y && (this.objY + objHeight) > y) {
          this.dragging = true;
          relX = this.objX - x;
          relY = this.objY - y;
        }      
        },
        onMove : function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.dragging) {
          this.objX = x + relX;
          this.objY = y + relY;
          this.drawRect();
        }
        },
        onUp : function(e) {
        this.dragging = false;
        }

    }  

//****************************
function disp(obj1,obj2,objg){
      context.clearRect(0,0,wx,hx);
      //２つの力の矢印
      
      context.beginPath();
      context.fillStyle = "rgb(200, 0, 0)";     
      
  
      ab=(starty-objg.objY)/(starty-obj2.objY)-(startx-objg.objX)/(startx-obj2.objX);
      bab=(startx-obj1.objX)/(obj2.objX-startx)-(starty-obj1.objY)/(obj2.objY-starty);
      ak=ab/bab;      
        xx=startx+ak*(obj1.objX-startx);
        yy=starty+ak*(obj1.objY-starty);
        context.arrow(startx, starty, xx, yy, [0, 5, -20, 5, -20, 15]);//動かしている矢印

        
      ab2=(starty-objg.objY)/(starty-obj1.objY)-(startx-objg.objX)/(startx-obj1.objX);
      bab2=(startx-obj2.objX)/(obj1.objX-startx)-(starty-obj2.objY)/(obj1.objY-starty);
      ak2=ab2/bab2;      
        xx2=startx+ak2*(obj2.objX-startx);
        yy2=starty+ak2*(obj2.objY-starty);
        context.arrow(startx, starty, xx2, yy2, [0, 5, -20, 5, -20, 15]);//反対側の矢印

  context.fill();
  
  context.beginPath();
  context.fillStyle = "rgb(0, 0, 200)";
  context.fillRect(obj1.objX, obj1.objY, objWidth, objHeight);
  context.fillRect(obj2.objX, obj2.objY, objWidth, objHeight);
 
     context.arrow(startx, starty, objg.objX, objg.objY, [0, 5, -20, 5, -20, 15]); //合力
  context.fillRect(objg.objX, objg.objY, objWidth, objHeight);
  context.fill();


     
      //平行四辺形の細い線
        context.strokeStyle = "rgb(200,0, 0)";
        context.beginPath();
        context.lineWidth=1;
        context.moveTo(xx, yy);
        context.lineTo(objg.objX,objg.objY); //元の力
        
        context.moveTo(startx,starty);
        context.lineTo((obj1.objX-startx)*10+startx,(obj1.objY-starty)*10+starty);//延長線
               
        context.moveTo(xx2, yy2);
        context.lineTo(objg.objX,objg.objY); //元の力       
        
        context.moveTo(startx,starty);
        context.lineTo((obj2.objX-startx)*10+startx,(obj2.objY-starty)*10+starty);//延長線

        context.stroke(); 
        

}
function addE(obj){
         canvas.addEventListener('mousedown', obj.onDown.bind(obj) , false);
         canvas.addEventListener('mousemove', obj.onMove.bind(obj) , false);
         canvas.addEventListener('mouseup', obj.onUp.bind(obj), false);
         }
//********************************

function sArrow(ix,iy) {  
         this.objX=ix;
         this.objY=iy;        
          addE(this);
         }    
         sArrow.prototype = new Arrow();
         
sArrow.prototype.drawRect = function() {
              disp(this,this.obj,this.objg);       
        }

function nArrow(ix,iy) {  
         this.objX=ix;
         this.objY=iy; 
          addE(this);         
         }    
         nArrow.prototype = new Arrow();
         
nArrow.prototype.drawRect = function() {
            disp(this.obj1,this.obj2,this);   
}
         ar1 = new sArrow(startx+120,starty+20);    
         ar2 = new sArrow(startx+40,starty+110);          
         arg = new nArrow(startx+80,starty+70);
         
         ar1.getobj(ar2,arg);
         ar2.getobj(ar1,arg);
         arg.getobj2(ar1,ar2);
             
    </script>
  </body>
</html>

力の分解のほうは、継承を使ってみました。もう少し簡潔にできそうですが。

2017年3月12日日曜日

ubuntuでcifs　マウント

起動時にマウントする方法

/etc/fstabに以下を追加
//192.168.1.？/share /mnt/windows/ cifs username=user,password=,uid=1000,gid=1000 0 0
パスワード不要なら省略できるようだ。
以前はシェルスクリプトをサービスとして起動する方法でやってきたが、それだと
sleep等を使って、遅延させる必要があった。
fstabに登録する方法があるとは知らなかった。

参考リンク
http://engetu21.hatenablog.com/entry/2016/07/31/190059

登録: 投稿 (Atom)