p5.js:基于圆形和矩形面板的简单绘画系统

最新推荐文章于 2023-09-02 01:57:08 发布

原创

最新推荐文章于 2023-09-02 01:57:08 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

摘要
绘画的元素中，采用码绘对绘画材料与交互方式进行改进十分方便，比如可以加上动态效果，有规律的形状，绘画的基本元素不再使用基本像素等

设计思路
参考老师的案例，采用圆形面板来当绘制的panel，矩形面板的功能我也实现了一个自己的版本。采用上一次说的面向对象的方法，能够方便地改变每个元素的坐标，颜色等信息。

tips：
由于想象力有限，所以只能做出仅有的几个功能。

首先是定义一个绘制圆形的类：
它包括以下几个属性：

创建时的坐标
当前坐标
半径
旋转角度
旋转角度增加量
是否旋转
是否平移
是否被画笔画过

如果被画过，那么它的颜色就由笔刷面板来控制，代码：

function drawFcn(x,y,theta,angle,radius,rot,trans,painted)
{
//坐标
this.x=x;
this.y=y;
//初始坐标
this.initx=x;
this.inity=y;
//旋转角度
this.theta=theta;
//旋转角度增加量
this.angle=angle;
//半径
this.radius=radius;
//是否旋转
this.rotate=rot;
//是否平移
this.trans=trans;
//是否被画过
this.painted=painted;

this.draw_roundness=function()
{
  if(!this.painted)//如果没有
{
fill(p_RGB_R, p_RGB_G, p_RGB_B, opacity);//使用本身颜色
}
else if(this.painted)
{
fill(b_RGB_R, b_RGB_G, b_RGB_B,opacity);//使用笔刷颜色

}
push();
rotate(this.theta);
if(this.trans)//是否移动
{
  if(this.x<=this.initx+200&&this.x>=0)
  {
    if(!is_contrary)
  {
    this.x-=c_tran_speed;
  }
  else
  {
    this.x+=c_tran_speed;
  }
}
}
if(this.rotate)//是否旋转
{
  this.theta+=this.angle;
}
strokeWeight(c_stroke);

ellipse(this.x,this.y,this.radius,this.radius);
pop();

}
}

定义数组来保存对象并且随着Gui面板变量更新而更新（zoom是整体圆形的半径，radius是单个圆形的半径）：

//更新、初始化圆形
function InitRoundnessList()
{ 
  var r = radius * zoom;//半径
  if(RoundList.length>seeds)
  {
    RoundList.length=seeds;
  }
  else if(RoundList.l