一、用代码画画？
一谈到用代码画画，就想到上个学期计算机图形学被OpenGL支配的恐惧。虽然OpenGL的功能非常强大，但是不建议在码绘时使用，码绘当然还是要用我们的小天使——processing啦。
processing
Processing是一种特别简单并容易学习的编程语言，它被研发的初衷是为了服务于艺术家和设计师们，它是一个用来做数据动画（ motion graphics）、数据可视化（ data visualization）、large-scale installation work的工具。 Processing是一种具有革命前瞻性的新兴计算机语言，它的概念是在电子艺术的环境下介绍程序语言。它是 Java 语言的延伸，并支持许多现有的 Java 语言架构，不过在语法 (syntax) 上简易许多，并具有许多贴心及人性化的设计。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。以 Processing 完成的作品可在个人本机端作用，或以Java Applets 的模式外输至网络上发布。
目前Processing免费开放中，任何人都可以下载并使用。下载链接：http://processing.org/download/
二、第一幅码绘作品
码绘孟菲斯女孩
初识processing，只了解基本图形的绘制，所以选取了构图上使用几何图形，颜色上多用明亮鲜艳的撞色，并配上点线面的装饰设计的孟菲斯风格。由于自己对孟菲斯风格了解不多，便从网上搜索了一些孟菲斯风格的图片进行临摹绘制。以下为绘制图形中用到的一些函数和部分代码：
1.矩形：
noStroke();
fill(97,155,211);
rect(0,88,600,299);//蓝矩形
2.圆形：
stroke(0,0,0);
fill(255,255,20);
ellipse(390,742,40,37);//右脚
3.多边形：
stroke(0);
fill(255,0,96);
beginShape();
vertex(435,146);
vertex(426,156);
vertex(417,148);
vertex(425,138);
vertex(415,130);
vertex(423,120);
vertex(433,128);
vertex(441,118);
vertex(451,126);
vertex(443,136);
vertex(453,145);
vertex(445,154);
endShape(CLOSE);//shizijia
}
4.扇形：
stroke(0,0,0);
fill(0);
arc(358,337,209,209,-PI,0);//toufa
5.不规则多边形：
stroke(0,0,0);
strokeWeight(3);
fill(244,42,100);
quad(100,525,147,591,183,535,140,467);
quad(100,525,147,591,89,593,43,528);
6.贝塞尔曲线：
stroke(0);
noFill();
bezier(339,405,340,411,376,411,376,405);//zuiba
三、手绘VS码绘
手绘草图
板绘孟菲斯女孩
在进行手绘的时候，由于受身边画材的限制（没有上色工具），为了图画美观一致，就先在纸上画了草稿，然后在AI中用数位板绘制上色。码绘过程中所需要的一些坐标，也是通过AI中的板绘图案获取，大大降低了码绘的难度，减少了绘画时间。但是，不得不提的是，如此简单的图案，码绘所需的时间比手绘和板绘长得多。下面，就谈谈在绘画过程中，我体会到的两种不同绘画方式（手绘和码绘）的异同。
1.相同点
（1）设计构图
在进行正式绘画之前，无论是码绘还是手绘，都需要考虑设计构图。It is important.构图在任何设计艺术中都是作品创作的第一步，它能将创作者的情感进行表达。构图是指艺运用构图把我们所想要表现的客观事物，通过主观思维进行提取，并通过创作者的巧思和设计技艺，合理地布局在画面上，并表达出创作者的情感。凡是让人印象深刻的设计作品都离不开好的构图。
（2）配色
无论用什么样的方式创作艺术作品，色彩搭配都至关重要。色彩的搭配是绘画的创作过程中重要内容之一。优秀的色彩搭配不仅能够增添作品的冲击力与感染力,提升作品的吸引力,让观赏者更好的欣赏与理解作品。因此,作为一个优秀的画者必须要具备较强的色彩搭配能力。色彩在绘画中不仅可以突出作品的特色和主题,同时也能够美化设计的版面,增强整个设计作品的美感,并且给观看者留下更深的印象。
2.不同点
（1）绘画顺序
手绘时，一般先绘制的是主体部分的丸子头女孩，然后再绘制其身后的背景，待所有的线框图完成的时候，再对各部分进行上色。而码绘则是先绘制图案的背景，再画人物。因为码绘是将图案分割成三角形、正方形、圆形等，然后将各个图案叠加组合，叠加的时候后画的图形会遮盖掉之前画的图形，所以特别注重图案绘制的先后顺序，色彩也是一边画一边填充的。
（2）难点
手绘的绘制比较简单容易上手，照葫芦画瓢即可，难点在于绘制几何图案时，在不通过其他工具（直尺、圆规等）的帮助下，很难画出规范平滑的几何图形，上色的时候，色彩种类选择范围没有码绘大，如果不够熟练，很难将颜色涂抹均匀。在上色过程中，一旦出错，很难补救。码绘的难点在于对不同函数的理解与调用，坐标计算分布，曲线的绘制。但是码绘绘制错误时，修改极为简单。
四、源码
void setup(){
size(600,800);
strokeWeight(8);
background(255);
}
void draw(){
stroke(255,255,20);
fill(255,255,20);
rect(0,0,600,88);//黄矩形
stroke(0);
fill(255,255,20);
ellipse(431,52,40,40);
ellipse(431,52,40,40);
ellipse(493,52,40,40);
ellipse(554,52,40,40);
fill(0);
line(571,38,538,67);
stroke(241,8,89);
noFill();
beginShape();
vertex(229,67);
vertex(261,46);
vertex(284,67);
vertex(310,46);
vertex(335,67);
vertex(359,46);
vertex(382,67);
endShape();
noStroke();
fill(97,155,211);
rect(0,88,600,299);//蓝矩形
stroke(0,100,183);
fill(0,100,183);
line(200,177,600,177);
line(377,223,600,223);
stroke(255);
fill(255);
int i;
i=0;
while(i<=30)
{
line(-20+20*i,319,25+20*i,395);
i++;
}
stroke(0,0,0);
strokeWeight(4);
fill(60,105,157);
triangle(422,502,560,506,585,639);
fill(97,155,211);
triangle(413,464,508,466,579,601);
fill(255);
triangle(508,466,539,379,579,601);
fill(255);
quad(413,465,508,466,539,379,448,379);
strokeWeight(8);
stroke(0,0,0);
fill(0);
line(0,319,600,319);
line(104,0,104,800);
line(0,88,600,88);
line(111,388,600,800);
stroke(0,0,0);
fill(255,0,96);
triangle(598,674,600,800,364,800);//粉三角
fill(255,255,20);
ellipse(362,800,465,465);//huangyuan
stroke(0,0,0);
fill(28,253,252);
ellipse(362,800,231,231);//lanyuan
stroke(0,0,0);
fill(97,155,211);
rect(323,645,25,70,40);//zuotui
stroke(0,0,0);
fill(97,155,211);
rect(373,645,25,70,40);//youtui
stroke(0,0,0);
fill(255,128,3);
rect(248,440,223,211,111);//shenzi
stroke(0);
noFill();
bezier(285,500,250,560,350,630,270,614);//zuogebo
stroke(0);
noFill();
bezier(437,490,460,550,390,620,453,605);//yougebo
stroke(0,0,0);
fill(248,158,17);
rect(310,713.5,48,15,24);
stroke(0,0,0);
fill(248,158,17);
rect(366,713.5,48,15,24);
stroke(0);
fill(241,8,89);
arc(46,88,80,80,-PI,0);//fenbanyuan1
noStroke();
fill(60,105,157);
beginShape();
vertex(56,164);
vertex(131,76);
vertex(230,66);
vertex(308,185);
vertex(232,280);
vertex(130,280);
endShape(CLOSE);//yinying
stroke(0,0,0);
strokeWeight(3);
fill(140,210,226);
quad(158,125,235,28,310,149,232,246);
quad(52,127,127,246,232,246,158,125);
stroke(0,0,0);
fill(255);
quad(158,125,235,28,127,40,52,127);//lanlifangti
strokeWeight(8);
stroke(0,0,0);
fill(255,255,20);
ellipse(334,742,40,37);//zuojiao
stroke(0,0,0);
fill(255,255,20);
ellipse(390,742,40,37);//右脚
stroke(0,0,0);
fill(255,240,202);
ellipse(357,440,80,40);//bozi
stroke(0,0,0);
fill(255,240,202);
ellipse(358,337,209,209);//lian
stroke(0,0,0);
fill(0);
arc(358,337,209,209,-PI,0);//toufa
stroke(255,240,202);
fill(255,240,202);
triangle(338,337,358,307,378,337);//liuhai
stroke(0,0,0);
fill(0);
ellipse(446,260,56,56);//youwanzi
stroke(0,0,0);
fill(0);
ellipse(271,260,56,56);//zuowanzi
stroke(0,0,0);
fill(0,255,91);
arc(360,558,67,67,0,PI);
fill(0);
line(326,558,393,558);//koudai
stroke(0,0,0);
fill(0);
ellipse(394,369,23,23);//youyan
stroke(0,0,0);
fill(0);
ellipse(316,369,23,23);//zuoyan
stroke(0);
noFill();
bezier(339,405,340,411,376,411,376,405);//zuiba
stroke(0,0,0);
fill(255,0,96);
ellipse(590,233,234,234);//fenyuan
stroke(0,0,0);
fill(255,0,96);
rect(0,387,104,301);
fill(0);
line(21,387,21,688);
line(41,387,41,688);
line(61,387,61,688);
line(81,387,81,688);//fenjuxing1
stroke(0,0,0);
fill(255,0,96);
rect(31,727,40,40);//fenjuxing2
//stroke(0);
//noFill();
//beginShape();
//curveVertex(33, 301);
//curveVertex(33, 301);
//curveVertex(63, 230);
//curveVertex(76, 246);
//curveVertex(93, 230);
// curveVertex(93, 230);
// endShape();
noStroke();
fill(28,253,252);
beginShape();
vertex(42,546);
vertex(87,610);
vertex(144,608);
vertex(182,553);
vertex(136,487);
vertex(80,495);
endShape(CLOSE);//yinying1
stroke(0,0,0);
strokeWeight(3);
fill(244,42,100);
quad(100,525,147,591,183,535,140,467);
quad(100,525,147,591,89,593,43,528);
noFill();
quad(43,528,100,525,140,467,83,475);//lifangti2
strokeWeight(8);
noStroke();
fill(28,253,252);
ellipse(27,580,15,15);
stroke(0);
fill(255,128,3);
ellipse(222,430,24,24);
stroke(0);
fill(255);
ellipse(206,572,28,28);
noStroke();
fill(97,155,211);
ellipse(499,580,13,13);
stroke(0);
fill(255,0,96);
beginShape();
vertex(365,146);
vertex(356,156);
vertex(347,148);
vertex(355,138);
vertex(345,130);
vertex(353,120);
vertex(363,128);
vertex(371,118);
vertex(381,126);
vertex(373,136);
vertex(383,145);
vertex(375,154);
endShape(CLOSE);
stroke(0);
fill(255,0,96);
beginShape();
vertex(435,146);
vertex(426,156);
vertex(417,148);
vertex(425,138);
vertex(415,130);
vertex(423,120);
vertex(433,128);
vertex(441,118);
vertex(451,126);
vertex(443,136);
vertex(453,145);
vertex(445,154);
endShape(CLOSE);//shizijia
}
五、参考资料
1.设计艺术中构图视觉要素的重要性：http://www.68tuku.com/article/design/201809041751.html
2.色彩搭配对一个设计师的重要性：http://www.wzsky.net/website/color/139542.html
3.原创插画孟菲斯艺术风格丸子女孩：http://huaban.com/pins/1890402093/
