[p5.js] actual copy - chess board

Dynamic chess board

 

Analyze the law of motion

It can be found by careful observation that , The black squares and white squares are scaled in turn , While the black square returns to its maximum size , The white square began to shrink ,vice versa

 

Analyze the turning point

1. The expansion and contraction of black squares  <-> The expansion and contraction of white squares

2. Zoom in <-> narrow

 

Code implementation

After finding the turning point , The idea of the code is very clear . First, distinguish two boards —— Blackboard and whiteboard , Place white squares and black squares respectively , That is, define a converted signal variable .

stay draw Method to define a self increasing variable , This variable is related to the transformation of the size of the square . When a color grid shrinks and enlarges to the maximum , Transform a Boolean value , Start scaling the squares of two colors .

let startScale;                 //  Initial size of the square 
let endScale;                   //  The limit of square reduction 
let returned;                   //  Whether to reply to the initial size 
let turnwhite;                  //  Whether to change from black square to white square 

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

function draw() {
  if(turnwhite == false) {        //  White board, black square 
    if(returned == false){        //  narrow 
      startScale-=0.2;
      if(startScale < endScale) {
        returned = !returned;
      }
    }
    if(returned == true) {        //  Zoom in 
      startScale+=0.2;
      if(startScale > 40) {
        returned = !returned;
        turnwhite = !turnwhite;
      }
    }
   whiteboard(startScale);
  }

  if(turnwhite == true) {         //  Blackboard white square  
    if(returned == false){        //  narrow 
      startScale-=0.2;
      if(startScale < endScale) {
        returned = !returned;
      }
    }
    if(returned == true) {        //  Zoom in 
      startScale+=0.2;
      if(startScale > 40) {
        returned = !returned;
        turnwhite = !turnwhite;
      }
    }
     blackboard(startScale);
  }
}

function blackboard(startScale){
    background(0, 50);            //  blackboard 
    fill(255);                    //  White squares 
    rectMode(CENTER);             //  Set the grid anchor in the center 

    for (let x = 20; x <= 280; x = x + 80) {
      for (let y = 20; y <= 280; y = y + 80) {    //  Odd line 
        rect(x, y, startScale, startScale);
      }
    }
    
    for (let x = 60; x <= 320; x = x + 80) {
      for (let y = 60; y <= 320; y = y + 80) {   //  Even number line 
        rect(x, y, startScale, startScale);
      }
    }
}

function whiteboard(startScale){
    background(255, 50);          //  Whiteboard 
    fill(0);                      //  Black Square 
    rectMode(CENTER);

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

    for (let x = 20; x <= 280; x = x + 80) {
      for (let y = 60; y <= 320; y = y + 80) {    //  Even number line 
        rect(x, y, startScale, startScale);
      }
    }
}