Question

我有一个处理草图，我使用画布和.html将其嵌入到processing.js文档中。当我在处理中玩时，草图渲染完全正常。但是，当我将其嵌入网页时，绘制的圆圈似乎会被取代。这是网页的link。

编辑：事实证明resize()功能在浏览器上无法正常工作。（请参阅调整大小功能不起作用here）调整大小功能是否可以通过创建临时文件调整大小的图像，或类似的东西？

以下是处理代码：

PImage img;

int X = (int) 1000;
int Y = (int) X/16*9;
int r = 5;
int gridX = X/r;
int gridY = Y/r;

void setup(){
  String url = "http://iremaltan.com/pde/robb2/data/robb.jpg";
  noStroke();
  size(X,Y);
  img = loadImage(url,"jpg");
  img.resize(X,Y);
  img.loadPixels();
  frameRate(500);
  background(0);
}

int xLoc,yLoc;
float gray;
int i=0;
void draw(){
  xLoc = (i%gridX)*r+r/2;
  yLoc = i/(gridX)*r+r/2;
  gray = colorRetriever(xLoc,yLoc);
  fill(gray);
  ellipse(xLoc,yLoc,r,r);
  fill(255,0,0);
  i++; 
}

float colorRetriever(int xLoc, int yLoc){
  int pix = (yLoc-1)*X+xLoc-1;
  float gray;
  float r = red(img.pixels[pix]);
  float g = green(img.pixels[pix]);
  float b = blue(img.pixels[pix]);
  gray=(r+g+b)/3;
  return(gray);
}

此处还有相关的html代码，以防万一出现问题：

<!doctype html>
<html>
    <head>
    <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/robb2/robb2.pde"></canvas>
    <p>experiments with processing...</p>
</body>

Answer 1

由于我不理解的原因（我几乎没有PJS的经验），pix变量（声明为int）有时可能不是int您的代码中的{1}}。当我在println(pix + ":" + r+","+g+","+b);方法的底部插入colorRetriever时，我得到了一堆这样的数字：

7401.5:8,255,3
7431.5:15,255,4
7461.500000000001:0,0,0
7491.499999999999:0,0,0
7521.5:26,255,35
7551.5:34,255,38
7581.499999999998:0,0,0
7611.500000000001:0,0,0
7641.499999999999:0,0,0
7671.500000000002:0,0,0
7701.5:39,255,20
7731.5:25,255,23
7761.500000000001:0,0,0
7791.499999999999:0,0,0

当使用这些浮点数作为数组的索引而不是崩溃时，它只返回零。我不确定为什么JS处理非整数索引的原因。而且我也不确定为什么int可以有小数点。无论如何，我希望有所帮助。

附注：在我的调查过程中，我了解到您无法调整（）从其他服务器加载的图像（由于某种原因浏览器不允许它）。如果在调整大小后无法绘制图像，也许这就是原因。

处理草图无法在Web浏览器中正确呈现

1 个答案: