P5.jsの設定とhtmlキャンバスをリンクするには？

これは非常に簡単なことだと確信していますが、私はここで立ち往生しています。ここでが状況です：P5.jsの設定とhtmlキャンバスをリンクするには？

私はdiv要素とcanvas要素（私はこれを必要とするかどうかわからない）でHTMLページを持っている。また、私はセットアップをp5.jsを使用して、2つのJavaScriptファイルを持っていると私は私を描くところfuntionsを描きます私はcreateCanvasで作成したキャンバス上のコンテンツです。もう1つのjsファイルにオブジェクトが含まれています。問題は次のとおりです。アニメーションをHTMLページに表示することはできますが、divやキャンバスには表示されません。鮮明な画像のための

画像： HTML and JS comunication

HTML：

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Fractals</title> 
    <script language="javascript" type="text/javascript" src="libs/p5.js"></script> 
    <script language="javascript" src="libs/p5.dom.js"></script> 
    <script language="javascript" type="text/javascript" src="sketch.js"></script> 
    <script language="javascript" type="text/javascript" src="branch.js"></script> 
    <style> 
    body { 
     padding: 0; 
     margin: 0; 
    } 
    </style> 
</head> 
<body> 
    <div> 
    <canvas id="fractal" height="197" width="333" style=" width:333;height:197;"></canvas> 
    </div> 
</body> 
</html>

JSスケッチ：

var tree = []; 
var x; 
var y; 

function setup() { 
    createCanvas(333,197); 

    var a = createVector(width/2, height); 
    var b = createVector(width/2, height - 50); 
    var root = new Branch(a, b); 
    tree[0] = root; 
    for (var t = 0; t < 5; t++) { 
    for (var i = tree.length-1; i >= 0; i--) { 
     if (!tree[i].finished){ 
     tree.push(tree[i].branchA()); 
     tree.push(tree[i].branchB()); 
     tree.push(tree[i].branchC()); 
     } 
     tree[i].finished = true; 
    } 
    } 
} 

function draw() { 

    background(51); 
    x = mouseX; 
    y = mouseY; 

    for (var i = 0; i < tree.length; i++) { 
    tree[i].show(); 
    tree[i].wind(x, y, tree[i].end.x, tree[i].end.y); 
    } 
}

JSの枝オブジェクト：

の

function Branch(begin, end) { 
    this.begin = begin; 
    this.end = end; 
    this.finished = false; 
    this.origx = this.end.x; 
    this.origy = this.end.y; 

    this.show = function() { 
    stroke(255); 
    line(this.begin.x, this.begin.y, this.end.x, this.end.y); 
    } 

    this.branchA = function() { 
    var dir = p5.Vector.sub(this.end, this.begin); 
    dir.rotate(19.2); 
    dir.mult(0.67); 
    var newEnd = p5.Vector.add(this.end, dir); 

    var v = new Branch(this.end, newEnd); 
    return v; 
    } 
    this.branchB = function() { 
    var dir = p5.Vector.sub(this.end, this.begin); 
    dir.rotate(0); 
    dir.mult(0.67); 
    var newEnd = p5.Vector.add(this.end, dir); 

    var v = new Branch(this.end, newEnd); 
    return v; 
    } 
    this.branchC = function() { 
    var dir = p5.Vector.sub(this.end, this.begin); 
    dir.rotate(-19.2); 
    dir.mult(0.67); 
    var newEnd = p5.Vector.add(this.end, dir); 

    var v = new Branch(this.end, newEnd); 
    return v; 
    } 
    this.wind = function(mox,moy,treex,treey) { 
     var d = dist(mox,moy,treex,treey); 

     if (d < 20) { 
      this.end.x += random(-0.3, 0.3); 
      this.end.y += random(-0.3, 0.3); 
     }else{ 

      this.end.x = this.origx; 
      this.end.y = this.origy; 

     } 
    } 
}

P5ライブラリ：https://p5js.org/download/

出典

2016-12-03 Austris Otersons-Andersons

ドキュメントから：
https://github.com/processing/p5.js/wiki/Positioning-your-canvas

// sketch.js 
function setup() { 
    var canvas = createCanvas(100, 100); 

    // Move the canvas so it's inside our <div id="sketch-holder">. 
    canvas.parent('sketch-holder'); 

    background(255, 0, 200); 
}

P5とキャンバスの1つのインスタンスを作成し、DOM idで、その親を割り当てます。

出典

2016-12-03 14:31:10 ThisClark

私が探していたもの、おかげさまで！ –

ニースコード、btw。私はサンプル：http://codepen.io/anon/pen/VmQzYWを書きました。マウスオーバー時の木の枝に微妙な波があります。 – ThisClark

P5.jsの設定とhtmlキャンバスをリンクするには？

答えて

関連する問題