將基于函式的草圖面向物件

我正在嘗試采用Dan Shiffman 的主要螺旋程式并??使其面向物件。

我將所有變數放入建構式中，并將函式制作成封裝它們的方法。

但是 OOP 版本的代碼不會在螢屏上繪制超過 1 個三角形。我不明白為什么會有問題，因為我的所有變數和函式都包含在primeSpiral類的范圍內。

沒有類的作業代碼

let x, y;
let step = 1;
let stepSize = 20;
let numSteps = 1;
let state = 0;
let turnCounter = 1;
let offset = 0;

function setup() {
  createCanvas(900, 900);
  background(0);
  const cols = width / stepSize;
  const rows = height / stepSize;

  x = width / 2;
  y = height / 2;

  for (let i = 0; i < 500; i  ) {
    noStroke();
    primeSpiral(20, 1)
    primeSpiral(30, 200)
    incrementStep();
  }
}

function incrementStep() {
  switch (state) {
    case 0:
      x  = stepSize;
      break;
    case 1:
      y -= stepSize;
      break;
    case 2:
      x -= stepSize;
      break;
    case 3:
      y  = stepSize;
      break;
  }

  if (step % numSteps == 0) {
    state = (state   1) % 4;
    turnCounter  ;
    if (turnCounter % 2 == 0) {
      numSteps  ;
    }
  }
  step  ;


}

function primeSpiral(offset, color) {
  if (!isPrime(step   offset)) {
    //might put something here

  } else {
    let r = stepSize * 0.5;
    fill(color, 99, 164);
    push();
    translate(x, y);
    rotate(-PI / 4);
    triangle(-r,  r, 0, -r,  r,  r);
    pop();
  }
}

function isPrime(value) {
  if (value == 1) return false;
  for (let i = 2; i <= sqrt(value); i  ) {
    if (value % i == 0) {
      return false;
    }
  }
  return true;
}

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

與類：

let stepSize = 20;

function setup() {
  createCanvas(900, 900);
  background(0);
  const cols = width / stepSize;
  const rows = height / stepSize;
  x = width / 2;
  y = height / 2;
  background(0);
  prime = new PrimeSpiral(0, 0, 2, stepSize, 1, 0) //: x,y,offset,color
}

function draw() {
  prime.walk();
}

class PrimeSpiral {
  constructor(x, y, number) {
    this.x = x;
    this.y = y;
    this.number = number;
    this.stepSize = 20;
    this.numSteps = 1;
    this.state = 0;
    this.turnCounter = 1;
  }

  walk() {
    if (!this.isPrime(this.number)) {
      console.log(this.succes);
    } else {
      let r = stepSize * 0.5;
      fill(color, 99, 164);
      push();
      translate(x, y);
      rotate(-PI / 4);
      triangle(-r,  r, 0, -r,  r,  r);
      pop();
      this.incrementStep()
    }
  }

  isPrime(value) {
    if (value == 1) return false;
    for (let i = 2; i <= Math.sqrt(value); i  ) {
      if (value % i == 0) {
        return false;
      }
    }
    return true;
  }

  incrementStep() {
    switch (this.state) {
      case 0:
        this.x  = this.stepSize;
        break;
      case 1:
        this.y -= this.stepSize;
        break;
      case 2:
        this.x -= this.stepSize;
        break;
      case 3:
        this.y  = this.stepSize;
        break;
    }

    if (this.step % this.numSteps == 0) {
      this.state = (this.state   1) % 4;
      this.turnCounter  ;
      if (this.turnCounter % 2 == 0) {
        this.numSteps  ;
      }
    }
    this.step  ;
  }
}

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

uj5u.com熱心網友回復：

有時你需要放慢速度才能走得更快:)

我的預感是，您可能會嘗試一口氣撰寫所有課程，而不會放慢速度并一次測驗一個函式以確保不會出現錯誤。

以下是一些主要錯誤：

• 您忘記將step屬性添加到建構式中的類 ( this.step = 1;)。其中incrementStep() this.stepisundefined增加，導致NaN其余部分被丟棄（例如狀態等）
• 您主要作為全域變數離開stepSize，但也在使用this.stepSize：盡量避免歧義并使用其中一個（我建議使用this.stepSize，因為它允許多個實體具有獨立的步長）
• 走路translate(x, y);時你可能還在使用translate(this.x, this.y);

這是應用了上述注釋的版本（如果 x,y 超出螢屏邊界，則可選擇不再增加或繪制三角形）：

let spiral1;
let spiral2;

function setup() {
  createCanvas(900, 900);
  background(0);
  noStroke();
  // instantiate spirals here so width, height set
  spiral1 = new PrimeSpiral(20, 1);
  spiral2 = new PrimeSpiral(30, 200);
}

function draw(){
  spiral1.walk();
  spiral2.walk();
}

class PrimeSpiral{
  
  constructor(offset, color){
    this.x = width / 2;
    this.y = height / 2;
    this.step = 1;
    this.stepSize = 20;
    this.numSteps = 1;
    this.state = 0;
    this.turnCounter = 1;
    this.offset = offset;
    this.color = color;
  }
  
  incrementStep() {
    switch (this.state) {
      case 0:
        this.x  = this.stepSize;
        break;
      case 1:
        this.y -= this.stepSize;
        break;
      case 2:
        this.x -= this.stepSize;
        break;
      case 3:
        this.y  = this.stepSize;
        break;
    }

    if (this.step % this.numSteps == 0) {
      this.state = (this.state   1) % 4;
      this.turnCounter  ;
      if (this.turnCounter % 2 == 0) {
        this.numSteps  ;
      }
    }
    this.step  ;
  }
  
  walk(){
    // optional, early exit function if we're offscreen
    if(this.x < 0 || this.x > width) return;
    if(this.y < 0 || this.y > height) return;
    
    if (!isPrime(this.step   this.offset)) {
      //console.log('not prime:', step   offset);
    } else {
      let r = this.stepSize * 0.5;
      fill(this.color, 99, 164);
      push();
      translate(this.x, this.y);
      rotate(-PI / 4);
      triangle(-r,  r, 0, -r,  r,  r);
      pop();
    }
    this.incrementStep();
  }
  
}

function isPrime(value) {
  if (value == 1) return false;
  for (let i = 2; i <= sqrt(value); i  ) {
    if (value % i == 0) {
      return false;
    }
  }
  return true;
}

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

標籤：javascript 哎呀 p5.j​​s

上一篇：像打字稿一樣在飛鏢中創建界面

下一篇：將對父項的參考轉換為對子項的參考