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