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

2023-11-11 13:10
文章标签 动态 对比 手绘 码绘

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

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

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

 

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

 

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

参考资料:

http://bbs.jcwcn.com/thread-432031-1-1.html

https://blog.csdn.net/magicbrushlv/article/details/77895290

https://www.bilibili.com/video/av19583422/

https://p5js.org/reference/

这篇关于对比码绘与手绘——动态篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/390283

相关文章

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

Java使用POI-TL和JFreeChart动态生成Word报告

《Java使用POI-TL和JFreeChart动态生成Word报告》本文介绍了使用POI-TL和JFreeChart生成包含动态数据和图表的Word报告的方法,并分享了实际开发中的踩坑经验,通过代码... 目录前言一、需求背景二、方案分析三、 POI-TL + JFreeChart 实现3.1 Maven

Java导出Excel动态表头的示例详解

《Java导出Excel动态表头的示例详解》这篇文章主要为大家详细介绍了Java导出Excel动态表头的相关知识,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录前言一、效果展示二、代码实现1.固定头实体类2.动态头实现3.导出动态头前言本文只记录大致思路以及做法,代码不进

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R

锐捷和腾达哪个好? 两个品牌路由器对比分析

《锐捷和腾达哪个好?两个品牌路由器对比分析》在选择路由器时,Tenda和锐捷都是备受关注的品牌,各自有独特的产品特点和市场定位,选择哪个品牌的路由器更合适,实际上取决于你的具体需求和使用场景,我们从... 在选购路由器时,锐捷和腾达都是市场上备受关注的品牌,但它们的定位和特点却有所不同。锐捷更偏向企业级和专

什么是 Ubuntu LTS?Ubuntu LTS和普通版本区别对比

《什么是UbuntuLTS?UbuntuLTS和普通版本区别对比》UbuntuLTS是Ubuntu操作系统的一个特殊版本,旨在提供更长时间的支持和稳定性,与常规的Ubuntu版本相比,LTS版... 如果你正打算安装 Ubuntu 系统,可能会被「LTS 版本」和「普通版本」给搞得一头雾水吧?尤其是对于刚入

TP-LINK/水星和hasivo交换机怎么选? 三款网管交换机系统功能对比

《TP-LINK/水星和hasivo交换机怎么选?三款网管交换机系统功能对比》今天选了三款都是”8+1″的2.5G网管交换机,分别是TP-LINK水星和hasivo交换机,该怎么选呢?这些交换机功... TP-LINK、水星和hasivo这三台交换机都是”8+1″的2.5G网管交换机,我手里的China编程has