p5.js：for（）ループの要素にロールオーバーするにはどうすればできますか？

Question

私はインタラクティブなテキスト解析のWebサイトで作業していますが、現在for（）ループが.txtファイルの行の配列を実行しています。各行は長方形を生成します。それはうまく動作しますが、私はmouseOver/rolloverを各正方形にして、Webページ上にテキスト行を印刷する必要があります。基本的には、mouseX + mouseYが矩形の上にある場合、htmlの段落に行[i]を追加するというだけの文章を書く必要があります。

私はまだp5.jsを把握しており、sketch.jsとhtmlページの間をどのようにジャンプするのですか？どんな助けでも大歓迎です！ありがとうございました。

現在のコード

var book = []; 
var lines = []; 
var term1 = []; 
var term2 = []; 
var size; 
var x; 
var y; 

function preload() { 
    book = loadStrings("data/01.txt"); 
} 

function setup() { 
    createCanvas(windowWidth, windowHeight); 
    colorMode(HSB, 360, 100, 100, 100); 
    lines = splitTokens(book[0], ".?"); 
    term1 = ["photography", "Photography", "PHOTOGRAPHY"]; 
    term2 = ["art", "Art", "ART"]; 
    size = 10; 
    x = 40; 
    y = 50; 
    noLoop(); 
    noStroke(); 
    rectMode(CENTER); 
    ellipseMode(CENTER); 
    background(0, 0, 100); 
} 

function draw() { 
    background(0, 0, 100); 

    for (var i = 0; i < lines.length; i++) {  
     x += size; 
     if (x >= windowWidth - 50) { 
      x = 40; 
      y += size; 
     } 

     // contains term 1 and term 2 
     if ((lines[i].indexOf(term1[0]) > 0 || lines[i].indexOf(term1[1]) > 0 || lines[i].indexOf(term1[02]) > 0) && (lines[i].indexOf(term2[0]) > 0 || lines[i].indexOf(term2[1]) > 0 || lines[i].indexOf(term2[2]) > 0)) { 
      fill(37, 87, 100); 
     } else if (lines[i].indexOf(term1[0]) > 0 || lines[i].indexOf(term1[1]) > 0 || lines[i].indexOf(term1[2]) > 0) { 
      fill(333, 61, 94); 
     } else if (lines[i].indexOf(term2[0]) > 0 || lines[i].indexOf(term2[1]) > 0 || lines[i].indexOf(term2[2]) > 0) { 
      fill(203, 71, 98); 
     } else { 
      fill(0, 0, 95); 
     } 

     rect(x, y, size/2, size/2); 
    } 

} 

Answer 1

は小さなステップにあなたの問題を分割しました。

ステップ1：マウスが四角形の上にあるときを決定するコードを記述できますか？

あなたがこの行にすることを使用しているためあなたは、あなたの四角形の位置とサイズを知っている：

rect(x, y, size/2, size/2); 

ですから、マウスが四角形の上にあるかどうかを判断するためにmouseXとmouseYと一緒にそれを使用することができます

if(mouseX > x && mouseX < x+size/2 && mouseY > y && mouseY < y+size/2){ 
    //do something 
    fill(255, 0, 0); 
} 

この行をrect()行のすぐ上に置くと、上にマウスを置くと四角形が赤くなります。これはステップ2のプレースホルダの例に過ぎないことに注意してください。

ステップ2：処理から呼び出してページとやりとりするコードを記述できますか？

P5.jsにJavaScriptを書くだけで、 "JavaScript append to textarea"のようなものをGoogleのように書くことができます。ここでは例です：

document.getElementById("yourIdHere").value += "your text here"; 

あなたが「mousePositions」のIDを持つテキスト領域を持っているのであれば、あなたはこのようにそれに追加することができます

function draw(){ 
    document.getElementById("mousePositions").value += (mouseX + ", " + mouseY); 
    //rest of your code 

ステップ3：あなたが得るのみそれらの小規模のサンプルはそれぞれ完璧に動作し、それらを組み合わせることを考えます。

ロールオーバーを検出するコードがあり、処理からWebページを変更するコードがあります。