Processing 尝试实现广度优先搜索可视化器需要帮助设置过程的动画

Processing 尝试实现广度优先搜索可视化器需要帮助设置过程的动画,processing,p5.js,Processing,P5.js,因此,我已经实现了该算法的静态版本,它绘制了从起始节点到结束节点的路径。我需要帮助的是如何使这个过程生动。任何帮助都将不胜感激。 这里是指向该项目GitHub页面的链接 访问: 我已经尝试了一些方法,但没有任何效果,就像我尝试高亮显示开始节点访问绘图循环中每一帧的每个相邻单元一样,但没有效果。?这太酷了 要可视化每个步骤,您需要记录它,以便以后可以可视化它。 (例如和 有几种方法可以做到这一点。 例如: 您可以记录完整网格数据的深度副本,稍后可以显示/渲染,甚至调试/显示其他可视化数据。这是一个

因此,我已经实现了该算法的静态版本,它绘制了从起始节点到结束节点的路径。我需要帮助的是如何使这个过程生动。任何帮助都将不胜感激。 这里是指向该项目GitHub页面的链接

访问:

我已经尝试了一些方法,但没有任何效果,就像我尝试高亮显示开始节点访问绘图循环中每一帧的每个相邻单元一样,但没有效果。?

这太酷了

要可视化每个步骤,您需要记录它,以便以后可以可视化它。 (例如和

有几种方法可以做到这一点。 例如:

  • 您可以记录完整网格数据的深度副本,稍后可以显示/渲染,甚至调试/显示其他可视化数据。这是一个很好的指南
  • 您可以为每个步骤渲染一个帧,并将其记录为一个列表,以便进行图层可视化播放
  • 目前,由于阻塞
    while
    循环会干扰渲染,您无法单独可视化这些步骤,但没有任何东西阻止您显式调用
    draw()
    来渲染和克隆帧以供以后使用:

    //XXXXXXXXXXXXXXXXXXXX HUD变量XXXXXXXXXXXXXXXXXXXXX
    让开始按钮;
    让我们重新设置按钮;
    细胞型;
    let algoType;
    //XXXXXXXXXXXXXXXXXXXXXXXX HUD变量XXXXXXXXXXXXXXXXXXXXX
    //XXXXXXXXXXXXXXXXXXXXXX草图变量XXXXXXXXXXXXXXXXXX
    让网格=[];
    设细胞大小=15;
    让startX;
    让startY;
    让我们结束;
    让恩迪;
    //XXXXXXXXXXXXXXXXXXXXXX草图变量XXXXXXXXXXXXXXXXXX
    //在每个迭代步骤中保存一个网格
    设algoVisSteps=[];
    //当前迭代步进计数器
    设algoVisStep=0;
    //是否显示可视化
    设displayAlgoViz=false;
    //可视化间隔
    函数设置(){
    createCanvas(675315);
    initialiseGrid();
    createHud();
    }
    函数绘图(){
    背景(100);
    如果(显示algoviz){
    图像(algoVisSteps[algoVisStep],0,0);
    //gotoNextFrame();
    algoVisStep=(algoVisStep+1)%algoVisSteps.length;
    }否则{
    //画网格
    for(让行=0;行=0&&posy>=0&&posx