<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>模拟物理重力弹性HTML5特效</title>
<style type="text/css">
* {
margin: 0;
}
body {
font-family: Helvetica, sans-serif;
background:#1f1f1f;
}
#info {
font-size: 22px;
color: #ccc;
position: absolute;
z-index: -1;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
animation: fadeOut 1s forwards 3s;
}
#info > div {
margin-top: -3em;
}
#info > div > div {
margin-bottom: 0.4em;
}
code {
color: #bbb;
background: rgba(0, 0, 0, 0.07);
padding: 0em 0.2em;
}
</style>
</head>
<body>
<div id="info">
<div>
<div>用鼠标拖动。</div>
<div>按键盘<code>1</code> 慢动作。</div>
<div>按键盘<code>2</code> 对于零重力。</div>
<div>按键盘<code>3</code> 用于反重力。</div>
</div>
</div>
<canvas></canvas>
<script type="text/javascript">
const SPACING = 14;
const ITERATIONS = 14;
const MOUSE = SPACING * 5;
let GRAVITY = 0.05;
let SPEED = 1;
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const mouse = {
x: 0,
y: 0,
px: 0,
py: 0,
points: [],
};
const clamp = function (val, min, max) {
return Math.min(Math.max(val, min), max);
};
class Vector {
constructor (x = 0, y = 0) {
this.x = x;
this.y = y;
}
get length () {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
add (v) {
const p = v instanceof Vector;
this.x += p ? v.x : v;
this.y += p ? v.y : v;
return this;
}
sub (v) {
const p = v instanceof Vector;
this.x -= p ? v.x : v;
this.y -= p ? v.y : v;
return this;
}
mul (v) {
const p = v instanceof Vector;
this.x *= p ? v.x : v;
this.y *= p ? v.y : v;
return this;
}
scale (x) {
this.x *= x;
this.y *= x;
return this;
}
normalize () {
const len = this.length;
if (len > 0) {
this.x /= len;
this.y /= len;
}
return this;
}
distance (v) {
const x = this.x - v.x;
const y = this.y - v.y;
return Math.sqrt(x * x + y * y);
}
static add (v1, v2) {
const v = v2 instanceof Vector;
return new Vector(
v1.x + (v ? v2.x : v2),
v1.y + (v ? v2.y : v2)
);
}
static sub (v1, v2) {
const v = v2 instanceof Vector;
return new Vector(
v1.x - (v ? v2.x : v2),
v1.y - (v ? v2.y : v2)
);
}
static mul (v1, v2) {
const v = v2 instanceof Vector;
return new Vector(
v1.x * (v ? v2.x : v2),
v1.y * (v ? v2.y : v2)
);
}
static dot (v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
}
const reactor = function (a, b, p) {
const refA = Vector.add(a.toWorld(p), a.pos);
const refB = Vector.add(b.toWorld(Vector.mul(p, -1)), b.pos);
const diff = Vector.sub(refB, refA);
const mid = Vector.add(refA, Vector.mul(diff, 0.5));
const t = clamp(b.p - a.p, -Math.PI, Math.PI);
a.torque += t;
b.torque -= t;
const mfc = 0.04;
const tfc = 0.02;
const mf = Vector.mul(diff, mfc);
const tf = Vector.mul(diff, tfc);
const dm = Vector.sub(b.vat(mid), a.vat(mid));
mf.add(Vector.mul(dm, mfc));
tf.add(Vector.mul(dm, tfc));
a.addForce(mf, mid);
b.addForce(Vector.mul(mf, -1), mid);
a.addTorque(tf, mid);
b.addTorque(Vector.mul(tf, -1), mid);
};
const allContraints = [];
class Point {
constructor (pos, square) {
this.pos = pos;
this.velocity = new Vector();
this.force = new Vector();
this.p = 0;
this.w = 0;
this.torque = 0;
this.square = square;
}
update () {
this.velocity.add(Vector.mul(this.force, SPEED));
this.force = new Vector(0, GRAVITY / ITERATIONS);
this.pos.add(Vector.mul(this.velocity, SPEED));
const qPI = Math.PI / 4;
this.w += this.torque / ((SPACING / 2) ** 2 / 2);
this.w = clamp(this.w * SPEED, -qPI, qPI);
this.p += this.w;
this.torque = 0;
mouse.points.includes(this) &&
this.moveTo(mouse, this.mouseDiff);
}
toWorld (input) {
return new Vector(
-input.y * Math.sin(this.p) + input.x * Math.cos(this.p),
input.y * Math.cos(this.p) + input.x * Math.sin(this.p)
);
}
vat (R) {
const dr = Vector.sub(R, this.pos);
const vdr = this.w * dr.length;
dr.normalize();
return Vector.add(
this.velocity,
new Vector(vdr * -dr.y, vdr * dr.x)
);
}
addForce (F) {
this.force.add(F);
}
addTorque (F, R) {
const arm = Vector.sub(R, this.pos);
const torque = F.y * arm.x - F.x * arm.y;
this.torque += torque;
}
moveTo (v, offset) {
const targetX = v.x + offset.x;
const targetY = v.y + offset.y;
const strength = 0.001;
this.velocity.x += (targetX - this.pos.x) * strength * SPEED;
this.velocity.y += (targetY - this.pos.y) * strength * SPEED;
this.velocity.mul(0.99);
}
}
class Square {
constructor (width, height, spacing, hue) {
this.width = width;
this.height = height;
this.spacing = spacing;
this.hue = hue;
const yOff = 200 + Math.random() * (canvas.height - 300 - height * SPACING);
const xOff = 10 + Math.random() * (canvas.width - 10 - width * SPACING);
const w = -0.5 + Math.random();
this.points = Array(width * height).fill(0).map((_, i) => {
const x = i % width;
const y = ~~(i / width);
const p = new Point(
new Vector(
xOff + x * spacing,
canvas.height - yOff + y * spacing,
),
this,
);
p.w = w;
return p;
});
this.points.forEach((point, i) => {
const x = i % width;
const y = ~~(i / width);
if (x > 0) {
allContraints.push([
this.points[i - 1],
point,
new Vector(SPACING / 2, 0)
]);
}
if (y > 0) {
allContraints.push([
this.points[i - width],
point,
new Vector(0, SPACING / 2)
]);
}
});
this.drawPoints = [];
for (let i = 0; i < width; i++) {
this.drawPoints.push(this.points[i].pos);
}
for (let i = 0; i < height; i++) {
this.drawPoints.push(this.points[(width - 1) + width * i].pos);
}
for (let i = width - 1; i > -1; i--) {
this.drawPoints.push(this.points[(height - 1) * width + i].pos);
}
for (let i = height - 1; i > -1; i--) {
this.drawPoints.push(this.points[(width ) * i].pos);
}
}
draw (ctx) {
const { drawPoints, hue } = this;
ctx.lineWidth = 2;
ctx.fillStyle = `hsla(${hue}, 90%, 80%, 0.8)`;
ctx.strokeStyle = `hsla(${hue}, 90%, 70%, 0.8)`;
ctx.beginPath();
ctx.moveTo(drawPoints[0].x, drawPoints[0].y);
drawPoints.forEach((point, i) =>{
i && ctx.lineTo(point.x, point.y);
});
ctx.lineTo(drawPoints[0].x, drawPoints[0].y);
ctx.stroke();
ctx.fill();
}
}
const hue = Math.random() * 360;
const squares = Array(4).fill(0).map((_, i) => {
const size = 8 + i * 2;
return new Square(
size,
size,
SPACING,
hue + i * 20,
);
});
const allPoints = [].concat(...squares.map(({ points }) => points));
const update = function () {
const { width, height } = canvas;
ctx.clearRect(0, 0, width, height);
let i = ITERATIONS;
while (i--) {
allContraints.forEach((con, i) => {
reactor(...con, i);
});
allPoints.forEach((point, i) => {
const { square
html5模拟物理重力和弹力动画效果.rar （1个子文件） 
hjiaoben139 
index.html 10KB资源评论
码云笔记
- 粉丝: 3w+
最新资源
- 网络安全考试题.doc
- 广州互联网产业发展现状评估及进一步发展建议.docx
- 任务驱动教学法在《计算机应用基础》实践课程教学的应用.docx
- 基于机器学习的广告推荐系统点击率与转化率预估研究
- 计算机应用基础简答题.doc
- 开源机器人学（Open Robotics）：助力机器人学习者轻松入门的开源项目 开源机器人学（Open Robotics）项目：为机器人学习者入门提供支持的开源平台 助力机器人学习者入门的开源项目
- 微机原理、汇编于接口技术课件.ppt
- 中国第三方网络支付的发展与监管.docx
- (源码)基于Nginx TCP负载均衡和Redis发布订阅的集群聊天服务器.zip
- 初探广播电视工程中计算机技术的有效应用.docx
- 最专业、最详细、最牛逼CAD标注样式设置.docx
- 基于中学计算机基础教学的几点研究.docx
- PLC办公楼自动门课程方案设计书.doc
- 互联网+环境下大学计算机基础课程教学革新分析及解读.docx
- 物联网异构系统综合管理平台的设计开发.docx
- 基于水箱液位控制系统的wincc与matlab的opc通讯系统方案设计书.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
