p5.j​​s：如何访问for（）循环中的元素进行翻转？

Question

我在一个交互式文本分析网站上工作，我目前有一个for（）循环运行.txt文件中的一系列行。每行生成一个矩形。它运作良好，但我需要能够mouseOver / rollover每个方块，然后在网页上打印文本行。基本上我只需要编写一些内容，说明如果mouseX + mouseY位于矩形的顶部，则将行[i]附加到html中的段落。

我还在掌握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步：您是否可以编写从与页面交互的Processing调用的代码？

你可以在P5.js中编写JavaScript，这样你就可以谷歌像＃34; JavaScript附加到textarea＆＃34;弄清楚如何做到这一点。这是一个例子：

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

因此，如果您的文本区域的ID为＆＃34; mousePositions＆＃34;，您可以像这样附加到它：

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

第3步：只有当您让每个较小的示例自己完美运行时，您才会考虑将它们组合起来。

您拥有检测翻转的代码，并且您拥有修改处理网页的代码。