分享一个鬼~

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。

先看效果:
在这里插入图片描述
上源码:

import GUI from "https://cdn.jsdelivr.net/npm/lil-gui@0.18.2/+esm"const canvasEl = document.querySelector("#ghost");const mouseThreshold = .1;
const devicePixelRatio = Math.min(window.devicePixelRatio, 2);const mouse = {x: .3 * window.innerWidth,y: .3 * window.innerHeight,tX: .25 * window.innerWidth,tY: .45 * window.innerHeight,moving: false,controlsPadding: 0
}const params = {size: .1,tail: {dotsNumber: 25,spring: 1.4,friction: .3,maxGravity: 50,gravity: 25,},smile: 1,mainColor: [.98, .96, .96],borderColor: [.2, .5, .7],isFlatColor: false,
};const textureEl = document.createElement("canvas");
const textureCtx = textureEl.getContext("2d");
const pointerTrail = new Array(params.tail.dotsNumber);
let dotSize = (i) => params.size * window.innerHeight * (1. - .2 * Math.pow(3. * i / params.tail.dotsNumber - 1., 2.));
for (let i = 0; i < params.tail.dotsNumber; i++) {pointerTrail[i] = {x: mouse.x,y: mouse.y,vx: 0,vy: 0,opacity: .04 + .3 * Math.pow(1 - i / params.tail.dotsNumber, 4),bordered: .6 * Math.pow(1 - i / pointerTrail.length, 1),r: dotSize(i)}
}let uniforms;
const gl = initShader();
createControls();window.addEventListener("resize", resizeCanvas);
resizeCanvas();
render();window.addEventListener("mousemove", e => {updateMousePosition(e.clientX, e.clientY);
});
window.addEventListener("touchmove", e => {updateMousePosition(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
});
window.addEventListener("click", e => {updateMousePosition(e.clientX, e.clientY);
});let movingTimer = setTimeout(() => mouse.moving = false, 300);function updateMousePosition(eX, eY) {mouse.moving = true;if (mouse.controlsPadding < 0) {mouse.moving = false;}clearTimeout(movingTimer);movingTimer = setTimeout(() => {mouse.moving = false;}, 300);mouse.tX = eX;const size = params.size * window.innerHeight;eY -= .6 * size;mouse.tY = eY > size ? eY : size;mouse.tY -= mouse.controlsPadding;
}function initShader() {const vsSource = document.getElementById("vertShader").innerHTML;const fsSource = document.getElementById("fragShader").innerHTML;const gl = canvasEl.getContext("webgl") || canvasEl.getContext("experimental-webgl");if (!gl) {alert("WebGL is not supported by your browser.");}function createShader(gl, sourceCode, type) {const shader = gl.createShader(type);gl.shaderSource(shader, sourceCode);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {console.error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;}const vertexShader = createShader(gl, vsSource, gl.VERTEX_SHADER);const fragmentShader = createShader(gl, fsSource, gl.FRAGMENT_SHADER);function createShaderProgram(gl, vertexShader, fragmentShader) {const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(program));return null;}return program;}const shaderProgram = createShaderProgram(gl, vertexShader, fragmentShader);uniforms = getUniforms(shaderProgram);function getUniforms(program) {let uniforms = [];let uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);for (let i = 0; i < uniformCount; i++) {let uniformName = gl.getActiveUniform(program, i).name;uniforms[uniformName] = gl.getUniformLocation(program, uniformName);}return uniforms;}const vertices = new Float32Array([-1., -1., 1., -1., -1., 1., 1., 1.]);const vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);gl.useProgram(shaderProgram);const positionLocation = gl.getAttribLocation(shaderProgram, "a_position");gl.enableVertexAttribArray(positionLocation);gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);const canvasTexture = gl.createTexture();gl.bindTexture(gl.TEXTURE_2D, canvasTexture);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureEl);gl.uniform1i(uniforms.u_texture, 0);gl.uniform1f(uniforms.u_size, params.size);gl.uniform3f(uniforms.u_main_color, params.mainColor[0], params.mainColor[1], params.mainColor[2]);gl.uniform3f(uniforms.u_border_color, params.borderColor[0], params.borderColor[1], params.borderColor[2]);return gl;
}function updateTexture() {textureCtx.fillStyle = 'black';textureCtx.fillRect(0, 0, textureEl.width, textureEl.height);pointerTrail.forEach((p, pIdx) => {if (pIdx === 0) {p.x = mouse.x;p.y = mouse.y;} else {p.vx += (pointerTrail[pIdx - 1].x - p.x) * params.tail.spring;p.vx *= params.tail.friction;p.vy += (pointerTrail[pIdx - 1].y - p.y) * params.tail.spring;p.vy *= params.tail.friction;p.vy += params.tail.gravity;p.x += p.vx;p.y += p.vy;}const grd = textureCtx.createRadialGradient(p.x, p.y, p.r * p.bordered, p.x, p.y, p.r);grd.addColorStop(0, 'rgba(255, 255, 255, ' + p.opacity + ')');grd.addColorStop(1, 'rgba(255, 255, 255, 0)');textureCtx.beginPath();textureCtx.fillStyle = grd;textureCtx.arc(p.x, p.y, p.r, 0, Math.PI * 2);textureCtx.fill();});
}function render() {const currentTime = performance.now();gl.uniform1f(uniforms.u_time, currentTime);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);if (mouse.moving) {params.smile -= .05;params.smile = Math.max(params.smile, -.1);params.tail.gravity -= 10 * params.size;params.tail.gravity = Math.max(params.tail.gravity, 0);} else {params.smile += .01;params.smile = Math.min(params.smile, 1);if (params.tail.gravity > 30 * params.size) {params.tail.gravity = (30 + 9 * (1 + Math.sin(.002 * currentTime))) * params.size;} else {params.tail.gravity += params.size;}}mouse.x += (mouse.tX - mouse.x) * mouseThreshold;mouse.y += (mouse.tY - mouse.y) * mouseThreshold;gl.uniform1f(uniforms.u_smile, params.smile);gl.uniform2f(uniforms.u_pointer, mouse.x / window.innerWidth, 1. - mouse.y / window.innerHeight);gl.uniform2f(uniforms.u_target_pointer, mouse.tX / window.innerWidth, 1. - mouse.tY / window.innerHeight);updateTexture();gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureEl);requestAnimationFrame(render);
}function resizeCanvas() {canvasEl.width = window.innerWidth * devicePixelRatio;canvasEl.height = window.innerHeight * devicePixelRatio;textureEl.width = window.innerWidth;textureEl.height = window.innerHeight;gl.viewport(0, 0, canvasEl.width, canvasEl.height);gl.uniform1f(uniforms.u_ratio, canvasEl.width / canvasEl.height);for (let i = 0; i < params.tail.dotsNumber; i++) {pointerTrail[i].r = dotSize(i);}
}function createControls() {const gui = new GUI();gui.add(params, "size", .02, .3, .01).onChange(v => {for (let i = 0; i < params.tail.dotsNumber; i++) {pointerTrail[i].r = dotSize(i);}gl.uniform1f(uniforms.u_size, params.size);});gui.addColor(params, "mainColor").onChange(v => {gl.uniform3f(uniforms.u_main_color, v[0], v[1], v[2]);});const borderColorControl = gui.addColor(params, "borderColor").onChange(v => {gl.uniform3f(uniforms.u_border_color, v[0], v[1], v[2]);});gui.add(params, "isFlatColor").onFinishChange(v => {borderColorControl.disable(v);gl.uniform1f(uniforms.u_flat_color, v ? 1 : 0);});const controlsEl = document.querySelector(".lil-gui");controlsEl.addEventListener("mouseenter", () => {mouse.controlsPadding = -controlsEl.getBoundingClientRect().height;});controlsEl.addEventListener("mouseleave", () => {mouse.controlsPadding = 0;});
}
<div class="page">WebGL Ghost Cursor
</div><canvas id="ghost"></canvas><script type="x-shader/x-fragment" id="vertShader">precision mediump float;varying vec2 vUv;attribute vec2 a_position;void main() {vUv = .5 * (a_position + 1.);gl_Position = vec4(a_position, 0.0, 1.0);}
</script><script type="x-shader/x-fragment" id="fragShader">precision mediump float;varying vec2 vUv;uniform float u_time;uniform float u_ratio;uniform float u_size;uniform vec2 u_pointer;uniform float u_smile;uniform vec2 u_target_pointer;uniform vec3 u_main_color;uniform vec3 u_border_color;uniform float u_flat_color;uniform sampler2D u_texture;#define TWO_PI 6.28318530718#define PI 3.14159265358979323846vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }float snoise(vec2 v) {const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);vec2 i = floor(v + dot(v, C.yy));vec2 x0 = v - i + dot(i, C.xx);vec2 i1;i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);vec4 x12 = x0.xyxy + C.xxzz;x12.xy -= i1;i = mod289(i);vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);m = m*m;m = m*m;vec3 x = 2.0 * fract(p * C.www) - 1.0;vec3 h = abs(x) - 0.5;vec3 ox = floor(x + 0.5);vec3 a0 = x - ox;m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);vec3 g;g.x = a0.x * x0.x + h.x * x0.y;g.yz = a0.yz * x12.xz + h.yz * x12.yw;return 130.0 * dot(m, g);}vec2 rotate(vec2 v, float angle) {float r_sin = sin(angle);float r_cos = cos(angle);return vec2(v.x * r_cos - v.y * r_sin, v.x * r_sin + v.y * r_cos);}float eyes(vec2 uv) {uv.y -= .5;uv.x *= 1.;uv.y *= .8;uv.x = abs(uv.x);uv.y += u_smile * .3 * pow(uv.x, 1.3);uv.x -= (.6 + .2 * u_smile);float d = clamp(length(uv), 0., 1.);return 1. - pow(d, .08);}float mouth(vec2 uv) {uv.y += 1.5;uv.x *= (.5 + .5 * abs(1. - u_smile));uv.y *= (3. - 2. * abs(1. - u_smile));uv.y -= u_smile * 4. * pow(uv.x, 2.);float d = clamp(length(uv), 0., 1.);return 1. - pow(d, .07);}float face(vec2 uv, float rotation) {uv = rotate(uv, rotation);uv /= (.27 * u_size);float eyes_shape = 10. * eyes(uv);float mouth_shape = 20. * mouth(uv);float col = 0.;col = mix(col, 1., eyes_shape);col = mix(col, 1., mouth_shape);return col;}void main() {vec2 point = u_pointer;point.x *= u_ratio;vec2 uv = vUv;uv.x *= u_ratio;uv -= point;float texture = texture2D(u_texture, vec2(vUv.x, 1. - vUv.y)).r;float shape = texture;float noise = snoise(uv * vec2(.7 / u_size, .6 / u_size) + vec2(0., .0015 * u_time));noise += 1.2;noise *= 2.1;noise += smoothstep(-.8, -.2, (uv.y) / u_size);float face = face(uv, 5. * (u_target_pointer.x - u_pointer.x));shape -= face;shape *= noise;vec3 border = (1. - u_border_color);border.g += .2 * sin(.005 * u_time);border *= .5;vec3 color = u_main_color;color -= (1. - u_flat_color) * border * smoothstep(.0, .01, shape);shape = u_flat_color * smoothstep(.8, 1., shape) + (1. - u_flat_color) * shape;color *= shape;gl_FragColor = vec4(color, shape);}
</script>
body, html {margin: 0;padding: 0;overflow: hidden;background-color: #2C3E50;
}canvas#ghost {position: fixed;top: 0;left: 0;display: block;width: 100%;z-index: 10000;pointer-events: none;
}.page {min-height: 100vh;display: flex;align-items: center;justify-content: center;color: white;text-align: center;font-size: 4vw;text-shadow: 0 0 5px #000000;
}.lil-gui {--width: 300px;max-width: 90%;--widget-height: 20px;font-size: 15px;--input-font-size: 15px;--padding: 10px;--spacing: 10px;--slider-knob-width: 5px;--background-color: rgba(5, 0, 15, .8);--widget-color: rgba(255, 255, 255, .3);--focus-color: rgba(255, 255, 255, .4);--hover-color: rgba(255, 255, 255, .5);--font-family: monospace;z-index: 1;
}

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

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

相关文章

dat文件转换成excel教程

dat文件存在于很多的日用场合&#xff0c;为了更好的去进行办公使用&#xff0c;很多的用户都会将dat文件转换成excel&#xff0c;但是不知道怎么操作的却很多&#xff0c;下面来看看教程吧。 dat文件转换成excel&#xff1a; 1、首先打开excel&#xff0c;然后点击上面的“数…

设计模式—开闭原则

1.背景 伯特兰迈耶一般被认为是最早提出开闭原则这一术语的人&#xff0c;在他1988年发行的《面向对象软件构造》中给出。这一想法认为一旦完成&#xff0c;一个类的实现只应该因错误而修改&#xff0c;新的或者改变的特性应该通过新建不同的类实现。新建的类可以通过继承的方…

Appium+Python+pytest自动化测试框架的实战

本文主要介绍了AppiumPythonpytest自动化测试框架的实战&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下 先简单介绍一下目录&#xff0c;再贴一些代码&#xff0c;代码里有注释 Basic目录下写的是一些公…

Linux-基本指令(1.0)

Linux是一个非常流行的操作的知识&#xff0c;并提供实例帮助读者更好地理解。让我们一起来学习吧&#xff01;系统&#xff0c;也是云计算、大数据、人工智能等领域的重要基础。学习Linux命令是Linux系统管理的基础&#xff0c;也是开发过程中必不可少的技能。本博客将介绍Lin…

212. 单词搜索 II

212. 单词搜索 II Java&#xff1a;搜索全部可能&#xff0c;超出时间限制&#xff01; class Solution {StringBuilder sb;List<String> list;Set<String> set;private void dfs(int x, int y, int m, int n, char[][] board){if (x < 0 || x > m || y <…

leetcode中“辅助栈”类题目和“单调栈”类题目的异同

1 总结 1 栈中元素的特性 2 单调栈存在一次性连续删除多个栈顶的情况&#xff0c;但是普通的栈&#xff0c;一次只pop掉一个栈顶元素 2 LC1209. 删除字符串中的所有相邻重复项 II - 普通辅助栈 class Solution {public String removeDuplicates(String s, int k) {int ns.l…

华为ospf路由协议防环和次优路径中一些难点问题分析

第一种情况是ar3的/0/0/2口和ar4的0/0/2口发布在区域1时&#xff0c;当ar1连接ar2的线断了以后&#xff0c;骨干区域就断了&#xff0c;1.1.1.1到2.2.2.2就断了&#xff0c;ping不通了。但ar5和ar6可以ping通2.2.2.2和1.1.1.1&#xff0c;ar3和ar4不可以ping通2.2.2.2和1.1.1.1…

软件测试 | MySQL 主键自增详解:实现高效标识与数据管理

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

The Bridge:从临床数据到临床应用(预测模型总结)

The Bridge:从临床数据到临床应用&#xff08;预测模型总结&#xff09; 如果说把临床预测模型比作临床数据和临床应用之间的一座“桥梁”&#xff0c;那它应该包括这样几个环节&#xff1a;模型的构建和评价、模型的概率矫正、模型决策阈值的确定和模型的局部再评价。 模型的构…

数据库实验7

实验报告&#xff08;七&#xff09;数据更新 1、实验目的 &#xff08;1&#xff09; 掌握插入、更新和删除表数据的方法 &#xff08;2&#xff09; 掌握更新操作与子查询结合的用法 2、实验预习与准备 &#xff08;1&#xff09; Update&#xff0c;Delete&am…

【LeetCode】每日一题 2023_11_24 统计和小于目标的下标对数目(暴力/双指针)

文章目录 刷题前唠嗑题目&#xff1a;统计和小于目标的下标对数目题目描述代码与解题思路 结语 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 题目&#xff1a;统计和小于目标的下标对数目 题目链接&#xff1a;2824. 统计和小于目标的下标对数…

C/C++ 运用Npcap发送UDP数据包

Npcap 是一个功能强大的开源网络抓包库&#xff0c;它是 WinPcap 的一个分支&#xff0c;并提供了一些增强和改进。特别适用于在 Windows 环境下进行网络流量捕获和分析。除了支持通常的网络抓包功能外&#xff0c;Npcap 还提供了对数据包的拼合与构造&#xff0c;使其成为实现…

【迅搜03】全文检索、文档、倒排索引与分词

全文检索、文档、倒排索引与分词 今天还是概念性的内容&#xff0c;但是这些概念却是整个搜索引擎中最重要的概念。可以说&#xff0c;所有的搜索引擎就是实现了类似的概念才能称之为搜索引擎。而且今天的内容其实都是相关联的&#xff0c;所以不要以为标题上有四个名词就感觉好…

【探索Linux】—— 强大的命令行工具 P.16(进程信号 —— 信号产生 | 信号发送 | 核心转储)

阅读导航 引言一、概念&#xff08;1&#xff09;基本概念&#xff08;2&#xff09;kill -l命令&#xff08;察看系统定义的信号列表&#xff09; 二、产生信号&#xff08;1&#xff09;通过终端按键产生信号-- 信号产生-- Core Dump&#xff08;核心转储&#xff09; &#…

ZC-OFDM模糊函数原理及仿真

文章目录 前言一、ZC 序列二、ZC-OFDM 信号1、OFDM 信号表达式2、模糊函数表达式三、MATLAB 仿真1、MATLAB 核心源码2、仿真结果①、ZC-OFDM 模糊函数②、ZC-OFDM 距离分辨率③、ZC-OFDM 速度分辨率前言 本文进行 ZC-OFDM 的原理讲解及仿真,首先看一下 ZC-OFDM 的模糊函数仿真…

【持续更新】汇总了一份前端领域必看面试题

文章目录 1. 写在前面2. 前端面试汇总2.0.1. 如何提⾼webpack的打包速度2.0.2. 数组去重2.0.3. 前端有几种缓存方式&#xff1f;2.0.4. nextTick描述一下&#xff1f;2.0.5. Webpack层面的优化&#xff1f;2.0.6. 代码层面的优化&#xff1f;2.0.7. Web 技术的优化&#xff1f;…

【C++】PACS医学图像存储和传输系统源码带三维重建

PACS&#xff08;Picture Archiving and Communication System&#xff09;系统作为医学图像的存储和传输平台&#xff0c;为医生和患者提供了便捷高效的诊疗服务支持。近年来&#xff0c;三维重建技术在PACS系统中的应用越来越广泛。 三维后处理功能是临床数字技术中的重要组成…

【Linux】Linux权限管理

目录 一、Linux中权限的概念 二、 Linux下的用户 2.1 用户的类型 2.2 用户创建、切换和删除 2.2.1 useradd或adduser命令创建用户 2.2.2 passwd命令设置用户密码 2.2.3 userdel命令删除用户 2.2.4 su命令切换用户身份等来管理和操作用户 2.3 注意事项 三、权限的管理…

浅析基于物联网的远程抄表系统的设计及应用

安科瑞 华楠 摘 要&#xff1a;本文基于物联网的概念&#xff0c;使用 ZigBee、通用分组无线服务技术两种无线通信技术相结合的方式实现远程抄表并对数据进行存储和管理。此系统设计主要分为硬件方面的设计和软件方面的设计&#xff0c;硬件方面的设计需要完成三个部分的硬件制…

redis运维(二十)redis 的扩展应用 lua(二)

一 redis 的扩展应用 lua redis lua脚本语法 ① 什么是脚本缓存 redis 缓存lua脚本 说明&#xff1a; 重启redis,脚本缓存会丢失 下面讲解 SCRIPT ... 系列 SCRIPT ② LOAD 语法&#xff1a;SCRIPT LOAD lua代码 -->载入一个脚本,只是预加载,不执行思考1&#xff1…