Question

我一直在寻找解决方案，但我希望问题出在处理代码本身。基本上我无法让我的Sketch在浏览器中工作。所有Dreamweaver都会显示一个小灰色立方体，我的草图应该在那里。立方体甚至不在浏览器中，所以我猜它与.pde文件本身内的参考文件有关？另外，我正在使用Processing 2.0和processing.js 1.4.1。

这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 


<meta charset="utf-8" />

<title>DreamSketcher</title>
<link href="text.css" rel="stylesheet" type="text/css">
<script src="processing.js"></script>


</head>

<body>
<canvas data-processing-sources="kringen.pde"> </canvas>

</body>
</html>

这是我的处理文件'kringen.pde'：

/* @pjs preload="dreamtex.jpg"; */
//PImage utab=new PImage(320,200);
//PImage vtab=new PImage(320,200);


int [][] utab=new int [554][988];
int [][] vtab=new int [554][988];
int uoffs= int(0),voffs= int(0);
int r = (int) random(1000,8192);
int ra = (int) random(200,255);
PImage tex;


void setup() {
size(554,988, JAVA2D);
frameRate (22);
precalc();
tex=loadImage("dreamtex.jpg");
println(tex.width);

}

void precalc() {
int x,y,offs;
float f;
offs=0;
for (y=0;y<988;y++) {
for (x=0;x<554;x++) {
f=8192/sqrt(pow((x-277),2)+pow((y-494),2));
//utab.pixels[offs]=color(int(f),int(f),int(f));
utab[x][y]=int(f)&255;
f=128*atan2(y-494,x-277)/PI;
//vtab.pixels[offs]=color(int(f),int(f),int(f));
vtab[x][y]=int(f)&255;
offs++;
}
}
}

void draw() {
loadPixels();
int x,y,offs,u,v;
offs=0;
for (y=0;y<988;y++) {
for (x=0;x<554;x++) {
u=(utab[x][y]+voffs)&ra;
v=(vtab[x][y]+uoffs)&ra;
pixels[offs++]=tex.pixels[(u<<8)+v];
}
}
updatePixels();
uoffs++;
voffs++;
}

Answer 1

只要所有资源都在适当的位置（与pde和html文件位于同一目录中），此代码就适用于我：processing.js，dreamtext.jpg和text.css。

处理草图在使用Processing.js的HTML中不起作用

1 个答案: