前言
这个系统主要目的是实现更具艺术效果的绘画系统。与传统绘画系统相比增添了更加便利的艺术笔刷。
这次项目首次使用Processing的Java框架编写,和P5.js有一定区别。
Java学的太过久远,记忆都有点模糊了,因此有很多不熟悉的地方,编写起来有些磕磕绊绊。两者之间的转换有参考资料。
绘画系统框架
程序主界面
之所以这么丑是因为时间紧迫,我直接用的官网给的GUI中的Button例子改写而来,肯定是有其它更好的GUI设计的,暂时先不调整。
鼠标交互一
灵感来源于很多网站都有的动态交互背景,鼠标划过后鼠标周围点联结绘制三角形图案。
效果如图:
主要实现原理:
创建一个数组,用于存储n个指定范围内随机二维向量。
定义一个类,里面定义显示和更新的方法。
然后引用类的对象依次读取这些向量,将其转化为点的坐标并通过显示方法绘制成随机颜色的小圆点。
如果第一点和第二个点的距离小于某指定值,则将引用第三个对象,即鼠标控制的对象来完成三角形的绘制。
三角形的绘制采用
beginShape();
vertex(dots3.location.x, dots3.location.y);
vertex(dots2.location.x, dots2.location.y);
vertex(dots1.location.x, dots1.location.y);
endShape();
对于点的更新则是通过将点的坐标加上某一速度来完成。
速度也是一个二维矢量,大小随机,正负值都有,因而每点运动方向都不同。
当点与屏幕中心的距离超过某一指定值时,将速度*(-1),使其反向运动。
实现效果是在Processing编程艺术案例基础上改写而成。
粒子笔刷
效果如图:
关于粒子系统的代码非常多,这里实现的是很简单的一种绘制方式,没什么可讲的,主要是调整参数。可以去Processing官网上看看基础案例。
部分参数设置如下:
pushMatrix();
noStroke();
float r = random(0,187);
float g = random(134,205);
float b = random(139,255);
fill(r,g,b, lifespan);
ellipse(position.x+random(5,8), position.y+random(5,8), 4, 4);
popMatrix();
Points笔刷
效果如图:
根据网页资料上一个笔刷改写而来,原笔刷效果如图:
部分参数设置如下:
dx=mouseX-lastX;
dy=mouseY-lastY;
dis =sqrt(dx*dx+dy*dy);
ox=40*sc/dis*random(1,1.3);
oy=40*sc/dis*random(1,1.3);
noStroke();
color col= color(random(75,185),random(25,150),random(125,255),random(25,150));
if (lastX == 0)
{
noStroke();
fill(col);
ellipse(mouseX, mouseY, ox, oy);
check = 1;
}
else
{
if ((dis>2*l)&&(dis<4*l))
{
noStroke();
fill(col);
ellipse(mouseX, mouseY, ox, oy);
check = 1;
}
else if ((dis>l/2)&&(dis<2*l))
{
noStroke();
fill(col);
ellipse(mouseX-lastX/random(5,10), mouseY, ox, oy);
ellipse(mouseX-lastX/random(5,10), mouseY-lastY/random(5,10), ox, oy);
check = 1;
}
}
if(check ==1)
{
lastX = mouseX;
lastY= mouseY;
}
Ink笔刷
效果:
这个笔刷很巧妙之处在于颜色和宽度的设置。
R由mouseX映射而来,G由mouseY映射而来,B的值由鼠标位置与屏幕中心的距离决定。
线宽则由鼠标移动速度决定。
主要实现机制:
R、B通过map()分别将mouseX、mouseY由0–width映射到0–255。
alpha和lineWidth通过map()将speed分别映射到一定范围内。
将lineWidth设置成指定范围内随机数。
其它几种笔刷
绘图示例
参考资料
https://blog.csdn.net/hewes/article/details/80082902
http://iprocessing.cn/2017/07/12/第一期,超炫大boss圆形、网格、结点/
https://www.openprocessing.org/sketch/17213
https://www.openprocessing.org/sketch/17260
https://www.openprocessing.org/sketch/415792
https://processing.org/examples/multipleparticlesystems.html