Processing 处理画布中引用的.js PDE/.PJS文件未正确加载

Processing 处理画布中引用的.js PDE/.PJS文件未正确加载,processing,Processing,我通过MAMP在本地工作,处理PDE/PJS文件的过程将无法加载以正确显示文件 它应该是什么样子的: 以及它在浏览器中的实际外观: 代码如下: <!DOCTYPE html> <html> <head> <script src="processing-1.4.1.min.js"></script> </head> <body> <canvas data-processing-source

我通过MAMP在本地工作,处理PDE/PJS文件的过程将无法加载以正确显示文件

它应该是什么样子的:

以及它在浏览器中的实际外观:

代码如下:

<!DOCTYPE html>
<html>
<head>
    <script src="processing-1.4.1.min.js"></script>
</head>
<body> 
    <canvas data-processing-sources="britt_final/britt_final.pde"></canvas>
</body>
</html>

以及处理文件本身: //样本三角试验

int cellh = 100;
int cellw = 100;
color colors[] = { #6FC6EB, #7BB9EA, #76A8E7, #A1A6EA, #8496E6, #9B91E7, #9680E4, #B78AE8,      #AF6DE4, #D05EE4 };
float[] verts = {0, 0, 0, 0, 0, 0};
int lastID = -1;

void setup() {
   size(1000, 500);
   noStroke();
   smooth();
   int ncells = 2*ceil(width/cellw)*ceil(height/cellh);
  for(int i = 0; i < ncells; i++) {
fill(assignColor(i));
verts = getVertices(i, verts);
triangle(verts[0], verts[1], verts[2], verts[3], verts[4], verts[5]); 
  }
}

void draw() {
  if (mouseX == 0 && mouseY == 0) return;
  int newID = getCellID(mouseX, mouseY);
  if(newID != lastID) {
    identify(newID);
    if(lastID >= 0 && lastID != 64 && lastID != 34) {
      verts = getVertices(lastID, verts);
      fill(colors [int(random(0,10))]);
      triangle(verts[0], verts[1], verts[2], verts[3], verts[4], verts[5]);     
}

    lastID = newID;
  }
}

float[] getVertices(int cellID) {
  return getVertices(cellID, null);
}

float[] getVertices(int cellID, float[] result) {
  int gridw = ceil(width/cellw);
  if(result == null) result = new float[6];
  int gridcell = cellID/2;
  int sense = (gridcell/gridw + gridcell%gridw) % 2;
  result[0] = (gridcell % gridw) * cellw;
  result[1] = (gridcell / gridw) * cellh;
  result[4] = result[0] + cellw;
  result[5] = result[1] + cellh;
  result[2] = result[4*((sense+cellID)%2)];
  result[3] = result[5-4*((sense+cellID)%2)];
  if(sense == 1) result[((1+cellID)%2)*4] = result[4*(cellID%2)];
  return result;
}

int getCellID(float x, float y) {
  int gridw = ceil(width/cellw);
  int base = int(x)/cellw + gridw * (int(y)/cellh);
  float localx = x % cellw;
  float localy = y % cellh;
  int sense = (int(x)/cellw + int(y)/cellh) % 2;
  float slope = float(cellh)/float(cellw);
   int offset = 0;
   if (  (sense == 0 && localy < slope * localx) 
         || (sense == 1 && localy > cellh - slope * localx) )
                 offset = 1;
       return 2*base + offset;
 }

color assignColor(int cellID) {
   int sense, rowsize = 2*ceil(width/cellw);
   sense = (cellID/rowsize) % 2;
   return colors[2*sense + (cellID%rowsize)%2];
 }

  void identify(int cellID) {
  fill(assignColor(cellID));
  verts = getVertices(cellID, verts);
  triangle(verts[0], verts[1], verts[2], verts[3], verts[4], verts[5]);  
  fill(0);

  }
int cellh=100;
int-cellw=100;
颜色[]={6FC6EB、#7BB9EA、#76A8E7、#A1A6EA、#8496E6、#9B91E7、#9680E4、#B78AE8、#AF6DE4、#D05EE4};
float[]verts={0,0,0,0,0};
int lastID=-1;
无效设置(){
尺寸(1000500);
仰泳();
光滑的();
int ncells=2*ceil(宽度/单元宽)*ceil(高度/单元高);
对于(int i=0;i=0&&lastID!=64&&lastID!=34){
顶点=获取顶点(lastID,顶点);
填充(颜色[int(随机(0,10)));
三角形(顶点[0]、顶点[1]、顶点[2]、顶点[3]、顶点[4]、顶点[5]);
}
lastID=newID;
}
}
float[]获取顶点(int cellID){
返回getVertices(cellID,null);
}
float[]获取顶点(int cellID,float[]结果){
int gridw=ceil(宽度/单元宽度);
如果(result==null)result=newfloat[6];
int gridcell=cellID/2;
int sense=(gridcell/gridw+gridcell%gridw)%2;
结果[0]=(gridcell%gridw)*cellw;
结果[1]=(gridcell/gridw)*cellh;
结果[4]=结果[0]+单元格W;
结果[5]=结果[1]+单元格;
结果[2]=结果[4*((感觉+细胞%2)];
结果[3]=结果[5-4*((感觉+细胞%2)];
如果(sense==1)结果[(1+单元ID)%2)*4]=result[4*(单元ID%2)];
返回结果;
}
int getCellID(浮点x,浮点y){
int gridw=ceil(宽度/单元宽度);
int base=int(x)/cellw+gridw*(int(y)/cellh);
float localx=x%cellw;
float localy=y%cellh;
整数意义=(整数(x)/cellw+整数(y)/cellh)%2;
浮动斜率=浮动(cellh)/浮动(cellw);
整数偏移=0;
if((检测==0&&localycellh-slope*localx))
偏移量=1;
返回2*base+offset;
}
颜色分配颜色(int cellID){
整数意义,行大小=2*ceil(宽度/单元宽度);
sense=(cellID/rowsize)%2;
返回颜色[2*sense+(cellID%行大小)%2];
}
无效标识(int cellID){
填充(分配颜色(细胞);
顶点=获取顶点(单元格,顶点);
三角形(顶点[0]、顶点[1]、顶点[2]、顶点[3]、顶点[4]、顶点[5]);
填充(0);
}
它基本上只是看起来被破坏了,并且缺少通过处理文件内置的任何类型的交互

我参考了其他几个调查,我和我的教授似乎都找不到解决办法


任何帮助都将不胜感激

草图加载良好…问题似乎是许多变量变成了
float
,而您希望它们是
int
。它在Processing desktop中工作,因为所有东西都是静态类型。JS似乎打破了这一点

我尝试在
int()
中封装一些变量,结果更好,但不是您想要的:

我建议您检查代码并记录所有值,以确保它们不是浮动的,然后修复所需的任何内容