手绘vs码绘 动态对比

用手绘和码绘两种方式创作“运动”主题的作品，并作出对比

手绘图：


码绘图：

比较
技法：不考虑美观的话手绘比较方便，可以怎么想怎么做，而码绘却比较复杂，需要转换为代码。
工具：手绘可以用笔，数位板等等，码绘是代码和编程工具
理念：手绘怎么想怎么画，码绘需要转换思维，用数学的思想考虑
创作体验：手绘更加友好轻松，画了会马上呈现效果，而码绘却只能面对代码，需要运行才知道效果
呈现效果：对没有手绘功底的人来说，码绘呈现效果会更好，在动态图形中，手绘很难表现，而码绘却可以表现出各种各样的动态效果，码绘的创作能力更高。
载体：手绘为纸，电脑屏幕；码绘载体是电脑屏幕
应用：手绘可用于静态绘画，更容易表现精细细节，而码绘更擅长动态几何图形的表现，可用于动画，游戏，动图，动图界面展示等等方面，适用范围很广。

码绘实现

var l=500;
var w=500;
var d=100;
var px=l/2;
var py=w/2;
var px1=l/3;
var py1=w/3;
var Vx=-3;
var Vy=-10;
var Vx1=-16;
var Vy1=13;

// 函数setup() : 准备阶段
function setup() {
	createCanvas(l,w)；
}
 // 函数draw()：作画阶段
function draw() {	
  background(200);
  //用for循环画多个背景太极图案
  for(var col=0;col<5;col++) // 画8列
	{
		for(var row =0;row<5;row++) // 画6行
		{
			var x = col*100; // x坐标为i的70倍，即X方向间隔为70像素
			var y = row*100; // y坐标为i的60倍，即Y方向间隔为60像素
			taiji(x,y,50);
		}		
	}	

//两个大太极图案的碰撞
  taiji(px,py,d);
  taiji(px1,py1,d);
  //pxy碰撞检测
  px+=Vx;
  py+=Vy;
	if(px>width-d/2||px<0+d/2){
		Vx*=-1;
  }
  if(py>height-d/2||py<0+d/2){
		Vy*=-1;
  }
  taiji(px1,py1,d);
  //pxy1碰撞检测
  px1+=Vx1;
  py1+=Vy1;
	if(px1>width-d/2||px1<0+d/2){
		Vx1*=-1;
  }
  if(py1>height-d/2||py1<0+d/2){
		Vy1*=-1;
  }
  
  s=sqrt((px-px1)*(px-px1)+(py-py1)*(py-py1));
  //pxy和pxy1碰撞检测
   if(s<d){
		Vx1*=-1;
    Vy1*=-1;
    Vx*=-1;
    Vy*=-1;
  }

 }

//画太极的函数
function taiji(px,py,d)
{
   
fill(255);
arc(px, py, d, d, 0, PI, OPEN);
  
fill(0);
arc(px, py, d, d, PI, 2*PI, OPEN);  
  
fill(0);
arc(px-d/4, py, d/2, d/2, 0, PI, OPEN); 

fill(255);
arc(px+d/4, py, d/2, d/2, PI, 2*PI, OPEN); 

fill(255);// 填充白色
ellipse(px-d/4,py,d/7,d/7); // 画圆形
fill(0);// 填充白色
ellipse(px+d/4,py,d/7,d/7); // 画圆形
  
}