Myu: 3月 2017

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

2017年3月10日金曜日

cloud9 herokuを連携して利用（postgresqlで)

http://qiita.com/yuki0627/items/abd9eedc989ae1da21a7
がとても参考になりました。

cloud9でrailsによるサイトを作成し、限られた時間であればサイト上で確認できますが、時間がたつと使えなくなります。そこで、herokuへgitにより、サイトの内容をpushするといいようです。データベースはherokuではpostgresqlが標準的なので、cloud9で使用するデータベースもpostgresqlに切り替えてみました。

以下のその手順を覚え書きとしてまとめてみました。
○　cloud9でrailsをpostgresqlを使って動かしてみるには＊＊＊＊＊＊＊＊＊＊＊＊＊＊

1　cloud9でblankを選択しcreate workspace
2 Rails のインストール
gem install rails --no-ri --no-rdoc
rails new myapp --database=postgresql
cd myapp
bundle install
rails generate controller welcome
app/views/welcome/index.html.erbを編集して
<h2>Hello World</h2>でも入力しておく

config/routes.rbは
root 'welcome#index'　の行を追加
以下、Unicode使用のテンプレートを用意するために、次の操作が必要なようです。

sudo service postgresql start

sudo sudo -u postgres psql

CREATE USER username SUPERUSER PASSWORD 'password';

UPDATE pg_database SET datistemplate = FALSE WHERE datname = 'template1';

DROP DATABASE template1;

CREATE DATABASE template1 WITH TEMPLATE = template0 ENCODING = 'UNICODE';

UPDATE pg_database SET datistemplate = TRUE WHERE datname = 'template1';

\c template1

VACUUM FREEZE;

データベースのユーザー名とパスワード名を環境変数に入れておくといいようです。

export USERNAME=username

export PASSWORD=password

これにあわせてdababase.ymlを次のような内容に編集

default: &default

adapter: postgresql

encoding: unicode

pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

username: <%= ENV['USERNAME'] %>

password: <%= ENV['PASSWORD'] %>

host: <%= ENV['IP'] %>

ここで

rails db:create

そして　modelを作成してみる

rails generate model title

db\migrate\20120322080659_create_titles.rb」のようなマイグレーションスクリプトと呼ばれるファイルができるので、これに以下のように追加

class CreateTitles < ActiveRecord::Migration

def change

create_table :titles do |t|

t.string :name　←ここと

t.date :date　←ここを追加

t.timestamps

end

rake db:migrate

を実行

seeds.rbができるので、これを以下のように修正

# coding: utf-8

Title.create(:name => 'サンプル１', :date => '2011-06-28')

Title.create(:name => 'サンプル２', :date => '2011-11-14')

以下のコマンドで、上記のデータの初期値設定ができるようだ

rake db:seed

rails dbconsoleで確認できる

select * from titles;等が実行可能

ぬけるときはCtrl+D

welcome_control.rb

def index

@titles = Title.all

end

index.html.erbをつぎのように変えてみる

<p>

<% @titles.each do |title| %>

[タイトル] <%= title.name %>, [月日] <%= title.date %><br />

<% end %>

</p>

rails s -p $PORT -b $IP

で起動してみる

https://[ワークスペース名]-[ユーザー名].c9.io にアクセスして確認。

○herokuにpushしてみる＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

※事前にcd myappになっているか、確認してから

heroku login

git init

git add .

git commit -m "init"

heroku create
heroku buildpacks:set https://github.com/bundler/heroku-buildpack-bundler2

git push heroku master

○herokuのpostgresqlの設定＊＊＊＊＊＊＊＊＊＊＊＊

herokuへのpushだけでは、だめで、postgresqlのマイグレーション等の操作が必要

heroku addons:add heroku-postgresql

heroku run rake db:migrate

herokuでも、seedは必要なので

heroku run rake db:seed

○ためしに、scafoldも使ってみた＊＊＊＊＊＊＊

たとえば　userというモデル名であれば

rails g scaffold user name:string point:string sudo service postgresql start（postgresqlが起動してないときは、sudo service postgresql startと起動が必要であることに注意）

rake db:migrate

rails s -p $PORT -b $IP

として

https://アプリ名-ユーザー名.c9users.io/usersにアクセスして確認できる

git add.

git commit -m "scafold_test"

git push heroku master

で、herokuでも動いているか試してみる

※データベースを使うので、データベースがきちんと動いてないとうまくいかない。最初エラーが出たとき、原因がつかめずいたが、結局、データベースが動いてないことが原因ということが何回かあった。このへんは、慣れの問題かもしれない。

登録: 投稿 (Atom)