对比码绘与手绘—

对比码绘与手绘——动态篇

本文主要是介绍对比码绘与手绘——动态篇，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在上一篇文章里我绘制了一幅夜空下的大巴

但是既然是夜空，没有星星就会有些光秃秃的，为了让它动起来，看起来稍微好看一点，有趣味性一点，现在需要让他动起来，用代码在夜空上加入明灭的星空效果，动图如下：

在上一篇代码的基础上改变如下：

function setup() {createCanvas(208*4,154*4);//坐标乘5angleMode(DEGREES);noStroke();var bgStars = ~~(Math.max(208*4, 154*4) / 20) + 20;while (bgStars--) {createBgStar(bgStars)}
}

添加

var V = p5.Vector
var stars = []
var lastPos = {x: null,y: null
}function createBgStar(index) {var s = new Star(new V(random(0, 208*4), random(0, 60*4)))s.maxSize = (index % 4) + 1stars[index] = ss.onDie = function() {//console.log(index, 'is dead.')createBgStar(index);}
}function shouldBeImmortal() {return ~~(random(0, 500)) == 0x0A4
}var Star = function(position) {this.color = '#9999ff'this.position = positionthis.age = 0this.deadFrom = 0this.maxSize = random(10, 30)this.maxAgeMultiplier = random(2, 5)
}Star.prototype = {render: function() {var diameter = this.diameter()if (diameter == 0) {return}drawingContext.shadowColor = this.colordrawingContext.shadowBlur = this.isImmortal ? this.shadowAmount * 1.4 : this.shadowAmountellipse(this.position.x, this.position.y, diameter, diameter)},diameter: function() {var s = this.age - this.deadFromreturn Math.max(Math.min(s, this.maxSize), 0)},makeImmortal: function() {this.color = '#ff6666'this.isImmortal = true},shine: function() {this.shadowAmount = map(noise(this.position.x, this.age, frameCount), 0, 1, this.age, this.age * 2)},grow: function() {this.age += this.isImmortal ? 0.04 : 0.02if (this.isImmortal) returnif (this.diameter() > 0) {if (this.age > this.maxSize * this.maxAgeMultiplier) {this.deadFrom += 0.2 * this.maxAgeMultiplier}} else {if (!this.dead && this.onDie) {this.onDie()}this.dead = true}}
}

在draw函数中添加

stars.forEach(function(star) {star.grow()star.shine()star.render()})

通过上面的代码来实现星星的随机生成以及亮一段时间后消失的效果。

动态码绘与手绘的比较

呈现效果：比起静态码绘，显然在动态创作放方面码绘是很棒的。码绘可以实现一种动态的绘画方式，也可以与画作通过键盘、鼠标或者声音等输入设备进行交互，这是传统的手绘做不到的。同时码绘可以向我们展示绘画的过程，但是手绘向观察者展示的是最终的成品。码绘让观察者也参与到绘画的过程里，通过改变代码中的参数或者其他地方来完成这种交互，有参与感就会更有趣味性，像是让梵高的画按照线条走向流动起来并且让人们可以通过鼠标加速或者引导这种流动过程，这就会显得非常有趣味性，让这些艺术作品以一种奇特的方式离人们更近。

技法：手绘需要美术基础，码绘对艺术基础要求较弱，但是对编程基础要求更多，通过分支、循环等来实现图画的运动。

工具：码绘需要一台电脑，手绘需要绘画工具。

创作体验：动态码绘会让人感到码绘的趣味性，让我觉得静态码绘的痛苦减轻了一些，当然这次是动态码绘，运动的主要是星星，背景还是第一篇文章里静态码绘的内容。这次码绘实现的是星空的明灭，像是可以用代码实现的动态效果还有很多。不知道这篇博文有没有读者，如果有的话，你也可以尝试一幅自己的动态码绘。

应用：码绘可以用于网页的绘制，增加网页的美感，手绘可以应用于包括但不局限于广告、动画、游戏、UI等方面，总体来说手绘应用范围还是更广泛一点，但是美化网页还是用码绘更方便。二者各有千秋。