基于P5.js的“绘画系统”

基于P5.js的“绘画系统”

.
　　编写一个“绘画系统”，是本学习互动媒体的课程大作业，也是写这篇文章的初衷，整个学期下来，基本都在使用P5.js/Processing,但都还是仅限于一些图形的基本绘制，或者是动态图像的绘制，自己会觉得P5.js的实用性、交互性不高，进而对P5.js的兴趣也没有多少了。然而通过这次“绘画系统”的编写，通过编写过程中对于P5.js功能的探索和使用，发现其实P5.js还是挺有趣的。
　　那么首先来看看这次编写的一个“绘画系统”。（该系统是在已有的一个绘画系统上进行的修改、添加，借助于其交互按钮的操作启发，对绘画操作进行一个扩充，并加入自己所构想的“绘画系统”的绘画创作模式。）

一、该“绘画系统”的界面：

上半部分的颜色块儿可以选择绘制的颜色（基本图形绘制的颜色），下半部分则是绘制的不同的图像的功能选择按钮。

二、系统的总体设计方案：

.　　首先需要确定该幅绘画作品的主体，即需要创作者选用一张图片亦或是人物的照片作为创作的基础，然后在将这张图片进行特定的“绘画”处理后，使用系统拥有的绘制基本图形、文字、背景的绘画操作对该图片进行再创作，最终得到绘画创作的作品。

三、单个按钮功能展示：

1.“I”按钮（所选图片可以自行修改）：

.
　　该按钮的绘画功能我觉得是整个“绘画系统”的最重要的部分，是整幅画的核心。所以将先于所有按钮的功能介绍，来详细介绍一下该按钮的功能。
整幅画的主体图形就是由该按钮所绘制出的图形。该按钮的“绘制”功能，就是给用户已选定的一张图片进行特定方式的绘制。