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

我有一张处理草图，我已使用画布和processing.js嵌入到.html文档中。当我在处理中进行游戏时，素描呈现得非常好。但是，当我将它嵌入网页中时，绘制的圈子似乎会被移位等等。这是网页的link。处理草图在Web浏览器中无法正确呈现

编辑：原来，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>

来源

2014-05-04 sodiumnitrate

我对processing.js没有经验，但这是不好的做法，有时会导致问题没有调用'size（）'作为'setup（）'中的第一行。它也不赞成使用变量作为size（）的参数。我不知道为什么这些事情都是真的（你的代码看起来足够无害），但这就是我从这里的更聪明的人那里听到的:) – kevinsa5

我尝试了两种方法，但没有奏效。不管怎么说，还是要谢谢你。 – sodiumnitrate

@ kevinsa5对size（）使用变量会导致PDE在JavaScript模式下抛出一个错误。我不确定这会如何影响上传的小程序。 size（）出现在哪里并不重要。尽管出于显而易见的原因，应该在使用“width”和“height”之前写入它。 –

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

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

并利用这些彩车时作为索引到数组，而不是崩溃，它只是返回0。我不确定JS为什么处理非整数索引。而且我也不确定int为什么可以有小数点。无论如何，我希望这有助于。注意：在我的调查过程中，我了解到您无法调整（）您从其他服务器加载的图像的大小，因为某些原因，浏览器不允许它。如果调整大小后无法绘制图像，那可能就是这个原因。

来源

2014-05-07 06:30:34 kevinsa5

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

回答

相关问题