javascript - p5.j​​s:如何访问 for() 循环中的元素以翻转？

Question

我正在一个交互式文本分析网站上工作，我目前有一个 for() 循环，它运行在 .txt 文件中的一组行中。每行生成一个矩形。它运行良好，但我需要能够将鼠标悬停/滚动到每个方 block 上，然后在网页上打印文本行。本质上，我只需要写一些东西，说明如果 mouseX + mouseY 在矩形的顶部，将 lines[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 步:您能否编写从与页面交互的处理中调用的代码？

您可以只在 P5.js 中编写 JavaScript，因此您可以在谷歌上搜索“JavaScript 附加到 textarea”之类的内容来了解​​如何执行此操作。这是一个例子:

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

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

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

第 3 步:只有当您让这些较小的示例中的每一个都能完美地独立运行时，您才会考虑将它们组合起来。

您有检测翻转的代码，并且您有修改来自 Processing 的网页的代码。