为了完成大作业，“自愿”开发的"绘画"系统

源代码

因为源代码比较多，所以这里只给出网址：
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(mouseIsPressed){if(mouseY<40 && mouseY>10){if(mouseX>10 && mouseX<40)fill(255,182,193);... }}
}

简单编写一个drawellipse函数，来测试我们得调色板，发现效果还是阔以的。
但是，有一个问题，因为调色板也是绘制出来的，难免被新画的图形覆盖了，解决这个问题的方法，也简单粗暴，就是框定绘制图形的范围，留出功能按钮的区域。

笔刷按钮

下一步就是添加“功能按钮”，例如：我们先写出三种圆形绘制函数，然后用一个笔刷选择函数，将三个组件合并起来。通过功能选择按钮，可以自由选择“笔刷”的类型。

function brushselect(){if(mouseIsPressed){if(mouseX<40 && mouseX>5){if(mouseY>45 && mouseY<85)brushnum=1;if(mouseY>85 && mouseY<125)brushnum=2;if(mouseY>125 && mouseY<165)brushnum=3;}}
}

效果如下：

其中一种圆形绘制函数：

//随机圆形绘制函数
function drawellipse3(x,y){strokeWeight(2);if(mouseIsPressed){if(mouseX>30+65 && mouseX<760-65){if(mouseY>30+65 && mouseY<590-65){for(var i=1;i<=40;i++){if(i%21==0){var rx = random(-30, 30);var ry = random(-30, 30);var rr = random(-15, 15);ellipse(x+rx, y+ry, 15+rr, 15+rr);}}}}}
}

其他功能组件

能绘制一些基本图形之后，我们遇到了一个新问题，如果：有一个圆形，画的不是地方，怎么办，总不能重新运行程序，再画一遍吧？很明显，这样效率太低了，那么我们就应该做一个橡皮函数，点一下，就能将鼠标变成一个橡皮。

//橡皮函数
function eraser(){strokeWeight(0);xiangpir=30;x=mouseX;y=mouseY;if(mouseIsPressed){if(mouseX>40+xiangpir && mouseX<760-xiangpir){if(mouseY>40+xiangpir && mouseY<590-xiangpir){fill(R,G,B);ellipse(x,y,xiangpir,xiangpir);}}}
}

有时候，橡皮太慢了，所以就额外做了画板复原按钮以及画板颜色填充按钮，这部分按钮排列在了画板右边，与左边的笔刷选择按钮区分开。每个按钮对应了一个函数，点一下复原按钮可以将画板重置为初始状态，画板颜色填充按钮，可以让画板变为此时颜料板选定的颜色。

完善笔刷按钮

有了主框架之后，现在的需要进行的就是细节填充工作，这一部分其实是最耗费时间的事情，因为这一过程中，写了大量函数以及将函数和相应按钮匹配起来。
最后完成的绘板如下：

完整的代码，请在链接中查看，这里只给出几个简单的笔刷函数：

//一般铅笔函数
function zpencil(){strokeWeight(5);panding1=false;if(mouseX>50 && mouseX<750)  {if(mouseY>50 && mouseY<580){if(mouseIsPressed){line(mouseX, mouseY, pmouseX, pmouseY);}}       }
}

//随机三角形绘制函数
function drawsuijitri(x,y)
{strokeWeight(2);stroke(255,255,255);trir=random(-30, 30);trix1=x-trir*0.5*1.73205;triy1=y-trir*0.5;trix2=x;triy2=y+trir;trix3=x+trir*0.5*1.73205;triy3=y-trir*0.5;if(mouseIsPressed){if(mouseX>30+25 && mouseX<760-20) {if(mouseY>30+25 && mouseY<590-25){var rx = random(-30, 30);var ry = random(-30, 30);triangle(trix1+rx,triy1+ry,trix2+rx,triy2+ry,trix3+rx,triy3+ry);}}}
}

扩展绘画概念的理念

我个人是比较喜欢画画的，虽然画的不好，但是绘画是件蛮快乐的事情。在课上，老师跟我们讨论过什么是“绘画”，那个时候，我们就绘画的操作工具进行了扩展思维。用笔在纸上画画固然是一种绘画，但是，就现代人来说，也有很多人用鼠标或者绘板在电子设备上“画画”。现在的艺术工作者，有一些已经不再接触颜料，但它们有更好的设备来完成它们脑海里五光十色的作品，难道能否认他们的行为是一种绘画吗？
很显然，绘画的概念正在逐渐扩展，可以猜想，传统意义上的笔和颜料可能变得越来越小众，就像现在的很多戏曲艺术一样，随着老一辈艺术家的淡出舞台而变成阳春白雪，甚至最后束之高阁。传统的绘画，可能也是这样，就像我们现在很难想象砚墨是种怎么样的体验，我们的孩子也很有可能不知道怎么去削铅笔。但是，使用的工具从没有停止更迭，绘画这个人类自然具有的行为却始终不变。我觉得人类之所以那么热衷于绘画，是因为我们骨子里的创造天性，绘画可以说是一种创造属于自己作品的绝妙途径。
从这个角度来说，创作可能是绘画概念的核心词汇，我们不妨这么假设，一切创造行为都可以视作是一种绘画。按这个思路，厨师烹饪青睐于摆出漂亮的花盘，教室板书尽量写出漂亮的字迹，建筑工人一板一眼垒出最符合工程力学的墙体，甚至，麦田怪圈也只是外星人把自己觉得好看的花纹印在了地球上。好看，是绘画的普遍内核，即使不明白其中的原理，我们也能本能地判断一个东西“好看”与否。好看又是主观又片面的，一个人觉得好看的东西，可能在另一个人心里不堪入目，总之，绘画就像好看一样，是唯心而又主观的。

从多个角度去比较常规的绘画系统

我们简单扼要的比较传统绘画与代码绘画的区别：
1.传绘需要价格低廉的纸和笔，但它们都是消耗品，码绘需要价格高昂的电脑和键盘，只要不砸键盘理论上无限使用
2.传绘的创造过程循序渐进，添一笔有一笔的精彩，码绘的完成进度难以估量，少一个变量就啥都没有了
3.传绘需要大量重复行为的磨练技艺，码绘只要for循环就够了
4.然而，传绘即使重复再多次也不能做到真正的复制，码绘在粘贴复制方面如火纯青
5.传绘的每一件作品都凝聚着创造者的心血和精力，码绘的第一件作品也凝聚着创造者的心血，之后就只有电费了
6.传绘需要大师，大师的作品总能照亮人心，码绘需要大神，大神的代码…更能照亮人心
7.传绘的创造是心里想着什么，手中就会努力创造什么，但是画的总没想的好看，码绘的情况比较特殊，有时候bug改着改着就有意想不到的效果
8.传绘需要品，每一笔都能看出作者的功底，码绘需要查，每一个函数都是文档搜索来的
9.传绘理论上不可能合作创作，因为合作了就不再是属于某个人的作品，码绘不存在完完全全个人的作品，除非它从二进制去编码。
10.传绘是快乐的，它的快乐娓娓道来，一笔笔画出来，每一笔都是愉悦的，码绘也是快乐的，它的快乐就像过山车一样，修改BUG的心塞会在成功出效果的那一刻全都转化为巨大的快感。

基于P5“尝试开发”一个“绘画系统”相关推荐

基于p5.js的简单绘画系统
本次实验的主题是编写一个绘画系统,提供一系列绘画材料例如画笔.颜料.滤镜等给用户操作,以创作出动态.交互的绘画作品.这个绘画是对传统绘画概念的拓展,但仍然要体现出与传统绘画的相似性. 注意:目标可以理 ...
python开发的著名软件公司_软件开发公司_软件外包_项目外包平台基于Python开发一个全文检索系统...
基于Python开发一个全文检索系统.功能要求为: 使用全文检索引擎对文本进行检索.文本的格式为Word.PDF.TXT. 同时按数据域进行复合条件检索.数据域指文本对应的信息,例如创建人.文件编号. ...
编写一个“绘画系统”
在最后一次的作业中,老师让我们编写一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个绘画系统是对"绘画" ...
基于全志A33开发板linux系统移植学习记录（Boot0）
基于全志A33开发板linux系统移植学习记录第一章 Boot0基于ARMGCC的编译与修改文章目录基于全志A33开发板linux系统移植学习记录前言一.全志A33简介以及上电引导流程二. ...
用Java开发一个停车场系统
作者:亰 blog.csdn.net/weixin_43951778/article/details/109643951 现开发一个停车系统,用户根据车位停车 1)车主查看现在有无车位(最多100个车 ...
基于NNEWN NSR3588开发板Android12系统实现四屏异显
基于NNEWN NSR3588开发板Android12系统实现四屏异显 RK3588四屏异显功能实现介绍 1.硬件连接 2.内核dts配置 3.Android异显示方案 4.四屏异显测试APK及效果演 ...
javaweb基于JSP+Servlet开发在线个人理财系统+论文课程设计大作业源码
基于JSP+Servlet开发在线个人理财系统+论文(大作业/毕业设计) 开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+SQLServer数据库运行效果图 ...
基于react/vue开发一个专属于程序员的朋友圈应用
前言今天本来想开源自己写的CMS应用的,但是由于五一期间笔者的mac电脑突然崩溃了,所有数据无法恢复,导致部分代码丢失,但庆幸的是cms的打包文件已上传服务器,感兴趣的朋友可以在文末链接中访问查看. ...
react antd confirm content list_基于react/vue开发一个专属于程序员的朋友圈应用
前言今天本来想开源自己写的 CMS应用的,但是由于五一期间笔者的 mac电脑突然崩溃了,所有数据无法恢复,导致部分代码丢失,但庆幸的是 cms的打包文件已上传服务器,感兴趣的朋友可以在文末链接中访问 ...

基于P5“尝试开发”一个“绘画系统”