p5.js: 如何访问 for() 循环中的元素以翻转？

Question

我正在一个交互式文本分析网站上工作，我目前有一个 for() 循环运行通过 .txt 文件中的一组行。每行生成一个矩形。它运行良好，但我需要能够 mouseOver/rollover 每个方块，然后在网页上打印文本行。本质上我只需要写一些东西来说明如果 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，这样您就可以 google 类似 "JavaScript append to textarea" 的内容来弄清楚如何做到这一点。这是一个例子：

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

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

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

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

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

p5.js: 如何访问 for() 循环中的元素以翻转？

p5.js: How can I access elements in a for() loop to rollover?

html

javascript

hover

p5.js