码绘与手绘——表达动态

一、手绘表现动态：

这个题目一开始看来，手绘是处于非常劣势的地位的，因为电脑上可以实现动态的过程，就是用动画的原理，每秒绘制60帧，不断进行重绘图形，来达到运动的效果的。

而本身来讲，手绘的图片本质上是不能动的，只能通过笔触来表达，来营造一种动态的效果。这个就比较考验功底了，表达动态的话，我总结了一下，是通过这些方式的。

(手绘作品如下：)

实际存在的物体本身动作来表达动态。

2. 比如飘逸的发丝，动态的裙摆，都是借助于别的真实的物体来表现运动的。

借助辅助线，或者是虚影，通过不存在的物体来表现。
比如这幅画，借助气体环绕身体，来表达主角的运动感。
通过几张连续的图片来表现运动，这些图片通常差异不大，相对位置也是固定的。也就是逐帧动画的方法。

这几张图是根据自己的码绘作品来完成的。

二、动态码绘的绘制：

这副作品是通过processing完成的。（不动的话点开大图）

这个作业的要求是围绕“运动”这个主题进行码绘与手绘，并对比。都是画画，那么面临的第一个问题就是画什么。于是我先画了一个小图形。这个图案是通过两个圆形加两个正方形经过一些旋转平移完成的。
代码如下。

pushMatrix();rotate(-QUARTER_PI);translate(-s/2.0, 0);ellipse(0, 0, s, s);rect(-s/2.0, 0, s, s);popMatrix();rotate(QUARTER_PI);translate(s/2.0, 0);ellipse(0, 0, s, s);popMatrix();
}

接着给它添加自旋转以及两层循环让他有规律的铺满屏幕。
这个时候发现如果给每次旋转都加上一个相位的话，整体呈现了一种波浪的效果，动感非常强烈。在写循环的时候试了几个不同的值，最后达到了这个效果。代码如下：

void arrange(){for (int i=1;i<=5;i++){for (int j=1;j<=5;j++){cube(i*120-30,j*120-30,1.5*(i+j));}
}
}
void cube(float x1,float y1,float k){pushMatrix();translate(x1,y1);rotate(millis()/500.0f+(k/3));scale(1.5);love1();popMatrix();
}

然后又添加了一系列同心圆来增加动感，对于一次性在循环中生成不同半径的圆，还是很好实现的。
这个时候尝试让每一个圆都可以每次画的时候自动生成相近的颜色来填充，于是将255分成20等分，最后通过调用fill函数将这个循环的值赋给圆形。

void aaa(){for(int j=0;j<6;j++){float grayvalues = 255/30;fill(255,(j+15)*grayvalues,255-(j+15)*grayvalues);ellipse(320,320,i*8-(j*100),i*8-(j*100));}i++; if (i > 65) { i=1; }
}

紧接着觉得背景有些单调，于是绘制了雪花图案。

void frozen(int x11,int y11,int s) {translate(x11, y11);stroke(85, 115, 200);strokeWeight(12);for (int i=0; i<8; i++) {line(0, 0, 0.4*640, 0);for (int k=0; k<5; k++) {float step = 0.07*k*640;line(step, 0, step+2*s, 2*s);line(step, 0, step+2*s, -2*s);}rotate(TWO_PI / 8);}

最后将这些想法合并在一张图上，经过一些入栈出栈的操作进行旋转平移，最后设置一下绘制顺序，整张图便整合在一张图上了。

同时在配色方面下了点功夫，就是借助一些配色方案图，参考了一下美国动画片的风格，最后完成了这副作品，参考图如下。

完整代码如下：

float angle;
float y=0;void setup() {size(640, 640);
}int i=1;void draw() {background(PAPER);pushMatrix();scale(1.3);frozen(400,220,15);popMatrix();pushMatrix();//translate(360,360);stroke(255,255,15);strokeWeight(8);//scale(0.8);aaa();popMatrix();pushMatrix();translate(50,50);scale(0.8);arrange();popMatrix();}void aaa(){for(int j=0;j<6;j++){float grayvalues = 255/30;fill(255,(j+15)*grayvalues,255-(j+15)*grayvalues);ellipse(320,320,i*8-(j*100),i*8-(j*100));}i++; if (i > 65) { i=1; }
}void arrange(){for (int i=1;i<=5;i++){for (int j=1;j<=5;j++){cube(i*120-30,j*120-30,1.5*(i+j));}
}
}
void cube(float x1,float y1,float k){pushMatrix();translate(x1,y1);rotate(millis()/500.0f+(k/3));scale(1.5);love1();popMatrix();
}void love1(){float s = 30;
pushMatrix();fill(INK);noStroke();ellipseMode(CENTER);pushMatrix();rotate(-QUARTER_PI);translate(-s/2.0, 0);ellipse(0, 0, s, s);rect(-s/2.0, 0, s, s);popMatrix();rotate(QUARTER_PI);translate(s/2.0, 0);ellipse(0, 0, s, s);popMatrix();
}void frozen(int x11,int y11,int s) {translate(x11, y11);stroke(85, 115, 200);strokeWeight(12);for (int i=0; i<8; i++) {line(0, 0, 0.4*640, 0);for (int k=0; k<5; k++) {float step = 0.07*k*640;line(step, 0, step+2*s, 2*s);line(step, 0, step+2*s, -2*s);}rotate(TWO_PI / 8);}}

三、码绘与手绘的对比以及思考：

一、创作体验：

码绘在绘制重复的东西的时候有很强的优势，因为可以编写一个函数，进行传参来不断调用完成重复的画面，然后还可以借助循环等等来完成想要的画面，同时可以加入不同的数学函数，比如随机数，或者sincos函数等等，最后完成想要的画面。但如果是画复杂的线条，码绘相对来说算坐标的过程就要痛苦些。可能也表达不出应有的力度和轻重。

手绘相对来说主观性和随机性更强，每一笔画的时候选择的位置，每一笔画的时候进行的轻重，都会对画作产生不同的影响，同时趣味性也很强。

二、思路方面：

进行码绘的时候思路可能会在出现一些偶然效果的时候立马发生改变，一开始完成这幅码绘的时候还完成了一些辉光效果，后来因为掉帧严重于是删除了，所以思路在码绘过程中可能是会奠定一个基调，然后在一些偶然的碰撞会发生改变。但是总体想要的效果还算是一个大概效果在脑海中。

手绘方面一般来说，思路确定好，就跟着思路来画就好了，为了达到想要的画面，用不同的颜色不同的笔触来完成就好了。
这次的手绘对比图因为是在完成了码绘之后照着画的，所以没有用什么特殊的方法来绘制，就是通过不同颜色的笔来完成了。

三、技术以及局限性：

码绘更加依赖思路或者是创意，通过不同的数学函数循环随机数等等将简单的图形复杂的动态化。
对于码绘来说，稍微复杂一点的线条都可能无法完成，或者需要经过大量的时间来计算其坐标等等。而且可能无法通过笔触来表达作画的情绪。

手绘可以依赖画画的技术以及天赋。主观情绪很重。
但同时是难以具有交互性以及真正的动态性的。

四、载体：

码绘可能更加适合在电子设备上呈现，如果是一幅动态的交互的码绘，那只有电子设备才能展示出动态。

手绘可能更适合的载体是画布上。
但在当下电子产品应用广泛，码绘和手绘都可以呈现在电子屏幕上。

但同时可能有些差别，比如有些好的美术手绘作品，是只有肉眼看才能更加体会它的艺术感的，举个例子比如说是水彩画，如果没有近距离看它的厚度与质感，可能艺术感与美感会差很多。如下图。

五、自我感受：

手绘因为它更加容易表达自己的情感，倾注了自己的灵感以及心情，所以过程相对来说非常愉悦。

而码绘，因为不太容易的表现自己的想法，以及老出bug，就没有那么愉悦。嗯。

六、应用以及结合性：

近年来板绘的发展，已经是将电子与手绘结合起来的一大步了，通过数位板，我们既可以让手绘线条的粗细，轻重，手法复刻在电脑上，也可以通过电脑上的工具来将手绘的内容进行复制，旋转，以及图像处理，这便是一个很好的结合。
所以同时我认为码绘也可以与手绘相结合，可以是同一幅画面里既有手绘的内容也有码绘的内容，也可以是通过数位板传入笔画之后通过码绘的数字性以及逻辑性来对每一个像素点进行循环的改动等等，都是很好的结合。

参考文献：

1.《用代码画画》：
0.1 用代码画画——搞艺术的学编程有啥用？
https://blog.csdn.net/magicbrushlv/article/details/77922119
1.1 开始第一幅“码绘”——以编程作画的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565

2 以编程的思想来理解绘画—— （一）用”一笔画“表现“过程美”
https://blog.csdn.net/magicbrushlv/article/details/82634189

3.https://processing.org/tutorials/gettingstarted/

4.https://blog.csdn.net/y511374875/article/details/79362957