Как я могу реализовать взаимодействие с пользователем в p5.js?Я знаю, что p5 изначально не поддерживает взаимодействия, но есть ли способ написать свои собственные?

Question

Итак, я пытаюсь реализовать инструмент визуализации данных, написанный на p5.js (так как он позволяет мне рисовать визуализацию).Тип данных - это объект javascript со свойствами: name и массивом детей, а визуализация - это простое рекурсивное дерево, в котором каждая ветвь представляет узел.Основная функция рисования была написана и протестирована.

Я знаю, что p5 не имеет никаких взаимодействий из коробки, поэтому я сталкиваюсь с препятствием, когда пытаюсь записать взаимодействия с пользователем, в основном, я имею в виду, что когда пользователь наводит указатель мыши на узел (т.е. ветвь) он должен отображать имя кода, а во-вторых, когда пользователь нажимает на узел, новое дерево должно быть нарисовано, принимая выбранный узел в качестве корня (и, возможно, возвращаясь к оригиналу, щелкая кореньновое дерево).

Я воздержусь от публикации своего кода, поскольку это групповой проект, и другие члены группы не оценят, что я разместил код.Поэтому я не столько ищу конкретный код, сколько в основном идеи и / или алгоритмы для их реализации.

Я с нетерпением жду предложений о том, как реализовать такую ​​функциональность.Спасибо!

Answer 1

Это довольно просто на самом деле.Если у вас есть объект, хранящий все узлы, выполните цикл для отображения узлов и взаимодействий, проверив, находятся ли mouseX и mouseY над узлом.Если ваш узел - rect(), это должно быть просто

void node = //node here       
if(mouseX>node.x&&mouseX<node.x+node.width&&mouseY>node.y&&mouseY<node.y+node.height){
   //Display information about node when mouse hovers
}
//Later
mouseClicked(){
    if(mouseX>node.x&&mouseX<node.x+node.width&&mouseY>node.y&&mouseY<node.y+node.height){
       //When clicked on node
    }
}

. Я предлагаю проверить некоторые примеры мыши на сайте https://processing.org/examples/

Answer 2

P5.js поддерживает пользовательский ввод.Ознакомьтесь с разделом events в ссылка .

Например, вот эскиз, который показывает зеленый круг, который становится красным, когда вы наводите курсор мыши на него:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if(dist(mouseX, mouseY, width/2, height/2) < 100){
        fill(255, 0, 0);
    }
    else{
        fill(0, 255, 0);    
    }

    background(32);
    ellipse(width/2, height/2, 200);
}

Бесстыдная самореклама: здесь - учебник по пользовательскому вводу.Он написан для обработки, но многие из тех же принципов применимы к P5.js.

Если у вас все еще возникают проблемы, задайте более конкретный вопрос в новом сообщении.Вы не должны публиковать свою полную программу в любом случае - вместо этого, пожалуйста, попытайтесь сузить свою проблему до MCVE .