Myu

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でも動いているか試してみる

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

2017年2月22日水曜日

LinqでCSVから配列、配列からCSVへ

CSVから配列への読み込みについては
ネットに参考になるサイトがありました。
https://teratail.com/questions/40822
なるほどと思いました。非常にシンプルで、Linqの威力を感じます。
サイトを参考に、こんな感じで、簡単に配列を用意できるようです。
using System.IO;
public String[][] dcsv;
dcsv=File.ReadLines(csvfilename, Encoding.GetEncoding("utf-8")).Select(s => s.Split(',')).ToArray();

ただ、配列からCSVへの書き込みは、シンプルなものはみつからず
とりあえず、foreachでも使ってみました。
StreamWriter sw = new StreamWriter(csvfilename);
foreach ( String[] row in dcsv)
{
sw.WriteLine(string.Join(",", row));
}
sw.Close();

2017年2月21日火曜日

c#　別フォームのコントロール取得

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1251572732
が参考になりました。
Form1で　Form2のインスタンスを作成したら　親フォーム情報を子フォームに
通知するところがミソのようです。
あとは、子フォームで、親フォームを宣言しておけば、親フォームを扱うことが
できるようです。

Form1(親）側
Form2 f = new Form2();
f.form1obj = this;
f.Show();

Form2(子）側
public Form1 form1obj;
textBox1.Text= form1obj.listView1.Items[comboBox1.SelectedIndex].SubItems[0].Text;

あと、当然Form1側のコントロールのModifiersはpublicにしておきます。

2017年1月29日日曜日

Ubuntuをアップデートしたら、400エラーが出るようになる

　結論から言うと、原因はJSPの中のjavascriptで、HTMLリクエストパラメータを全角文字などもそのまま送信していたのが原因でした。
　これまで、全角文字もそのまま送信していて問題はおきなかったのは、ブラウザ側あるいはｔｏｍｃａｔ？でうまく処理していてくれたためと思う。

　tomcatあるいはjavaあたりをアップデートした影響で、URLエンコードしてない影響がIE11にだけ現れたようだ。このへんの関係を発見するまで時間がかかった。

　400エラーが出るのは、ＩＥ１１だけである。chromeやEdgeでは特に問題は起こってない。

　encodeURIにより、URLエンコードするだけで問題が解決した。デコードはとくにしなくても、だいじょうぶなようだ。ネットで検索しても、こういった症状が出てこなかったのは、基本的ミスだったからともいえる。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊解決までの流れ
①Ubuntuサーバで、突然、IE11を使ったとき、全角のファイル名のときだけ、ダウンロードできなくなる。400エラーが出る。
②Vmware内の古いUbuntuサーバについては問題ない。試しにapt-get update
　すると、同じ症状が出る。原因はtomcatかjavaの影響？IE11との相性？いずれか、と考えた。
　ネットでは、IE11のUserAgentの文字がTridentに変わったことが、出ていたので対応させてみた。
　でも、これとは無関係だった。しばらく解決策がみつからない。
③他のリクエストパラメータを使うGETのところで、同じ症状（400エラー）が出ることを発見。
④③よりひょっとして、URLエンコードしていないのが原因でないかと疑う。試しにエンコードするように修正したら解決した。

※原因を見つけるには、試行錯誤しながら、考えるしかないようだ。

登録: 投稿 (Atom)