七巧板
七巧板大家都熟悉的，有一段时间因缘巧合，了解到七巧板在幼儿数学中应用比较普遍。有道幼儿数学思维课的教具中也有七巧板。上图是一个五年级的小朋友，自己用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
网友评论