p5.js：如何訪問for（）循環中的元素以翻轉？

我正在一個交互式文本分析網站上工作，我目前有一個for（）循環運行在.txt文件中的一行數組。每一行生成一個矩形。它運行良好，但我需要能夠mouseOver/rollover每個方塊，然後打印網頁上的文本行。基本上，我只需要寫一些說如果mouseX + mouseY位於矩形的頂部，則將行[i]附加到html中的段落。p5.js：如何訪問for（）循環中的元素以翻轉？

我仍然在掌握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); 
    } 

}

來源

2016-04-15 themessup

拆分您的問題分成更小的步驟。

第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附加到textarea」來弄清楚如何做到這一點。這裏有一個例子：

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

所以，如果你有「mousePositions」的ID的文本區域，您可以將它像這樣：

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

第3步：只有當你這些小例子中的每一個都可以自己完美地工作，然後你考慮將它們結合起來。

您的代碼檢測到翻轉，並且您擁有修改處理網頁的代碼。

來源

2016-04-15 13:31:11

謝謝你的幫助。我不得不最終使用不同的方法將文本附加到段落，但現在它正在工作，謝謝！我現在只有一個問題，那就是當for循環生成一個很好的正方形網格時，由於y + = 10當它們碰到窗口邊緣時按下了這些行，整個正方形羣落會隨着每個框架和完整的循環。有沒有什麼辦法可以讓整個廣場仍然沒有noLoop（）？ – themessup

沒關係，修好！在DRAW循環開始時忘記狀態x = value和y = value，然後通知for（）循環。整個過程只有在setup（）中，所以只更新一次。再次感謝！ – themessup

p5.js：如何訪問for（）循環中的元素以翻轉？

回答

相關問題