使用java、javascript和使用processing.js运行嵌入式时的处理差异

Question

我写了一些代码来创建动态画笔，它可以在处理环境中改变颜色。相同的代码在Java、javascript和embedded Javascript中运行时会产生非常不同的结果。

据我所知，在不同的模式下对全局变量的处理没有区别。另外，我定义了颜色模式，所以即使有差异，我的定义也应该替换它们。有什么想法吗？

(在HSB模式下的颜色)我还在整个屏幕上画了一个黑色矩形，用非常低的alpha值来慢慢淡出绘图。

float cH = 0;
float cS = 0;
float cB = 0;
int counter = 0;
// other variables.... 

setup()
{
    size(800,600);
    colorMode(HSB, 1.0, 1.0, 1.0);
    cH = 0.0;
    cS = 0.74;
    cB = 0.6;
    counter = 0;
    background(0);
    // .. other setup code
}

// ... other code

mouseDragged()
{   
   counter ++;
   if(counter %5 == 0)  {    
        noStroke();
        fill(0,0.01);
        rect(0,0, width, height);
    }

   cH += 1/500;

    if(cH >= 1.0)
       cH = 0.0;
    stroke(color( cH, cS, cB));
    fill(color( cH, cS, cB));

    //... then the code for drawing the shapes
}

在javascript模式下，在processing中运行它时，它工作得很好。见下面的图片1，处理颜色变化和淡出

当运行同样的草图时，使用javascript嵌入到我的浏览器中，颜色改变起作用，但在顶部绘制的矩形变成灰色而不是黑色。具有相同的颜色值！

你可以在here上试用一下

当它在java模式下运行时，淡出到黑色可以工作，但颜色变化不起作用。笔刷保持其初始颜色，即红色。

​

在我的应用程序引擎上，我从一个html文件加载草图，如下所示:对于前面的问题，我确保使用的是最新版本的processing.js

<html>
<head>
    <title>{{name}} Sketch</title>
    <script src="/statics/processing.js" type="text/javascript"></script>   
    <script src="/statics/javascript.js" type="text/javascript"></script>   

</head>

  <body>
      <label>Title</label>
      <br>
      <div class="proc">
      <canvas id="SKETCH" data-processing-sources="/sketches/{{name}}/{{name}}.pde" >   
  </canvas>
    <br>
    this is below the canvas
  </body>   
</html>

Answer 1

这可能是因为整数除法在行cH += 1/500; JS没有这样的事情…

来自：http://processingjs.org/articles/p5QuickStart.html

除法可能需要显式转换，在将处理代码转换为Processing.js时，会出现一类涉及整数除法与浮点除法的bug。在处理代码中直接的整数除法，当转换成Processing.js时，有时会变得有问题，因为数字变成了双精度，并引入了小数部分。修复方法是显式地将任何除法转换为表现出此行为的整数：

 // before
 int g = mouseX / i;

 // after
 int g = (int)(mouseX / i);