Javascript p5.js：如何访问for（）循环中的元素以进行滚动？

我正在开发一个交互式文本分析网站，目前有一个for（）循环运行在.txt文件中的一系列行中。每行生成一个矩形。它工作得很好，但我需要能够鼠标悬停/滚动每个方块，然后在网页上打印文本行。本质上，我只需要写一些东西，如果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);
    }

}

var book=[]；
var行=[]；
var term1=[]；
var term2=[]；
变量大小；
var x；
变量y；
函数预加载（）{
book=loadStrings（“data/01.txt”）；
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
彩色模式（HSB，360，100，100，100）；
行=拆分令牌（书籍[0]，“？”）；
术语1=[“摄影”、“摄影”、“摄影”]；
术语2=[“艺术”、“艺术”、“艺术”]；
尺寸=10；
x=40；
y=50；
noLoop（）；
仰泳（）；
矩形模式（中心）；
ellipseMode（中心）；
背景（0,0,100）；
}
函数绘图（）{
背景（0,0,100）；
对于（var i=0；i=窗宽-50）{
x=40；
y+=尺寸；
}
//包含术语1和术语2
如果（（行[i].indexOf（term1[0]）>0 |行[i].indexOf（term1[1]）>0 |行[i].indexOf（term1[02]）>0）和&（行[i].indexOf（term2[0]）>0 |行[i].indexOf（term2[1]）>0 |行[i]{
填充（37、87、100）；
}else如果（行[i].indexOf（term1[0]）>0 | |行[i].indexOf（term1[1]）>0 | |行[i].indexOf（term1[2]）>0{
填充（333、61、94）；
}else如果（行[i].indexOf（term2[0]）>0 | |行[i].indexOf（term2[1]）>0 | |行[i].indexOf（term2[2]）>0{
填充（203、71、98）；
}否则{
填充（0,0,95）；
}
rect（x，y，size/2，size/2）；
}
}

将问题分为几个小步骤

第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);
}

因此，如果您有一个id为“mousePositions”的文本区域，您可以这样附加到它：

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

第3步：只有当您让这些小示例各自完美地工作时，才考虑将它们结合起来

---

您有检测滚动的代码，您有修改处理网页的代码。

谢谢您的帮助。最后，我不得不使用另一种方法将文本附加到一个段落中，但它现在起作用了，谢谢！我现在只有一个问题，那就是当for循环生成一个漂亮的正方形网格时，当y+=10向下推动行到达窗口边缘时，整个正方形组会随着每一帧和完整的循环从页面上落下。有没有什么方法可以在没有noLoop（）的情况下让整个方块保持静止？没关系，修好了！忘记在DRAW循环的开始处声明x=value和y=value，这会通知for（）循环。这段时间它只在setup（）中，所以只更新了一次。再次感谢！

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