码绘VS手绘—processing 实现小清新画风

手绘与码绘的对比——

processing实现小清新画风

【课程：互动媒体技术】

一、作业要求

1、主题

用手绘和码绘两种方式创作“运动”主题的作品，并撰写报告，对比二者在表现“动态”方面的异同。

2、要求

手绘：至少有一幅作品，允许采取纸面绘画或电脑绘画两种方式。

码绘：编程工具默认包括p5.js, processing, openframeworks, unity必须运用到条件分支、循环、函数等流程控制方法。

3、其他

尽可能在题材和内容方面与自己的手绘作品有明显的对照性，例如，若手绘画了一组动感的表情，那么码绘就可以创作一系列运动起来的表情。必须让作品动起来；不强制要求有交互性，但若做出了有趣、细腻、创意的交互体验，也会提高评价。

二、作品展示

三、代码

船的部分：

动态部分：

【其他部分均由简单图形构造而成，代码部分只需坐标计算，在此就省略不贴图了。】

四、理论+心得

码绘：

手绘（电脑绘图原图）：

【红色部分为未实现部分】

a、心得：

其实手绘和码绘还是有一定区别的，在图中我所标注的地方是码绘所未能实现的部分，比如说后面的山的连续，还有弧形的树，和微小的雁。并且在码绘时，因为图形有限，所以只能利用先后码绘的顺序，进行多余图形部分的遮挡。码绘运行时，感觉大体上是差不多的，并且颜色十分的搭配，和原图的艺术效果是一致的。

b、技术：

其实全篇的编程代码，并没有什么技术含量，只是在计算图形坐标时，花了很多功夫。值得一提的时，在最后动态效果的呈现函数。

【感谢大佬室友的指点，抱大腿！】

首先我进行了最简单的x+1的尝试：

例如：

void draw(){

background(234, 113, 107);

noStroke();

ellipse(x, y, 50, 50);

x = x+1;

}

但是这种方法只能让小船滑行一次，并不能实现循环。接下来想到的就是用for或while循环，但是问题又出现了：

例如：

void draw(){

for（x=0;x

noStroke();

ellipse(x, y, 50, 50);

}

}

船一直在重复，并没有刷新。

接下来，我尝试了用 if 判断，但是出现的问题是船走到终点时迅速地回到了起点，但是我们理想的画面是船体来回移动。

最终，我们尝试了三角函数，因为三角函数值域为【-1，1】，可以实现周期循环，所以最后呈现的就是作业效果。

c、思考：

对于码绘来说，其实无论从参考资料中，还是老师上课的讲解，对于二维图形，我认为应用最广的就是重复部分比较多的图形。

例如：

对于一些简单的绘画，用代码来说还是太过于复杂。但是，对于动态的二维绘画，以及三维绘画来说，码绘还是十分便捷的。

首先，代码能够更方便地呈现它的动态效果，因为对于手绘来说，如果要呈现动态效果，需要一帧一幅地去绘画。而对于三维绘画来说，很多是我们肉眼不能感知以及手绘表达不完全的部分。所以码绘的利弊也要分情况而论。

五、参考资料

1、processing官网：

https://processing.org

2、processing教程：

用时间控制变量，让懵逼脸动起来

https://blog.csdn.net/magicbrushlv/article/details/77895290

运用条件判断，让懵逼脸能够做出不同表情

https://blog.csdn.net/magicbrushlv/article/details/77900505

3、其他：

搞艺术的学编程有啥用？

https://blog.csdn.net/magicbrushlv/article/details/77922119

掌握大杀器”循环“，一招搞定百千万个懵逼脸

https://blog.csdn.net/magicbrushlv/article/details/77917540

写给设计师的编程趣味指南—（3）让图形跑起来

《“动态”作品编程示例》

https://shimo.im/docs/36GPANmRVx05EF83/

以编程的思想来理解绘画——用”一笔画“表现“过程美

”https://blog.csdn.net/magicbrushlv/article/details/82634189

PS：

抓着作业提交的截止日期把推文写完了。

看了些同学做的码绘，简直佩服地五体投地！！奈何我的编程水平太差，想模仿都做不到，所以我决定厚着脸皮去找他们要代码，之后放到我的公众号里，作为[学业推]的一部分！

晚安哦各位～

2:39