js粒子效果(一)

 效果:

代码:

<!doctype html>
<html>
<head><meta charset="utf-8"><title>HTML5鼠标经过粒子散开动画特效</title><style>html, body {position: absolute;overflow: hidden;margin: 0;padding: 0;width: 100%;height: 100%;background: #fff;touch-action: none;content-zooming: none;}canvas {position: absolute;width: 100%;height: 100%;background: #fff;}</style>
</head>
<body>
<canvas></canvas><script>"use strict";{// particles classclass Particle {constructor(k, i, j) {this.i = i;this.j = j;this.init();this.x = this.x0;this.y = this.y0;this.pos = posArray.subarray(k * 3, k * 3 + 3);this.pointer = pointer;}init() {this.x0 = canvas.width * 0.5 + this.i * canvas.width / 240;this.y0 = canvas.height * 0.5 + this.j * canvas.height / 160;}move() {const dx = this.pointer.x - this.x;const dy = this.pointer.y - this.y;const d = Math.sqrt(dx * dx + dy * dy);const s = 1000 / d;this.x += -s * (dx / d) + (this.x0 - this.x) * 0.02;this.y += -s * (dy / d) + (this.y0 - this.y) * 0.02;// update buffer positionthis.pos[0] = this.x;this.pos[1] = this.y;this.pos[2] = 0.15 * s * s;}}// webGL canvasconst canvas = {init(options) {// set webGL contextthis.elem = document.querySelector("canvas");const gl = (this.gl =this.elem.getContext("webgl", options) ||this.elem.getContext("experimental-webgl", options));if (!gl) return false;// compile shadersconst vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader,`precision highp float;attribute vec3 aPosition;uniform vec2 uResolution;void main() {gl_PointSize = max(2.0, min(30.0, aPosition.z));gl_Position = vec4(( aPosition.x / uResolution.x * 2.0) - 1.0, (-aPosition.y / uResolution.y * 2.0) + 1.0, 0.0,1.0);}`);gl.compileShader(vertexShader);const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader,`precision highp float;void main() {vec2 pc = 2.0 * gl_PointCoord - 1.0;gl_FragColor = vec4(0.2, 0.2, 0.8, 1.0 - dot(pc, pc));}`);gl.compileShader(fragmentShader);const program = (this.program = gl.createProgram());gl.attachShader(this.program, vertexShader);gl.attachShader(this.program, fragmentShader);gl.linkProgram(this.program);gl.useProgram(this.program);// resolutionthis.uResolution = gl.getUniformLocation(this.program, "uResolution");gl.enableVertexAttribArray(this.uResolution);// canvas resizethis.resize();window.addEventListener("resize", () => this.resize(), false);return gl;},resize() {this.width = this.elem.width = this.elem.offsetWidth;this.height = this.elem.height = this.elem.offsetHeight;for (const p of particles) p.init();this.gl.uniform2f(this.uResolution, this.width, this.height);this.gl.viewport(0,0,this.gl.drawingBufferWidth,this.gl.drawingBufferHeight);}};const pointer = {init(canvas) {this.x = 0.1 + canvas.width * 0.5;this.y = canvas.height * 0.5;this.s = 0;["mousemove", "touchstart", "touchmove"].forEach((event, touch) => {document.addEventListener(event,e => {if (touch) {e.preventDefault();this.x = e.targetTouches[0].clientX;this.y = e.targetTouches[0].clientY;} else {this.x = e.clientX;this.y = e.clientY;}},false);});}};// init webGL canvasconst particles = [];const gl = canvas.init({alpha: true,stencil: true,antialias: true,depth: false});// additive blending "lighter"gl.blendFunc(gl.SRC_ALPHA, gl.ONE);gl.enable(gl.BLEND);// init pointerpointer.init(canvas);// init particlesconst nParticles = 240 * 80;const posArray = new Float32Array(nParticles * 3);let k = 0;for (let i = -120; i < 120; i++) {for (let j = -40; j < 40; j++) {particles.push(new Particle(k++, i, j));}}// create position bufferconst aPosition = gl.getAttribLocation(canvas.program, "aPosition");gl.enableVertexAttribArray(aPosition);const positionBuffer = gl.createBuffer();// draw all particlesconst draw = () => {gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);gl.bufferData(gl.ARRAY_BUFFER,posArray,gl.DYNAMIC_DRAW);gl.drawArrays(gl.GL_POINTS, 0, nParticles);}// main animation loopconst run = () => {requestAnimationFrame(run);for (const p of particles) p.move();draw();};requestAnimationFrame(run);}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/167875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DELL MD3600F存储重置管理软件密码

注意&#xff1a;密码清除可能会导致业务秒断&#xff0c;建议非业务时间操作 针对一台控制器操作即可&#xff0c;另一控制器会同步操作 重置后密码为空&#xff01; 需求&#xff1a;重置存储管理软件密码 管理软件中分配物理磁盘时提示输入密码(类似是否了解风险确认操作的提…

io.lettuce.core.RedisCommandExecutionException

io.lettuce.core.RedisCommandExecutionException: ERR invalid password ERR invalid password-CSDN博客 io.lettuce.core.RedisCommandExecutionException /** Copyright 2011-2022 the original author or authors.** Licensed under the Apache License, Version 2.0 (the…

Rust UI开发(一):使用iced构建UI时,如何在界面显示中文字符

注&#xff1a;此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库&#xff0c;用于为rust语言程序构建UI界面。 iced的基本逻辑是&#xff1a; UI交互产生消息message&#xff0c;message传递给后台的update&#xff0c;在这个函数中编写逻辑&#xff0c;然后通过…

2023-11-24--oracle--实验--[Merge 语句]

oracle--实验---Merge语句 1.认知Merge 语句 • merge 语句是 sql 语句的一种。在 SQL server 、 Oracle 数据库中可用&#xff0c; MySQL 中不可用。 • merge 用来合并 update 和 insert 语句。目的&#xff1a;通过 merge 语句&#xff0c;根据一张表&#xff08; 原数据表…

AT360-6T GNSS 单频高精度授时模块特性参数

AT360-6T 模块具有高灵敏度、低功耗、低cost等优势&#xff0c;可以满足电力授时&#xff0c;通信授时等领域的应用。AT360-6T特点&#xff1a; 1.支持北斗二代/北斗三代信号 2.高精度授时 3.可靠性授时 实时高精度授时 AT360-6T 系列模块的授时秒脉冲抖动可以达到 10ns&am…

杰发科技AC7801——ADC软件触发的简单使用

前言 7801资料读起来不是很好理解&#xff0c;大概率是之前MTK的大佬写的。在此以简单的方式进行描述。我们做一个简单的规则组软件触发Demo。因为规则组通道只有一个数据寄存器&#xff0c;因此还需要用上DMA方式搬运数据到内存。 AC7801的ADC简介 7801的ADC是一种 12 位 逐…

洛谷P1157组合的输出 递归:我他又来辣

没没没没没没没错&#xff0c;这是一道简单的递归&#xff08;其实是深搜加回溯) 我不管&#xff0c;我说是递归就是递归。 上题干&#xff1a; 题目描述 排列与组合是常用的数学方法&#xff0c;其中组合就是从 n 个元素中抽出 r个元素&#xff08;不分顺序且 r≤n&#x…

大数据技术之数据安全与网络安全——CMS靶场实训

大数据技术之数据安全与网络安全——CMS靶场实训 在当今数字化时代&#xff0c;大数据技术的迅猛发展带来了前所未有的数据增长&#xff0c;同时也催生了对数据安全和网络安全的更为迫切的需求。本篇博客将聚焦于大数据技术背景下的数据安全与网络安全&#xff0c;并通过CMS&a…

C语言-指针讲解(3)

文章目录 1.字符指针变量1.1 字符指针变量类型是什么1.2字符指针变量的两种使用方法&#xff1a;1.3字符指针笔试题讲解1.3.1 代码解剖 2.数组指针变量2.1 什么是数组指针2.2 数组指针变量是什么&#xff1f;2.2.3 数组指针变量的举例 2.3数组指针和指针数组的区别是什么&#…

npm ERR! node-sass@4.13.0 postinstall: `node scripts/build.js`

npm ERR! node-sass4.13.0 postinstall: node scripts/build.js npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass npm install npm run dev Microsoft Windows [版本 10.0.19045.2965] (c) Microsoft Corporation。保留所有权利。C:\Users\Administr…

4.操作系统常见面试题(2)

3.4 虚拟内存 直接使⽤物理内存会产⽣⼀些问题 1. 内存空间利⽤率的问题&#xff1a;各个进程对内存的使⽤会导致内存碎⽚化&#xff0c;当要⽤ malloc 分配⼀块很⼤的内存空间时&#xff0c;可能会出现虽然有⾜够多的空闲物理内存&#xff0c;却没有⾜够⼤的连续空闲内存这种…

手动实现 git 的 git diff 功能

这是 git diff 后的效果&#xff0c;感觉挺简单的&#xff0c;不就是 比较新旧版本&#xff0c;新增了就用 "" 显示新加一行&#xff0c;删除了就用 "-" 显示删除一行&#xff0c;修改了一行就用 "-"、"" 显示将旧版本中的该行干掉了并…

Modown主题v8.12 安装教程和主题下载

亲测」Modown主题v8.12学习版 上传好主题选择该主题就好了设置 设置好的首页 内容页&#xff1a; WordPress主题Modown和WordPress插件Erphpdown想必正在使用WordPress程序建站的站长都非常熟悉&#xff0c;因为这两款应用在WordPress站长圈子里还是比较知名的&#xff0c;所以…

计算机毕业设计 基于SpringBoot的无人智慧超市管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解+答疑

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

GoLang Filepath.Walk遍历优化

原生标准库在文件量过大时效率和内存均表现不好 1400万文件遍历Filepath.Walk 1400万文件重写直接调用windows api并处理细节 结论 1400万文件遍历时对比 对比条目filepath.walkwindows api并触发黑科技运行时间710秒22秒内存占用480M38M 关键代码 //超级快的文件遍历 fun…

【HuggingFace Transformer库学习笔记】基础组件学习:pipeline

一、Transformer基础知识 pip install transformers datasets evaluate peft accelerate gradio optimum sentencepiece pip install jupyterlab scikit-learn pandas matplotlib tensorboard nltk rouge在host文件里添加途中信息&#xff0c;可以避免运行代码下载模型时候报错…

企业计算机服务器中了360勒索病毒怎么办,360勒索病毒解密文件恢复

计算机技术的不断发展&#xff0c;为企业的生产运营提供了极大便利&#xff0c;不仅提升了办公效率&#xff0c;还促进了企业的发展。企业计算机在日常工作中一定加以防护&#xff0c;减少网络威胁事件的产生&#xff0c;确保企业的生产生产运营。最近&#xff0c;网络上的360后…

微信小程序富文本拓展rich-text

微信小程序富文本插件 功能介绍 支持解析<style>标签中的全局样式支持自定义默认的标签样式支持自动设置标题 若html中存在title标签,将自动把title标签的内容设置到页面的标题上,并在回调bindparse中返回,可以用于转发支持添加加载提示 可以在Parser标签内添加加载提…

动态规划 之 钢条切割

自顶向下递归实现(Recursive top-down implementation) 程序CUT-ROD对等式(14.2)进行了实现&#xff0c;伪代码如下&#xff1a; CUT-ROD(p, n)if n 0return 0q -∞for i 1 to nq max{q, p[i] CUT-ROD(p, n - i)}return q上面解决中重复对一个子结构问题重复求解了&#…

VR全景展示,“超前点播”打开娱乐行业线上营销门户

如今&#xff0c;人们的生活水平正在逐步提高&#xff0c;这种提高不仅仅是体现在衣食住行上&#xff0c;更多方面是体现在大众的娱乐活动上。我们可以看到&#xff0c;相比于过去娱乐种类的匮乏&#xff0c;现如今&#xff0c;各种娱乐活动可谓是百家争鸣&#xff0c;例如温泉…