前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
先看效果：
上源码：
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;
}
之表的数据插入及基本查询)
)
