P5.js创意画板

最新推荐文章于 2021-04-10 11:39:18 发布

原创最新推荐文章于 2021-04-10 11:39:18 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何使用P5.js库创建一个创意画板，包括动态圆形、三角形和方形笔刷，以及特殊形状笔刷。作者探讨了设计方案、与传统绘画工具和技法的对比，并分享了创作体验和局限性。该画板提供了丰富的交互性，适合用于数据可视化和音乐互动等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单创意画板

一、展示

这次的作业是基于图元模型进行扩充完成的创意画板，这个画板有静态和动态两种笔触形式，下面这个是一些动态笔刷，可自选颜色。我日常中最常使用的绘图工具是Photoshop，它对于一个手绘能力不强的人来说，对板绘的完成给予了很大的帮助，它有非常的工具可以供人使用，可以帮助去修改和调整画面，或者辅助绘图，还有很多的笔刷可以供人使用，对于我做的这个创意画板，它具有普通绘图板的普通绘图笔刷，有些不一样的就是动态笔刷和直接固定性状的特殊形状笔刷。

1.圆形动态笔刷

2.三角动态笔刷

3.方形动态笔刷

4.特殊形状笔刷和普通笔刷

二、总体设计方案

1.动态笔刷

三个动态笔刷是通过下，下面的代码进行的动态变化，主要是利用scale函数对其进行缩放，并且不断的改变r的大小。

if(rBias<=25&&rb==false)
{
		 rBias=rBias+0.5;
		 if(rBias==25)
		 rb=true;
}
else
{
		rBias=rBias-0.5;
		if(rBias==1)
	    rb=false;
}
var r = this.radius + rBias;


scale(r,r);

通过一个函数参数的改变来选择画笔的颜色和形状，用的mouseClicked函数帮助选择颜色，根据点击的区域来切换笔刷的颜色和形状。

this.draw = function(R,G,B,mode)
	{
		this.R=R;
		this.B=B;
		this.G=G;
		if(rBias<=25&&rb==false)
		{
		  rBias=rBias+0.5;
		  if(rBias==25)
		  rb=true;
		}
		else
		{
			rBias=rBias-0.5;
			if(rBias==1)
		    rb=false;
		}
		var r = this.radius + rBias;
		if(mode=="yuan")
		{
		   push();
		   noStroke();
		   strokeWeight(0.2);
		   stroke(0,0,0,50);
		   fill(R,G,B);
		   translate(this.x,this.y);
		   scale(r,r);
		   ellipse(0,0,1,1);
		   pop();
		}
		if(mode=="sanjiao")
		{
		   push();
		   noStroke();
		   strokeWeight(0.2);
		   stroke(0,0,0,50);
		   fill(R,G,B);
		   translate(this.x,this.y);
		   scale(r,r);
		   triangle(0, 1, -0.5, -0.5, 0.5, -0.5);
		   pop();
		}
		if(mode=="zhengfang")
		{
		   push();
		   noStroke();
		   strokeWeight(0.2);
		   stroke(0,0,0,50);
		   fill(R,G,B);
		   translate(this.x,this.y);
		   scale(r,r);
		   rect(0, 0, 1, 1);
		   pop();
		}
	}

特殊形状笔刷中的云朵、花花、飞碟和爱心都是基础图形拼凑出来的。

//云朵
	       noStroke();
		   fill(254,250,238);
	       ellipse(mouseX, mouseY, 60, 60);
	       ellipse(mouseX-20, mouseY+6, 48, 48);
	       ellipse(mouseX+30, mouseY+12, 36, 36);
		   rect(mouseX-20, mouseY-6, 50, 36);

            push();//花花
			noStroke();
			fill(254,250,238);
			ellipse(mouseX, mouseY, 7, 7);
			fill(224,210,206);
			ellipse(mouseX,  mouseY-10, 10, 10);
			ellipse(mouseX-8,  mouseY-3, 10, 10);
			ellipse(mouseX+8,  mouseY-3, 10, 10);
			ellipse(mouseX+5.5,  mouseY+8, 10, 10);
			ellipse(mouseX-5.5,  mouseY+8, 10, 10);
			//ellipse(540, 136, 18, 18);
			pop();

            push();//飞碟
	        noStroke();
	        fill(180);
	        ellipse(mouseX, mouseY, 20, 20);
	        ellipse(mouseX, mouseY, 30, 10);
	        //ellipse(540, 136, 18, 18);
	        pop();
 
            push();//爱心
	        noStroke();
	        fill(151,87,88);
	        triangle(mouseX-5, mouseY-5, mouseX-10,mouseY,mouseX,mouseY);
	        triangle(mouseX+5, mouseY-5, mouseX,mouseY,mouseX+10,mouseY);
	        rect(mouseX-10, mouseY, 20, 8);
	        triangle(mouseX-10, mouseY+8, mouseX+10,mouseY+8,mouseX,mouseY+18);
	        pop();

雪花的绘制稍微有一些特殊，用的是分形，做法是，从一个正三角形开始，把每条边分成三等份，然后以各边的中间长度为底边。分别向外作正三角形，再把“底边”线段抹掉，这样就得到一个六角形，它共有12条边。再把每条边三等份，以各中间部分的长度为底边，向外作正三角形后，抹掉底边线段。反复进行这一过程，就会得到一个“雪花”样子的图片。
代码中使用了递归算法。

function side(x0,y0, x1,  y1,  ang,  n)
{
	var xx1, yy1, xx2, yy2, xx3, yy3;
	var ll, ang1, ang2;
	var xs, ys, xe, ye;
	if (n == 0)
	{
		xs = (int)(x0 + 0.5);
		ys = (int)(y0 + 0.5);
		xe = (int)(x1 + 0.5);
		ye = (int)(y1 + 0.5);
		stroke(255);
		line(xs,ys,xe,ye);
	}
	else
	{
		ll = sqrt((x1 - x0)*(x1 - x0) + (y1 - y0)*(y1 - y0)) / 3;
		xx1 = x0 + (x1 - x0) / 3;
		yy1 = y0 + (y1 - y0) / 3;
		side(x0, y0, xx1, yy1, ang, n - 1);

		ang1 = ang + AF;
		xx2 = xx1 + ll*cos(ang1);
		yy2 = yy1 + ll*sin(ang1);
		side(xx1, yy1, xx2, yy2, ang1, n - 1);

		ang2 = ang1 - 2*AF;
		xx3 = xx2 + ll*cos(ang2);
		yy3 = yy2 + ll*sin(ang2);
		side(xx2, yy2, xx3, yy3, ang2, n - 1);
		side(xx3, yy3, x1, y1, ang, n - 1);
	}
}

程序中还使用了p5的GUI库，创建了调整笔刷大小和选择则颜色的滑动条和选择框。原本想加音乐交互的，但是我在调用p5的声音库的时候不知道为什么，音乐加载不进去页面一直显示loading。

gui = createGui('paint',paintingWidth+211,10);
	gui.addGlobals( 'daxiao','brushColor');

三、对比

1、技法和呈现效果

在绘画技法上，我做的这个系统复杂度比较低，最初是想做笔刷的，因为个人能力问题放弃了这个想法，但是我知道有很多同学都做了笔刷，有做生长树的笔刷，仿水墨笔刷。这些笔刷主要可以弥补手绘技能的不足，也可以为创作节省时间。与传统手绘相比，使用了这些会用更少的技法更短的时间去达到更好的效果，对于像Photoshop这种成熟的绘画软件来说，这些笔刷的优势就不大了，虽说photoshop自带的笔刷大多是材质笔刷，主要用于营造效果，但也有很多的自制笔刷用来画头发呀什么之类的。

2.工具和载体

在工具方面我做的这个画板和板绘的工具没有什么区别，但是考虑到手势交互和音乐交互的可能工具就更为多种多样了。可以是手势、音乐之类的。但大多数的工具还是比，不管是手绘板的笔还是真正的笔。

3.理念

对于我个人来说，在传统手绘的时候更想要用线条来表现画面，而板绘和创意画板更习惯于用块面来表达画面，当然这也可能我板绘主要是厚涂的原因。当然创意画板和其他绘图软件在创作的思维方式上或许会有很大的不同。绘图软件和传统手绘的创作思维方式主要还是放在绘图的本身上。创意画板可能会放在交互性和整体呈现上。

4.创作体验

我做这个绘画系统还有更多的同学做的动态系统，比Photoshop这些软件更胜在多种多样的交互方式，有一些是手势交互啊，还有音乐交互啊之类的，动态的效果也是多种多样的，这给创作过程中增加了很多的乐趣，但是我认为这对作品的艺术性没有什么帮助，只是增加了乐趣。大那是这样各种各样的交互也给了大家更多创作的可能。

5.局限性

创意画板在最大程度的激发了创意和设计性，但损失了细腻的绘画技法的体现。这对绘画有很强的的技法性的人来说，创意画板当然也能做出很棒、很有趣的作品，但是真的要去画作品的话，可能不会选择它。普通的绘画系统对于动态的表达会更为复杂一些，虽说已经有一些工具来弥补绘画功底了，但是真正的创作出来作品可能还是创意画板来说更加容易。