Createvector是undefined p5js

Question

更新：忘了說，我正在使用p5.js編輯器。草圖的其餘部分工作，並加載圖像。

當我在瀏覽器中運行此代碼時，我得到'createVector is undefined'。根據p5.js的參考，我使用了正確的語法。

任何想法是什麼錯？

var img; 
var bg = 100; 

var velocity = createVector(0,0); 
var acceleration = createVector(0,0); 

function setup() { 
    createCanvas(720, 400); 
    img = loadImage("assets/bb8body.png"); 
} 

function keyPressed() { 
    if (keyIsPressed === true) { 
     if (key === 'd') { 
      acceleration++; 
      velocity.add(acceleration); 

      console.log(vx); 
     } 
    } 
} 

function damping(){ 

} 

function draw() { 
    keyPressed(); 
    background(bg); 
    image(img, velocity, 0); 
    damping(); 
} 

Answer 1

我不是100％的原因，但createVector()作品setup()（非外部）。 此外，我發現了兩個小錯誤：

acceleration++; 

這將無法正常工作的js不支持重載運算符，如C++，但您可以使用p5.Vector的add()功能。 另外，vx變量在您的其他代碼中不存在。

下面是使用p5.Vector實例的代碼的修改版本，但爲了測試目的，繪製了一個小框而不是圖像。您可以運行演示波紋管：

var img; 
 
var bg = 100; 
 

 
var velocity;// = createVector(0,0); 
 
var acceleration;// = createVector(0,0); 
 

 
function setup() { 
 
    createCanvas(720, 400); 
 
    velocity = createVector(0,0); 
 
    acceleration = createVector(0,0); 
 
    //img = loadImage("assets/bb8body.png"); 
 
} 
 

 
function keyPressed() { 
 
    if (keyIsPressed === true) { 
 
     if (key === 'd') { 
 
      //acceleration++; 
 
      acceleration.add(1,1); 
 
      velocity.add(acceleration); 
 

 
      //console.log(vx); 
 
      console.log(velocity.x); 
 
     } 
 
    } 
 
} 
 

 
function damping(){ 
 

 
} 
 

 
function draw() { 
 
    keyPressed(); 
 
    background(bg); 
 
    rect(velocity.x,velocity.y,20,20) 
 
    //image(img, velocity, 0); 
 
    damping(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>