p5.js绘制七巧板图案2020-09-02

七巧板

七巧板大家都熟悉的，有一段时间因缘巧合，了解到七巧板在幼儿数学中应用比较普遍。有道幼儿数学思维课的教具中也有七巧板。上图是一个五年级的小朋友，自己用p5.js画的七巧板，钻研了很久，我表示很开心。下面是他的代码：

function setup() {
    createCanvas(300,300);
    strokeWeight(2)
}

function draw() {
    background(255 ,165 ,0)
    noStroke()
    fill(0, 255, 255)
    triangle(0,0,width,0,width/2,height/2)
    fill(192 ,255 ,62)
    triangle(0,0,0,height,width/2,height/2)
    fill(255, 215 ,0    )
    triangle(width,height,width/2,height,width,height/2)
    fill(205, 92, 92    )
    triangle(0,height,width/2,height,width/2/2,height/4*3)
    fill(255, 255, 0)
    triangle(width/2,height/2,width/2,height,width/2/2,height/4*3)
    triangle(width/2,height/2,width/2,height,width/4*3,height/4*3)
    fill(191, 62 ,255   )
    triangle(width/2,height/2,width/4*3,height/4*3,width/4*3,height/4)
}

他绘制的过程中，因为涉及到平行四边形，所以问我平行四边形怎么绘制，我回答说用vertext不过想来是没想通，其实他的画法是正方形用了2个三角形拼出来的，橙色的平行四边形其实没有绘制，是底下漏出来的背景色，如果把background(255 ,165 ,0)改成background(255 ,0,0)就可以发现了：

红色背景色

不过解决了问题还是挺好的，能够用width和height表示宽度和高度的变量，表示三角形各个顶点，也是很不错的。这里平行四边形用vertex是可以的，因为实际上坐标他已经知道了（如下图），看起来是vertex用的不熟悉。包括正方形也是可以画的，当然正方形也可以话个正方形，然后用pop和push旋转45°。

image.png

beginShape()
vertext(x1, y1)
vertext(x2, y2)
vertext(x3, y3)
vertext(x4, y4)
endShape(CLOSE)

从这里说开去，有没有其他的画法呢？有的，可以绘制小一点，然后放大，然后画一个三角形然后利用平移得到其他三角形，方法还是挺多的。本身坐标不是很复杂，可以直接画出来，计算出每个点的坐标，也可以在原点复制，然后考虑平移变换，涉及到的知识点有所差别。
先用坐标计算的方法绘制

function setup() {
    createCanvas(300, 300);
  }
  
  
  function draw() {
    background(0);
    fill('red')
    triangle(0,0,0,height,width/2,height/2)
    fill('blue')
    triangle(0,0,width,0,width/2,height/2)
    fill('green')
    triangle(0,height,width/4,height*3/4,width/2,height)
    fill('orange')
    triangle(width*3/4, height/4, width/2, height/2,width*3/4,height*3/4)    
    fill('purple')
    triangle(width,height/2,width/2,height,width,height)
    // 长方形


    // 平行四边形
  }

这样就剩下平行四边形和正方形了，黑色的背景露出来了

黑色背景露出

function setup() {
    createCanvas(300, 300);
  }
  
  
  function draw() {
    background(0);
    // 不需要边框
    noStroke()
    fill('red')
    triangle(0,0,0,height,width/2,height/2)
    fill('blue')
    triangle(0,0,width,0,width/2,height/2)
    fill('green')
    triangle(0,height,width/4,height*3/4,width/2,height)
    fill('orange')
    triangle(width*3/4, height/4, width/2, height/2,width*3/4,height*3/4)    
    fill('purple')
    triangle(width,height/2,width/2,height,width,height)
    // 长方形
    fill('pink')
    beginShape()
    vertex(width/2,height/2)
    vertex(width/4,height*3/4)
    vertex(width/2,height)
    vertex(width*3/4,height*3/4)
    endShape(CLOSE)

    // 平行四边形
    fill('yellow')
    beginShape()
    vertex(width,0)
    vertex(width, height/2)
    vertex(3*width/4,3*height/4)
    vertex(width*3/4,height/4)
    endShape(CLOSE)
  }

绘制结束

当然了，除了vertex还有就是，四边形函数了，实际上最佳单：

四边形函数，实际上简单

function setup() {
    createCanvas(300, 300);
  }
  
  
  function draw() {
    background(0);
    // 不需要边框
    noStroke()
    fill('red')
    triangle(0,0,0,height,width/2,height/2)
    fill('blue')
    triangle(0,0,width,0,width/2,height/2)
    fill('green')
    triangle(0,height,width/4,height*3/4,width/2,height)
    fill('orange')
    triangle(width*3/4, height/4, width/2, height/2,width*3/4,height*3/4)    
    fill('purple')
    triangle(width,height/2,width/2,height,width,height)
    // 长方形
    fill('pink')
    quad(width/2,height/2,width/4,height*3/4,width/2,height,width*3/4,height*3/4)

    // 平行四边形
    fill('yellow')
    quad(width,0,width, height/2,3*width/4,3*height/4,width*3/4,height/4)
  }

当然对于几何图形理解的点不同，理解图形有多少个顶点，顶点连线形成图形；或者在理解图形的概念，掌握图形含义的基础上直接操作图形。

function setup() {
    createCanvas(300, 300);
    angleMode(DEGREES)
  }
  
  
  function draw() {
    background(0);
    // 不需要边框
    noStroke()
    fill('red') 
    push()
    triangle(0, 0,width/2,height/2,0,height)
    pop()

    fill('blue')
    push()
    translate(width,0)
    rotate(90)
    triangle(0, 0,width/2,height/2,0,height)
    pop()
    
    fill('green')
    push()
    translate(width*3/4,height*3/4)
    scale(1/2)
    rotate(180)
    triangle(0, 0,width/2,height/2,0,height)
    pop()
    
    fill('orange')
    push()
    translate(width*3/4,height*3/4)
    scale(1/2)
    rotate(180)
    triangle(0, 0,width/2,height/2,0,height)
    pop()
    
    fill('purple')
    
    // 长方形
    fill('pink')
    quad(width/2,height/2,width/4,height*3/4,width/2,height,width*3/4,height*3/4)

    // 平行四边形
    fill('yellow')
    quad(width,0,width, height/2,3*width/4,3*height/4,width*3/4,height/4)
  }

image.png