为了完成大作业,“自愿”开发的"绘画"系统
源代码
因为源代码比较多,所以这里只给出网址:
https://editor.p5js.org/Wangshuo/sketches/BJn8aCbZ4
请感兴趣的朋友去看一看。
编写过程
颜色板
为了完成一个“绘画系统”,我们不妨将其想象为一个传统意义上的绘画过程。在现实中,绘画需要那些要素呢?首先,我们需要一个画布,p5.js已经为我们提供了。然后,我们需要一个调色板,让我们不至于只能使用一种颜色来完成绘画。
受到博主 西河某人:创意动态绘图板的启发,按照RGB颜色与十六进制颜色码转换,我们绘制了如下排列好的色块:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20181226202212249.png
代码如下:
function colorshow(){
for(var colornum=0;colornum<15;colornum++){
stroke(255,255,255);
strokeWeight(2);
if(colornum==0)
fill(255,182,193);
if(colornum==1)
fill(255,20,147);
...
rect( 10+30*colornum, 10, 30, 30);
}
}
这个调色板给出了具体的颜色模版,除此之外,它还有什么用呢?没有任何用,因为它无法进行任何交互。下一步,我们希望这些色块能像按钮一样,点一下就让此刻“画笔”的颜色变为对应的按钮。
function colorselect(){
drawcolorshow();
if(mouseIsPres