p5.js 实现创意绘板

前言

由p5.js实现创意绘板，我分成了动态创意绘板和静态创意绘板。

静态创意绘板

上图仿照水粉画。

上述图中实现了对于水粉笔的模仿。
可以调节颜色的变化，对rgb直接进行调节，大小形状也可调节，上图展示的是使用正方形笔刷，颜色是根据画布横坐标来表现，可以看出，左边偏玫红，右边偏绿，笔刷的形状会对深浅有影响。交互的时候还挺好玩的，一个动作在整个画布中不局限于一种颜色，实现画布上颜色的渐变。

不足之处可能也是上述原因，位置的限制，不能做到自由区域颜色的选择。

主要原理是一定区域随机性，实现笔刷的绘制，实际绘制是一个一个小圆，就形成了粉状的质感。

实现代码：

function pastel(mx,my,sx,sy,r,g,b,a)
{    for(var i = 0; i < 1000; i++)
{
var ratio = mx/width;
var x = mx + random(-sx, sy);
var y = my + random(-sx, sy);         fill(r, ratio * g, b * (1 - ratio), a);        //fill(ratio * 255,255 * (1 - ratio) ,0, 30);          //fill(ratio *r,g * (1 - ratio) ,b, a);          ellipse(x, y, 2, 2); }}if (keyCode === 65){ //A        colorMode(RGB,255,255,255,255);
pastel(mouseX,mouseY,sx,sy,r,g,b,30);             }
var r=0;
var g=255;
var b=255;
var sx=20;
var sy=20;
function keyPressed()
{    if(keyCode==82)//R       {         r=r+30;        }        if(keyCode==71)//G        {         g=g-30;                 }        if(keyCode==66)//B       {         b=b-30;                 }            if(keyCode==97)//1       {         sx=sx-5;                 }       if(keyCode==98)//2       {            sx=sx+5;                 }        if(keyCode==97)//3        {         sx=sy-5;                 }       if(keyCode==98)//4        {            sx=sy+5;                 }}

上图模仿马克笔。图中线条的粗细变化，我觉得还挺好看的，从图中可以看出，重涂和轻涂，所展示的轨迹不一样，缓慢重涂，出来的效果跟接近于平常所使用马克笔，是很浓重的一抹；但是轻涂，特别是快速的划过，就可能画出另一种圆形，一个一个的圆，也体现模仿马克笔所采用的原理本质，是由一个一个的圆所叠加构成。

区别于传统马克笔，上图画笔的运用方式，如快速涂抹和缓慢重涂，可以展现不同的图案，展现了多边形，但是细腻方面，笔锋方面可能不太比得上传统马克笔，做不到快速细腻的笔锋也是上图所表现的一个不足之处。

（小学生涂鸦。。。）
图中是为了仿照现实水彩笔。

与传统最大的区别就是不用替换颜色呐（可能在选取颜色的时候不太方便），颜色的展现随机相连（适合懒人，一支笔有多种颜色），除此之外，就是笔刷颜色的透明度的变化，我觉得这是传统水彩笔实现不了的，快慢会导致笔刷颜色变化，相应也会导致不图透明度的变化，体现不一样色彩效果。

笔触细腻的处理也是上述图中一大不足。

上述图对水彩马克笔的模仿，缓慢厚涂和快速浅涂的区别。快涂，会使得的透明度升高，所展现的图案也和慢涂不同，原理是运用了插值变化。

实现代码：

  // 彩球的位置var x;var y;// 彩球位置的插值变化速率var lerpPosSpd = 31.0;
// 彩球当前大小s和颜色rgbaf(a:alpha)
var s = 15;var r = 0;var g = 0;var b = 0;var a = 0.1;
// 彩球颜色插值速率
var lerpSpd = 3.0;
// 彩球的目标大小和颜色
var st = 30;var rt = 0;var gt = 0;var bt = 0;var at = 0.1;
// //黑色圈圈   if (keyCode == 77){ //M        colorMode(RGB,255,255,255,1);      circleColor();    }      //彩色圈圈    if (keyCode == 68){ //D         colorMode(RGB,1,1,1,1);       circleColor();     }var lastTime = -1;
function circleColor()
{
var tNow = millis()/1000;   if(lastTime<0)   {        lastTime=tNow;        return;    }var dt = tNow-lastTime;        var lerpPosT = lerpPosSpd*dt;    if(mouseIsPressed)    {        // 让x的数值向mouseX的数值靠拢，        // 靠拢方式为“线性插值”，靠拢程度（快慢）为lerpPosT        x = lerp(x,mouseX,lerpPosT);        y = lerp(y,mouseY,lerpPosT);        drawThing(x,y);    }var lerpT = lerpSpd * dt;    s = lerp(s,st,lerpT);    r = lerp(r,rt,lerpT);    g = lerp(g,gt,lerpT);    b = lerp(b,bt,lerpT);    a = lerp(a,at,lerpT);randomChange(dt);lastTime = tNow;
}
function drawThing(x,y)
{   fill(r,g,b,a);    noStroke();    ellipse(x,y,s,s);}var TimeToChange = -1;function randomChange(dt)
{
TimeToChange-= dt;
if(TimeToChange<0)   {        st = random(10,60);        rt = random(0,1);        gt = random(0,1);        bt = random(0,1);       at = random(0.1,0.3);        TimeToChange = randomValue();        print("TimeToChange:" + TimeToChange);    }}var lamda = 5;function randomValue()
{
var x = 5/lamda;
var cnt = 0;
do
{        x = random(0,5/lamda);
var y = random(0,1);
var prob = exp(-lamda*x);        /if(cnt>30)        {break;       }       cnt ++;   }while(prob<y)        }

动态创意绘板

动态创意绘板，可以选择多种笔刷，有圆形、三角形、长条、五边形、四边形、六角星星（星星真好看），六种笔刷，颜色也可多选，画板也可以多选，有夜间模式与白天模式。刷的笔刷都是会动的（图中使用的是静止截图）。

虽然有仿照传统绘画板，保留了绘画板的一些功能，如必刷的选择、清屏（点击C），橡皮擦（点击E），保存文件（点击S）,以及多种颜色的可选性，但是从根本上，笔刷所得到的图形，最后是会动的，点击||使得图像静止。

与传统绘画板最大不同是，画出的图案是实时动态变化的，且笔刷也比较灵活，交互性上，也更有趣活波，相对的笔刷可能不太容易制作。

主要实现代码：

对于按钮和物体都需要创建数组来进行管理。

var objs = [];
var btns = [];

显示图案的结构定义。

//显示图案预定义
function Node(position, givenSize, givenR, givenG, givenB)
{
this.R = givenR;
this.G = givenG;
this.B = givenB;  /
/图案位置
this.position = createVector(position.x, position.y);
this.position.x += (random(20) - 10);
this.position.y += (random(20) - 10);  //
this.size = createVector(0, 0);
this.sizeScale = 0.5;  var randomSize = givenSize / 2 + random(10);
this.baseSize = createVector(randomSize, randomSize);  //
this.timepast = 0;  this.isPlaying = isPlaying;  //
this.rotateAngle = random(2 * PI);  //笔刷类型
this.shapeType = brushType;
this.pmouseX = pmouseX;
this.pmouseY = pmouseY;
this.mouseX = mouseX;
this.mouseY = mouseY;
}

//功能按钮
function FuncBtn(X, Y, W, H, CMD)
{
this.x = X;
this.y = Y;
this.w = W;
this.h = H;
this.cmd = CMD;
//命令
}

//鼠标在颜色选框内
FuncBtn.prototype.isMouseInBtn = function(){  if (mouseX >= this.x && mouseX <= this.x + this.w &&    mouseY >= this.y && mouseY <= this.y + this.h) {    return true;  } else {    return false;  }}

点击按钮响应。

FuncBtn.prototype.clickBtn = function() {  print("ClickBtn!");  //
if (this.cmd == "sun")
{
bR = 255;
bG = 255;
bB = 255;
this.cmd = "moon";} else if (this.cmd == "moon") {    //改变画布的颜色    bR = 0;    bG = 0;    bB = 0;    this.cmd = "sun";  } else if (this.cmd == "pause") {    //运动状态停止    isPlaying = false;    for (var i = 0; i < objs.length; i++) {      objs[i].isPlaying = false;    }    this.cmd = "play";} else if (this.cmd == "play") {    isPlaying = true;    for (var i = 0; i < objs.length; i++) {      objs[i].isPlaying = true;    }    this.cmd = "pause";} }

//显示颜色按钮 位置 宽高 颜色
function ColorBtn(X, Y, W, H, givenR, givenG, givenB)
{
this.x = X;
this.y = Y;
this.w = W;
this.h = H;
this.r = givenR;
this.g = givenG;
this.b = givenB;
}

星星笔刷和多边形笔刷。

// draw a regular n-gon with n sides
function ngon(n, x, y, d){  beginShape();  for(var i = 0; i < n; i++) {    var angle = TWO_PI / n * i;    var px = x + sin(angle) * d / 2;    var py = y - cos(angle) * d / 2;    vertex(px, py);  }  endShape(CLOSE);}// draw a regular n-pointed star
function star(n, x, y, d1, d2)
{  beginShape();
for(var i = 0; i < 2 * n; i++)
{
var d = (i % 2 === 1) ? d1 : d2;
var angle = PI / n * i;    v
ar px = x + sin(angle) * d / 2;
var py = y - cos(angle) * d / 2;
vertex(px, py);
}
endShape(CLOSE);
}

笔刷功能实现，以CIRCLE和SQUARE为例,使用sin函数和cos函数改变图像显示的中心位置，使得图像可以运动。

Node.prototype.drawing = function(){  noStroke();  if (this.shapeType == "CIRCLE") {    translate(this.position.x, this.position.y);
fill(this.size.x * this.R / 10, this.size.x * this.G / 10, this.size.x * this.B / 10, round(sin(this.timepast) * 128));    ellipse(sin(this.timepast) * this.baseSize.x, cos(this.timepast) * this.baseSize.y, this.size.x * 1.25, this.size.y * 1.25);    fill(this.size.x * this.R / 10, this.size.x * this.G / 10, this.size.x * this.B / 10, 255);    ellipse(sin(this.timepast) * this.baseSize.x, cos(this.timepast) * this.baseSize.y, this.size.x, this.size.y);    resetMatrix();}else if(this.shapeType == "SQUARE"){    translate(this.position.x, this.position.y);    rotate(this.rotateAngle);    fill(this.size.x * this.R / 10, this.size.x * this.G / 10, this.size.x * this.B / 10, round(sin(this.timepast) * 128));    // rectMode(CENTER);    rect(sin(this.timepast) * this.baseSize.x, cos(this.timepast) * this.baseSize.y, this.size.x * 1.25, this.size.y * 1.25);    fill(this.size.x * this.R / 10, this.size.x * this.G / 10, this.size.x * this.B / 10, 255);    // rectMode(CENTER);    rect(sin(this.timepast) * this.baseSize.x, cos(this.timepast) * this.baseSize.y, this.size.x,this.size.y);   resetMatrix();    }

显示图像的更新。

Node.prototype.update = function()
{  this.size = createVector(this.baseSize.x + sin(this.timepast) * this.baseSize.x * this.sizeScale,
this.baseSize.y + sin(this.timepast) * this.baseSize.y * this.sizeScale);
if (this.isPlaying) {    this.timepast += 1 / FPS;
}
}

判断是否处于运动中，便于静止处理。

if(isPlaying)
{
btns.push(new FuncBtn(5, 5 + 30 * 14, 30, 30, "pause"));  }
else{
btns.push(new FuncBtn(5, 5 + 30 * 14, 30, 30, "play"));  }
btns.push(new FuncBtn(5, 5 + 30 * 15, 30, 30, "timer"));
btns.push(new FuncBtn(5, 5 + 30 * 16, 30, 30, "eraser"));
btns.push(new FuncBtn(5, 5 + 30 * 17, 30, 30, "clear"));
btns.push(new FuncBtn(5, 5 + 30 * 18, 30, 30, "save"));
}

鼠标按下的处理，处于可选择区域后的点击的处理。

if (mouseIsPressed && (mouseX > 40 || isMenuHide))
{
if (brushType == "CIRCLE" || brushType == "LINES" || brushType == "TRIANGLE"    ||brushType == "SQUARE"||brushType == "PENTAGON"||brushType == "STAR"    ||brushType == "COLORCIRCLE"||brushType == "PASTEL")
{
var position = createVector(mouseX, mouseY);      //
objs.push(new Node(position, sqrt(sq(mouseX - pmouseX) + sq(mouseY - pmouseY)), R, G, B));    }
//Eraser
else if (brushType == "ERASER" && objs.length > 0)
{
for (var i = 0; i < objs.length; i++)
{
if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= eraserRange)
{
objs.splice(i, 1);
break;}      }    } else if (brushType == "TIMER" && objs.length > 0) {      for (var i = 0; i < objs.length; i++) {        if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= timerRange) {          objs[i].timepast += 2 / FPS;          objs[i].isPlaying = false;        }      }    }  }

图像的显示与更新。

for (var i = 0; i < objs.length; i++)
{
objs[i].drawing();
objs[i].update();
}

参考文献：

http://mc.dfrobot.com.cn/forum.php?mod=viewthread&tid=22951

https://blog.csdn.net/magicbrushlv/article/details/77840565

https://blog.csdn.net/qq_27534999/article/details/79427721