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

女爷i 2023-06-08 06:49 85阅读 0赞

![变化的国际象棋盘][2019101715381549.gif] 动态的国际象棋盘

#  #

# 分析运动规律 #

### 通过仔细观察可以发现，黑色方格与白色方格轮流放缩，在黑色方格回复到最大尺寸的同时，白色方格开始缩小，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);
          }
        }
    }

[2019101715381549.gif]: /images/20230531/36615789edef49ea9d215b04cf767a8d.png