码绘VS手绘（二）动态绘图

最新推荐文章于 2019-05-02 17:33:44 发布

Christing0907

最新推荐文章于 2019-05-02 17:33:44 发布

阅读量579

点赞数

分类专栏： p5.js 互动媒体文章标签： p5.js 互动媒体技术码绘动态绘图

本文链接：https://blog.csdn.net/Christing0907/article/details/84402776

版权

互动媒体同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

p5.js

3 篇文章 0 订阅

订阅专栏

码绘VS手绘（二）动态绘图

一、前言

这篇文章是之前静态绘图的后续，既静态码绘之后，我们又要尝试动态码绘啦！
附上第一篇的链接：码绘VS手绘（一）静态绘图

依然是用p5.js，本来是想继续用上次的米奇做成动态的，但想了想除了让云彩飘一下，米奇走两步之外也做不出什么花样了，还是想做些更有趣的东西。米奇的城堡我是建不成了，不如来点烟花吧！于是就愉快地决定做一个烟花的动态效果了！
p5.js官方文档（内附详细函数示例）

二、实验内容

（一）主题

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

（二）实验结果

1、码绘

最终效果

在这里插入图片描述白色小圆点实时跟踪鼠标，当点击鼠标时，放出烟花，烟花升空一定高度后绽放。烟花有两种形态，随机出现；烟花有五种颜色，也随机选择。

程序结构

function setup() // 函数将在程式开始时被调用一次，定义初始的环境属性。
{
    var c=createCanvas(windowWidth, windowHeight);//创建画布，宽高为窗口大小
    frameRate(50);    //设置调用draw()的频率
} 
//一些变量的设置
//……
function draw() {         //持续重复调用
    background(0, 0, 40); //设置背景色 ，保证页面实时更新     
    //……调用绘制函数
}  
function mouseClicked() {} //鼠标点击相应函数
function setPosition1(firePosition){} //烟花种类1的设置
function setPosition2(firePosition){} //烟花种类2的设置
function startNew(x,y,tx,px,colorChange,fire){} //释放烟花

具体函数解析

（1）变量设置

var tx = 0;   //烟花在竖直方向上的移动距离
var nx,ny;    //烟花释放位置
var newone=false;  //boolen变量，用来判断是否释放烟花
var fireworks = [];//储存一个烟花中各个点的数组
var radius=40;     //烟花绽放后的半径，初始值为40
var colorChange =0;//烟花的颜色
var px=5;   //烟花释放后，烟花中各个点的半径，初始值为5
var fire=0; //烟花的种类

（2）鼠标点击响应函数

function mouseClicked() {   //p5.js自带函数，鼠标左键单击时调用
   newone=true;  //点击鼠标左键，可以释放烟花
   nx=mouseX;   //以当前鼠标位置为烟花释放的位置
   ny=mouseY;
}

（3）draw()函数

function draw() {
   background(0, 0, 40);        
   tx=tx+2;//每次调用draw，烟花位置上升2    
   if(tx>=100)//当烟花上升超过100时，烟花绽放，同时烟花中各个点的半径开始减小
   {
       px=px-0.1;
   }
   if(px<0)//当烟花中各个点的半径小于0，即烟花熄灭时，当前烟花结束，各个变量恢复初始值，等待下一次释放
       {
           newone=false;
           px=5;
           tx=0;
       }
   if(newone)//当newone为true时，调用释放烟花函数
   {
       startNew(nx,ny,tx,px,colorChange,fire);        
   }
   else//一旦烟花熄灭，重新设置下一个烟花的种类和颜色，并且继续跟踪鼠标位置
   {
       colorChange = random(0, 5);
       fire=random(0,2)
       noStroke();
       fill(255,255,255);
       ellipse(mouseX,mouseY,5,5);
   }
}

（4）释放烟花函数startNew

function startNew(x,y,tx,px,colorChange,fire){
  var num = 256; //一发烟花里，有多少个点
  var xx,yy;
  xx=x,yy=y;
  var centerPosition = new p5.Vector(xx,yy);//烟花中心位置
  var firePosition = [];  //声明储存烟花中各个点的数组  
  if(fire>1)//fire为0~2的随机数，fire>1时，烟花种类为1
  {
      setPosition1(firePosition);
  }
  else//fire为0~2的随机数，fire<1时，烟花种类为2
  {
      setPosition2(firePosition);
  }        
  noStroke();  //p5.js自带函数，绘制图形无边框  
  if(tx<100)  //烟花上升高度小于100，烟花为一个不断上升的白点
  {
      xx=x;
      y=y-tx;
      yy=y;
      fill(255,255,255);
      ellipse(xx,yy,5,5);
  }
  else  //烟花上升高度大于100，烟花绽放
  {
      if(colorChange>=4){        //colorChange为一个0~5的随机数，根据数值决定当前烟花颜色
          fill(255,0,0);    
      }
      else if(colorChange>3){        
          fill(0,255,0);    
      }
      else if(colorChange>2){        
          fill(255,0,255);    
      } 
      else if(colorChange>1){        
          fill(255,255,0);    
      } 
      else {        
          fill(0,255,255);    
      } 
      for (var i = 0; i < num; i++) {    //绘制一个烟花中的各个点，点的半径px不断减小直到消失
          ellipse(firePosition[i].x+xx,firePosition[i].y+yy-tx,px,px);                                
      }        
  }
}

（5）不同烟花种类的各个点的位置设定

function setPosition1(firePosition){
   var num = 256; //一发烟花里，有多少个点
   var cosTheta;
   var sinTheta;
   var phi;   //角度
   for (var i = 0; i < num; i++) {        
       cosTheta = random(0, 1) * 2 - 1;        
       sinTheta = sqrt(1 - cosTheta * cosTheta);        
       phi = 0.1*i * PI/11.0; //这是决定烟花形状的主要变量
       if(phi>360)
       {
           phi=phi-360;
       }       
       firePosition[i] = new p5.Vector((radius+tx) * sinTheta * cos(phi), (radius+tx) * sinTheta * sin(phi), (radius+tx) * cosTheta);  //1发烟花里各个点的位置计算        
       firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);    
   } 
}

function setPosition2(firePosition){
   var num = 256; //一发烟花里，有多少个点
   var cosTheta;
   var sinTheta;
   var phi;  //角度 
   for (var i = 0; i < num; i++) {        
       cosTheta = random(0, 1) * 2 - 1;        
       sinTheta = sqrt(1 - cosTheta * cosTheta);        
       phi = i * PI/12; //这是决定烟花形状的主要变量 
       if(phi>360)
       {
           phi=phi-360;
       }       
       firePosition[i] = new p5.Vector((radius+tx) * sinTheta * cos(phi), (radius+tx) * sinTheta * sin(phi), (radius+tx) * cosTheta);  //1发烟花里各个点的位置计算        
       firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);    
   } 
}

（6） html文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js example</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="../p5.min.js"></script>
    <script src="../addons/p5.dom.min.js"></script>
    <script src="../addons/p5.sound.min.js"></script>
    <script src="…….js"></script>
  </head>
  <body>
  </body>
</html>

2、手绘

在这里插入图片描述

三、总结——编程与手绘的比较

1、工具和载体

码绘的工具是代码、载体时电脑屏幕；手绘的工具是笔、载体是纸张。显然码绘的工具和载体消耗比较小，而且修改也更方便。

2、技法

码绘的技法主要是考验作图者的编程能力，虽然码绘也需要一定的构图能力和审美能力，但如何将想法用代码实现显然是更重要的一项技法；而手绘的主要技法是对画笔的运用和构图，两者在技法上的侧重点有很大不同。

3、理念

码绘的创作理念是从单元结构入手，进行多步骤、多形式的组合，而构图以及整体布局可以在大体框架的基础上后期再做调整、甚至重构，更多的是体现创作者的构思和理念；手绘则讲求现有整体结构再进行细致刻画，整体的协调性大于局部的细致性，而且手绘更多的是创作者情感的表达宣泄，引起观赏者情感上的共鸣。

4、创作体验和呈现效果

码绘注重的是创作结果，这样就有一个很大的问题是，当有新的想法出现时，不能像手绘那样迅速地实现，因为需要考量怎样用代码表现，并且根据脑海中的画面不断调整，才能呈现出来，这个过程比较漫长，很容易中途失掉灵感或者兴趣；手绘则更注重创作过程，创作者和观赏者的感受是大于创作结果的。这就导致码绘的呈现效果更侧重单纯的视觉体验和技术水平的体现，而手绘的呈现效果则更侧重情感和审美的体验。
在动态图的创作中，码绘有着明显的优势，码绘使得平面二维的空间能够对时间这一维度有具体的体现，而手绘动态效果更考验创作者的绘画功底，观赏者也要有一定的想象力和鉴赏能力才能体会手绘动态效果的美感。