保存p5.js草图后仅出现语法错误

时间:2017-03-14 08:03:01

标签: javascript processing p5.js

我正在尝试用户Alex(https://www.openprocessing.org/user/74843)在openprocessing.org上找到的代码。

如果我在使用p5.js模式处理的未保存的草图中运行它,代码执行得很好,但是一旦我尝试保存项目以便稍后打开它就会出现语法错误并拒绝运行。在保存项目之前代码似乎运行得很好,我感到很难过。

有谁知道造成这种情况的原因是什么?

编译器给出了以下错误:

  

SyntaxError:预期;但发现聚

代码如下:

// polygon array and number of verts
let poly = [];
let n = 100;

// canvas size variables
let w = 500;
let h = 500;

// setup and draw functions ---

function setup() {
  createCanvas(w, h);
  strokeWeight(12);
  noFill();
  cursor(HAND);
  noStroke();
  n++; // add extra point for closing the polygon

  for (let i = 0; i < n; i++) {
    // populate regular polygon vertices given number of points n
    let a = {
      x: (w/2) + 100*sin(map(i, 0, n-1, 0, TAU)),
      y: (h/2) + 100*cos(map(i, 0, n-1, 0, TAU))
    };
    poly.push(a);
  }      
}

function draw() {
  // use default blend mode for background
  blendMode(BLEND);
  background(0, 0, 0);

  // use additive blend mode to separate color channels
  blendMode(ADD);
  stroke(255, 0, 0);
  drawPoly(1000, 1000);

  stroke(0, 255, 0);
  drawPoly(1200, 1500);

  stroke(0, 0, 255);
  drawPoly(2000, 1700);    
} 

// helper function implementations ---

function logMap(value, start1, stop1, start2, stop2) {
  // based off of linear regression + existing p5.map function

  start2 = log(start2);
  stop2 = log(stop2);

  return exp(start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)));
}

function drawPoly(dx, dy) {
  // draws polygon given vertices in the poly[] array, adds mouse bias using params

  let g = 0;
  if (mouseIsPressed)
    g = random(-2, 2);

  beginShape();
  for (let i = 0; i < n; i++) {
    let bias = dist(mouseX, mouseY, poly[i].x, poly[i].y);
    vertex(poly[i].x + dx / logMap(bias, w, 0, dx, 45) + g, poly[i].y + dy / logMap(bias, h, 0, dy, 45) + g);
  }
  endShape();
}

1 个答案:

答案 0 :(得分:0)

我在Sublime Text Editor中打开了项目,然后使用WAMP / MAMP在本地服务器上运行它,javascript运行得很好。

我认为此错误是由处理客户端尝试构建必要文件(例​​如index.html)引起的。

仍然不确定导致错误的原因,但只是在处理客户端之外使用p5js解决了这种情况下的问题。