【p5.js】实战临摹——国际象棋盘

动态的国际象棋盘

 

分析运动规律

通过仔细观察可以发现，黑色方格与白色方格轮流放缩，在黑色方格回复到最大尺寸的同时，白色方格开始缩小，vice versa

分析转折点

1. 黑方格的放缩 <-> 白方格的放缩

2. 放大 <-> 缩小

代码实现

发现转折点后，代码的思路就很清晰了。首先区分两块板——黑板和白板，分别放置白方格和黑方格，即定义一个转换的信号变量。

在draw方法中定义一个自增变量，该变量与方格的大小变换相关。当一种颜色方格缩小又放大到最大时，转变一个布尔值，使两一种颜色方格开始缩放。

let startScale;                 // 方格初始大小
let endScale;                   // 方格缩小极限
let returned;                   // 是否回复初始大小
let turnwhite;                  // 是否从黑方格转白方格

function setup() {
  createCanvas(320, 320);
  startScale = 40;
  endScale = 20;
  returned = false;
  turnwhite = false;
}

function draw() {
  if(turnwhite == false) {        // 白板黑方格
    if(returned == false){        // 缩小
      startScale-=0.2;
      if(startScale < endScale) {
        returned = !returned;
      }
    }
    if(returned == true) {        // 放大
      startScale+=0.2;
      if(startScale > 40) {
        returned = !returned;
        turnwhite = !turnwhite;
      }
    }
   whiteboard(startScale);
  }

  if(turnwhite == true) {         // 黑板白方格 
    if(returned == false){        // 缩小
      startScale-=0.2;
      if(startScale < endScale) {
        returned = !returned;
      }
    }
    if(returned == true) {        // 放大
      startScale+=0.2;
      if(startScale > 40) {
        returned = !returned;
        turnwhite = !turnwhite;
      }
    }
     blackboard(startScale);
  }
}

function blackboard(startScale){
    background(0, 50);            // 黑板
    fill(255);                    // 白方格
    rectMode(CENTER);             // 设置方格锚点在中心

    for (let x = 20; x <= 280; x = x + 80) {
      for (let y = 20; y <= 280; y = y + 80) {    // 奇数行
        rect(x, y, startScale, startScale);
      }
    }
    
    for (let x = 60; x <= 320; x = x + 80) {
      for (let y = 60; y <= 320; y = y + 80) {   // 偶数行
        rect(x, y, startScale, startScale);
      }
    }
}

function whiteboard(startScale){
    background(255, 50);          // 白板
    fill(0);                      // 黑方格
    rectMode(CENTER);

    for (let x = 60; x <= 320; x = x + 80) {
      for (let y = 20; y <= 280; y = y + 80) {    // 奇数行
        rect(x, y, startScale, startScale);
      }
    }

    for (let x = 20; x <= 280; x = x + 80) {
      for (let y = 60; y <= 320; y = y + 80) {    // 偶数行
        rect(x, y, startScale, startScale);
      }
    }
}