【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) {        // 白板黑方格