动画交互应用——神秘力量

本文介绍了使用Processing开发的动画交互应用"神秘力量",该应用通过橡皮绳、跷跷板、滑滑梯三个场景模拟物理系统,提供细腻交互体验。用户可控制"蛋蛋"在场景中运动,模拟真实物理现象,如重力、弹力、摩擦力等。应用融合了故事背景,以寓言方式探讨生活中的诱惑。关键技术和亮点包括随机游走、力的模拟、向量运用以及粒子系统。
摘要由CSDN通过智能技术生成

一 前言

在这里插入图片描述
图片来源公众号“住在疯人院”,链接:https://mp.weixin.qq.com/s?__biz=MzUxOTg4ODI4NA==&mid=2247487501&idx=1&sn=aea4f6f06e3115689bbeef039b6af7ea&chksm=f9f39cfece8415e8be76c5483ec1a826a49c75d0316b6418a81e831746de8323ea3c46b711e5&mpshare=1&scene=23&srcid=#rd

言归正传,下面要介绍的是一个名为“神秘力量”的动画交互系统,系统使用processing开发,旨在为用户提供细腻生动的交互体验。
系统界面截图
//系统界面截图

二 应用背景

正如上述漫画所言,我们的生活似乎总是被一种“神秘力量”控制着,“神秘力量”支配着我们拿起手机,并悄悄偷走我们的时间。而本文要介绍的《神秘力量》讲述了这样一个故事:故事的主角“蛋蛋”总是在人们面前晃来晃去的,不管对它做什么,它最终都会回到属于它自己的状态,游离在大家面前。自然界的一切真实力量都无法控制它,任何人都无法摆脱它的存在。似乎有一种神秘的力量,把它拴在每一个人面前,任何人都摆脱不了。
故事中“蛋蛋”的生性顽固与神秘的力量,暗喻现实生活中人们意志力薄弱,不是对“神秘力量”束手无策,而是在诱惑面前束手就擒。

三 主要功能及用法

本应用共分为三个章节,分别模拟三种物理系统,用户通过鼠标操作控制主角“蛋蛋”在物理系统中运动,但“蛋蛋”最终都会回到它原本的运动状态(随机游走)。
应用具有隐喻生活中的诱惑的现实意义,通过简单而又逼真的物理系统模拟让用户获得细腻的交互体验,同时引发对现实的思考。
在这里插入图片描述

场景一——一根橡皮绳

在这里插入图片描述
第一章以一根橡皮绳为道具,模拟橡皮绳对物体的拉力作用。用户点击屏幕即可用橡皮绳牵动“蛋蛋”,拖拽鼠标可以通过橡皮绳控制其移动。“蛋蛋”碰到地面及左右墙壁都会反弹,最终在重力和阻力作用下停止跳动,回到自由游走的状态。

场景二——一个跷跷板

在这里插入图片描述
第二章的道具为一个跷跷板,模拟木板以不同速度上升时对物体的弹力作用。跷跷板初始状态为平衡状态,用户点击鼠标后“蛋蛋”移动到跷跷板的左端,此时用户长按鼠标可以给跷跷板右端加力,使“蛋蛋”被弹飞。用户按鼠标持续时间越长,跷跷板右端的力越大,“蛋蛋”就会被弹得越远。此章节中“蛋蛋”碰到地面及左右墙壁同时会被施加弹力,同时受到重力及空气阻力,最终回到自由游走状态。

场景三——一座滑滑梯

在这里插入图片描述
第三章的道具为一座滑梯,模拟物体从不同粗糙程度的滑梯上滑下的过程。用户点击鼠标可使“蛋蛋”移动到滑梯上端,此时长按鼠标可增加滑梯与“蛋蛋”之间的摩擦力,释放鼠标后“蛋蛋”滑下。用户按鼠标的时间越长,滑梯与“蛋蛋”之间的摩擦力就会越大,“蛋蛋”就会下滑得越慢。最终“蛋蛋”同样会在空气阻力的作用下回归自由游走状态。
巴拉巴拉吧
此外,用户点击左右按钮进行三个场景之间的切换。三个场景之间无缝连接,场景的转换不会改变“蛋蛋”当前的运动状态。

四 应用创意

本应用的创意点主要体现在以下几个方面:

1 视觉独特的故事背景

本应用的故事背景看似无厘头,却是对现实生活中某个真实存在的一个侧面(很多人经受不住生活中的小诱惑)加以修饰与包装而成的。背景故事以奇特的切入点吸引用户兴趣,而整个故事又很好的融入进整个应用系统中,让玩家在获得交互体验的同时获得对生活的思考。

2 真实的物理系统模拟

本应用的三个章节分别模拟橡皮绳、跷跷板、滑梯三个物理系统,虽然简单,却力求达到最真实的模拟效果,给用户以最真实而又细腻的交互体验。

3 简单的画风及操作

本应用的三个章节总共只出现了主角“蛋蛋”、跷跷板和滑梯三个物体,且都由2D形状组合而成,结构简洁,画风简单明了。应用中的所有操作都可由鼠标完成,用户只需点击鼠标、长按鼠标、拖动鼠标便可获得细腻的交互体验和轻松的娱乐体验。

五 关键技术

1 随机游走

系统中角色在开始和用户操作结束后总是保持自由游走状态。其中“蛋蛋”游走的方向和在同一方向上持续的时间(路程)都是随机的,为了产生比较平滑的随机效果,这里用了Perlin噪声。首先设置了一个时间变量(t),每次“蛋蛋”位置改变后更新t的值,根据processing的库函数noise(t)获得一个随机量tempx,然后将tempx在整个屏幕上做位置映射,更新“蛋蛋”的位置。
具体代码如下:

float t;
void walk(){
   //随机游走
    float n = noise(t);
    float tempx=map(n,0,1,0,width);
    if(pos.x-tempx>=2)//防止瞬移
      pos.x--;
    if(tempx-pos.x>=2)
      pos.x++;
    if(mousePressed == false&&pos.y==height - 70*scale-landh&&abs(speed.y)<0.5&&abs(pos.x-tempx)<2){
   
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值