人性化的绘画界面设计－屁民科普

人性化的绘画界面设计－屁民科普

写在前面：感觉对于这次的绘画系统，我和其他同学不同，他们比较专注于不同笔的效果的比较，我在这里是更专注于用户进行绘画时的交互体验，绘画的娱乐性和创新性体验较少。这里面的面板控件都是自己画的233.

设计思路

（1）由动态和交互，我想把第二次的作业结合进去，作为我这次大作业的UI开始界面。相当于将绘画系统，当作适合人们玩的小游戏的样式。
（2）根据老师上课讲的内容，忽然想到可以做成一个像素风的绘画形式。可以自己选择颜色，有颜色面板。
（3）在完成第(2)步以后，我在想要做点更有意思的东西，能够将自己的绘制完成的图画让他有某种效果。因为前几天下雪，所以想做一圣诞特别版。
（4）之前看同学做了有点萌的开关还有音乐可视化的下雪的季节，自己也想让界面变的更可爱一点，所以自己也尝试了一下这两种我比较喜欢的作品，放入我的绘画界面中。

创作步骤

绘制画布

首先，我要有一个网格作为画纸，相当于画布的界面。
部分代码：
声明部分：

int bar_num=5;//bar color num
float bar_length=width;//bar width and length
float box_length=bar_length/bar_num;//box length and width
PVector p[]=new PVector[1000];
float p_y[]=new float[1000];

在setup()当中初始化：

  for (int i=0;i<=1000-1;i++)
  {
    p[i]=new PVector(box_length*i+box_length/2,box_length);
  }
    for (int i=0;i<=1000-1;i++)
  {
    p_y[i]=p[i].y*i;
  } 

绘制画布部分：

//set a canva
void drawcanva()
{
  for (int j=0;j<=1000-1;j++)
 { 
   for (int i=0;i<=1000-1;i++)
  {
    fill(255,255,255);
    stroke(157,170,173,30);
    rect(p[i].x,p_y[j],box_length,box_length);
  }
 }
}

效果：

绘制调色板

第二步就是要有调色板了，为了好看，我在调色板下画了一个半透明的矩形，生成调色板也非常简单，定好了画板板面的位置也就是选好了第一个格子的位置，定好了画板的大小，花瓣中的格子的宽度就和画布的格子大小一样。写一个循环，将所有的格子位置在setup中存储起来，将格子要填充的颜色也存储起来。格子的位置和填充的颜色都在数组中。
于是就形成了下面这种效果，值得一说的就是文字，我这里找了几种好看的文字，选定与主题最相符的格式就?了。

PFont myfont;//create font

setup()函数中选择了一种字体

 // Herculanum  HiraginoSans-W0 MarkerFelt-Thin
  myfont=createFont("NanumBrush",20);//set font
  textFont(myfont);

 fill(0,0,0);//text color
 textSize(20);
 text("Palette",35,22);//add context and pos

那我是怎么选择这种字体的呢，那字体有什么属性可以通过代码调节呢
可以参考：processing字体

核心部分：增加调色板交互效果

获取调色板的颜色

第三步：也是这里最核心的，就是点击调色板，获取调色板的颜色，再点击画布，在画布上显示我选择的颜色，并且绘制。
首先先说说怎么获取颜色，processing自带了获取颜色的函数，非常简单也非常方便。
当然这些要建立在点击事件当中，我在编写的时候，想过用什么样的交互方式会更加便于用户去选取颜色并且绘制，而且代码还比较容易编写。
那就选择不同的按键来代表不同的操作！
这里鼠标左键选取颜色，右键绘制&#