论坛 › 动画音画 › 《不知是雨还是泪》蒋婴

醉美水芙蓉 发表于 2023-3-3 22:12

醉美水芙蓉 发表于 2023-3-3 22:14

醉美水芙蓉 发表于 2023-3-3 22:16

醉美水芙蓉 发表于 2023-3-3 22:19

起个网名好难 发表于 2023-3-3 23:23

本帖最后由 起个网名好难 于 2023-3-5 09:55 编辑 <br /><br /><!--
<div style="background-color:#000;   margin: auto;position:relative; width:400px;height:300px;overflow: hidden;">
<canvas id="canvas" style="width:700px;height:300px;margin-left:-150px;"></canvas>
</div>
<script>
var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Initialize the GL context
var gl = canvas.getContext('webgl');
if(!gl){
console.error("Unable to initialize WebGL.");
}

//Time
var time = 0.0;

//************** Shader sources **************

var vertexSource = `
attribute vec2 position;
void main() {
        gl_Position = vec4(position, 0.0, 1.0);
}
`;

var fragmentSource = `
precision highp float;

uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);

uniform float time;

#define POINT_COUNT 8

vec2 points;
const float speed = -0.5;
const float len = 0.25;
float intensity = 1.3;
float radius = 0.008;

//https://www.shadertoy.com/view/MlKcDD
//Signed distance to a quadratic bezier
float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){   
        vec2 a = B - A;
        vec2 b = A - 2.0*B + C;
        vec2 c = a * 2.0;
        vec2 d = A - pos;

        float kk = 1.0 / dot(b,b);
        float kx = kk * dot(a,b);
        float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;
        float kz = kk * dot(d,a);      

        float res = 0.0;

        float p = ky - kx*kx;
        float p3 = p*p*p;
        float q = kx*(2.0*kx*kx - 3.0*ky) + kz;
        float h = q*q + 4.0*p3;

        if(h >= 0.0){
                h = sqrt(h);
                vec2 x = (vec2(h, -h) - q) / 2.0;
                vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));
                float t = uv.x + uv.y - kx;
                t = clamp( t, 0.0, 1.0 );

                // 1 root
                vec2 qos = d + (c + b*t)*t;
                res = length(qos);
        }else{
                float z = sqrt(-p);
                float v = acos( q/(p*z*2.0) ) / 3.0;
                float m = cos(v);
                float n = sin(v)*1.732050808;
                vec3 t = vec3(m + m, -n - m, n - m) * z - kx;
                t = clamp( t, 0.0, 1.0 );

                // 3 roots
                vec2 qos = d + (c + b*t.x)*t.x;
                float dis = dot(qos,qos);
      
                res = dis;

                qos = d + (c + b*t.y)*t.y;
                dis = dot(qos,qos);
                res = min(res,dis);
               
                qos = d + (c + b*t.z)*t.z;
                dis = dot(qos,qos);
                res = min(res,dis);

                res = sqrt( res );
        }
   
        return res;
}


//http://mathworld.wolfram.com/HeartCurve.html
vec2 getHeartPosition(float t){
        return vec2(16.0 * sin(t) * sin(t) * sin(t),
                                                        -(13.0 * cos(t) - 5.0 * cos(2.0*t)
                                                        - 2.0 * cos(3.0*t) - cos(4.0*t)));
}

//https://www.shadertoy.com/view/3s3GDn
float getGlow(float dist, float radius, float intensity){
        return pow(radius/dist, intensity);
}

float getSegment(float t, vec2 pos, float offset, float scale){
        for(int i = 0; i < POINT_COUNT; i++){
                points = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);
        }
   
        vec2 c = (points + points) / 2.0;
        vec2 c_prev;
        float dist = 10000.0;
   
        for(int i = 0; i < POINT_COUNT-1; i++){
                //https://tinyurl.com/y2htbwkm
                c_prev = c;
                c = (points + points) / 2.0;
                dist = min(dist, sdBezier(pos, scale * c_prev, scale * points, scale * c));
        }
        return max(0.0, dist);
}

void main(){
        vec2 uv = gl_FragCoord.xy/resolution.xy;
        float widthHeightRatio = resolution.x/resolution.y;
        vec2 centre = vec2(0.5, 0.5);
        vec2 pos = centre - uv;
        pos.y /= widthHeightRatio;
        //Shift upwards to centre heart
        pos.y += 0.02;
        float scale = 0.000015 * height;
       
        float t = time;
   
        //Get first segment
float dist = getSegment(t, pos, 0.0, scale);
float glow = getGlow(dist, radius, intensity);

vec3 col = vec3(0.0);

        //White core
col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
//Pink glow
col += glow * vec3(1.0,0.05,0.3);

//Get second segment
dist = getSegment(t, pos, 3.4, scale);
glow = getGlow(dist, radius, intensity);

//White core
col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
//Blue glow
col += glow * vec3(0.1,0.4,1.0);
      
        //Tone mapping
        col = 1.0 - exp(-col);

        //Gamma
        col = pow(col, vec3(0.4545));

        //Output to screen
        gl_FragColor = vec4(col,1.0);
}
`;

//************** Utility functions **************

window.addEventListener('resize', onWindowResize, false);

function onWindowResize(){
canvas.width= window.innerWidth;
canvas.height = window.innerHeight;
        gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);
}


//Compile shader and combine with source
function compileShader(shaderSource, shaderType){
var shader = gl.createShader(shaderType);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
        throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
}
return shader;
}

//From https://codepen.io/jlfwong/pen/GqmroZ
//Utility to complain loudly if we fail to find the attribute/uniform
function getAttribLocation(program, name) {
var attributeLocation = gl.getAttribLocation(program, name);
if (attributeLocation === -1) {
        throw 'Cannot find attribute ' + name + '.';
}
return attributeLocation;
}

function getUniformLocation(program, name) {
var attributeLocation = gl.getUniformLocation(program, name);
if (attributeLocation === -1) {
        throw 'Cannot find uniform ' + name + '.';
}
return attributeLocation;
}

//************** Create shaders **************

//Create vertex and fragment shaders
var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);

//Create shader programs
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

//Set up rectangle covering entire canvas
var vertexData = new Float32Array([
-1.0,1.0,         // top left
-1.0, -1.0,         // bottom left
   1.0,1.0,         // top right
   1.0, -1.0,         // bottom right
]);

//Create vertex buffer
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

// Layout of our data in the vertex buffer
var positionHandle = getAttribLocation(program, 'position');

gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle,
2,                                 // position is a vec2 (2 values per component)
gl.FLOAT, // each component is a float
false,                 // don't normalize values
2 * 4,                 // two 4 byte float components per vertex (32 bit float is 4 bytes)
0                                 // how many bytes inside the buffer to start from
);

//Set uniform handle
var timeHandle = getUniformLocation(program, 'time');
var widthHandle = getUniformLocation(program, 'width');
var heightHandle = getUniformLocation(program, 'height');

gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);

var lastFrame = Date.now();
var thisFrame;

function draw(){
       
//Update time
        thisFrame = Date.now();
time += (thisFrame - lastFrame)/1000;       
        lastFrame = thisFrame;

        //Send uniforms to program
gl.uniform1f(timeHandle, time);
//Draw a triangle strip connecting vertices 0-4
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

requestAnimationFrame(draw);
}

draw();
</script>
-->

醉美水芙蓉 发表于 2023-3-3 23:25

起个网名好难 发表于 2023-3-3 23:45

本帖最后由 起个网名好难 于 2023-3-5 09:56 编辑 <br /><br />醉美水芙蓉 发表于 2023-3-3 22:19
http://www.jqueryfuns.com/resource/view/5608这个特效漂亮！
<!--
<style>
#chd{display:grid;overflow:hidden;margin:auto;height:30vmin;width:30vmin;background:#262626;}.dot{--f:calc(var(--i)/var(--n-lyrs));--p:calc(var(--n-reps)*var(--n-dots));--d:calc(1.5em + var(--k)*.3125em);--r:calc(.65*var(--d)*var(--tan));grid-area:1/1;place-self:center;padding:var(--r);border-radius:50%;--pos:rotate(calc(var(--j)/var(--p)*1turn))
        translate(var(--d));transform:scale(0.5) var(--pos);background:hsl(calc(var(--f)*360 - 35),85%,65%);mix-blend-mode:screen;animation:a 1.5s ease-in-out calc((6*var(--f) + 2*var(--j)/var(--n-dots) - 19)*1.5s) infinite alternate;}@keyframes a{to{transform:var(--pos);}}</style>



<div id="chd" style="--n-lyrs: 12; --n-reps: 6; --n-dots: 18; --tan: 0.029">
<style>.dot:nth-of-type(n + 1) { --i: 0; --k: 1 }.dot:nth-of-type(n + 109) { --i: 1; --k: 3.226567036888505 }.dot:nth-of-type(n + 217) { --i: 2; --k: 6.402283783271265 }.dot:nth-of-type(n + 325) { --i: 3; --k: 10.410734843535469 }.dot:nth-of-type(n + 433) { --i: 4; --k: 15.179564340952219 }.dot:nth-of-type(n + 541) { --i: 5; --k: 20.657397815908894 }.dot:nth-of-type(n + 649) { --i: 6; --k: 26.804992350496832 }.dot:nth-of-type(n + 757) { --i: 7; --k: 33.59093387593815 }.dot:nth-of-type(n + 865) { --i: 8; --k: 40.989237641538224 }.dot:nth-of-type(n + 973) { --i: 9; --k: 48.97788193684461 }.dot:nth-of-type(n + 1081) { --i: 10; --k: 57.53785108833033 }.dot:nth-of-type(n + 1189) { --i: 11; --k: 66.65247886070424 }.dot:nth-of-type(108n + 1) { --j: 0 }.dot:nth-of-type(108n + 2) { --j: 1 }.dot:nth-of-type(108n + 3) { --j: 2 }.dot:nth-of-type(108n + 4) { --j: 3 }.dot:nth-of-type(108n + 5) { --j: 4 }.dot:nth-of-type(108n + 6) { --j: 5 }.dot:nth-of-type(108n + 7) { --j: 6 }.dot:nth-of-type(108n + 8) { --j: 7 }.dot:nth-of-type(108n + 9) { --j: 8 }.dot:nth-of-type(108n + 10) { --j: 9 }.dot:nth-of-type(108n + 11) { --j: 10 }.dot:nth-of-type(108n + 12) { --j: 11 }.dot:nth-of-type(108n + 13) { --j: 12 }.dot:nth-of-type(108n + 14) { --j: 13 }.dot:nth-of-type(108n + 15) { --j: 14 }.dot:nth-of-type(108n + 16) { --j: 15 }.dot:nth-of-type(108n + 17) { --j: 16 }.dot:nth-of-type(108n + 18) { --j: 17 }.dot:nth-of-type(108n + 19) { --j: 18 }.dot:nth-of-type(108n + 20) { --j: 19 }.dot:nth-of-type(108n + 21) { --j: 20 }.dot:nth-of-type(108n + 22) { --j: 21 }.dot:nth-of-type(108n + 23) { --j: 22 }.dot:nth-of-type(108n + 24) { --j: 23 }.dot:nth-of-type(108n + 25) { --j: 24 }.dot:nth-of-type(108n + 26) { --j: 25 }.dot:nth-of-type(108n + 27) { --j: 26 }.dot:nth-of-type(108n + 28) { --j: 27 }.dot:nth-of-type(108n + 29) { --j: 28 }.dot:nth-of-type(108n + 30) { --j: 29 }.dot:nth-of-type(108n + 31) { --j: 30 }.dot:nth-of-type(108n + 32) { --j: 31 }.dot:nth-of-type(108n + 33) { --j: 32 }.dot:nth-of-type(108n + 34) { --j: 33 }.dot:nth-of-type(108n + 35) { --j: 34 }.dot:nth-of-type(108n + 36) { --j: 35 }.dot:nth-of-type(108n + 37) { --j: 36 }.dot:nth-of-type(108n + 38) { --j: 37 }.dot:nth-of-type(108n + 39) { --j: 38 }.dot:nth-of-type(108n + 40) { --j: 39 }.dot:nth-of-type(108n + 41) { --j: 40 }.dot:nth-of-type(108n + 42) { --j: 41 }.dot:nth-of-type(108n + 43) { --j: 42 }.dot:nth-of-type(108n + 44) { --j: 43 }.dot:nth-of-type(108n + 45) { --j: 44 }.dot:nth-of-type(108n + 46) { --j: 45 }.dot:nth-of-type(108n + 47) { --j: 46 }.dot:nth-of-type(108n + 48) { --j: 47 }.dot:nth-of-type(108n + 49) { --j: 48 }.dot:nth-of-type(108n + 50) { --j: 49 }.dot:nth-of-type(108n + 51) { --j: 50 }.dot:nth-of-type(108n + 52) { --j: 51 }.dot:nth-of-type(108n + 53) { --j: 52 }.dot:nth-of-type(108n + 54) { --j: 53 }.dot:nth-of-type(108n + 55) { --j: 54 }.dot:nth-of-type(108n + 56) { --j: 55 }.dot:nth-of-type(108n + 57) { --j: 56 }.dot:nth-of-type(108n + 58) { --j: 57 }.dot:nth-of-type(108n + 59) { --j: 58 }.dot:nth-of-type(108n + 60) { --j: 59 }.dot:nth-of-type(108n + 61) { --j: 60 }.dot:nth-of-type(108n + 62) { --j: 61 }.dot:nth-of-type(108n + 63) { --j: 62 }.dot:nth-of-type(108n + 64) { --j: 63 }.dot:nth-of-type(108n + 65) { --j: 64 }.dot:nth-of-type(108n + 66) { --j: 65 }.dot:nth-of-type(108n + 67) { --j: 66 }.dot:nth-of-type(108n + 68) { --j: 67 }.dot:nth-of-type(108n + 69) { --j: 68 }.dot:nth-of-type(108n + 70) { --j: 69 }.dot:nth-of-type(108n + 71) { --j: 70 }.dot:nth-of-type(108n + 72) { --j: 71 }.dot:nth-of-type(108n + 73) { --j: 72 }.dot:nth-of-type(108n + 74) { --j: 73 }.dot:nth-of-type(108n + 75) { --j: 74 }.dot:nth-of-type(108n + 76) { --j: 75 }.dot:nth-of-type(108n + 77) { --j: 76 }.dot:nth-of-type(108n + 78) { --j: 77 }.dot:nth-of-type(108n + 79) { --j: 78 }.dot:nth-of-type(108n + 80) { --j: 79 }.dot:nth-of-type(108n + 81) { --j: 80 }.dot:nth-of-type(108n + 82) { --j: 81 }.dot:nth-of-type(108n + 83) { --j: 82 }.dot:nth-of-type(108n + 84) { --j: 83 }.dot:nth-of-type(108n + 85) { --j: 84 }.dot:nth-of-type(108n + 86) { --j: 85 }.dot:nth-of-type(108n + 87) { --j: 86 }.dot:nth-of-type(108n + 88) { --j: 87 }.dot:nth-of-type(108n + 89) { --j: 88 }.dot:nth-of-type(108n + 90) { --j: 89 }.dot:nth-of-type(108n + 91) { --j: 90 }.dot:nth-of-type(108n + 92) { --j: 91 }.dot:nth-of-type(108n + 93) { --j: 92 }.dot:nth-of-type(108n + 94) { --j: 93 }.dot:nth-of-type(108n + 95) { --j: 94 }.dot:nth-of-type(108n + 96) { --j: 95 }.dot:nth-of-type(108n + 97) { --j: 96 }.dot:nth-of-type(108n + 98) { --j: 97 }.dot:nth-of-type(108n + 99) { --j: 98 }.dot:nth-of-type(108n + 100) { --j: 99 }.dot:nth-of-type(108n + 101) { --j: 100 }.dot:nth-of-type(108n + 102) { --j: 101 }.dot:nth-of-type(108n + 103) { --j: 102 }.dot:nth-of-type(108n + 104) { --j: 103 }.dot:nth-of-type(108n + 105) { --j: 104 }.dot:nth-of-type(108n + 106) { --j: 105 }.dot:nth-of-type(108n + 107) { --j: 106 }.dot:nth-of-type(108n + 108) { --j: 107 }
</style>
</div>
<script>
for(i = 0; i< 1296; i++)        {
        let dobj = document.createElement('div');
        dobj.className="dot";
        chd.appendChild(dobj);
}
</script>
-->

起个网名好难 发表于 2023-3-3 23:49

醉美水芙蓉 发表于 2023-3-3 23:25
老师厉害！这么快就做出来了！

要自己写蛮难，抄就难度降低太多{:5_106:}

起个网名好难 发表于 2023-3-4 00:58

<style>
#chd0{display:grid;overflow:hidden;margin:auto;height:400px;width:400px;background:transparent;position:absolute; top:0px;left:0px;}.dot{--f:calc(var(--i)/var(--n-lyrs));--p:calc(var(--n-reps)*var(--n-dots));--d:calc(1.5em + var(--k)*.3125em);--r:calc(.65*var(--d)*var(--tan));grid-area:1/1;place-self:center;padding:var(--r);border-radius:50%;--pos:rotate(calc(var(--j)/var(--p)*1turn))
        translate(var(--d));transform:scale(0.5) var(--pos);background:hsl(calc(var(--f)*360 - 35),85%,65%);mix-blend-mode:screen;animation:a 1.5s ease-in-out calc((6*var(--f) + 2*var(--j)/var(--n-dots) - 19)*1.5s) infinite alternate;}@keyframes a{to{transform:var(--pos);}}</style>

<div style="margin:auto;position:relative; width:400px;height:400px;overflow: hidden;">
<canvas id="canvas0" style="width:800px;height:400px;margin-left:-200px;"></canvas>
<div id="chd0" style="--n-lyrs: 12; --n-reps: 6; --n-dots: 18; --tan: 0.029">
<style>.dot:nth-of-type(n + 1) { --i: 0; --k: 1 }.dot:nth-of-type(n + 109) { --i: 1; --k: 3.226567036888505 }.dot:nth-of-type(n + 217) { --i: 2; --k: 6.402283783271265 }.dot:nth-of-type(n + 325) { --i: 3; --k: 10.410734843535469 }.dot:nth-of-type(n + 433) { --i: 4; --k: 15.179564340952219 }.dot:nth-of-type(n + 541) { --i: 5; --k: 20.657397815908894 }.dot:nth-of-type(n + 649) { --i: 6; --k: 26.804992350496832 }.dot:nth-of-type(n + 757) { --i: 7; --k: 33.59093387593815 }.dot:nth-of-type(n + 865) { --i: 8; --k: 40.989237641538224 }.dot:nth-of-type(n + 973) { --i: 9; --k: 48.97788193684461 }.dot:nth-of-type(n + 1081) { --i: 10; --k: 57.53785108833033 }.dot:nth-of-type(n + 1189) { --i: 11; --k: 66.65247886070424 }.dot:nth-of-type(108n + 1) { --j: 0 }.dot:nth-of-type(108n + 2) { --j: 1 }.dot:nth-of-type(108n + 3) { --j: 2 }.dot:nth-of-type(108n + 4) { --j: 3 }.dot:nth-of-type(108n + 5) { --j: 4 }.dot:nth-of-type(108n + 6) { --j: 5 }.dot:nth-of-type(108n + 7) { --j: 6 }.dot:nth-of-type(108n + 8) { --j: 7 }.dot:nth-of-type(108n + 9) { --j: 8 }.dot:nth-of-type(108n + 10) { --j: 9 }.dot:nth-of-type(108n + 11) { --j: 10 }.dot:nth-of-type(108n + 12) { --j: 11 }.dot:nth-of-type(108n + 13) { --j: 12 }.dot:nth-of-type(108n + 14) { --j: 13 }.dot:nth-of-type(108n + 15) { --j: 14 }.dot:nth-of-type(108n + 16) { --j: 15 }.dot:nth-of-type(108n + 17) { --j: 16 }.dot:nth-of-type(108n + 18) { --j: 17 }.dot:nth-of-type(108n + 19) { --j: 18 }.dot:nth-of-type(108n + 20) { --j: 19 }.dot:nth-of-type(108n + 21) { --j: 20 }.dot:nth-of-type(108n + 22) { --j: 21 }.dot:nth-of-type(108n + 23) { --j: 22 }.dot:nth-of-type(108n + 24) { --j: 23 }.dot:nth-of-type(108n + 25) { --j: 24 }.dot:nth-of-type(108n + 26) { --j: 25 }.dot:nth-of-type(108n + 27) { --j: 26 }.dot:nth-of-type(108n + 28) { --j: 27 }.dot:nth-of-type(108n + 29) { --j: 28 }.dot:nth-of-type(108n + 30) { --j: 29 }.dot:nth-of-type(108n + 31) { --j: 30 }.dot:nth-of-type(108n + 32) { --j: 31 }.dot:nth-of-type(108n + 33) { --j: 32 }.dot:nth-of-type(108n + 34) { --j: 33 }.dot:nth-of-type(108n + 35) { --j: 34 }.dot:nth-of-type(108n + 36) { --j: 35 }.dot:nth-of-type(108n + 37) { --j: 36 }.dot:nth-of-type(108n + 38) { --j: 37 }.dot:nth-of-type(108n + 39) { --j: 38 }.dot:nth-of-type(108n + 40) { --j: 39 }.dot:nth-of-type(108n + 41) { --j: 40 }.dot:nth-of-type(108n + 42) { --j: 41 }.dot:nth-of-type(108n + 43) { --j: 42 }.dot:nth-of-type(108n + 44) { --j: 43 }.dot:nth-of-type(108n + 45) { --j: 44 }.dot:nth-of-type(108n + 46) { --j: 45 }.dot:nth-of-type(108n + 47) { --j: 46 }.dot:nth-of-type(108n + 48) { --j: 47 }.dot:nth-of-type(108n + 49) { --j: 48 }.dot:nth-of-type(108n + 50) { --j: 49 }.dot:nth-of-type(108n + 51) { --j: 50 }.dot:nth-of-type(108n + 52) { --j: 51 }.dot:nth-of-type(108n + 53) { --j: 52 }.dot:nth-of-type(108n + 54) { --j: 53 }.dot:nth-of-type(108n + 55) { --j: 54 }.dot:nth-of-type(108n + 56) { --j: 55 }.dot:nth-of-type(108n + 57) { --j: 56 }.dot:nth-of-type(108n + 58) { --j: 57 }.dot:nth-of-type(108n + 59) { --j: 58 }.dot:nth-of-type(108n + 60) { --j: 59 }.dot:nth-of-type(108n + 61) { --j: 60 }.dot:nth-of-type(108n + 62) { --j: 61 }.dot:nth-of-type(108n + 63) { --j: 62 }.dot:nth-of-type(108n + 64) { --j: 63 }.dot:nth-of-type(108n + 65) { --j: 64 }.dot:nth-of-type(108n + 66) { --j: 65 }.dot:nth-of-type(108n + 67) { --j: 66 }.dot:nth-of-type(108n + 68) { --j: 67 }.dot:nth-of-type(108n + 69) { --j: 68 }.dot:nth-of-type(108n + 70) { --j: 69 }.dot:nth-of-type(108n + 71) { --j: 70 }.dot:nth-of-type(108n + 72) { --j: 71 }.dot:nth-of-type(108n + 73) { --j: 72 }.dot:nth-of-type(108n + 74) { --j: 73 }.dot:nth-of-type(108n + 75) { --j: 74 }.dot:nth-of-type(108n + 76) { --j: 75 }.dot:nth-of-type(108n + 77) { --j: 76 }.dot:nth-of-type(108n + 78) { --j: 77 }.dot:nth-of-type(108n + 79) { --j: 78 }.dot:nth-of-type(108n + 80) { --j: 79 }.dot:nth-of-type(108n + 81) { --j: 80 }.dot:nth-of-type(108n + 82) { --j: 81 }.dot:nth-of-type(108n + 83) { --j: 82 }.dot:nth-of-type(108n + 84) { --j: 83 }.dot:nth-of-type(108n + 85) { --j: 84 }.dot:nth-of-type(108n + 86) { --j: 85 }.dot:nth-of-type(108n + 87) { --j: 86 }.dot:nth-of-type(108n + 88) { --j: 87 }.dot:nth-of-type(108n + 89) { --j: 88 }.dot:nth-of-type(108n + 90) { --j: 89 }.dot:nth-of-type(108n + 91) { --j: 90 }.dot:nth-of-type(108n + 92) { --j: 91 }.dot:nth-of-type(108n + 93) { --j: 92 }.dot:nth-of-type(108n + 94) { --j: 93 }.dot:nth-of-type(108n + 95) { --j: 94 }.dot:nth-of-type(108n + 96) { --j: 95 }.dot:nth-of-type(108n + 97) { --j: 96 }.dot:nth-of-type(108n + 98) { --j: 97 }.dot:nth-of-type(108n + 99) { --j: 98 }.dot:nth-of-type(108n + 100) { --j: 99 }.dot:nth-of-type(108n + 101) { --j: 100 }.dot:nth-of-type(108n + 102) { --j: 101 }.dot:nth-of-type(108n + 103) { --j: 102 }.dot:nth-of-type(108n + 104) { --j: 103 }.dot:nth-of-type(108n + 105) { --j: 104 }.dot:nth-of-type(108n + 106) { --j: 105 }.dot:nth-of-type(108n + 107) { --j: 106 }.dot:nth-of-type(108n + 108) { --j: 107 }
</style>
</div>

</div>
<script>
var canvas = document.getElementById("canvas0");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Initialize the GL context
var gl = canvas.getContext('webgl');
if(!gl){
console.error("Unable to initialize WebGL.");
}

//Time
var time = 0.0;

//************** Shader sources **************

var vertexSource = `
attribute vec2 position;
void main() {
        gl_Position = vec4(position, 0.0, 1.0);
}
`;

var fragmentSource = `
precision highp float;

uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);

uniform float time;

#define POINT_COUNT 8

vec2 points;
const float speed = -0.5;
const float len = 0.25;
float intensity = 1.3;
float radius = 0.008;

//https://www.shadertoy.com/view/MlKcDD
//Signed distance to a quadratic bezier
float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){   
        vec2 a = B - A;
        vec2 b = A - 2.0*B + C;
        vec2 c = a * 2.0;
        vec2 d = A - pos;

        float kk = 1.0 / dot(b,b);
        float kx = kk * dot(a,b);
        float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;
        float kz = kk * dot(d,a);      

        float res = 0.0;

        float p = ky - kx*kx;
        float p3 = p*p*p;
        float q = kx*(2.0*kx*kx - 3.0*ky) + kz;
        float h = q*q + 4.0*p3;

        if(h >= 0.0){
                h = sqrt(h);
                vec2 x = (vec2(h, -h) - q) / 2.0;
                vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));
                float t = uv.x + uv.y - kx;
                t = clamp( t, 0.0, 1.0 );

                // 1 root
                vec2 qos = d + (c + b*t)*t;
                res = length(qos);
        }else{
                float z = sqrt(-p);
                float v = acos( q/(p*z*2.0) ) / 3.0;
                float m = cos(v);
                float n = sin(v)*1.732050808;
                vec3 t = vec3(m + m, -n - m, n - m) * z - kx;
                t = clamp( t, 0.0, 1.0 );

                // 3 roots
                vec2 qos = d + (c + b*t.x)*t.x;
                float dis = dot(qos,qos);
      
                res = dis;

                qos = d + (c + b*t.y)*t.y;
                dis = dot(qos,qos);
                res = min(res,dis);
               
                qos = d + (c + b*t.z)*t.z;
                dis = dot(qos,qos);
                res = min(res,dis);

                res = sqrt( res );
        }
   
        return res;
}


//http://mathworld.wolfram.com/HeartCurve.html
vec2 getHeartPosition(float t){
        return vec2(16.0 * sin(t) * sin(t) * sin(t),
                                                        -(13.0 * cos(t) - 5.0 * cos(2.0*t)
                                                        - 2.0 * cos(3.0*t) - cos(4.0*t)));
}

//https://www.shadertoy.com/view/3s3GDn
float getGlow(float dist, float radius, float intensity){
        return pow(radius/dist, intensity);
}

float getSegment(float t, vec2 pos, float offset, float scale){
        for(int i = 0; i < POINT_COUNT; i++){
                points = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);
        }
   
        vec2 c = (points + points) / 2.0;
        vec2 c_prev;
        float dist = 10000.0;
   
        for(int i = 0; i < POINT_COUNT-1; i++){
                //https://tinyurl.com/y2htbwkm
                c_prev = c;
                c = (points + points) / 2.0;
                dist = min(dist, sdBezier(pos, scale * c_prev, scale * points, scale * c));
        }
        return max(0.0, dist);
}

void main(){
        vec2 uv = gl_FragCoord.xy/resolution.xy;
        float widthHeightRatio = resolution.x/resolution.y;
        vec2 centre = vec2(0.5, 0.5);
        vec2 pos = centre - uv;
        pos.y /= widthHeightRatio;
        //Shift upwards to centre heart
        pos.y += 0.02;
        float scale = 0.000015 * height;
       
        float t = time;
   
        //Get first segment
float dist = getSegment(t, pos, 0.0, scale);
float glow = getGlow(dist, radius, intensity);

vec3 col = vec3(0.0);

        //White core
col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
//Pink glow
col += glow * vec3(1.0,0.05,0.3);

//Get second segment
dist = getSegment(t, pos, 3.4, scale);
glow = getGlow(dist, radius, intensity);

//White core
col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
//Blue glow
col += glow * vec3(0.1,0.4,1.0);
      
        //Tone mapping
        col = 1.0 - exp(-col);

        //Gamma
        col = pow(col, vec3(0.4545));

        //Output to screen
        gl_FragColor = vec4(col,1.0);
}
`;

//************** Utility functions **************

window.addEventListener('resize', onWindowResize, false);

function onWindowResize(){
canvas.width= window.innerWidth;
canvas.height = window.innerHeight;
        gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);
}


//Compile shader and combine with source
function compileShader(shaderSource, shaderType){
var shader = gl.createShader(shaderType);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
        throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
}
return shader;
}

//From https://codepen.io/jlfwong/pen/GqmroZ
//Utility to complain loudly if we fail to find the attribute/uniform
function getAttribLocation(program, name) {
var attributeLocation = gl.getAttribLocation(program, name);
if (attributeLocation === -1) {
        throw 'Cannot find attribute ' + name + '.';
}
return attributeLocation;
}

function getUniformLocation(program, name) {
var attributeLocation = gl.getUniformLocation(program, name);
if (attributeLocation === -1) {
        throw 'Cannot find uniform ' + name + '.';
}
return attributeLocation;
}

//************** Create shaders **************

//Create vertex and fragment shaders
var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);

//Create shader programs
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

//Set up rectangle covering entire canvas
var vertexData = new Float32Array([
-1.0,1.0,         // top left
-1.0, -1.0,         // bottom left
   1.0,1.0,         // top right
   1.0, -1.0,         // bottom right
]);

//Create vertex buffer
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

// Layout of our data in the vertex buffer
var positionHandle = getAttribLocation(program, 'position');

gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle,
2,                                 // position is a vec2 (2 values per component)
gl.FLOAT, // each component is a float
false,                 // don't normalize values
2 * 4,                 // two 4 byte float components per vertex (32 bit float is 4 bytes)
0                                 // how many bytes inside the buffer to start from
);

//Set uniform handle
var timeHandle = getUniformLocation(program, 'time');
var widthHandle = getUniformLocation(program, 'width');
var heightHandle = getUniformLocation(program, 'height');

gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);

var lastFrame = Date.now();
var thisFrame;

function draw(){
       
//Update time
        thisFrame = Date.now();
time += (thisFrame - lastFrame)/1000;       
        lastFrame = thisFrame;

        //Send uniforms to program
gl.uniform1f(timeHandle, time);
//Draw a triangle strip connecting vertices 0-4
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

requestAnimationFrame(draw);
}

draw();

for(i = 0; i< 1296; i++)        {
        let dobj = document.createElement('div');
        dobj.className="dot";
        chd0.appendChild(dobj);
}

</script>

醉美水芙蓉 发表于 2023-3-4 07:01

起个网名好难 发表于 2023-3-4 09:08

醉美水芙蓉 发表于 2023-3-4 07:01
老师这个是怎么看到原代码的？

ctrl+U

梦缘 发表于 2023-3-4 09:50

欣赏老师的精彩分享，点赞问好！{:4_187:}

焱鑫磊 发表于 2023-3-4 10:44

梦缘 发表于 2023-3-4 09:50
欣赏老师的精彩分享，点赞问好！

问候老师好！

冬天的雨 发表于 2023-3-4 13:49

起个网名好难 发表于 2023-3-3 23:49
要自己写蛮难，抄就难度降低太多

说太对了，现在基本都是抄作业的{:4_170:}

红影 发表于 2023-3-4 16:39

起个网名好难 发表于 2023-3-3 20:24
我就没找到有趣的东西。

多翻翻就找的到了，哪里有那么多的特效呢{:4_173:}

红影 发表于 2023-3-4 17:11

醉美水芙蓉 发表于 2023-3-3 22:14
http://www.jqueryfuns.com/resource/5370又是一个！

这个立体感很强，而且是鼠标跟随的{:4_199:}

红影 发表于 2023-3-4 17:15

醉美水芙蓉 发表于 2023-3-3 22:16
http://www.jqueryfuns.com/resource/view/5666还有个播放器！

这个感觉有点复杂，不一定弄得来呢。

起个网名好难 发表于 2023-3-4 17:24

红影 发表于 2023-3-4 16:39
多翻翻就找的到了，哪里有那么多的特效呢

看着都不错的但要嵌入自己的帖子还是要费点劲的。

红影 发表于 2023-3-4 23:11

起个网名好难 发表于 2023-3-4 17:24
看着都不错的但要嵌入自己的帖子还是要费点劲的。

是的，应该是要费点功夫的。

起个网名好难 发表于 2023-3-5 10:20

红影 发表于 2023-3-4 23:11
是的，应该是要费点功夫的。

费劲的事不干， 绕道走{:5_117:}

查看完整版本: 《不知是雨还是泪》蒋婴