Question

我有一个处理草图，在Processing 2.1.2上运行时效果很好。我曾尝试将其嵌入到网页中processing.js，并且效果非常好。然后，几个月后，当我再次检查我的草图时，它不起作用。目前，它不适用于Chrome，Firefox，Safari，Opera和Internet Explorer。它仅适用于iOS 7.1.2上的Chrome（非常奇怪）。几个月前，它正在开发所有这些浏览器。

Here是代码（也不在草图上工作）。

以下是草图在一段时间后的样子： And here is what the sketch should look like after a while

here是嵌入其中的原始网页，其中包含以下html代码：

<!doctype html>
<html>
    <head>
        <title>Irem Altan | coming soon</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="js/processing.min.js"></script>
    </head>
    <body>
        <canvas data-processing-sources="pde/imageTest.pde"></canvas>
        <p>experiments with processing...</p>
        <p><a href="http://behance.net/iremaltan">behance</a> <em>|</em> <a href="http://irem-altan.deviantart.com">deviantart</a></p>
    </body>
</html>

我还要包括原始代码：

PImage img;

void setup() {
  size(1000, 563);
  String url = "http://iremaltan.com/pde/robb2/data/robb.jpg";
  img  = loadImage(url, "jpg");
  img.resize(1000, 563);
  img.loadPixels();
}

void draw() {
  int initPix = (int) random(1000*563);
  int init  = (int) grayRetriever(initPix);
  for (int i=0;i<100;i++) {
    int numPix = (int) random(1000*563);
    int num = (int) grayRetriever(numPix);
    if ( num<init || random(0,1)>float(num)/float(init)){
      float x = numPix % 1000;
      float y = numPix/1000;
     // println(x," ",y);
      point(x,y);
    }

  }
}

float grayRetriever(int pix){
  float r = red(img.pixels[pix]);
  float g = green(img.pixels[pix]);
  float b = blue(img.pixels[pix]);

  float gray = (r+g+b)/3;

  return(gray);
}

Answer 1

此代码在处理中也不起作用，因为您将firstTime和img变量限定在setup()内。一旦你点击draw()，他们就完全迷失了（应该是）。

将它们移出，并预加载您正在使用的图像：

/* @pjs preload="http://iremaltan.com/robbsmall.jpg"; */

boolean firstTime = true;
PImage img = loadImage("http://iremaltan.com/robbsmall.jpg"); 

void setup(){
  size(1000, 558);
}

[rest of your code]

处理草图不适用于各种Web浏览器

1 个答案: