HTML5 Canvas：衝突検出の問題

Question

私は、キャンバス内に複数のオブジェクトを表示し、HTML5キャンバスを作成するoCanvas JSライブラリ（http://ocanvas.org/）を使用してこのスクリプトを作成しています。現在、私は外部XMLドキュメントからスクリプトを読み込み、各プロジェクトノードをループし、キャンバス上に円オブジェクトを作成します。

このオブジェクトを中間円から均等に間隔を置いてキャンバスに配置しようとする際に問題が発生しています（下のコードのロゴ変数）。あなたが円のためにパラメトリック方程式であるを見てみたい何

// GLOBALS 
    var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project></projects></root>' 

    var xmlObj = [] 
    // var angle = (360 * Math.PI)/180 
    var padding = 15 
    var canvas = oCanvas.create({ 
     canvas: '#myCanvas' 
    }) 
    var c_width = canvas.width 
    var c_height = canvas.height 

    var logo = canvas.display.ellipse({ 
     x: c_width/2, 
     y: c_height/3, 
     radius: 80, 
     fill: '#d15851' 
    }) 

    canvas.addChild(logo) 

    // var getXML = function(file){ 
    // $.ajax({ 
    //  url: file, 
    //  type: 'GET', 
    //  dataType: 'xml', 
    //  async: false, 
    //  success: parseXML 
    // }) 
    // } 

    var parseXML = function() { 
     var xmlDoc = $.parseXML(xmlData) 
     var xml = $(xmlDoc) 

     xml.find('project').each(function(i){ 
      xmlObj[i] = canvas.display.ellipse({ 
       fill: '#'+'abcdef'.split('').map(function(v,i,a){ 
        return i>5 ? null : a[Math.floor(Math.random()*16)] }).join(''), 
       radius: 40, 
       opacity: 1 
      }) 
     }); 

     var angleSingleton = { 
      "currentAngle": 0, 
      "currentOffset": 0, 
      "incrementAngle": function() { 
       this.currentAngle = this.currentAngle + this.currentOffset 
      } 
     } 

     angleSingleton.currentOffset = Math.floor((360 * Math.PI)/xmlObj.length); 

     for(h = 0; h < xmlObj.length; h++) { 
      xmlObj[h].x = (logo.x + logo.radius * Math.cos(angleSingleton.currentAngle)) + xmlObj[h].radius + padding; 
      xmlObj[h].y = (logo.y + logo.radius * Math.sin(angleSingleton.currentAngle)) + xmlObj[h].radius + padding; 

      canvas.addChild(xmlObj[h]) 
      angleSingleton.incrementAngle() 
     } 
    } 

// 

$(document).ready(function(){ 
    parseXML() 
}) 

Answer 1

。基本的には、円周に沿って特定の角度で点を定義します。これはanswerで詳しく説明しています。

では、次の式を使用して新しいサークルのためにあなたのxとyの値を取得するには：あなたは新しいサークルを取るために起こっている部屋プラスパディングの余地ある場合を考慮する必要がありしかし

x = logo.x + logo.radius * Math.cos(angle) 
y = logo.y + logo.radius * Math.sin(angle) 

あなたはそれをしたい。

x = (logo.x + logo.radius * Math.cos(angle)) + newCircle.radius + circlePadding 
y = (logo.y + logo.radius * Math.sin(angle)) + newCircle.radius + circlePadding 

はアングル機能については、このような何かを試してみてください。

var angleSingleton = { 
    "currentAngle": 0, 
    "currentOffset": 0, 
    "incrementAngle": function() { 
     this.currentAngle = this.currentAngle + this.currentOffset 
    } 
} 

angleSingleton.currentOffset = (360 * Math.PI)/xmlObj.length; 

は、その後、あなたが式のために必要な角度を追跡するためにこれを使用することができます。現在の角度を取得するには、をangleSingleton.incrementAngleと置き換えてください。

Answer 2

私はそれを理解してしまいました。

// EXTENDING OBJECTS 
    Array.prototype.min = function(array) { 
     return Math.min.apply(Math, array); 
    } 

    Array.prototype.max = function(array) { 
     return Math.max.apply(Math, array) 
    } 
// 

// GLOBALS 
    var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project><project name="Project3"></project></projects></root>' 

    var xmlObj = [] 
     var xmlDoc, xml; 
    var padding = 15 
    var canvas = oCanvas.create({ 
     canvas: '#myCanvas' 
    }) 
    var c_width = canvas.width 
    var c_height = canvas.height 

    var logo = canvas.display.ellipse({ 
     x: c_width/2, 
     y: c_height/3, 
     radius: 80, 
     fill: '#d15851' 
    }) 

     var rectObj = function(){ 
      this.x = 0; 
      this.y = 0; 
      this.width = 100; 
      this.height = 100; 
      this.size = this.width + this.height; //this would equate to a circles radius if dealing with circles 
      this.fillerText = null; 
      this.fillRect = function(hexVal){ 
       if(!hexVal) 
        return '#'+'abcdef'.split('').map(function(v,i,a){ 
       return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('') 
       else 
        return hexVal 

      }; 
      this.drawRect = function(){ 
       return canvas.display.rectangle({ 
        width: this.width, 
        height: this.height, 
        fill: this.fillRect(), 
        x: this.x, 
        y: this.y 
       }) 
      }; 
      this.checkCollisions = function(objToCheck) { 
       var centerA = { x: this.x+(this.size/2), y: this.y+(this.size/2) }; 
       var centerB = { x:objToCheck.x+(objToCheck.size/2), y: objToCheck.y+(objToCheck.size/2) }; 
       var distance = Math.sqrt(((centerB.x-centerA.x)*(centerB.x-centerA.x) + (centerB.y-centerA.y)*(centerB.y-centerA.y))); 

       if(distance < (this.size+objToCheck.size)) { 
        objToCheck.x = this.x - (canvas.width/4) 
        objToCheck.fillRect = function(){ 
         return 'red' 
        } 
       } 
      } 
     } 

    canvas.addChild(logo) 

    var parseXML = function() { 
     xmlDoc = $.parseXML(xmlData) 
     xml = $(xmlDoc) 

     xml.find('project').each(function(i){ 
        xmlObj[i] = new rectObj() 
        xmlObj[i].fillerText = $(this).attr('name') 
        xmlObj[i].x = (logo.x + logo.radius * Math.cos((360*Math.PI)/(i + 1)) + padding) + ((xmlObj[i].width/2) + (i+1)); 
        xmlObj[i].y = (logo.y + logo.radius * Math.sin((360*Math.PI)/(i + 1)) + padding); 
     }); 

       for(i = 0; i < xmlObj.length; i++) { 
        for(a = i+1; a < xmlObj.length; a++) { 
         xmlObj[i].checkCollisions(xmlObj[a]) 
        } 
        canvas.addChild(xmlObj[i].drawRect()) 
       } 
    } 

// 

$(document).ready(function(){ 
    parseXML() 
}) 

スクリーンショット：

私は明らかに、彼らがメインの円に触れていないように、長方形のためのY座標での、記述する必要がありますが、今のところ、彼らはすべての「フロート」、彼らのようにあなたのお手伝いをしてくれてありがとうございます：

私たちに発生している問題を伝えるために気にし、プログラムを実行する方法はありませんサンプルデータの欠落がないとhttp://andersonferminiano.com/html5/studies/balls_collisions/collision.js