p5.jsグラフの編集可能なテキスト

Question

p5.jsにインタラクティブなグラフを作成したいこれまでのところ、左クリックで頂点を追加したり、頂点のペアを左クリックしたときにエッジを追加することができました。しかし、私が頂点やエッジを作成するときには、ウェイトが「1」のように頂点/エッジの隣に表示されることを示す数字も必要です。次に、この番号をクリックすると、その文字列を動的に編集できるようにしたいと考えています。

これまでのところ私が見つけたベストはcreateInput()ですが、これは十分に微妙ではない大きな白いテキスト入力ボックスを作成します。文字列をクリックすると、点滅するテキストカーソルが表示されます。どうすればこのことができますか？

これら（彼らは適切ではないかもしれませんが）、私がこれまで持っている頂点とエッジオブジェクト

function Vertex(mouseX, mouseY, index) { 
    this.x = mouseX; 
    this.y = mouseY; 
    this.index = index; 
    this.weight = 0; 
    this.radius = 16; 
    this.col = [0,0,0]; 
    this.display = function() { 
    noStroke(); 
    fill(this.col[0], this.col[1], this.col[2]); 
    ellipse(this.x, this.y, this.radius, this.radius); 
    } 
} 

function Edge(v1, v2) { 
    this.v1 = v1; 
    this.v2 = v2; 
    this.weight = 0; 
    this.col = [0,0,0]; 
    this.display = function() { 
    stroke(0); 
    fill(this.col[0], this.col[1], this.col[2]); 
    line(v1.x, v1.y, v2.x, v2.y); 
    } 
} 

Answer 1

はこれをチェックしている - https://p5js.org/reference/#/p5.Element をuはP5要素を使用してのmouseClicked（）イベントを処理し、そこにロジックを置くことができます。P5 Elementには、質問したすべての機能があります。