手绘 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	码绘	手绘
思路	更多思考怎样画、使用什么函数、什么结构	即兴发挥
技术	入门较为容易，但是需要查阅资料进一步学习才能逐渐掌握	与编程类似，而经验积累尤为重要
创作体验	过程略显复杂，成果赏心悦目，有成就感	总体比较自由，心情放松
创作偏好	绘出的图片往往具有实际作用，适合绘制图形界面、设计图等	适合绘制人物神态、表达心情的涂鸦等
效果展示	易于动态效果的展示	单个作品往往局限于静态

总结

第一次尝试码绘静态图片，好像发现了其中的乐趣呢。

在更加深入的探索后详细总结两种绘画方式的异同。