码绘VS手绘|processing“运动”主题创作—

一、代码逻辑

二、理论对比

三、参考资料

最终作品效果可以看上传在B站的视频：https://www.bilibili.com/video/av36523799

第一次码绘VS手绘指路：https://blog.csdn.net/qq_37787956/article/details/84200103

一、代码逻辑

在第一次尝试中，绘制了一个十分简单的小人，它不会动，也不能和用户进行交互。

对于艺术创意编程来说，实在是一个无趣的作品，如何让静止的作品动起来，是这次尝试主要要实现的目标。

首先，准备一幅静态的作品：

这只小鸟激发了我创作的热情[○･｀Д´･ ○]，贴出我的手绘作品。

然后，你需要把你的创作对象放在坐标轴里肢解，规划好各个部分的排列顺序，因为上一次实践中并没有尝试任意曲线的绘制，这次尝试一下。

设计好了之后，就可以创建一张画布开始绘制了。

真正绘制起来就很随心随性了，你会发现既不像你找的图，也不像你画的图，这就是创作的乐趣所在，永远有你想不到的惊喜emmm

接下来，我们要怎么让它动起来，应该实际来说有两种可行的解决方法，一是让小鸟自己动，二是让背景动起来。

在这里我尝试的是第二种方法，如果我想让这只小鸟飞翔在群山之上，只需要让后面的群山动就好了。

这时候就要用到一个非常实用的函数了！

noise（x）：返回指定坐标处的Perlin噪声值，结果值始终在0.0到1.0之间。

Perlin噪声是随机序列发生器，产生比标准random（）函数更自然，谐波序列的数字。它是由Ken Perlin在20世纪80年代开发的，并已用于图形应用程序，以生成程序纹理，形状，地形和其他看似有机的形式。（引用）

总之生成的噪声图案十分的层次分明，就很美。

我们要做的就是不断的按照一定的速度向前更新x的坐标值，每次刷新画布的时候就会产生不断运动的感觉。

类似于：

但是现在是不是发现鸟飞的很尴尬，像吊在半空中一样，我们怎么来做的更像呢？

现实中鸟飞的时候翅膀都会动，显然，我们这只并不，好，我们来解决一下翅膀这个问题。绕一个点上下摆动，啊，我们有一个现成的模型可以套用，单摆运动，

我们确定了上下摆动的范围，具体的x值我们带到sin函数中算就好了。

一个有趣的交互，当鼠标靠近小鸟的时候，小鸟就躲开，狡猾的小别致。很简单，检测到鼠标位置时，移动坐标轴就好了，当然不要移动太大，小鸟就飞没了。

看是不是十分的和谐。

进入完善阶段，为了丰富一下我的画面，加了一个模拟雪花的“假粒子系统”。

很通俗的来讲，我准备了200半径随机个小白球，一开始在随机位置生成，不断改变y值，落到最下面的时候，回到固定位置重新开始新一轮的降落循环。

为了更鬼畜一点，加了一个跟着音乐跳动的太阳。

只是进行了一下简单的尝试，最最简单的音乐可视化，加载了minim库，加载进音乐来，用player.left.get(i)获取它左声道的值，这个值是介于（-1,1）之间的一个值‘’只需要乘一个系数放大这种变化，传递给画圆函数，就收获到一个闪烁着的太阳效果。这里友情提示一下，一开始我选择的是sound这个库，怎么弄也不出声，后来我一百度，原来这个库不支持processing 3这个版本，果断换了minim。

最终效果，可以点击下面链接看录屏效果。

https://www.bilibili.com/video/av36523799

附上代码：

import ddf.minim.* ;
Minim minim;
AudioPlayer player;float theta=0.0;
float angle=PI/2;
int count=200;
float[] x=new float[count];
float[] y=new float[count];
float[] r=new float[count];
float[] s=new float[count];float step,theta1;
int num=5, frames = 1200;
Layer[] layers = new Layer[num];  float value=0;
void setup() {size(800, 600);surface.setResizable(true);minim =new Minim(this);player=minim.loadFile("1.mp3");smooth(); step = (height-120)/num;  for (int i=0; i<num; i++) {  layers[i] = new Layer(-20+i*step, random(1000), i+1);}for (int i=0; i<count; i++){x[i]=random(0, width);y[i]=random(0, height);r[i]=random(3, 7);s[i]=random(1, 2);}
}void draw() {background(255);for(int i=0;i<player.bufferSize()-1;i++){value=abs(player.left.get(i));}sunoutside(value);suninside(value);for (int i=0; i<layers.length; i++) {  color col = lerpColor(#00C322,0, 0.8-0.8/num*i);  fill(col);  layers[i].display();}  theta1 += TWO_PI/frames;  //snowfill(255);for (int i=0; i<count; i++) {if (y[i]>height) {y[i]=-5;}if (dist(mouseX, mouseY, x[i], y[i])<20) {y[i]=-5;x[i]=random(0, width);}y[i]+=s[i];ellipse(x[i], y[i], r[i], r[i]);}translate(width/2, height/2);float x= -(mouseX-150)/7;float y= -(mouseY-150)/7;translate(x,y);bird();translate(-40, 40);//armrotate(theta);beginShape();vertex(0, 0);bezierVertex(0, 0, -50, 0, -50, -30);bezierVertex(-50, -30, -90, 0, 0, 0);endShape();theta+=sin(angle)*0.05;angle+=0.05;}
void bird()
{fill(126);//tailnoStroke();ellipse(-80, 0, 20, 10);rotate(PI/40);ellipse(-80, 0, 20, 10);rotate(-PI/20);ellipse(-80, 0, 20, 10);rotate(PI/40);rotate(PI/4);//mouthrect(0, -50, 30, 30);rotate(-PI/4);fill(200);beginShape();//bodyvertex(-80, 0);bezierVertex(-80, 0, 0, -60, 30, -50);bezierVertex(30, -50, 70, -30, 30, 40);bezierVertex(30, 40, 0, 60, -80, 0);endShape();fill(126);//eyetranslate(40, -40);ellipse(-5, 5, 30, 30);fill(0);ellipse(0, 0, 10, 10);
}
void suninside(float value)
{float wid=40;wid=wid+value*100;if(wid>60)wid=40;fill(255,0,0,200);ellipse(150,100,wid,wid);fill(255,0,0,100);ellipse(150,100,60,60);
}
void sunoutside(float value)
{float wid=70;wid=wid+value*100;if(wid>100)wid=70;fill(255,255,0,200);ellipse(150,100,wid,wid);
}
class Layer {  float start, noize, speed;  float yOff, yOff2;  Layer(float _start, float _noize, float _speed) {  start = _start;  noize = _noize;  speed = _speed;}  void display() {  yOff = yOff2;  noStroke();  for (int x=0; x<width; x+=1) {  float y = start + noise(noize+sin(yOff)*3)*step*3.5;  rect(x, height, 1, -height+y);  yOff+=TWO_PI/(width);}  yOff2=theta1*speed;}
}
void mousePressed()
{if(player.isPlaying()){player.pause();}elseplayer.play();
}

二、理论对比

下面是心得体会时间。

手绘VS码绘，动态表现手法到底有哪些不同。

（一）手绘

这种变现手法，在漫画中很常见，风是一个很抽象的概念，看不见也摸不着，但是这个名词带给我们的感觉就是流动的，画面就是动起来的，绘画中对于风的表现也有多种，粗细分明的线条，或者是明暗分明的光影。

材质

不同的材质在人们认知中是不同的，铁是硬的，棉花是软的，在画画中作者表现好这种材质的感觉，飘起的衣服，头发，往往给人一种代入感，让人下意识的就在脑海中浮现出动态的画面。

体态的表现

人体的动作的表现在漫画创作中，是每一个漫画技师需要磨练的技术，怎么画的像，评判“像”的标准又是什么呢？当然是和现实中我们日常见到的各种动作相像，当表现好了这种方式的时候，就是给看的人一种潜意识的联想，也就是自己已经脑补出画面了。

说到底，从我的理解角度来看，手绘之所以能够变现出动态的效果，实际上是在用画面刺激我们的大脑去联想，见到风我们就联想到吹过的树叶，见到水流，我们就会想到被拍打的石头。

画面是静止的，但是我们的联想会越来越具有代入感的把你拉进，所有这些静态画面构建的虚拟动态世界中去。

（二）码绘

反过来看码绘，其实更接近与我们经常看的电影，一帧一帧排列在一起，按照时序，一秒多少帧，放出来，我们看起来就是动起来的，但是和真正的制作动画片的流程不一样的，我们不需要亲自一帧一帧的制作，我们只需要负责一个画面的绘制，然后，告诉计算机，这一帧和后面的关系，计算机就会不知疲倦的帮你把所有都画出来。

这么说来，其实码绘也算是艺术创作的一种，你绘制出来的东西是随机的，当在经历了许多的迭代之后，你赋予计算机的链接关系，带来的结果更是具有惊喜的感觉。

好了，就写到这里吧。

三、参考资料

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.http://iprocessing.cn/2017/10/22/%e7%ac%ac%e5%85%ab%e6%9c%9f%ef%bc%9aprocessing%e5%88%b6%e4%bd%9c%e5%8a%a8%e6%80%81%e5%b1%b1%e6%b0%b4%e8%83%8c%e6%99%af/

4.噪声noise()

http://iprocessing.cn/2017/07/09/noise-%e5%99%aa%e9%9f%b3/

码绘VS手绘|processing“运动”主题创作——如何让一只沙雕鸟起飞相关推荐

“运动”主题创作——手绘与码绘的比较
"运动"主题创作--手绘与码绘的比较本次主题是运动,在此便以最基本的运动形式--跑步来展现两者的区别. 手绘手绘是静态的图片,为了展示"运动",可以把跑者的 ...
码绘与手绘——表达动态
一.手绘表现动态: 这个题目一开始看来 ,手绘是处于非常劣势的地位的,因为电脑上可以实现动态的过程,就是用动画的原理,每秒绘制60帧,不断进行重绘图形,来达到运动的效果的. 而本身来讲,手绘的图片本质 ...
【动态】码绘VS手绘的对比——有点萌的开关
[动态]码绘VS手绘的对比--有点萌的开关背景简介主题成果展示前期分析制作过程体会与思考参考资料背景简介上一次简单的通过静态的手绘与码绘对两者进行了一些简单的对比,这一次更加好玩了, ...
码绘VS手绘（二）动态绘图
码绘VS手绘(二)动态绘图一.前言二.实验内容 (一)主题 (二)实验结果 1.码绘最终效果程序结构具体函数解析 2.手绘三.总结--编程与手绘的比较 1.工具和载体 2.技法 3.理念 ...
码绘VS手绘（二）如何让让静态图“动”起来
前言在上一篇码绘VS手绘(一) 编程与手绘的对比中,我们了解了有关码绘与手绘在静态图方面的比较,本文主要讲解如何分别通过手绘和码绘两种方式来使得静态图"动"起来,码绘使用的是pr ...
对比码绘与手绘——Motion graph
上一篇博客做的是静态画,那这篇当然要讲讲动态画.同样地,这次我们也是从思路.技术.创作体验.创作偏好等方面来比较码绘与手绘,讨论异同. 首先,展示一下作品: 码绘利用P5.JS绘制作品手绘利用数 ...
码绘与手绘的对比——动态
码绘与手绘的对比--动态版权声明:本文为博主原创文章,未经博主允许不得转载. 图形学最动人的地方就是可以用代码实现图形的动态效果,之前比较了静态效果下的码绘与手绘,传送门:https://blog. ...
用p5.js实现的码绘与手绘的比较（动态）
用p5.js实现的码绘与手绘的比较(动态) 上篇:用p5.js实现的码绘与手绘的比较(静态)https://blog.csdn.net/wangyouxu24/article/details/8433 ...
码绘”与手绘比较——静态篇（码绘使用p5.js）
码绘图手绘图先大体说一下码绘图的实现吧其实实现起来没什么技术难度,就是过程比较繁琐. 背景就是几个不同颜色,不同透明度的四边形和三角形,用quad()和triangle()两个函数搞定,就不贴代 ...

码绘VS手绘|processing“运动”主题创作——如何让一只沙雕鸟起飞

码绘VS手绘|processing“运动”主题创作——如何让一只沙雕鸟起飞相关推荐

最新文章

热门文章