P5绘画系统

前言

这次博主通过P5尝试实现一个简易又不同寻常的绘画系统。

系统界面

绘画系统左边的gui界面：
pencolor实现对话比颜色的修改。
tools实现画笔工具种类的改变，其包括铅笔，钢笔，bezier曲线，橡皮擦和flower、special两种不同的特殊工具。
penscale实现对画笔大小的调整。
绘画系统右边的gui界面：
shape实现对另一种绘画方法的实现，其种类包括圆形、正方形、三角形、线条、五角星、橡皮擦、半圆。
bkcolor实现对画布背景颜色的改变功能。
fillcolor实现对绘制图形基本颜色的确认。

功能介绍

1. 铅笔功能
   通过p5自带的鼠标按压检测程序，让事实的鼠标位置与前一帧的鼠标位置相连达到绘制线条的功能。
   实现代码：

function my_draw_pencil() 
{var c = color(penColor);stroke(c);strokeWidth=penscale;strokeWeight(strokeWidth);if (mouseIsPressed === true) {line(mouseX, mouseY, pmouseX, pmouseY);}}

2. 钢笔功能
   与铅笔功能原理相似，钢笔功能也是通过line画线函数进行绘制，但是由于只绘制鼠标左键按下时的两点之间的连线，所以需要创建两个数组保存鼠标左键点击时实时的x，y值，进行画线。与以往一般的钢笔功能不同的是，我没有只绘制所点击的几个点，而是对鼠标位置和上一个点击的点进行实时绘制，借此不光可以观察想要绘制的图像，还可以发现绘制图象时的鼠标动态过程，感受绘画的动态美。
   实现代码：

function my_draw_pen() 
{var c = color(penColor);stroke(c);strokeWidth=penscale;strokeWeight(strokeWidth);if (mouseIsPressed) {if (mouseButton === LEFT) {penx[i]=mouseX;peny[i]=mouseY;i++;   }if (mouseButton === RIGHT) {penx.length=0;peny.length=0;i=0;}}if(i>=2){line(mouseX, mouseY, penx[i-1], peny[i-1]);}
}

实验截图：

3. bezier曲线功能
考虑到铅笔功能不能很好的绘制曲线，所以在这里加了一个bezier曲线绘制功能，尽量将曲线绘制的更加平滑。
实现代码：
放不了一放就卡……界面已经崩三次了……
实验截图：

4. flower功能
每个点四周都话四个圆形成花的效果。
实现代码：

function my_draw_flower()
{var c = color(penColor);if (mouseIsPressed === true) {angle += 5;var val = cos(radians(angle)) * 12.0;for (var a = 0; a < 360; a += 75) {var xoff = cos(radians(a)) * val;var yoff = sin(radians(a)) * val;fill(c);ellipse(mouseX + xoff, mouseY + yoff, val, val);}fill(255);ellipse(mouseX, mouseY, 2, 2);}
}

实验结果：

6. special功能
此功能也是创建了两个数组，用来存放相应的位置，随着帧数不断刷新，所绘制的图像会从头开始一点一点删除。
实现代码：太多了就不放了

实验截图：

7. 橡皮擦功能
橡皮擦功能比较好实现，就是读取背景颜色，再用背景颜色画一个圆，对想出去的地方绘制背景色圆就行。
实验代码：

function my_draw_eraser() 
{var c = color(bkcolor);stroke(c);strokeWidth=penscale;strokeWeight(strokeWidth);if (mouseIsPressed === true){line(mouseX, mouseY, pmouseX, pmouseY);}
}

8.shape
此处的代码学习自参考材料中的网址，通过学习，我自己再将其加以改良创造出了其他三种模型，此处只放效果图，代码研究可以参考参考材料。
实验截图：

这些便是我制作绘图软件的主要更能。

总结——与常规绘画系统的比较

1. 技法
   从绘图的技法上来看，如果想要创作一个简易的，类似在速写本上面的图像，常规的绘画系统会比我制作的更实用些，但是想要做一些有创意的，动态的，使用此绘画系统会比常规的绘画系统方便很多。

2. 工具
   工具层面上来看，常规的绘画系统里的基本工具比如铅笔、钢笔等等方便作画，使用起来也简单方便，容易实现作者想要的效果。使用此绘画系统在一些基于绘画系统中的元素加以创造，比在常规的绘画系统中创造方便很多。比如画shape中的几个图形就比常规的绘画系统来的方便许多许多。

3. 理念
   传统的绘画系统的创作理念主要是基于将一般创作在速写本上图案在电脑中绘画，实现更好的还原效果。此绘画系统的理念倾向于基于给定模型，在创作的前提下有一定的约束性，让作者更好的在给定的模型下进行相应的创作。

4. 创作体验
   创作体验上来看，传统的绘画系统并不适合像我一样的绘画初学者，作为一个绘画初学者，使用传统的绘画系统，不管画什么，最后呈现出来的效果都比较丑。使用此绘画系统时，虽然绘画的功底还是差，但是有几个图形的辅助，以及一些动态效果的呈现时，还是比较有趣的。

5. 呈现效果
   传统的绘画系统最后呈现的效果都是固定的，不动的，类似于在速写纸上画出来的。此绘画系统的呈现效果是偏动态，侧重于绘画过程，通过一定的交互性带来更好的使用感。

6. 局限性
   从局限性来考虑，还是传统的绘画系统更实用一些，传统的绘画系统能创造出来的东西更多一些，而此绘画系统的可创造性还是低了点。

7. 应用
   此绘画系统个人感觉应该更适用于低龄小孩，在他们思维尚未完善的时候可以通过此绘画系统让她们更好的将自己的想法，想象变成现实。

参考材料

https://blog.csdn.net/qq_27534999/article/details/79427721
http://p5js.org/zh-Hans/
https://github.com/magicbrush/DrawingByCodingTutorialDemos
https://github.com/magicbrush/PixelArray

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！