创作过程

首先，我们来了解一下什么是绘画。
在百科里给出这样的解释：绘画在技术层面上，是一个以表面作为支撑面，再在其之上加上颜色的做法，那些表面可以是纸张或布，加颜色的工具可以通过画笔、也可以通过刷子、海绵或是布条等。在艺术用语的层面上，绘画的意义亦包含利用此艺术行为再加上图形、构图及其他美学方法去达到画家希望表达的概念及意思。
上课时，老师也与我们讨论过这样的问题，并举例让我们大家投票认为其是不是绘画。在这许多例子中，大多数人认为是绘画的基本都有以下几个特点：画布（纸、墙壁等）、画笔、作画者使用画笔直接接触画布。还有一些例子中，作画者使用特殊工具或特殊方法的，我们并没有明确界定是不是绘画。
在文章什么是绘画？——以抽象思维理解绘画中我们知道，“绘画”这样的行为可以看做四个要素的组合：
材料：各种物质要素，例如颜料、画笔、画布等。
作画者：创作手法、思想、审美、技巧等。
交互方式：创作者如何与材料交互。
作品：创作行为产生的结果，它以某种呈现方式给予观赏者一定的体验，传递一定的信息。
所以，当要设计一个绘画系统时，需要给使用者提供材料及交互方式。在本绘画系统里，我们的画布就是电脑屏幕，画笔是鼠标，通过点击的方式选择，通过点击并移动来进行绘画。我的绘画系统与现有的绘画系统不同的是可以选择不同样式的笔刷，并且笔刷的形状会根据时间变化而改变。

代码及效果

//界面设置
function setup() 
{
  createCanvas(800, 480);
  background(220);
  huaban();
  showcolor();
  showbrush();
}

huaban()、showcolor()、showbrush()分别用于显示绘画区域、显示色板库和显示笔刷及其它按钮。
用p5做一个不同的绘画系统

//显示色板库
function showcolor()
{
  textSize(20);
  fill(0,0,0);
  stroke(255,255,255);
  strokeWeight(2);
  text("色板库",0,20);
  for (var i=0;i<5;i++)
  {
    if (i==0)
    {
      //白
      fill(255,255,255);
      rect( 30*i, 30, 30, 30);
      ……
    }
    ……
  }
}
//选项显示
function showbrush()
{
  fill(255,255,255);
  stroke(0);
  strokeWeight(1);
  //清空按钮
  rect( 0, 335, 60, 30)
  //保存按钮
  rect( 0, 370, 60, 30)
  
  textSize(20);
  fill(0,0,0);
  stroke(255);
  strokeWeight(1);
  text("笔刷",0,203);
  text("橡皮",108,203);
  text("清空",10,356);
  text("保存",10,392);
  //四种笔刷每种三样的按钮
  for(var i=0;i<3;i++)
  {
    for (var j=0;j<4;j++)
    {
      fill(255,255,255);
	  stroke(0);
	  strokeWeight(1);
      rect( i*30, 210+j*30, 30, 30)
    }
  }
  //笔刷样式
  stroke(0);
  strokeWeight(1);
  line(5,215,25,235);
  ellipse(15,255,5,5);
  triangle(15,280,10,290,20,290);
  rect(12, 310, 5, 5);
  ……
  //三种橡皮按钮
  for(i=0;i<3;i++)
  {
    fill(255,255,255);
    stroke(0);
    strokeWeight(1);
    rect( 115, 210+i*30, 30, 30)
  }
  //橡皮样式
  stroke(0);
  strokeWeight(3);
  ellipse(130,225,10,10);
  triangle(130,249,123,262,137,262);
  rect(125, 279, 10, 10);
}

//绘图
function draw() 
{
	colorset();
	brushset(mouseX,mouseY);
}

//颜色设置
function colorset(mouseX, mouseY)
{
  colorselect();
  if(colornum==1)
  {
    R=255;
    G=255;
    B=255;
  }
  ……
}
//颜色选择 根据位置确定颜色编号
function colorselect()
{
  if(mouseIsPressed)
  {
    if (mouseY>30 && mouseY<60)
    {
      if (mouseX>0 &mouseX<30)
      {
        colornum = 1;
      }
      ……
    }
    ……
  }
}

这里要对应好每个颜色的编号及RGB值，因为我在色板库中是横向编码，而确定编号却是竖向编的号，所以在最后确定RGB值得时候比较麻烦。笔刷和其它选项与颜色相同道理，通过位置确定编号，通过编号决定执行哪一函数。

//线形笔刷小
function burshline1(mouseX, mouseY)
{
  fill(R,G,B);
  stroke(R,G,B);
  strokeWeight(1);
	if(mouseX>160 && mouseX<800)
  {
		if(mouseY>0 && mouseY<480)
    {
			if(mouseIsPressed)
      {
        line(mouseX, mouseY, pmouseX, pmouseY);
			}
		}		
	}
}

//动态圆形笔刷
function burshcir1(mouseX, mouseY)
{
  var sec = second();
  fill(R,G,B);
  stroke(255,255,255);
  strokeWeight(1);
  if(mouseIsPressed)
  {
	  if(mouseX>160+15/2 && mouseX<790-15/2)
      {
		  if(mouseY>5+15/2 && mouseY<475-15/2)
          {
            ellipse(mouseX, mouseY, 2*sec, 15);
		  }
	  }
	}
}

用second()函数返回当前时间秒数，用于确定圆的横轴长度。这里圆会根据时间变化而变化。方形画笔和三角画笔同理。

//圆橡皮
function eraser1(mouseX, mouseY)
{
	fill(255,255,255);
  stroke(255,255,255);
  strokeWeight(3);
  if(mouseIsPressed)
  {
	  if(mouseX>160 && mouseX<800)
    {
		  if(mouseY>0 && mouseY<480)
      {
        ellipse(mouseX, mouseY, 30, 30);
		  }
	  }
	}
}

因为我这里背景是白色的，所以圆形橡皮就画白色圆形覆盖上去。方形橡皮和三角橡皮同理。

//清空画板
function qingkong()
{
	fill(255,255,255);
  stroke(0,0,0);
  strokeWeight(1);
  rect(160,5,630,470);
}

同样道理，清空画板就是重新画一个与画板大小一样的矩形覆盖上去。
用p5做一个不同的绘画系统

对比

技法
跟现有绘画系统相同，都是通过鼠标点击和拖拽完成。
至于能画成什么样子，那就纯看个人技术了。
工具
在绘画的工具上有所不同，本绘画系统可以选择笔刷的形状，并且有的笔刷会根据时间变化而改变，而且笔刷有不同的外围效果。最重要的是，可以自己根据想象在代码中随意更改画笔种类和样式。
创作体验及效果
在创作体验和效果上，因为笔刷可以改变形状和大小，而不同的笔刷又有着不一样的轮廓粗细，所以常规的画法就会画出不同的效果，可能会有超出预想的效果。
载体
在制作过程中，主要是代码的部分。而常规绘画系统则不需要制作。
在绘画过程中，与常规绘画系统相同，电脑屏幕为画布，鼠标为画笔。
局限性
还有很多可以加进来的效果因为各种原因没有加。
因为我贫乏的想象力，想不到什么地方可以与现有绘画系统不同，所以就只在笔刷上做了改动……

用p5做一个不同的绘画系统

创作过程

代码及效果

对比

相关推荐