2023五福创新科技与传统年俗的有机融合AI年画

丰富的线上&线下活动,深入探索云世界

做任务,得社区积分和周边

最真实的开发者用云体验

让每位学生受益于普惠算力

让创作激发创新

资深技术专家手把手带教

遇见技术追梦人

技术交流,直击现场

海量开发者使用工具、手册,免费下载

极速、全面、稳定、安全的开源镜像

开发手册、白皮书、案例集等实战精华

为开发者定制的Chrome浏览器插件

23年兔年,五福项目将传统的写福字升级成了年画,用户通过绘制兔子轮廓可以得到活动的兔子,同时由AI生成对应的兔子年画,整个过程给用户带来很强的惊喜感,同时将具有传统氛围的年画与科技感拉满的AI作图有机结合,为大家带来全新的年俗体验。

AI年画作为23兔年五福的创新项目,在玩法和技术方案上都采用全新的实现,前后端技术、AI算法深度,以及美术互动等深度协同,实现了玩法了技术的双创新,最终呈现的效果得到了广泛的认可。

一句话介绍:用户根据引导画出兔子轮廓,根据轮廓生成AI福兔,福兔结合装饰套组生成福兔年画,并可以对应的虚拟和实体物品。

用户在创作页完成年画兔子的创作,同时请求服务端生成对应的AI年画,最后通过转场动画过渡到装饰页。

创作页-绘制兔子

创作页-合成动画

用户在装饰页使用各种素材贴纸DIY装扮自己的年画,为自己的年画署名,或是选择重新创作。

主页作品集

年画周边

兔年五福年画项目作为一个2D互动应用,选择TinyJS做为渲染引擎,同时选择一系列Tiny的插件库。TinyJS在支付宝业务中广泛应用,经历多年互动业务落地沉淀,是目前支付宝2D互动的首选。

TinyJS拥有丰富的生态,今年的年画项目中使用了一系列插件来完成各种功能模块的开发。

mars动画是实现各种炫酷的特效的首选,同时也是今年的五福规范,在TinyJS作为渲染引擎的背景下我们使用tinyjs-plugin-mars播放mars动画。

MarsStudio工具制作动画

为了让兔子在画布中动起来,我们选择使用spine实现兔子的骨骼动画,在TinyJS中使用tinyjs-plugin-spine骨骼动画插件实现。

为了减少内存和预推资源的消耗,我们在一些部分动画上选择使用shader的自定义动画,同时保证性能和效果。

年画的玩法有一条明确的动线,那就是绘制兔子,生成年画,装扮年画,年画作品集,因此在开发我们可可以整个互动分成四阶段:

paint(绘制阶段)

transform(合成年画)

decoration(装饰阶段)

home(年画主页)

创作页主要的难点有两个:

最开始的产品方案其实就是让按照步骤描轮廓,大致的交互如下:

为了增加趣味性,参考了其他的绘画App,需要在绘画的过程中和绘画完之后兔子的部件(耳朵、手、脚)要动起来,这无疑增加很大的难度(因为这是第一次需求评审完之后才变更的,这给设计师和前端开发都会带来巨大的工作量)。

骨骼动画确实是可以动,但是怎么将绘画的轮廓跟骨骼动画结合起来了,这个在蚂蚁,甚至业界目前看来没有现成的方案的。

具体的方案探索

1)骨骼动画支持换肤,可以将用户的画的笔迹提取出来作为骨骼去进行换肤。

所以设计师在设计的时候就需要把哪些要动并且进行可以替换的地方,做成插槽。

2)如何将用户画的部件精确的提取出来

一开始业务期望是一个可以任意画的画板,用户随意画,但是我们无法识别出来用户画的笔迹哪里是耳朵、哪里是手、哪里是脚,识别不出来,就更别想提取笔迹进行替换了。

为了可以识别出来在画板里哪部分是耳朵、手、脚,我们需要对用户的可绘制区域和绘制顺序进行限制,限制出哪部分是耳朵、手、脚,用户在我们圈定的地方绘制的,我们就认为是该部件。

比如左上角圈定一块区域,我们就认为是左耳朵,这部分提取出来的纹理,在进行换肤的时候就换肤到spine动画的左耳朵处。

为此我们实现和设计师制定了统一的坐标系,实现笔迹提取范围和美术资产的对应,保证绘制内容到spine骨骼的无感切换。

所以我们跟设计师约定了大致这么一个范围,来确定插槽的部分。

3)如何让动画动起来好看

虽然我们约定了笔迹提取范围,可以识别出来身体部件,但是用户如果在这个框里画出来不像我们期望的样子,这样就会导致两个问题:

所以为了解决不好看的问题,我们还得限制,尽量保证我们引导用户画耳朵,就画出来像耳朵。

两个解决方案来保证这个问题:

限制用户绘制区域:

设计师在给引导的兔子部件底纹的时候,还需要给一份部件的轮廓坐标。

这样我们就可以利用轮廓点位,通过Tiny.Graphics绘制一个Mask区域,盖在画布上,相当于把轮廓外面的都设置了mask,超出轮廓的笔迹都看不到;并且保证了用户绘制内容的可控。

看标记的地方,明细能看出超出的部分别截掉了。

在这个区域绘制出来的笔迹,尽量像引导的底纹:

如果按照我们限制绘制区域画出来,基本上画出来的兔子已经很像了,但是有可能用户在这个区域里没有画完,可能只随便画了一笔,这样可能不是很像,所以我们还加了一个粗糙的相似度检测。尽量的去保证用户画出来的笔画是我们预期的效果。

具体的方案就是判断笔迹的路径是否通过我们预设点的大多数(目前是80%的点位)。所以设计师还需要给一份兔子部件的点位,见下图。

在笔触移动的时候通过碰撞检测,检测是否经过预设的点位,超过80%的点位,就认为完成当前部件的绘制。

到此,基本上就能保障用户画出来的兔子默认好看,并且动起来的时候也好看。

绘制我们用的tiny-plugin-calligraphy插件,该插件本身并不支持自动绘制能力,在分析插件源码后通过事件代理的方式最小成本的实现了自动绘制功能。

要实现自动绘制很关键的两个点:

绘制点位的顺序:

这个在前面已经给过了,就是这个,只是给的时候需要注意一下顺序即可,通过数组的方式保证顺序。

当前用户绘制进度在哪里:

因为在给点位的时候是每个部件一份数据,而不是一份完整的兔子轮廓数据,还需要每个部件合起来定义一个顺序。同时,如果用户画到一半,然后再想用自动绘制的时候,需要知道当前自动绘制应该绘制哪个部件。

我们将兔子身体划分成六个部分,分别是左耳、右耳、左脸、右脸、左身体、右身体,通过标志符判断用户的绘制进度,同时使用标志符管理绘制阶段。

drawIndex=0

drawIndex=1

drawIndex=2

drawIndex=3

drawIndex=4

drawIndex=5

drawType=DrawTypes[drawIndex]='earL'

drawType=DrawTypes[drawIndex]='earR'

drawType=DrawTypes[drawIndex]='faceL'

drawType=DrawTypes[drawIndex]='faceR'

drawType=DrawTypes[drawIndex]='bodyL'

drawType=DrawTypes[drawIndex]='bodyR'

定义好之后,就按照drawIndex进行自动绘制即可。

在切换装饰页时,我们通过一整套完整的动画流程来保证用户体感和引导的连续性,兼具趣味性和科技感。为此我们在各个节点上设置了相互衔接的不同动画。

spine兔子首帧出现

兔子spine动画

动态合成年画图片

溶解出现

年画框上移滑动

切换装饰页

兔子首帧出现和年画溶解出现的动画效果,使用了Tiny.Filter提供的自定义着色器能力,通过自定义的shader代码实现高性能动画。

在具体实现溶解效果的时候,将连续的灰度分布图作为底图,在着色器中根据连续的采样结果+线性偏移的时候。

用户在装饰页完成年画的DIY装扮,生成最终的年画。

整个DIY过程主要用到了tinyjs-plugin-transformable插件实现贴纸的编辑(拖拽、旋转、删除、镜像、缩放)。

再装饰完成之后使用tinyjs-plugin-extract插件导出年画和年画前景。

年画项目还为用户提供了一系列的年画周边,如挂历,马克杯,地毯等印有年画的商品,为了保证周边商品上年画的清晰度,我们需要再实现一套额外的高清年画合成方案,为周边商品提供大尺寸的高清年画。

我们在装饰页DIY年画的过程中,会记录兔子,背景,贴纸等素材的位置大小和角度,根据位置和大小信息使用原本素材的四倍图在合成年画的高清版本。

受限于现有打印链路的能力,我们使用多媒体团队提供的SVG合图方案,而在年画创作DIY和时候使用的是TinyJS以及tinyjs-plugin-transformable插件的混合坐标体系,与SVG坐标体系不兼容,为此我们需要写一套额外的坐标转换逻辑,同时后端还需要将前端提供的坐标转换逻辑再转成Java实现,最终在后端实现合图。

为了覆盖100%的用户,尽量保证效果,我们就用户不同的终端情况实现不同的降级逻辑。我们通过jsapi接口getDowngradeResult获取降级信息。

年画的使用场景很多,不同的使用场景,比如壁纸、付款码皮肤、红包封面、NFT,不同的场景需要的图片尺寸还不一样。

提示:尺寸为了统一,都以750宽度为基准,虽然最终生成的年画是600*780,这个跟750*975比例是一样的,为了好理解,文中750*975和600*780可以互相替代,不影响理解。

所以为了看起来是一个年画,但是要适应不同的场景,整个方案如下:

以学生兔这样的一个年画为例:

算法会给三张图片:长背景、短背景、兔子,前端负责剪短背景、合并兔子和吉祥话到画板中。

长背景(750*1624)

短背景(750*975)

兔子

画板。

用户在完成DIY装饰后导出最终年画和前景图。

年画(750*975)

前景图(750*975)

现在就有了适用于各种场景图片的原始图了,对于年画的业务方就根据需要使用即可。

THE END
1.AIGC绘画设计基础AI整活!万物皆可建筑设计都已经接入AI辅助出图 AI的出现大大提高了设计沟通和出方案的效率,可以利用AI快速的展现设计意向,也可以直接利用AI寻找设计灵感,AI在设计前期和成果展示等流程中都能扮演重要的角色。AI领域不断扩大,AI的应用边界也逐步探索到了传统的建筑领域,尤其是建筑设计阶段。 https://blog.csdn.net/xiaokangss/article/details/144374509
2.AI技巧:绘制3D立体图形,打造华丽平面设计一图读懂|字节AI布局:豆包生态产业链全梳理 今天07:51| 市场资讯电子支付产业链15 头条号入驻 最强王者的荣耀 王者荣耀精彩视频集合站 谨慎上当受骗 (本内容由AI生成) 能让照片动起来的AI出现了! (本内容由AI生成) 令人惊艳的视频展示,展现了无尽的创意与才华, (本内容由AI生成) 财经自媒体联盟 今日推荐 优https://t.cj.sina.com.cn/articles/view/6533725995/m18570bf2b033018ueq
3.AI人工智能室内设计:改变家居装饰的未来AI百科人工智能(AI)正在各个行业掀起革命,室内设计也不例外。AI驱动的工具和技术正在使设计师能够以前所未有的方式创建令人惊叹且个性化的室内空间。本文将探索AI室内设计的优势、新兴趋势以及如何使用它来提升您的家居装饰。 AI室内设计的优势 自动化和效率提高:AI算法可以自动化耗时的任务,如平面布局、家具选择和调色板生成https://heiti.cn/ai/24597.html
4.ai广告装饰图片ai广告装饰素材ai广告装饰模板免费下载六图网为您提供1582871张ai广告装饰设计作品免费下载服务,您还可以找到ai广告装饰图片、ai广告装饰素材、ai广告装饰模板等设计素材,我们为您提供ai广告装饰图片下载,ai广告装饰模板下载、ai广告装饰素材下载等服务!https://m.16pic.com/sucai/7109651.html?from=singlemessage
5.简约装饰画素材图AI图png下载编号660194197046956693设图网提供简约装饰画素材图AI图高速下载,素材为png格式,1237×2500像素,颜色模式为RGB,下载后修改文字和图片,下载更多设计元素请关注设图网。https://www.shetu66.com/muban/660194197046956693
6.鸡蛋花黄色花芯写实AI元素装饰图案素材图片免费下载千库网为你提供鸡蛋花黄色花芯写实AI元素装饰图案图片素材免费下载,你关心的图片有AIGC,AI作品,AI绘画,下载免抠PNG素材就来千库网,图片版权认准千库网图片素材编号13695262!https://588ku.com/ycpng/13695262.html
7.拓印图合辑—动物和植物以及装饰花纹图案AI素材免费下载《拓印图合辑—动物和植物以及装饰花纹图案》,拓印图合辑—动物和植物以及装饰花纹图案素材格式AI,尺寸无限大,大小1.94 MB,此设计图片由设计师“君2012”于2013-06-30 23:07:02上传。https://sucai.redocn.com/shiliangtu/1914685.html
8.30款时尚创意几何风装饰图案抽象艺术AI矢量图形设计素材一组3 种不同风格的几何和半抽象形状:实体、轮廓和纹理。 AI 文件图层经过正确组织和重命名,可帮助您快速导航。您可以轻松编辑每个形状,混合并匹配它们以创建独特的东西。创意的可能性是无限的。 ZIP 文件中包含什么? 30 种实体和轮廓形状(可编辑笔画) https://qmsck.com/archives/62178
9.[AI元素装饰]图片免费下载AI元素装饰素材AI元素装饰模板千图网为您找到174823张AI元素装饰相关素材,千图网还提供AI元素装饰图片,AI元素装饰素材, AI元素装饰模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://m.58pic.com/tupian/AIyuansuzhuangshi.html
10.背景素材装饰画图片ai平面设计模版素材免费下载爱给网提供海量的模板大全资源素材免费下载, 本次作品为ai 格式的背景素材 装饰画图片, 本站编号37450155, 该模板大全素材大小为12m, 该素材已被下载:2次, 更多精彩模板大全素材,尽在爱给网。 浏览本次作品的您可能还对 未分类其他psd素材按形式 感兴趣。 https://www.aigei.com/item/bei_jing_su_cai_90.html
11.儿童房无框装饰画AI矢量图片模板下载编号966725其他儿童房无框装饰画AI矢量图片模板下载原创作品是设计师fish0790上传到我图网,本作品为版权图片,图片编号966725,上传时间为2010-04-14 23:42:33,图片大小为3.14MB,格式为ai,素材尺寸/像素为-高清品质,颜色模式为,本作品为独家原创素材,下载后在本地用 Illustrator CS6(.ai)软https://weili.ooopic.com/weili_966725.html
12.手绘菠萝凤梨手绘菠萝形象菠萝装饰图菠萝ip艺术化菠萝卡通动漫本作品使用AI技术生成,仅供网友学习交流,未经书面授权,请勿作他用。若您的权利被侵害,请联系copyright@nipic.com。 相关搜索 卡通菠萝水果标志 菠萝小元素 卡通菠萝凤梨 几何图形菠萝 水果菠萝插画 菠萝插画元素 菠萝绿底图 菠萝手绘素材 手绘菠萝凤梨 手绘菠萝形象 菠萝装饰图 菠萝ip 艺术化菠萝 卡通动漫菠萝形象设计https://www.nipic.com/show/49050333.html
13.兰花矢量图片免费下载PNG素材编号1pkiw3m6k图精灵为您提供兰花矢量免费下载,本设计作品为兰花矢量,格式为PNG,尺寸为568x568,下载后直接使用,下载兰花矢量图片素材就到图精灵。https://616pic.com/sucai/1pkiw3m6k.html
14.居然设计家AI设计平台居然设计家是全球顶尖的室内在线AI设计平台,为消费者提供权威的室内装修AI设计方案、为专业设计师提供AI设计工具,包含户型图绘制工具、自定义建模工具、装修效果图、全屋漫游图、智能水电路布局、CAD图纸等服务,轻松 DIY 你的家! 居然设计家,让设计变得简单快乐!https://3d.shejijia.com/
15.矢量图案图片矢量图案素材矢量图案PNG大全下载PNGAI 像素:800 x 800格式: AI 矢量图案素材新员工自我介绍 PNGEPS 像素:1500 x 1500格式: EPS 食物矢量图食物图案卡通甜品 PNG 像素:1024 x 814格式: PNG 印花矢量图 T恤图案 PNGAI 像素:721 x 749格式: AI 卡通图案矢量图 十二生肖 装饰图案 https://m.tukuppt.com/sopng/shiliangtuan.html
16.AI图片怎么反转方向?1、打开Adobe Illustrator软件,快捷键“Ctrl+N”新建画板,进入绘画界面。https://www.3d66.com/answers/question_1452511.html
17.ai绘图基本操作教程(如何用ai画图)例如,只需要输入一段文字,AI绘画就可以自动生成一张与之相关的图片。而且,AI绘画还可以帮助绘画行业提高效率和质量,为艺术家们提供更多的创作灵感。克利姆特象征主义风格、金色装饰、几何图案、神秘主题、女性肖像。 达利超现实主义风格、不可思议的图像、扭曲的形状、梦境场景、精细细节。 https://www.jianshu.com/p/b0404f239e3c
18.手机ai看图软件有哪些APP推荐手机ai看图软件有哪些下载豌豆荚手机ai看图软件有哪些榜单为您提供最新手机ai看图软件有哪些大全,这里不仅有手机ai看图软件有哪些安卓版本APP、历史版本应用下载资源,还有类似手机ai看图软件有哪些的应用推荐,欢迎大家前来豌豆荚下载。https://www.wandoujia.com/bangdan/394567/
19.ai图案素材,高清ai图案素材图片/素材/模板,免费ai图案素材图库图品汇是领先中国万千ai图案素材素材图库网中免费设计素材模板网,提供免费ai图案素材素材,模板,高清原创正版图片下载,为您优选原创ai图案素材模板下载,ai图案素材素材。精品原创,作品严格审核,高速免费下载。https://www.88tph.com/so/0061006956fe68487d206750.html
20.数字抽象分形,创意设计,魔术节,装饰照片摄图新视界提供数字抽象分形, 创意设计, 魔术节, 装饰图片下载,另有背景,呈现,充满活力,曲线,图形,设计,空间,装饰,艺术,摘要,纹理,闪耀,能源,图案,技术图片搜索供您浏览下载,每张图片均有版权可放心商用,您正在浏览的图片为0aiaddhttps://xsj.699pic.com/tupian/0aiadd.html
21.美图设计室美图AI PPT 是由美图秀秀推出的一款免费在线 AI 生成 PPT 设计工具。用户只需输入一句话,就可以轻松生成精美的 PPT。无论是行业分析、工作汇报、创意设计方案、企业团建策划还是部门工作总结,美图AI PPT 都能帮你快速制作。https://pidoutv.com/sites/5910.html
22.检测AI生成的“假”照片的15个技巧(MidjourneyDall照片中装饰的重要性 当人工智能生成图像时,背景通常充满线索。通过观察角落、模糊区域和风景,你可能会发现不切实际的元素。 观察架构 生成式 AI 似乎难以处理重复模式。因此,一些建筑物的建筑结构完全扭曲。当谈到著名地标时,简单的 Google 搜索就可以比较建筑物的图像,以发现不一致的地方。 http://www.hangvision.com/2023/12/18/ai/
23.ai效果图室内设计,有手就会打造绝美家居【导读】揭秘AI效果图室内设计的奥秘,精准光线计算,现代简约风格与实用性完美结合,打造高品质生活环境。只需几步,新手也能轻松驾驭,让你的家居设计封神! 现代简约客厅:光影与功能的和谐共生 步入客厅,即刻沉浸于AI设计的现代简约风情。大面积窗户搭配精致白色窗帘,让AI计算的柔和明亮光线满室流淌。天花板隐形照明设计精https://b.kujiale.com/article-detail/3FO4K4W27GGT
24.AI教程!超详细步骤教你学会孟菲斯风格插画优优教程网教程效果图 思路解析 做之前,我们先把海报的制作整体拆分为4个部分,海报标题、插画元素、背景分格、装饰元素,以便能条理清晰地制作出来。 教程步骤 步骤1:新建画布 打开Adobe Illustrator,点击文件->新建文档(Ctrl+N),尺寸1200*1600px,颜色模式RGB,分辨率72ppi,如下: https://uiiiuiii.com/illustrator/1212516581.html
25.艺术装饰设计:AI作图提供独特的艺术装饰图案近年来,随着科技的快速发展,人工智能(AI)在各个领域的应用越来越广泛。其中,艺术装饰设计领域也受益于AI技术的进步,AI作图为艺术装饰提供了独特而精美的图案。 传统的艺术装饰设计过程通常需要大量的时间和精力来完成,而且很容易受限于设计师的创造力和技术水平。然而,有了AI作图技术的引入,这一切都发生了变化。 https://waihh.cn/post/6550.html
26.矢量ai素材矢量ai图片矢量ai素材图片下载觅知网为您找到2295个原创矢量ai素材图片,包括矢量ai图片,矢量ai素材,矢量ai海报,矢量ai背景,矢量ai模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于矢量ai素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPT、视频等设https://www.51miz.com/so-sucai/4289100.html