第一次使用P5.js創作【p5.js基礎】

設計靈感來自於前兩天“互動媒體技術”課上看到的一個動圖，原圖是白色正方體單向規律性旋轉，我在臨摹完成基礎上，加上了Material，利於辨別，同時將單方向旋轉，提升為兩方向隨機旋轉。

 

自定義類

格式：

var Vector2=function(xValue,yValue){4 }

此后，就可以創建對象了

var vectorObj=new Vector2(2,33)；

定義類成員和成員函數

在構造函數里，通過 this. 方式創建和初始化

var Vector2=function(xValue,yValue){
  this.x=xValue;
  this.y=yValue;
  this.Add=function(anotherVector2){
    this.x+=anotherVector2.x;
    this.y+=anotherVector2.y;
  }
}

注意，類內，使用類成員都要用this點出來

 

數組的使用

聲明

var cubes=[];

使用 cubes.push(new Cube())可以添加數組元素

使用 [ ] 可以通過索引訪問到數組元素 

 

下面是我對P5.js的初步嘗試