手绘vs码绘（动态）

怀疑自己是话唠的我又来了，这次要介绍的是动态的图案的对比，为了打消我这个自我怀疑，这次我们直接进入正题。

首先依旧是手绘：

 对不起我真的控制不住自己想吐槽的心，这个动态效果到底怎么画啊。。（大概是我做的动态效果都太智障了。。）到最后还是选择了用水的波纹表示这几条鱼在游动（虽然不知道能不能看出来）。回到正题，这次主要想从动态表现、创意、以及工具这几个方面聊一下我的个人感受。

• 表现

 如果你想在一张纸上表现一个动态的效果，我觉得还是有一定难度的，虽然也看到过一些图片，比如：

 

 这种一般是由于颜色上的互补和明暗对比带给人的一种错误的感官，而且当人们在前后左右的移动时，由于视觉聚焦问题，也会让图片动起来（当然我觉得你原地转几圈后看什么都在动）。还有这种：

 

 通过周围一些模糊的线条让你感觉在动。一张纸上的图只能给你带来动图的感受，而不是实际的动起来，想让他真实的动起来你可以用最传统动画的方式，画很多张图然后快速翻看这些画，当然这个工作量有点大，还可以结合摄像机等现代的方法，将你所绘制的画放置在适当的场景中让他‘动’起来。

• 创意

 在创意方面，我能想到的手绘方面，以上表现手法中所说的几个其实都是一些创意，但是实施起来相对比较麻烦，还有的就是画本身，就是创作上的创意了（这个举例来说有点困难，比较我本身没太多创意）好的我们下一个话题。

• 工具

 在工具方面，你可以运用最基本的纸笔利用颜色明暗线条等画出动态的感觉，其次摄像机、电脑等也都是可以考虑的工具（比如做个二维动画什么的）。

 其次是码绘，这是这次的作业效果：

 

 （好的我知道很智障了）

• 表现

 在动图的表现上说，起码对于我码绘出来的效果完胜，因为你真的很简单的就能看到他是在动啊。但是必须吐槽下自己的辣鸡编程，真正做的时候你就能发现你想做出来的和你最后呈现的差别真的有点大。。不要怀疑我进行过多少尝试，只能说现在这个图是我觉得一堆图里和我想象的最接近的了。所以又回到了上一次我说的技术的问题，码绘的表现虽然很好，但是你要技术过关，不然就会影响到你想表现的东西。

• 创意

 我觉得对于码绘来说，创意真的非常重要！不是说手绘的久不重要，是因为码绘线条图案你都可以用代码表示出来，也就是说在‘画’上面，不会被线条太丑啊，图形画不好啊这些问题困扰，这种时候你想做出一个怎么样的图，这个想法就显得很重要了（当然前提是你想做的你能做出来。。当然我就不符合这个前提。。），更重要的是码绘里你可以真的让他天马行空的动啊，二维三维螺旋旋转变大变小分解合成，基本只有你想不到（和做不出来的）没有他做不到的。

• 工具

 工具方面对我来说，还是那个电脑还是那个processing，啊，还有录屏用的录屏软件，动图上方的水印就是了，以及制作动图的QQ影音。其实还有很多软件，比如我这次想试试P5.js来着，但是他经常打开图没了，没了。。那我能忍么，回到prosessing怀抱的我觉得他倒着的坐标轴都比以前可爱了呢（？）。

 好的这次就说到这吧，附上这次作业的主要代码：

 画鱼：

void xing(){
beginShape();
fill(255,200,100);
vertex(30,40);
vertex(15,0);
vertex(0,40);
vertex(30,40);
endShape();
beginShape();
fill(255,69,0);
vertex(15,40);
vertex(10,45);
vertex(20,45);
vertex(15,40);
endShape();
}

 网：

void xing5(){
 stroke(0);
 strokeWeight(2);
    fill(238,233,233);
    ellipse(mouseX, mouseY, 64, 25);
    arc(mouseX,mouseY, 64,100,0,PI,OPEN);
     stroke(139,37,0);
    strokeWeight(5);
    line(mouseX+32,mouseY,mouseX+100,mouseY);
 }

 主函数：

void draw(){
    background(174,238,238);
  
    noStroke();
  pushMatrix();
  angle+=PI/360;
 x+=random(-1,2);
 y+=random(0,1);
  translate(x,y);
  rotate(angle);
    xing();
  popMatrix();
 
pushMatrix();
  angle1+=PI/360;
 x1+=random(0,2);
 y1+=random(0,5);
  translate(x1,y1);
  rotate(angle1);
    xing1();
  popMatrix();
 
  pushMatrix();
  angle2+=PI/1200;
 x2+=random(-1,2);
 y2+=random(0,1);
  translate(x2,y2);
  rotate(angle2);
    xing2();
  popMatrix();
 
   pushMatrix();
  angle3+=PI/480;
 x3+=random(-1,2);
 y3+=random(0,2);
  translate(x3,y3);
  rotate(angle3);
    xing3();
  popMatrix();
 
   pushMatrix();
  angle4+=PI/360;
 x4+=random(-2,0);
 y4+=random(-1,1);
  translate(x4,y4);
  rotate(angle4);
    xing4();
  popMatrix();
 
  noStroke();
    if ( mousePressed ){
  fill(174,238,238);
  ellipse(mouseX, mouseY, 200, 200);
  }
xing5();
}

• 参考： 

 https://blog.csdn.net/sh307976524/article/details/36889263?utm_source=blogxgwz2 Processing基本函数整理

https://blog.csdn.net/weiming8517/article/details/50697419 processing PImage 绕自身旋转代码

https://processing.org/reference/rotate_.html rotate()函数

https://processing.org/reference/translate_.html translate()函数

https://jingyan.baidu.com/article/d621e8da44485b2864913f6c.html Processing与鼠标的结合