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

2020-09-02  本文已影响0人  少儿创客
七巧板

七巧板大家都熟悉的,有一段时间因缘巧合,了解到七巧板在幼儿数学中应用比较普遍。有道幼儿数学思维课的教具中也有七巧板。上图是一个五年级的小朋友,自己用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用的不熟悉。包括正方形也是可以画的,当然正方形也可以话个正方形,然后用poppush旋转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
上一篇下一篇

猜你喜欢

热点阅读