第一次的作品简单体会码绘与手绘的不同之处，浅显的进行比较；第二次的作业增加了动态效果和交互性，让人更能直观地感受到码绘的魅力。
此次作业，主要是在传统水彩和钢笔绘画方式上，做出些改变。

总体设计方案

设计灵感

我们发现生活中有许多中心旋转对称的图形
这是波西米亚地毯的图案，呈现中心对称的效果

这是烟花，如果不计算自由落体运动，那么他也是个中心对称图案

这是万花筒

这些图案都是中心旋转对称图形，他们在我们的生活中随处可见，我们也许一下子想不到在哪见过，但是当我们每个人或多或少都拥有那么一两件包含中线旋转对称元素的物品。

中心旋转对称图形有他独特的美感，它的表达更加的严谨，线条与线条之间，都有着千丝万缕的联系，但是有时候密集的线条又让人无法清晰地分辨出它脉络，便会一直看，一直想要研究下去，我觉得这就是它的魅力所在。
它看似极富规律，但其实创作过程往往更加随性。

我们对此很感兴趣，于是在老师给的代码基础上修改了部分功能，并加了些新的功能上去，丰富了绘画的多样性和趣味性。

我们组想要实现的是水彩和钢笔效果

接下来是两种绘画方式的对比介绍：

1、技法与工具：

相同之处

我们模仿的还是板绘的钢笔和水彩效果。鼠标代替握着的笔杆，点击鼠标左边并持续压住，即为画画模式，松开即画画结束，在鼠标松开之后颜色就会变淡，模拟的是水彩颜料干了之后的样子。通过调节画笔的粗细来切换钢笔和水彩的不同表达模式，还可调节颜色的透明度达到不同的绘画效果。

钢笔

水彩
将画笔调宽，第一次是将画笔设为全透明，因此画完并未留下痕迹，第二次调整了透明度，画完之后画布上留下了痕迹。淡妆浓抹自由选择。

不同之处

我们的线条不会晕染，但这也丧失了部分作画乐趣，但也避免了不可控性。

2、交互方式：

都是创作者通过笔在画布上作画，只是我们通过p5.js建立的画布没有纹理，缺了点质感，但发色更加均匀，颜色更加饱和，并且可轻松复制和运用。

3、理念：

当我们想要画有规律的东西的时候会发现，真的很难用手绘的方式，去复刻一个一模一样的东西，每次的绘画都有或多或少的区别。诚然，有时候这种不同一是种美感；但是有规律也是一种美，蕴含着一种耐人寻味叫人想要反复琢磨的趣味。

4、作品：

手绘作品之恩能够是静态的，且无法绝对的中心对称，但是码绘可以做好，并且创造出许多意想不到的惊艳效果。

系统展示

运行界面

功能栏

瓷砖列阵

中心对称分割（1）

中心对称分割（2）

瓷砖+中心对称（1）（2）分割

线条粗细和颜色

创作体验：

一开始使用这个绘画工具还不太熟练，觉得有些丑，作品毫无美感。但这就和纸上作画一个道理，都是需要锻炼的，但我们这个明显门槛较低，上手快，可以让不会画画的人也能画出美丽的作品，享受到作画的乐趣。
可以切换不同的颜色，不同粗细的笔和不同的透明度，时间不同的效果，表达不同的想法。

小试牛刀之静态截图

上图只用了带透明度的黑色线条为初次尝试

上图多种颜色、饱和度的线条叠加，采用一或多种对称方式，效果混乱却惊喜

正式习作

画了彩色底之后，采用多方块镜像增加笔触宽度降低透明度进行黑色覆盖

努力模仿写意油画的感觉

粉绿粉绿的复古田园风

温柔科技感

灵感来自旧式电视机彩色噪波

哈哈灵感来自GUCCI，虽然最后结果和Gucci八杆子打不着，作品中还是透着复古感

上图为圣诞节雪花特别款哦(^ - ^)

这些看起来很繁琐的数字美学作品用这个绘画系统可以轻松完成，即使每次都是即兴发挥，任意搭配颜色、透明度、线条粗细、镜像模式，每次都有惊喜。任何人都可以通过这个系统绘出别致的原创对称美学作品！！！

大饱眼福之动态绘制过程
绘制过程引起极度舒适！！！会上瘾！！！

（凑个热闹毕竟全民supreme嘿嘿）

绘制的过程录成gif，与原来的定格图片又是两种风格，可以应用于多种方面，如动态海报、贺卡、网页动图等。

应用

这个绘图系统由基本功能组成，但是可以通过尝试，完成许多新奇的创作，用途很广，如制作布料图案、万花筒、动态或静态宣传海报等等。
更多的功能以及用途可以有使用者慢慢挖掘。
我们提供的是创作的工具和载体，大家只要在里面尽情发挥就可以了。

参考文献

基本参考
链接: [link]https://github.com/mudcube/Sketch.js

一个简易画图软件,可以调颜色、透明度和笔的粗细

理论参考
链接: [link]https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/mirror.html
链接: [link]https://www.cnblogs.com/why-not-try/p/8005756.html
链接: [link]http://www.pudn.com/Download/item/id/3467676.html

p5.js之“列阵绘图画板”实现大面积规律性绘制相关推荐

p5.js之动态魔幻画板
基于p5.js的魔幻画板一.起因本学期的互动媒体技术大作业要求每个人做一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个 ...
p5.js 实现动态互动画板
目标编写一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个绘画系统是对"绘画"的概念的扩展,但仍然体现 ...
用p5.js实现动态形状笔刷
用p5.js实现动态创意画板跟之前两篇文章有关联的是,这次也是为了互动媒体大作业写了一篇博客. 这次的作业内容是编写一个绘画系统,提供一系列绘画颜料给用户操作,这颜料可以是画笔.颜料或者滤镜的形式, ...
p5.js创意绘图(1)动态图形
利用p5.js临摹一幅动态图形. 原图分析看起来像是两个葫芦在转圈,其实每个圆点并没有旋转,只是在以图形中心为原点的射线上来回移动.长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍,且 ...
p5.js创意绘图(2)自画像
利用p5.js画一幅自画像,效果如下: 1.按下键盘"M"(music)键,音乐停止播放:再次按下"M"键,音乐重新开始播放. 2.按下键盘"S&qu ...
P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...
P5.js:改进创意动态绘板
在互动媒体课上接触到p5.js这个东西后,我就一直在质疑它的实用性,p5.js用来画图并不是那么的好用,但其和unity差不多的性质为动态绘图提供了条件(p5.js使用setup()函数初始化,每秒调 ...
P5.JS绘制动态图形
P5.JS绘制动态图形一.平台第一次使用p5.js进行码绘,此次直接使用P5.JS官网的在线编辑器进行编写,完成后点击file->download即可保存到本地. 在正式绘制之前,我经过小小 ...
Processing.js vs P5.js –有什么区别？
几天前, P5.js被释放了. 这是一个遵循处理原则的用于可视化编程的JavaScript库. 根据这篇文章 : 处理是一种环境/编程语言,旨在使视觉交互式应用程序非常易于编写. 它可以用于从教孩子如 ...

p5.js之“列阵绘图画板”实现大面积规律性绘制