阿珊血汗泪之码绘1.0--P5.js

阿珊血汗泪之码绘1.0–P5.js

在互动媒体课堂上，老师通过绘制不同状态的“懵逼脸”帮助我们初识码绘，让我们体验到可视化编程的趣味性，而在课后，老师布置了使用P5.js或者processing临摹一幅动态图片的作业。。本篇博文，是用来记录新手阿珊第一次使用代码临摹作品的过程。

基本方法：

1.function set up()：项目运行时即设置
2.function draw():一秒钟调用60次
3.background（color（R,G,B））：设置背景颜色
4.createCanvas(a,b)：创建a*b大小的画布

选取临摹图像

因为恰到好处的配色和巧妙的运动轨迹中，在文件夹中的众多动态图像中，我一眼看中了它。
然而后来做的过程中我发现，因为形状和运动路径限制，它很不好拓展。

特点

1.以二维表现形式实现三维的视觉效果。
2.基础图形可以根据各自的运动轨迹分组。
3.每次运动变换的时间间隔相同。

临摹思路

1.先把基础图形实现。
2.分组进行分析每个组的运动轨迹。
一共27个基础正方体，每一列，上下重叠的三个正方体为一组，分析他们的运动轨迹。
3.对比同样时间间隔内，不同组的运动轨迹的差异。
4.不断调试，调整位置。

分析运动过程

1.一共将运动分成’七秒’，六个阶段
拿九组方块的C位方块组来举例
除了中心方块一直保持静止，其上下的方块是有发生移动的。
1-2阶段：保持不变
3-5阶段：上面的方块朝正上方移动，下面的方块超正下方移动。
5-6阶段：上面的方块朝正下方移动，下面的方块超正上方移动，恢复原状。
2.为了使得二维有三维的呈现效果，移动方向为斜角
举例：
dy=A/s，即每次dx和dy运动效果合成之后都是斜角方向

move1(xx+30,yy1+30/s,A,A/s);
move1(xx+30,yy2+30/s,A,A/s);//不动
move1(xx+30,yy3+30/s,A,A/s);

过程

1.基础图形
step1：吸取颜色
将图像截图导入PS，使用取色器获取背景颜色和三种基础颜色的RGB值或者十六进制color值。
step2：绘制基础图形

自定义基本绘图方法

drawbasepic（）：

function drawbasepic(x,y){
  background(220);
  noStroke();
fill(color(color1));
beginShape();
    vertex(x, y);//A
  vertex(x+30, y-30/s);//B
  vertex(x+60, y);//C
  vertex(x+30, y+30/s);//D
endShape();
   fill(color(color2));
beginShape();
  vertex(x,y);//A
  vertex(x+30, y+30/s);//D
  vertex(x+30, y+90/s);//F
  vertex(x, y+60/s);//E
endShape();
fill(color(color3));
beginShape();
 vertex(x+60, y);//C
  vertex(x+60, y+60/s);//G
  vertex(x+30, y+90/s);//F
    vertex(x+30, y+30/s);//D
endShape();
}

生成基础图片如下：

step3:绘制一组基础图像
根据一组基本图像的位置来确定起初点的坐标差异

drawbasepic(xx-30,yy1-30/s);
 drawbasepic(xx-30,yy2-30/s);
  drawbasepic(xx-30,yy3-30/s);
   //区域1
  drawbasepic(xx,yy1);
  drawbasepic(xx,yy2);//不动
  drawbasepic(xx,yy3);

   //区域2
  drawbasepic(xx+30,yy1+30/s);
 drawbasepic(xx+30,yy2+30/s);//不动
 drawbasepic(xx+30,yy3+30/s);

step4：先让基础组动起来

自定义基本移动绘图方法

move1（）：

每次基础小正方体移动时，都对原本坐标进行加减，重画来实现视觉上的移动。

function move1(x,y,dx,dy)//移动
{
  x+=dx;
  y+=dy;
  drawbasepic(x,y)
}

step5：将剩余组数按照坐标位置不同，加在画面上
step6：用全局变量z来表示时间，在每次draw（）运行一次，z++。然后再通过if，else if 的语句对z值进行判断，来控制每个阶段基础图形的运动轨迹。

 z++;
  //1s
  if(z<30){
  ...}
  //2s
  else if(z>30&z<60){
  ...}
...
...
//大于6s
  else if(z>180){
  }

然后进行判断，如果z到达了6s，将所有的变量（包括z）重置为0，在draw（）再次执行的时候，从头开始绘制图案。

 if(z==180){
 z=0;
 A=B=C=E=D=F=0;
 }

step7：一共六个阶段，研究不同阶段基础方块的移动规律，分别做出move1（）方法的变量判断。
在每个阶段都设置一个变量，每次运行draw，都使变量增加1，使得每次图形累计移动量增加。通过对变量进行乘积根号三，来实现二维往斜上或者斜下运动，却给人三维直上直下的错觉。

//示例
move1(xx-A+B,(yy2-60/s)-(A+B)/s,0,+2*C/s);
  move1(xx-A+B,(yy2-60/s)-(A+B)/s,0,0);
  move1(xx-A+B,(yy3-60/s)-(A+B)/s,0,-2*C/s);

step8:调试调试再调试，在草稿纸上将三维运动转换成二维图像的平移，在调试的过程中修改小错。

初步结果

有点点小卡卡卡卡卡卡卡

拓展

因为我选取的例子不像是函数那种，通过修改各种参数就可以拓展出很多花样，而且如果使用鼠标定位的话，原本很卡的运行图片可能会更加动不了。
所以我的拓展方式是使用P5.js的GUI库，可以使得用户点击视角左部的颜色调盘来自主选择颜色。

调用库：

链接：P5.GUI.js库位置
说明：我将P5.js、P5.GUI.js以及quicksettings.js下载之后加载在自己的html项目里，然后在<\head>里引用，就可以调用GUI库了。

函数功能：

var gui;
function setup(){
  createCanvas(900,900);
// Create Layout GUI
  gui = createGui();
  gui.addGlobals('color1', 'color2', 'color3','backgroundcolor');
  }

createGui():创建GUI
.addGlobals(’’,’’,’’)，给GUI添加组件，名字分别为：

运行预览：

总结

在完成本次作业时，我遇到了很多问题。从最开始的方法运作，到后来的图像调整，每一个都需要很多的耐心。
虽然在调试和修改的过程中遇到了各式各样的小问题，但是最终耐心下来一个一个调整结束之后，完整的运行之后，内心还是很有成就感的。
这就是当理性的代码将感性的艺术呈现在荧屏上时，所给我带来的视觉感动吧。