码绘与手绘的对比——动态篇

上一篇的码绘与手绘的对比讲的是静态图案，这一篇我们来了解与动态图案相关的编程与手绘的奥秘。在这里分享一下学习经验，对processing编程绘图感兴趣的同学可以去openprocessing.org这个开源网站学习，上面有很多优秀的大师级作品可以学习，这次我做的动态图像也是学习了大师的星球模型，做出了最后的成品。
下面是码绘动态作品：

这是首次运行程序的效果图，有一个小行星绕主星球飞行，这里做了交互设置，当用鼠标点击图片，轨道上会随机出现半径不等的小行星在同一轨道上绕主星球飞行。效果如下图所示：

观察仔细的同学还会发现，动图的画面中还有位置和颜色都随机的点出现，形成了不规则的黑白闪烁的的一层滤镜的感觉，这里主要也是利用random函数实现，在后面完整代码中可以看到。

创作思路：
寒冷的冬天总是比较倾向于暖色调，加上少女心于是就想到了糖果星球这个主题，于是搜寻了一些与星球有关的模型。在星球的基础上，如果加上动态的元素，会是怎么样的呢？很容易联想到旋转和环绕两个动作，于是加上另一些元素，即轨道和做环绕运动的小行星。整个动态的模型是在开始介绍过的网站上学习的一位大师的技术。点缀构思和配色加入了自己的想法。

有关技术:
编程绘图主要应用的是Processing这个软件，这个软件的功能在绘图上真的十分强大，推荐给想学习码绘的同学。这个模型中用ArrayList<类型>来构建自定义类型的列表，分别为
planets，planetsB ，planetsT。分别定义属性后再用绘图函数绘制图像。其余细节比较基础，大家可以在完整代码里读到。

完整代码：
ArrayList planets = new ArrayList();
ArrayList planetsB = new ArrayList();
ArrayList planetsT = new ArrayList();

void setup() {
size(500, 500);
Planet planet1 = new Planet();
planet1.s = 0.002;
planet1.r = 35;
planets.add(planet1);
}

float traceOrbit = 500;
float traceOrbit2 = 100;
float rSun = 250;
int i;

void draw() {
translate(width/2, height/2);
rotate(radians(-25));
background(255,193,193);
planetsB = new ArrayList();
planetsT = new ArrayList();
for (Planet planet : planets) {
planet.setCoords(millis(), traceOrbit, traceOrbit2);
if (planet.overLapping()) {
planetsB.add(planet);
} else {
planetsT.add(planet);
}
}
printHalfSun(false);
printTrace();
for (Planet planet : planetsT) {
planet.display();
}
for (Planet planet : planetsB) {
planet.display();
}
printHalfSun(true);
makeNoise();
}

void printHalfSun(boolean top) {
strokeWeight(4);
if (top) {
fill(250,128,114);
stroke(233);
arc(0, 0, rSun, rSun, PI, TWO_PI);
} else {
fill(250,128,114);
stroke(233);
arc(0, -0.3, rSun, rSun, 0, PI);
}
}

void printTrace() {
noFill();
stroke(175,238,238);
strokeWeight(12);
ellipse(0, 0, traceOrbit, traceOrbit2);

noFill();
stroke(135,206,250);
strokeWeight(4);
ellipse(0, 0, traceOrbit, traceOrbit2);
}

void mousePressed() {
Planet planet1 = new Planet();
planet1.s = random(0.0001, 0.004);
planet1.r = random(20, 70);
planets.add(planet1);
}

void keyPressed(){
planets = new ArrayList();
}

void makeNoise() {
rotate(radians(25));
noStroke();
strokeWeight(1);
for (int i = -width/2; i < width/2 - 1; i += 5) {
for (int j = -height/2; j < height/2 - 1; j += 5) {
fill(random(100, 255), random(20, 40));
rect(random(i - 5, i), random(j - 5, j), random(1, 2), random(1 ,2));
}
}
for (int i = 0; i < 15; i++) {
fill(random(0, 255), 255);
rect(random(-width, width/2), random(-height, height/2), 2, 2);
}
}
class Planet {
float x;
float y;
float r;
float s;
void setCoords(float millis, float rOrbit, float rOrbit2) {
this.x = sin(millis * this.s) * rOrbit/2;
this.y = cos(millis * this.s) * rOrbit2/2;
}

void display() {
fill(255,228,225);
strokeWeight(5);
stroke(255,182,193);
ellipse(this.x, this.y, this.r, this.r);
}

boolean overLapping() {
if (this.y < 0) {
return true;
} else {
return false;
}
}
}

下面放上关于手绘的一些作品。
首先是这幅码绘的对应的手绘，为了突出色彩明亮，我选择的是板绘。

仔细观察的同学可以发现这幅手绘就仿佛是静态的码绘，原因是板绘借助了绘图工具，使圆形，椭圆等都很标准

但是真正用铅笔在纸上绘制线稿是做不到这样的，如下图所示

这就可以看出很大的区别了，手绘具有不规整性。再来看下面几幅手绘，是我的速写课作业


我选取的这几幅图都是拥有细腻的线条，这是码绘无法完成的。对细节的刻画，尤其是风景速写的十分有层次感的线条，用码绘难以完成。但是今天我们的主题是动态的，这里回到动态来对比，要是想通过手绘来实现动态，我们只有将每一帧都画下来，这个工作量是是十分巨大的，而且我们也很难保证静态的部分与上一帧一样，所以这里就体现出了码绘的优点，只需几行代码，一个函数，就可以使画面运动起来，并且可以使用random函数添加物体出现的随机性，更加有趣，还可以使用mouse函数添加交互性，这也是手绘无法做到到。但是同静态绘图一样，在动态绘图中，手绘的细腻性用代码也是无法实现的，线条的纹理，叠加等，用码绘都难以完成。
看到这里，我相信同学们应该都对码绘与手绘的区别有所了解了，在不同的创作主题和风格时，大家可以选取最适合的绘图方式。