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

最新推荐文章于 2022-04-07 15:47:41 发布

Azure.

最新推荐文章于 2022-04-07 15:47:41 发布

阅读量448

点赞数

本文链接：https://blog.youkuaiyun.com/qq_37900439/article/details/84388923

版权

本文探讨了动态码绘与手绘的区别，通过示例展示了如何使用代码在夜空背景上生成随机闪烁的星星，为画作增添动态效果。动态码绘提供了互动性和趣味性，而手绘则侧重于最终的艺术成品。码绘需要编程基础，而手绘需要美术技能，两者在应用领域各有优势，码绘常用于网页美化，手绘则广泛应用于广告、动画等多个领域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

function setup() {
	createCanvas(208*4,154*4);//坐标乘5
	angleMode(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) + 1
    stars[index] = s

    s.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 = position
    this.age = 0
    this.deadFrom = 0
    this.maxSize = random(10, 30)
    this.maxAgeMultiplier = random(2, 5)
}

Star.prototype = {
    render: function() {
        var diameter = this.diameter()
        if (diameter == 0) {
            return
        }

        drawingContext.shadowColor = this.color
        drawingContext.shadowBlur = this.isImmortal ? this.shadowAmount * 1.4 : this.shadowAmount
        ellipse(this.position.x, this.position.y, diameter, diameter)
    },

    diameter: function() {
        var s = this.age - this.deadFrom
        return 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.02
        if (this.isImmortal) return

        if (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等方面，总体来说手绘应用范围还是更广泛一点，但是美化网页还是用码绘更方便。二者各有千秋。