手绘 v.s. 码绘（1.0 Processing——MyFirstSketch）
目标
- 下列工具选其一：p5.js, 或processing，或openframeworks
- 尝试用绘图函数画一幅静态作品，尽可能用多种绘图函数和各种参数设置，画出较高复杂性的作品
- 用手绘方式来画相近的内容，将绘图的图形基元限定于自己程序中用到的类型
手绘作品
工具：
普普通通的手，破破烂烂的草稿本，平平无奇的中性笔
描述：
这两幅静态作品都是模仿码绘出的作品画的，可以明显看出线条弯弯曲曲，结构歪歪扭扭，粗糙的笔触散发着质朴的气息。
码绘作品
工具：
Processing
（展示图片画质不佳，如引起不适请试用源代码）
作品1
打开网页版p5，开始绘制第一幅作品，先尝试一下基本的图形和线段。
1/4的弧线段正好是微笑的弧度 : >
作品2
逐渐变细的漩涡，curveVertex()画曲线，组成一个抽象的时钟。
线宽精准，曲线流畅，真好看啊。
完整代码展示：
int h,m,s;
PFont myFont;
void setup()
{
size(300,300);
}
void draw(){
s = second(); // Values from 0 - 59
m = minute(); // Values from 0 - 59
h = hour(); // Values from 0 - 23
background(255);
smooth();
noFill();
for(int i = 180; i < 400; i+=15)
{
stroke(0);
strokeWeight(i/35);
ellipse(150,150,i+i/3,i+i/3);
}
myFont=createFont("FFScala",18);
myClockDraw();
}
void myClockDraw(){
stroke(0);
strokeWeight(1);
beginShape();
curveVertex(150,150);
curveVertex(150,150);
curveVertex(145,130);
curveVertex(149,120);
curveVertex(147,110);
curveVertex(150, 100);
curveVertex(150, 100);
endShape();
stroke(0);
strokeWeight(1);
beginShape();
curveVertex(150,150);
curveVertex(150,150);
curveVertex(155,130);
curveVertex(151,120);
curveVertex(152,110);
curveVertex(150, 100);
curveVertex(150, 100);
endShape();
stroke(0);
strokeWeight(1);
beginShape();
curveVertex(150,150);
curveVertex(150,150);
curveVertex(170,143);
curveVertex(185,148);
curveVertex(205,145);
curveVertex(230,149);
curveVertex(250,147);
curveVertex(270,150);
curveVertex(270,150);
endShape();
stroke(0);
strokeWeight(1);
beginShape();
curveVertex(150,150);
curveVertex(150,150);
curveVertex(170,157);
curveVertex(185,152);
curveVertex(205,155);
curveVertex(230,151);
curveVertex(250,152);
curveVertex(270,150);
curveVertex(270,150);
endShape();
fill(255);
ellipse(150,150,10,10);
}作品3
浏览processing官网的例子，发现一个使用时间函数的动态时钟，copy一段下来^_^￥，塞进我画的钟里。
完整代码展示：
int h,m,s;
PFont myFont;
void setup()
{
size(300,300);
}
void draw(){
s = second(); // Values from 0 - 59
m = minute(); // Values from 0 - 59
h = hour(); // Values from 0 - 23
background(200,100,s*4);
smooth();
noFill();
for(int i = 180; i < 400; i+=15)
{
stroke(0);
strokeWeight(i/35);
ellipse(150,150,i+i/3,i+i/3);
}
myFont=createFont("FFScala",18);
myClockDraw();
}
void myClockDraw(){
translate(width/2,height/2);
fill(255); //white
strokeWeight(3);
ellipse(0,0,220,220);
//Sets the color used to draw lines and borders around shapes.
stroke(0); //Black
textFont(myFont);
fill(0); //Black
text("12",-10,-75);
text("3",78,6);
text("6",-7,88);
text("9",-88,6);
for(int i=1;i<=60;i++){
pushMatrix();
rotate(PI*2.0*i/60.0);
stroke(0);
if(i%15==0){
strokeWeight(3);
line(0,-90,0,-100);
}else if( i%5 ==0){
strokeWeight(2);
line(0,-92,0,-100);
}else{
strokeWeight(1);
line(0,-95,0,-100);
}
popMatrix();
}
pushMatrix();
rotate(PI*2*s/60+PI);
stroke(0);
strokeWeight(1);
line(0,0,0,90);
popMatrix();
pushMatrix();
rotate(PI*2*m/60+PI);
stroke(0);
strokeWeight(3);
line(0,0,0,70);
popMatrix();
pushMatrix();
rotate(PI*2*h/12+PI);
stroke(0);
strokeWeight(5);
line(0,0,0,50);
popMatrix();
}手绘v.s.码绘
| 1.0 | 码绘 | 手绘 |
| 思路 | 更多思考怎样画、使用什么函数、什么结构 | 即兴发挥 |
| 技术 | 入门较为容易，但是需要查阅资料进一步学习才能逐渐掌握 | 与编程类似，而经验积累尤为重要 |
| 创作体验 | 过程略显复杂，成果赏心悦目，有成就感 | 总体比较自由，心情放松 |
| 创作偏好 | 绘出的图片往往具有实际作用，适合绘制图形界面、设计图等 | 适合绘制人物神态、表达心情的涂鸦等 |
| 效果展示 | 易于动态效果的展示 | 单个作品往往局限于静态 |
总结
第一次尝试码绘静态图片，好像发现了其中的乐趣呢。
在更加深入的探索后详细总结两种绘画方式的异同。