javascript - 修复粒子系统处理中的错误

Question

我正在尝试在处理中建立一个羽毛状的粒子系统。我试图将它基于我在 OpenProcessing 上找到的一些代码。当我将代码复制并粘贴到处理中(使用 Java)时，我收到一条错误消息“期望 SEMI，找到‘点’。

我认为这可能是因为代码使用 var 而不是 int 表明这将是 Javascript 代码。所以我将处理模式切换到p5.js，它运行了，但打开的浏览器只是一个空白的白屏。

任何关于让它运行的帮助将不胜感激!谢谢!

代码如下:

var points = [];
var painting = false;
var strokeNumber = 0;

var scl = 6;
var cols, rows;
var inc = 0.1;
var zOff = 0;
var particles = [];
var flowField = [];
var saturation = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  // createCanvas(400, 400);
  background(0);
  pixelDensity(5);

  cols = floor(width / scl);
  rows = floor(height / scl);

  flowField = Array(cols * rows);
  saturation = Array(width * height).fill(0);
  greateForceField();

}

function mousePressed() {
  painting = true;
  strokeNumber++;
}

function mouseReleased() {
  painting = false;
}

function updateForceField(){
  var v = createVector(mouseX, mouseY);
  var vPrev = createVector(pmouseX, pmouseY);
  v.sub(vPrev);
  v.setMag(1);
  var i = floor(mouseX / scl);
  var j = floor(mouseY / scl);
  var index =  i * rows + j;
  flowField[index] = v;
}

function showForceField(){
  for(var i = 0; i < cols; i++){
    for(var j = 0; j < rows; j++){
      var index = i * rows + j;
      var v = flowField[index];
      stroke(0,50);
      strokeWeight(1);
      push();      
      translate(i * scl, j * scl);
      rotate(v.heading());
      line(0,0,scl,0);
      pop();
    }    
  }
}

function greateForceField(){
  var xOff = 0;
  for(var i = 0; i < cols; i++){
    var yOff = 0;
    for(var j = 0; j < rows; j++){
      yOff += inc; 
      var angle = noise(xOff, yOff, zOff) * TWO_PI;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(.1);
      var index = i * rows + j;
      flowField[index] = v;
    }
    xOff += inc;
  }
  // zOff += inc * 0.1;
}

function draw() {
  // background(255);
  // showForceField();

  if(painting){
    updateForceField();

    var idx = mouseY * width + mouseX;
    if(saturation[idx] < 10){
      var r = 1+sqrt(sq(mouseX-pmouseX)+sq(mouseY-pmouseY));
      for(var a = 0; a < 100; a++){
        var particle = new Particle(mouseX+random()*r*cos(random(TWO_PI)), mouseY+random()*r*sin(random(TWO_PI)));
        particles.push(particle);
      }
      saturation[idx] ++;
    }
  }

  particles.filter(particle => particle.spread > 0).map(particle => {
    particle.update();
    particle.show();
    // particle.edges();
    particle.follow();
  })

  particles.map((particle, idx) => {
    if(particle.spread <= 0){
      particles.splice(idx,1);
    }
  });

}

function Particle(x,y){  
  this.pos = createVector(x,y);
  // this.color = color(245, 225, 50);
  // this.color = color(145, 225, 192);
  this.color = color(255);
  this.spread = 127;
  this.spreadInc = this.spread/100;

  this.prevPos = this.pos.copy();
  this.vel = p5.Vector.random2D();
  this.acc = createVector(0,0);
  this.maxSpeed = 2;

  this.update = function(){
    this.spread -= this.spreadInc;
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  this.applyForce = function(force){
    this.acc.add(force);
  }

  this.follow = function(){
    var i = floor(this.pos.x / scl);
    var j = floor(this.pos.y / scl);
    var index =  i * rows + j;
    var force = flowField[index];
    this.applyForce(force);    
  }

  this.show = function(){
    stroke(red(this.color),green(this.color),blue(this.color),this.spread);
    strokeWeight(.3*this.spread/127);
    // point(this.pos.x, this.pos.y);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    this.updatePrev();
  }

  this.updatePrev = function(){
    this.prevPos = this.pos.copy();
  }

  this.edges = function(){
    if(this.pos.x > width) {
      this.pos.x = 0;
      this.updatePrev();
    }
    if(this.pos.x < 0){
      this.pos.x = width;
      this.updatePrev();
    }
    if(this.pos.y > height){
      this.pos.y = 0;
      this.updatePrev();
    }
    if(this.pos.y < 0) {
      this.pos.y = height;
      this.updatePrev();
    }

  }
}

Answer 1

这看起来更像是 javascript，而不是 java。我对这些问题并不热衷，但是...您是否尝试将 javascript 作为 java 运行？

如果您使用的是处理 IDE，请查看右上角。你看到“Java”这个词了吗？

像这样:

如果是这种情况，您可能需要考虑安装 p5.js :

点击此处并选择“添加模式”:

现在搜索 p5.js 并安装它:

现在您的代码将编译。不过，我并不是说它会起作用，但你当前的问题将被抛在脑后。玩得开心!