p5.js创作动态图画

本文主要谈一下个人的一幅码绘作品的创作过程和对码绘与手绘优缺点的一些简单的思考。
#创作工具
1、p5.js
2、photoshop
#最终效果图
飘落的雪花是这幅图的动态元素
在这里插入图片描述 #创作过程
##第一步，在photoshop里画出背景图，即树干，因为树干用p5.js实在是无法画出，好在p5提供了loadImage的功能，可以在canvas里添加想要的背景，photoshop画出的背景如下
##第二步，添加脚本，在树干上通过鼠标交互（鼠标点击）的方式为树干添加花朵
脚本如下

var ang = 0;
function setup() 
{
  createCanvas(1024, 640);
  img = loadImage("my.jpg",function(img) {
    image(img, 0, 0); 
  });
  noStroke();
}
function draw() 
{
  let t = frameCount / 60; 
  if (mouseIsPressed === true) 
  {
     ang += 5;
     var val = cos(radians(ang)) * 12.0;
     for (var a = 0; a < 360; a += 75) 
     {
      var xoff = cos(radians(a)) * val;
      var yoff = sin(radians(a)) * val;
      fill(255);
      ellipse(mouseX + xoff, mouseY + yoff, val, val);
     }
     fill(255);
     ellipse(mouseX, mouseY, 2, 2); 
  }
}

此处代码参考了p5官网上给出的example,相关链接会在文末给出。
加上脚本运行后作画效果如下图所示
在这里插入图片描述 ##第三步，使用第二步画出的带花的树干图片作为背景，为其添加下雪的脚本。脚本里为了增加交互的趣味性，设置了点击左键可以关闭和开启下雪。
代码如下：

let snowflakes = []; 
let issnow=true;
function setup() {
  createCanvas(1287,803);
  img=loadImage("canvas.png");
  noStroke();
}

function draw() {
  image(img,0,0,1287,803);
  let t = frameCount / 60;
  if (mouseIsPressed === true) 
  {
    if(mouseButton === LEFT)
    { 
      if(issnow===false)
      issnow=true;
      else
      issnow=false;
    }
  }
  if(issnow===true)
  {
    for (var i = 0; i < random(5); i++) 
    {
      snowflakes.push(new snowflake()); 
    }
    for (let flake of snowflakes) 
    {
      flake.update(t);
      flake.display();  
    }
  }
}
function snowflake() {
  this.posX = 0;
  this.posY = random(-50, 0);
  this.initialangle = random(0, 2 * PI);
  this.size = random(2, 5);
  this.radius = sqrt(random(pow(width / 2, 2)));
  this.update = function(time) 
  {
    let w = 0.6; 
    let angle = w * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    this.posY += pow(this.size, 0.5);
    if (this.posY > height) 
    {
      let index = snowflakes.indexOf(this);
      snowflakes.splice(index, 1);
    }
  };
  this.display = function() {
    ellipse(this.posX, this.posY, this.size);
  };
}

此处代码同样也参考了p5官网上给出的一个example,相关链接会在文末给出。
此时就可以达到最终效果
在这里插入图片描述 #创作体验和思考
这部分主要写两个方面的内容，一是创作过程中遇到的困难和解决办法，二是手绘和码绘在动态绘画中各自的优缺点。

其实，最初我是比较排斥采用loadimage这种方式进行码绘，loadimage的效果应当归功于手绘而非码绘。树干的线条和结构不规则，较复杂，用码绘的方式去绘画的话，基本没法实现，所以用手绘板自己花了一棵。这个地方其实就体现出了手绘和码绘在静态绘画中的优缺点，显然码绘不适合画复杂不规则的物体。

另外，我想做的最终效果其实是通过鼠标不同键的点击控制绘制花朵和下雪景色，但是发现不可行。因为下雪的每一帧都需要重新绘制一次背景，否则，上一次还留在canvas上，嗯，就会，emmm
在这里插入图片描述而花朵如果每次都刷新背景，就会永远只能看到当前这一帧的唯一一朵。
两个效果不能同时达到，最终采取了把花画好当做背景的方式完成了创作。

可以看出，在动态绘画方面，码绘实现起来更加方便简单。
想要用手绘实现动态绘画的话，不可避免需要画很多张图画才能表现出“动”的感觉，这项工作过于费时费力。
而码绘，只需要简单的if语句和for语句即可实现在每一帧画出不同的图画，简洁优美。
但是主观上我还是认为手绘的艺术性更强，更好看一些。
比较手绘和码绘其实就是在比较人脑和计算机吧，一个更加灵活，一个更加精准。两者都有优点，结合起来是最好的选择。
#参考链接：
鼠标点击绘制花朵example
雪花飘落效果example

p5.js创作动态图画

猜你喜欢