你好！本系列文章主要探究：手绘与码绘之间的对比，这篇是该系列的第二篇。每一篇我都会从创作思路、工具、创作体验、呈现效果、局限性等方面来分析
1.创作思路
这次我们做一点好看的东西，不像上次的自行车和冰淇淋那种没什么营养的画，做一个，升空的烟花是从下面看还是从侧面看。
手绘方面，根本不知道自己要使用什么方法才能够做出烟花，太难了，我需要更高的画技才能实现。
码绘方面，终于能够一展身手了，通过不断的平移达到烟花升空爆炸的效果
2.工具
使用的工具还是p5.js，在画抽象的东西的方面，p5还是强啊
3.创作体验
因为手绘很差，虽然很简单的画出来了，但是效果远远达不到自己的要求；
码绘基本上达到了自己的要求，但要是能画两个人就更好了，花的时间比手绘多得多，但是也收获了一些成就感
4.呈现效果
手绘：
码绘：
录制的软件太卡了实际效果要比这个好。
以下是代码
基本原理就是通过每一帧不断的transform，改变firePosition的值，达到上升及爆炸、消失的效果。
setup函数
var fireworks = [];
function setup() {
mySound = loadSound('huahuo.mp3');
createCanvas(1850, 1000);
frameRate(100);
}
function draw() {
background(0, 0, 40);
for (var i = 0; i < fireworks.length; i++)
{
fireworks[i].display();
}
}
键盘控制
function keyPressed() {
if(!mySound.isPlaying())
{
mySound.setVolume(0.3);
mySound.play();
}
fireworks.push(new Fireworks(30));
}
烟花的色彩
function createLight(rPower, gPower, bPower) {
var side = 64;
var center = side / 2.0;
var img = createImage(side, side);
img.loadPixels();
for (var y = 0; y < side; y++) {
for (var x = 0; x < side; x++) {
var distance = (sq(center - x) + sq(center - y)) / 5.0;
var r = int((255 * rPower) / distance);
var g = int((255 * gPower) / distance);
var b = int((255 * bPower) / distance);
img.set(y, x, color(r, g, b));
}
}
img.updatePixels();
return img;
}
function Fireworks(radius) {
//调整烟花随机颜色
if(colorChange>=3.8){
img=createLight(0.9,random(0.2,0.5),random(0.2,0.5));
}else if(colorChange>3.2){
img=createLight(random(0.2,0.5),0.9,random(0.2,0.5));
}else if(colorChange>2){
img=createLight(random(0.2,0.5),random(0.2,0.5),0.9);
} else {
img=createLight(random(0.5,0.8),random(0.5,0.8),random(0.5,0.8));
}
var num = 100;
var centerPosition = new p5.Vector(random(width /4, width * 3/ 4), random(height/2, height ), random(-100, 100));
var velocity = new p5.Vector(0, -15, 0);
var accel = new p5.Vector(0, 0.2, 0);
var img; var cosTheta;var sinTheta;var phi;
var firePosition = [];
var colorChange = random(0, 5);
for (var i = 0; i < num; i++)
{
firePosition[i] = new p5.Vector(1, radius * random(-1,0));
firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
}
this.display = function ()
{
for (var i = 0; i < num; i++)
{
push();
translate(centerPosition.x, centerPosition.y, centerPosition.z);
translate(firePosition[i].x, firePosition[i].y, firePosition[i].z);
blendMode(ADD);
image(img, 0, 0);
pop();
firePosition[i] =p5.Vector.mult(firePosition[i], 1.05);
if ( firePosition[i].y<-600)
{
for (var i = 0; i < num; i++)
{
cosTheta = random(0, 1) * 2 - 1;
sinTheta = sqrt(1 - cosTheta * cosTheta);
phi = random(0, 1) * 2 * PI;
firePosition[i] = new p5.Vector(radius * sinTheta * cos(phi), radius* sinTheta * sin(phi), radius* cosTheta);
firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
radius = dist(0, 0, 0, firePosition[0].x, firePosition[0].y, firePosition[0].z);
centerPosition.add(velocity);
velocity.add(accel);
}
}
}
}
}
最后再配上好听的打上花火这首歌，增添点色彩。
5.局限性
手绘要呈现这种动起来的东西太难太难了，但对于码绘来说就很简单，也有很多小技巧在手绘中不能够使用的，比如：我可以让这些烟花粒子运动到画布以外达到消失的效果，也可以改变粒子的颜色与背景一致达到消失，再比如：
centerPosition.add(velocity);
velocity.add(accel);
删除这两行代码，烟花爆炸可以达到一炮多响的效果，这都是手绘所达不到的，
在制作运动的画的时候，码绘只要自己想明白了整个流程，做起来就得心应手了。
6.总结
相比于传统的画作，码绘对于我们最大的吸引力就是动起来，炫酷，强烈的视觉冲击感，同时还有一些趣味性，并且我们能够与之交互，这些都是码绘所独有的，所以想要制作一些炫酷的东西，码绘是首选。
参考链接：
https://p5js.org/zh-Hans/reference/
https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS