如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合

techbrood 发表于 2016-05-21 15:17:47

标签: canvas, html5, 下雨, 窗户, 教程

- +

Part1中我们已经建立了绘制环境、背景和雨点对象。本文我们将接着讲述更为吸引人的动画部分。

重力掉落

我们先复习下自由落体的基本公式:

速度-时间公式:Δv=gΔt
位移-时间公式;h=gt^2/2
速度-位移公式:v^2=2gh

重力只作用于物体的y轴方向,一个处于自由落体状态的雨滴,不计空气阻力和风力的时候,其运动将符合上面的规律。

力作用于物体上时都会产生加速度(重力产生重力加速度g=9.8),因此我们需要给雨滴y轴的速度分量(vy)添加一个时间增量。

我们假定每秒帧数(fps)为30,那么每次刷新的时间间隔为1/30秒,乘以g,速度增量约为0.33的样子。但是,雨滴在窗户上的情况要复杂得多,因为其还受到窗户的阻力,下落的形式可能会包含滚动和滑动,其摩擦力的计算方法也不相同,另外窗户上的灰尘导致各个点的阻力并不完全相同,总体上我们可以认为越小的雨滴受窗户的影响越大(因其接触面积相对占比大更容易被吸附住),因此我们还需要给vy添加一个和雨滴半径成反比的随机摩擦系数,这样就造成一个时快时慢乃至有些雨点会停留在窗户上的效果。

在有风的环境中(通常是有的),除了y方向的速度,我们还要考虑x方向的速度,总的速度为:

v = Math.sqrt(vx*vx, vy*vy);

当然在画布上,我们还是按照x,y轴分开来计算偏移的。

RainyView.prototype.gravity = function(drop) {
  this.g = 9.8;
  this.fps = 30;
  var r_base = 3;
  if (drop.yspeed) {
    friction = this.base_friction + Math.ceil(Math.random() * this.g) / (Math.floor(drop.r) - r_base + 1);
    drop.yspeed += Math.floor(this.g - friction)/this.fps; 
    if(drop.yspeed < 0) drop.yspeed = 0;
    drop.xspeed += Math.floor(drop.r);
  } else {
    drop.yspeed = 0.01; //给定一个启动速度
    drop.xspeed = 0;
  }

  drop.y += drop.yspeed;
  drop.draw();
  return false;
};

你还可以给上面代码中的速度增量乘上一个系数来调整实际的动画效果,不需要过度模拟真实情况。

碰撞融合

要检测粒子(雨滴)之间的碰撞情况,数学上来讲就是计算两个雨滴中心点的距离,如果小于等于半径之和,则两个水滴已经碰在了一起,将开始融合。但是我们不能遍历所有的粒子,这样的计算效率是很差的。我们实际上只需要计算相邻粒子之间的距离,为此一个常用的方法是建立和画布对应的相邻矩阵,每个粒子占据矩阵中的一个位置,其相邻粒子最多有4个。我们每次移动雨滴粒子的时候,计算一下和相邻粒子的距离,决定是否进行融合。

RainyView.prototype.collision = function(drop, collisions) {
	var item = collisions;
	var drop2;
	// 计算矩阵(链表结构)中相邻粒子的距离,取出第一个需要融合的雨滴粒子
	while (item != null) {
		var p = item.drop;
		var radiusSum = drop.r + p.r;
		var dx = drop.x - p.x;
		var dy = drop.y - p.y;
		if(Math.abs(dx) < radiusSum) {
			if(Math.abs(dy) < radiusSum) {
				if (Math.sqrt(Math.pow(drop.x - p.x, 2) + Math.pow(drop.y - p.y, 2)) < (drop.r + p.r)) {
					drop2 = p;
					break;
				}
			}
		}
		item = item.next;
	}

	if (!drop2) {
		return;
	}

	// 移除高一点的雨滴,融合到低一点的雨滴中
	var higher,
		lower;
	if (drop.y > drop2.y) {
		higher = drop;
		lower = drop2;
	} else {
		higher = drop2;
		lower = drop;
	}

	this.clearDrop(lower);
	// force stopping the second drop
	this.clearDrop(higher, true);
	this.matrix.remove(higher);
	lower.r = Math.sqrt(higher.r*higher.r + lower.r*lower.r);//合并雨滴
	lower.draw();

	lower.collided = true;
};

解决了重力掉落和碰撞检测后,我们需要实现一个“下雨”的动画主函数,这个函数用来驱动每个雨滴的运动:

RainyView.prototype.animate = function() {
	var dropsClone = this.drops.slice();
	var newDrops = [];
	for (var i = 0; i < dropsClone.length; ++i) {
		if (dropsClone[i].move()) {//该函数定义参见Part1
			newDrops.push(dropsClone[i]);
		}
	}
	this.drops = newDrops;
	window.requestAnimFrame(this.animateDrops.bind(this));
};

这样基本上就完成了整个的下雨动画,为了更加逼真,你还可以添加雨滴的滑落轨迹(水渍效果)和雨滴的反射效果(参考CSS3泡沫一文中的方法),还有一些实现细节,这里不做描述。

最终的效果看起来会是下面这样:

blob.png

你可以自己在线试试

后续我们计划讲解如何使用WebGL来实现3D版本的雨滴效果。

possitive(14) views21416 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 使用HTML5 Canvas实现的界面元素截屏功能

    如果网站出现问题,常常需要截图来提交反馈,这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • 如何使用CSS3实现一个3D商品标签

    使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 更多...