加工草圖不能用Processing.js工作在HTML中

我一直在尋找這樣一個解決方案這麼久，但我期望問題出現在處理代碼本身中。基本上，我無法讓我的Sketch在瀏覽器中工作。所有的Dreamweaver都會顯示一個小的灰色立方體，我的素描應該在那裏。立方體甚至在瀏覽器中都沒有，所以我想這與.pde文件本身內的參考文件有關。另外，我正在使用Processing 2.0和processing.js 1.4.1。加工草圖不能用Processing.js工作在HTML中

這是我的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++; 
}

來源

2013-09-28 Pim Hoogeveen

解決方案：當你的代碼在本地並鏈接時，你看不到你的代碼返回，你需要一個服務器。 –

此代碼的工作對我來說，只要所有的資源都在放置在與pde和html文件相同的目錄中：processing.js，dreamtext.jpg和text.css。

來源

2013-09-29 15:23:14 rednoyz

加工草圖不能用Processing.js工作在HTML中

回答

相關問題