0
0

炫酷的流动爱心最近很火 来吧 代码已奉上

哈喽，大家好，我是木易巷！

爱情，是每个人都在追求的东西。身为一个IT行业人士，我也会追求爱情，我也会像心爱的人表达感情，只是我所表达的方式与他人有所不同。我的主要战场在计算机上，所以我就想到了用计算机来表达感情，在网页上做爱心，还是会动的爱心给她~

这次给大家带来炫酷的流动爱心，有三种效果，大家自行领取~

第一种效果图：

代码部分

代码如下仅供参考，可以直接拿去复制粘贴！

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9.   <style>
  10.   html, body {
  11.   height: 100%;
  12.   padding: 0;
  13.   margin: 0;
  14.   background: #000;
  15. }
  16. canvas {
  17.   position: absolute;
  18.   width: 100%;
  19.   height: 100%;
  20. }
  21.   </style>
  22.  </HEAD>
  24.  <BODY>
  25.   <canvas id="pinkboard"></canvas>
  26.   <script>
  27.   /*
  28.  * Settings
  29.  */
  30. var settings = {
  31.   particles: {
  32.     length:   500, // maximum amount of particles
  33.     duration:   2, // particle duration in sec
  34.     velocity: 100, // particle velocity in pixels/sec
  35.     effect: -0.75, // play with this for a nice effect
  36.     size:      30, // particle size in pixels
  37.   },
  38. };
  40. /*
  41.  * RequestAnimationFrame polyfill by Erik Möller
  42.  */
  43. (function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());
  45. /*
  46.  * Point class
  47.  */
  48. var Point = (function() {
  49.   function Point(x, y) {
  50.     this.x = (typeof x !== 'undefined') ? x : 0;
  51.     this.y = (typeof y !== 'undefined') ? y : 0;
  52.   }
  53.   Point.prototype.clone = function() {
  54.     return new Point(this.x, this.y);
  55.   };
  56.   Point.prototype.length = function(length) {
  57.     if (typeof length == 'undefined')
  58.       return Math.sqrt(this.x * this.x + this.y * this.y);
  59.     this.normalize();
  60.     this.x *= length;
  61.     this.y *= length;
  62.     return this;
  63.   };
  64.   Point.prototype.normalize = function() {
  65.     var length = this.length();
  66.     this.x /= length;
  67.     this.y /= length;
  68.     return this;
  69.   };
  70.   return Point;
  71. })();
  73. /*
  74.  * Particle class
  75.  */
  76. var Particle = (function() {
  77.   function Particle() {
  78.     this.position = new Point();
  79.     this.velocity = new Point();
  80.     this.acceleration = new Point();
  81.     this.age = 0;
  82.   }
  83.   Particle.prototype.initialize = function(x, y, dx, dy) {
  84.     this.position.x = x;
  85.     this.position.y = y;
  86.     this.velocity.x = dx;
  87.     this.velocity.y = dy;
  88.     this.acceleration.x = dx * settings.particles.effect;
  89.     this.acceleration.y = dy * settings.particles.effect;
  90.     this.age = 0;
  91.   };
  92.   Particle.prototype.update = function(deltaTime) {
  93.     this.position.x += this.velocity.x * deltaTime;
  94.     this.position.y += this.velocity.y * deltaTime;
  95.     this.velocity.x += this.acceleration.x * deltaTime;
  96.     this.velocity.y += this.acceleration.y * deltaTime;
  97.     this.age += deltaTime;
  98.   };
  99.   Particle.prototype.draw = function(context, image) {
  100.     function ease(t) {
  101.       return (--t) * t * t + 1;
  102.     }
  103.     var size = image.width * ease(this.age / settings.particles.duration);
  104.     context.globalAlpha = 1 - this.age / settings.particles.duration;
  105.     context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  106.   };
  107.   return Particle;
  108. })();
  110. /*
  111.  * ParticlePool class
  112.  */
  113. var ParticlePool = (function() {
  114.   var particles,
  115.       firstActive = 0,
  116.       firstFree   = 0,
  117.       duration    = settings.particles.duration;
  118.   
  119.   function ParticlePool(length) {
  120.     // create and populate particle pool
  121.     particles = new Array(length);
  122.     for (var i = 0; i < particles.length; i++)
  123.       particles[i] = new Particle();
  124.   }
  125.   ParticlePool.prototype.add = function(x, y, dx, dy) {
  126.     particles[firstFree].initialize(x, y, dx, dy);
  127.     
  128.     // handle circular queue
  129.     firstFree++;
  130.     if (firstFree   == particles.length) firstFree   = 0;
  131.     if (firstActive == firstFree       ) firstActive++;
  132.     if (firstActive == particles.length) firstActive = 0;
  133.   };
  134.   ParticlePool.prototype.update = function(deltaTime) {
  135.     var i;
  136.     
  137.     // update active particles
  138.     if (firstActive < firstFree) {
  139.       for (i = firstActive; i < firstFree; i++)
  140.         particles[i].update(deltaTime);
  141.     }
  142.     if (firstFree < firstActive) {
  143.       for (i = firstActive; i < particles.length; i++)
  144.         particles[i].update(deltaTime);
  145.       for (i = 0; i < firstFree; i++)
  146.         particles[i].update(deltaTime);
  147.     }
  148.     
  149.     // remove inactive particles
  150.     while (particles[firstActive].age >= duration && firstActive != firstFree) {
  151.       firstActive++;
  152.       if (firstActive == particles.length) firstActive = 0;
  153.     }
  154.     
  155.     
  156.   };
  157.   ParticlePool.prototype.draw = function(context, image) {
  158.     // draw active particles
  159.     if (firstActive < firstFree) {
  160.       for (i = firstActive; i < firstFree; i++)
  161.         particles[i].draw(context, image);
  162.     }
  163.     if (firstFree < firstActive) {
  164.       for (i = firstActive; i < particles.length; i++)
  165.         particles[i].draw(context, image);
  166.       for (i = 0; i < firstFree; i++)
  167.         particles[i].draw(context, image);
  168.     }
  169.   };
  170.   return ParticlePool;
  171. })();
  173. /*
  174.  * Putting it all together
  175.  */
  176. (function(canvas) {
  177.   var context = canvas.getContext('2d'),
  178.       particles = new ParticlePool(settings.particles.length),
  179.       particleRate = settings.particles.length / settings.particles.duration, // particles/sec
  180.       time;
  181.   
  182.   // get point on heart with -PI <= t <= PI
  183.   function pointOnHeart(t) {
  184.     return new Point(
  185.       160 * Math.pow(Math.sin(t), 3),
  186.       130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
  187.     );
  188.   }
  189.   
  190.   // creating the particle image using a dummy canvas
  191.   var image = (function() {
  192.     var canvas  = document.createElement('canvas'),
  193.         context = canvas.getContext('2d');
  194.     canvas.width  = settings.particles.size;
  195.     canvas.height = settings.particles.size;
  196.     // helper function to create the path
  197.     function to(t) {
  198.       var point = pointOnHeart(t);
  199.       point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
  200.       point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
  201.       return point;
  202.     }
  203.     // create the path
  204.     context.beginPath();
  205.     var t = -Math.PI;
  206.     var point = to(t);
  207.     context.moveTo(point.x, point.y);
  208.     while (t < Math.PI) {
  209.       t += 0.01; // baby steps!
  210.       point = to(t);
  211.       context.lineTo(point.x, point.y);
  212.     }
  213.     context.closePath();
  214.     // create the fill
  215.     context.fillStyle = '#ea80b0';
  216.     context.fill();
  217.     // create the image
  218.     var image = new Image();
  219.     image.src = canvas.toDataURL();
  220.     return image;
  221.   })();
  222.   
  223.   // render that thing!
  224.   function render() {
  225.     // next animation frame
  226.     requestAnimationFrame(render);
  227.     
  228.     // update time
  229.     var newTime   = new Date().getTime() / 1000,
  230.         deltaTime = newTime - (time || newTime);
  231.     time = newTime;
  232.     
  233.     // clear canvas
  234.     context.clearRect(0, 0, canvas.width, canvas.height);
  235.     
  236.     // create new particles
  237.     var amount = particleRate * deltaTime;
  238.     for (var i = 0; i < amount; i++) {
  239.       var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  240.       var dir = pos.clone().length(settings.particles.velocity);
  241.       particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
  242.     }
  243.     
  244.     // update and draw particles
  245.     particles.update(deltaTime);
  246.     particles.draw(context, image);
  247.   }
  248.   
  249.   // handle (re-)sizing of the canvas
  250.   function onResize() {
  251.     canvas.width  = canvas.clientWidth;
  252.     canvas.height = canvas.clientHeight;
  253.   }
  254.   window.onresize = onResize;
  255.   
  256.   // delay rendering bootstrap
  257.   setTimeout(function() {
  258.     onResize();
  259.     render();
  260.   }, 10);
  261. })(document.getElementById('pinkboard'));
  262.   </script>
  263.  </BODY>
  264. </HTML>

第二种效果图（有弹幕 ）：

代码部分

代码如下仅供参考，可以直接拿去复制粘贴！

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>给王总的大爱心</title>
  9.     <style>
  10.         html,
  11.         body {
  12.             height: 100%;
  13.             padding: 0;
  14.             margin: 0;
  15.             background: #000;
  16.         }
  18.         canvas {
  19.             position: absolute;
  20.             width: 100%;
  21.             height: 100%;
  22.         }
  24.         .down {
  25.             position: absolute;
  26.             top: 50%;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <canvas id="pinkboard"></canvas>
  33.     <font size="6" color="pink">
  34.         <marquee direction="down" scrollamount=5 class="down"></marquee>
  35.         <marquee direction="left" scrollamount=5>爱琦琦</marquee>
  36.         <marquee direction="right" scrollamount=5>爱宝贝</marquee>
  37.     </font>
  38.         <font size="6" color="pink">
  39.         <marquee direction="left" scrollamount=5>爱老婆</marquee>
  40.         <marquee direction="right" scrollamount=5>爱琦琦</marquee>
  41.     </font>
  42.         <font size="6" color="pink">
  43.         <marquee direction="left" scrollamount=5>爱宝贝</marquee>
  44.         <marquee direction="right" scrollamount=5>爱老婆</marquee>
  45.     </font>
  46.         <font size="6" color="pink">
  47.         <marquee direction="left" scrollamount=5>爱老婆</marquee>
  48.         <marquee direction="right" scrollamount=5>爱琦琦</marquee>
  49.     </font>
  50.         <font size="6" color="pink">
  51.         <marquee direction="left" scrollamount=5>爱宝贝</marquee>
  52.         <marquee direction="right" scrollamount=5>爱老婆</marquee>
  53.     </font>
  54.         <font size="6" color="pink">
  55.         <marquee direction="left" scrollamount=5>爱老婆</marquee>
  56.         <marquee direction="right" scrollamount=5>爱琦琦</marquee>
  57.     </font>
  58.         <font size="6" color="pink">
  59.         <marquee direction="left" scrollamount=5>爱宝贝</marquee>
  60.         <marquee direction="right" scrollamount=5>爱老婆</marquee>
  61.     </font>
  62.     <script>
  63.         var settings = {
  64.             particles: {
  65.                 length: 500,
  66.                 duration: 2,
  67.                 velocity: 100,
  68.                 effect: -0.75,
  69.                 size: 30,
  70.             },
  71.         };
  72.         (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());
  73.         var Point = (function () {
  74.             undefined
  75.             function Point(x, y) {
  76.                 undefined
  77.                 this.x = (typeof x !== 'undefined') ? x : 0;
  78.                 this.y = (typeof y !== 'undefined') ? y : 0;
  79.             }
  80.             Point.prototype.clone = function () {
  81.                 undefined
  82.                 return new Point(this.x, this.y);
  83.             };
  84.             Point.prototype.length = function (length) {
  85.                 undefined
  86.                 if (typeof length == 'undefined')
  87.                     return Math.sqrt(this.x * this.x + this.y * this.y);
  88.                 this.normalize();
  89.                 this.x *= length;
  90.                 this.y *= length;
  91.                 return this;
  92.             };
  93.             Point.prototype.normalize = function () {
  94.                 undefined
  95.                 var length = this.length();
  96.                 this.x /= length;
  97.                 this.y /= length;
  98.                 return this;
  99.             };
  100.             return Point;
  101.         })();
  102.         var Particle = (function () {
  103.             undefined
  104.             function Particle() {
  105.                 undefined
  106.                 this.position = new Point();
  107.                 this.velocity = new Point();
  108.                 this.acceleration = new Point();
  109.                 this.age = 0;
  110.             }
  111.             Particle.prototype.initialize = function (x, y, dx, dy) {
  112.                 undefined
  113.                 this.position.x = x;
  114.                 this.position.y = y;
  115.                 this.velocity.x = dx;
  116.                 this.velocity.y = dy;
  117.                 this.acceleration.x = dx * settings.particles.effect;
  118.                 this.acceleration.y = dy * settings.particles.effect;
  119.                 this.age = 0;
  120.             };
  121.             Particle.prototype.update = function (deltaTime) {
  122.                 undefined
  123.                 this.position.x += this.velocity.x * deltaTime;
  124.                 this.position.y += this.velocity.y * deltaTime;
  125.                 this.velocity.x += this.acceleration.x * deltaTime;
  126.                 this.velocity.y += this.acceleration.y * deltaTime;
  127.                 this.age += deltaTime;
  128.             };
  129.             Particle.prototype.draw = function (context, image) {
  130.                 undefined
  131.                 function ease(t) {
  132.                     undefined
  133.                     return (--t) * t * t + 1;
  134.                 }
  135.                 var size = image.width * ease(this.age / settings.particles.duration);
  136.                 context.globalAlpha = 1 - this.age / settings.particles.duration;
  137.                 context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  138.             };
  139.             return Particle;
  140.         })();
  141.         var ParticlePool = (function () {
  142.             undefined
  143.             var particles,
  144.                 firstActive = 0,
  145.                 firstFree = 0,
  146.                 duration = settings.particles.duration;
  147.             function ParticlePool(length) {
  148.                 undefined
  149.                 particles = new Array(length);
  150.                 for (var i = 0; i < particles.length; i++)
  151.                     particles[i] = new Particle();
  152.             }
  153.             ParticlePool.prototype.add = function (x, y, dx, dy) {
  154.                 undefined
  155.                 particles[firstFree].initialize(x, y, dx, dy);
  156.                 firstFree++;
  157.                 if (firstFree == particles.length) firstFree = 0;
  158.                 if (firstActive == firstFree) firstActive++;
  159.                 if (firstActive == particles.length) firstActive = 0;
  160.             };
  161.             ParticlePool.prototype.update = function (deltaTime) {
  162.                 undefined
  163.                 var i;
  164.                 if (firstActive < firstFree) {
  165.                     undefined
  166.                     for (i = firstActive; i < firstFree; i++)
  167.                         particles[i].update(deltaTime);
  168.                 }
  169.                 if (firstFree < firstActive) {
  170.                     undefined
  171.                     for (i = firstActive; i < particles.length; i++)
  172.                         particles[i].update(deltaTime);
  173.                     for (i = 0; i < firstFree; i++)
  174.                         particles[i].update(deltaTime);
  175.                 }
  176.                 while (particles[firstActive].age >= duration && firstActive != firstFree) {
  177.                     undefined
  178.                     firstActive++;
  179.                     if (firstActive == particles.length) firstActive = 0;
  180.                 }
  181.             };
  182.             ParticlePool.prototype.draw = function (context, image) {
  183.                 undefined
  184.                 if (firstActive < firstFree) {
  185.                     undefined
  186.                     for (i = firstActive; i < firstFree; i++)
  187.                         particles[i].draw(context, image);
  188.                 }
  189.                 if (firstFree < firstActive) {
  190.                     undefined
  191.                     for (i = firstActive; i < particles.length; i++)
  192.                         particles[i].draw(context, image);
  193.                     for (i = 0; i < firstFree; i++)
  194.                         particles[i].draw(context, image);
  195.                 }
  196.             };
  197.             return ParticlePool;
  198.         })();
  199.         (function (canvas) {
  200.             undefined
  201.             var context = canvas.getContext('2d'),
  202.                 particles = new ParticlePool(settings.particles.length),
  203.                 particleRate = settings.particles.length / settings.particles.duration,
  204.                 time;
  205.             function pointOnHeart(t) {
  206.                 undefined
  207.                 return new Point(
  208.                     160 * Math.pow(Math.sin(t), 3),
  209.                     130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
  210.                 );
  211.             }
  212.             var image = (function () {
  213.                 undefined
  214.                 var canvas = document.createElement('canvas'),
  215.                     context = canvas.getContext('2d');
  216.                 canvas.width = settings.particles.size;
  217.                 canvas.height = settings.particles.size;
  218.                 function to(t) {
  219.                     undefined
  220.                     var point = pointOnHeart(t);
  221.                     point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
  222.                     point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
  223.                     return point;
  224.                 }
  225.                 context.beginPath();
  226.                 var t = -Math.PI;
  227.                 var point = to(t);
  228.                 context.moveTo(point.x, point.y);
  229.                 while (t < Math.PI) {
  230.                     undefined
  231.                     t += 0.01;
  232.                     point = to(t);
  233.                     context.lineTo(point.x, point.y);
  234.                 }
  235.                 context.closePath();
  236.                 context.fillStyle = '#ea80b0';
  237.                 context.fill();
  238.                 var image = new Image();
  239.                 image.src = canvas.toDataURL();
  240.                 return image;
  241.             })();
  242.             function render() {
  243.                 undefined
  244.                 requestAnimationFrame(render);
  245.                 var newTime = new Date().getTime() / 1000,
  246.                     deltaTime = newTime - (time || newTime);
  247.                 time = newTime;
  248.                 context.clearRect(0, 0, canvas.width, canvas.height);
  249.                 var amount = particleRate * deltaTime;
  250.                 for (var i = 0; i < amount; i++) {
  251.                     undefined
  252.                     var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  253.                     var dir = pos.clone().length(settings.particles.velocity);
  254.                     particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
  255.                 }
  256.                 particles.update(deltaTime);
  257.                 particles.draw(context, image);
  258.             }
  259.             function onResize() {
  260.                 undefined
  261.                 canvas.width = canvas.clientWidth;
  262.                 canvas.height = canvas.clientHeight;
  263.             }
  264.             window.onresize = onResize;
  265.             setTimeout(function () {
  266.                 undefined
  267.                 onResize();
  268.                 render();
  269.             }, 10);
  270.         })(document.getElementById('pinkboard'));
  271.     </script>
  272. </body>
  274. </html>

第三种效果图：

HTML部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>流动爱心表白</title>
  6.     <link rel="stylesheet" href="css/style.css" />
  7.   </head>
  8.  
  9.   <body>
  10.     <!-- 绘画爱心 -->
  11.     <canvas id="canvas" width="1400" height="600"></canvas>
  12.     <!-- js部分 -->
  13.     <script src="js/script.js"></script>
  14.   </body>
  15. </html>

JS部分：

  1. var canvas = document.getElementById("canvas");
  2. canvas.width = window.innerWidth;
  3. canvas.height = window.innerHeight;
  4. // Initialize the GL context
  5. var gl = canvas.getContext('webgl');
  6. if (!gl) {
  7.     console.error("Unable to initialize WebGL.");
  8. }
  9. //Time step
  10. var dt = 0.015;
  11. //Time
  12. var time = 0.0;
  13. //************** Shader sources **************
  14. var vertexSource = `
  15. attribute vec2 position;
  16. void main() {
  17.     gl_Position = vec4(position, 0.0, 1.0);
  18. }
  19. `;
  20.  
  21. var fragmentSource = `
  22. precision highp float;
  23. uniform float width;
  24. uniform float height;
  25. vec2 resolution = vec2(width, height);
  26. uniform float time;
  27. #define POINT_COUNT 8
  28. vec2 points[POINT_COUNT];
  29. const float speed = -0.5;
  30. const float len = 0.25;
  31. float intensity = 0.9;
  32. float radius = 0.015;
  33. //https://www.shadertoy.com/view/MlKcDD
  34. //Signed distance to a quadratic bezier
  35. float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){    
  36.     vec2 a = B - A;
  37.     vec2 b = A - 2.0*B + C;
  38.     vec2 c = a * 2.0;
  39.     vec2 d = A - pos;
  40.     float kk = 1.0 / dot(b,b);
  41.     float kx = kk * dot(a,b);
  42.     float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;
  43.     float kz = kk * dot(d,a);      
  44.     float res = 0.0;
  45.     float p = ky - kx*kx;
  46.     float p3 = p*p*p;
  47.     float q = kx*(2.0*kx*kx - 3.0*ky) + kz;
  48.     float h = q*q + 4.0*p3;
  49.     if(h >= 0.0){ 
  50.         h = sqrt(h);
  51.         vec2 x = (vec2(h, -h) - q) / 2.0;
  52.         vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));
  53.         float t = uv.x + uv.y - kx;
  54.         t = clamp( t, 0.0, 1.0 );
  55.         // 1 root
  56.         vec2 qos = d + (c + b*t)*t;
  57.         res = length(qos);
  58.     }else{
  59.         float z = sqrt(-p);
  60.         float v = acos( q/(p*z*2.0) ) / 3.0;
  61.         float m = cos(v);
  62.         float n = sin(v)*1.732050808;
  63.         vec3 t = vec3(m + m, -n - m, n - m) * z - kx;
  64.         t = clamp( t, 0.0, 1.0 );
  65.         // 3 roots
  66.         vec2 qos = d + (c + b*t.x)*t.x;
  67.         float dis = dot(qos,qos);
  68.         
  69.         res = dis;
  70.         qos = d + (c + b*t.y)*t.y;
  71.         dis = dot(qos,qos);
  72.         res = min(res,dis);
  73.         
  74.         qos = d + (c + b*t.z)*t.z;
  75.         dis = dot(qos,qos);
  76.         res = min(res,dis);
  77.         res = sqrt( res );
  78.     }
  79.     
  80.     return res;
  81. }
  82. //http://mathworld.wolfram.com/HeartCurve.html
  83. vec2 getHeartPosition(float t){
  84.     return vec2(16.0 * sin(t) * sin(t) * sin(t),
  85.                             -(13.0 * cos(t) - 5.0 * cos(2.0*t)
  86.                             - 2.0 * cos(3.0*t) - cos(4.0*t)));
  87. }
  88. //https://www.shadertoy.com/view/3s3GDn
  89. float getGlow(float dist, float radius, float intensity){
  90.     return pow(radius/dist, intensity);
  91. }
  92. float getSegment(float t, vec2 pos, float offset, float scale){
  93.     for(int i = 0; i < POINT_COUNT; i++){
  94.         points[i] = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);
  95.     }
  96.     
  97.     vec2 c = (points[0] + points[1]) / 2.0;
  98.     vec2 c_prev;
  99.     float dist = 10000.0;
  100.     
  101.     for(int i = 0; i < POINT_COUNT-1; i++){
  102.         //https://tinyurl.com/y2htbwkm
  103.         c_prev = c;
  104.         c = (points[i] + points[i+1]) / 2.0;
  105.         dist = min(dist, sdBezier(pos, scale * c_prev, scale * points[i], scale * c));
  106.     }
  107.     return max(0.0, dist);
  108. }
  109. void main(){
  110.     vec2 uv = gl_FragCoord.xy/resolution.xy;
  111.     float widthHeightRatio = resolution.x/resolution.y;
  112.     vec2 centre = vec2(0.5, 0.5);
  113.     vec2 pos = centre - uv;
  114.     pos.y /= widthHeightRatio;
  115.     //Shift upwards to centre heart
  116.     pos.y += 0.02;
  117.     float scale = 0.000015 * height;
  118.     
  119.     float t = time;
  120.     
  121.     //Get first segment
  122.     float dist = getSegment(t, pos, 0.0, scale);
  123.     float glow = getGlow(dist, radius, intensity);
  124.     
  125.     vec3 col = vec3(0.0);
  126.     
  127.     //White core
  128.     col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
  129.     //Pink glow
  130.     col += glow * vec3(0.94,0.14,0.4);
  131.     
  132.     //Get second segment
  133.     dist = getSegment(t, pos, 3.4, scale);
  134.     glow = getGlow(dist, radius, intensity);
  135.     
  136.     //White core
  137.     col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
  138.     //Blue glow
  139.     col += glow * vec3(0.2,0.6,1.0);
  140.         
  141.     //Tone mapping
  142.     col = 1.0 - exp(-col);
  143.     //Output to screen
  144.      gl_FragColor = vec4(col,1.0);
  145. }
  146. `;
  147.  
  148. //************** Utility functions **************
  149.  
  150. window.addEventListener('resize', onWindowResize, false);
  151.  
  152. function onWindowResize() {
  153.     canvas.width = window.innerWidth;
  154.     canvas.height = window.innerHeight;
  155.     gl.viewport(0, 0, canvas.width, canvas.height);
  156.     gl.uniform1f(widthHandle, window.innerWidth);
  157.     gl.uniform1f(heightHandle, window.innerHeight);
  158. }
  159.  
  160.  
  161. //Compile shader and combine with source
  162. function compileShader(shaderSource, shaderType) {
  163.     var shader = gl.createShader(shaderType);
  164.     gl.shaderSource(shader, shaderSource);
  165.     gl.compileShader(shader);
  166.     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  167.         throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
  168.     }
  169.     return shader;
  170. }
  171.  
  172. //From https://codepen.io/jlfwong/pen/GqmroZ
  173. //Utility to complain loudly if we fail to find the attribute/uniform
  174. function getAttribLocation(program, name) {
  175.     var attributeLocation = gl.getAttribLocation(program, name);
  176.     if (attributeLocation === -1) {
  177.         throw 'Cannot find attribute ' + name + '.';
  178.     }
  179.     return attributeLocation;
  180. }
  181.  
  182. function getUniformLocation(program, name) {
  183.     var attributeLocation = gl.getUniformLocation(program, name);
  184.     if (attributeLocation === -1) {
  185.         throw 'Cannot find uniform ' + name + '.';
  186.     }
  187.     return attributeLocation;
  188. }
  189.  
  190. //************** Create shaders **************
  191.  
  192. //Create vertex and fragment shaders
  193. var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
  194. var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);
  195.  
  196. //Create shader programs
  197. var program = gl.createProgram();
  198. gl.attachShader(program, vertexShader);
  199. gl.attachShader(program, fragmentShader);
  200. gl.linkProgram(program);
  201.  
  202. gl.useProgram(program);
  203.  
  204. //Set up rectangle covering entire canvas 
  205. var vertexData = new Float32Array([-1.0, 1.0, // top left
  206.     -1.0, -1.0, // bottom left
  207.     1.0, 1.0, // top right
  208.     1.0, -1.0, // bottom right
  209. ]);
  210.  
  211. //Create vertex buffer
  212. var vertexDataBuffer = gl.createBuffer();
  213. gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
  214. gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
  215.  
  216. // Layout of our data in the vertex buffer
  217. var positionHandle = getAttribLocation(program, 'position');
  218.  
  219. gl.enableVertexAttribArray(positionHandle);
  220. gl.vertexAttribPointer(positionHandle,
  221.     2, // position is a vec2 (2 values per component)
  222.     gl.FLOAT, // each component is a float
  223.     false, // don't normalize values
  224.     2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)
  225.     0 // how many bytes inside the buffer to start from
  226. );
  227.  
  228. //Set uniform handle
  229. var timeHandle = getUniformLocation(program, 'time');
  230. var widthHandle = getUniformLocation(program, 'width');
  231. var heightHandle = getUniformLocation(program, 'height');
  232.  
  233. gl.uniform1f(widthHandle, window.innerWidth);
  234. gl.uniform1f(heightHandle, window.innerHeight);
  235.  
  236. function draw() {
  237.     //Update time
  238.     time += dt;
  239.  
  240.     //Send uniforms to program
  241.     gl.uniform1f(timeHandle, time);
  242.     //Draw a triangle strip connecting vertices 0-4
  243.     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  244.  
  245.     requestAnimationFrame(draw);
  246. }
  247.  
  248. draw();

CSS部分：

  1. body {
  2.     background-color: #000;
  3.     margin: 0;
  4.     overflow: hidden;
  5.     background-repeat: no-repeat;
  6. }

好啦，本次分享就到这里，祝大家开心~

标签： javascript 原型模式 开发语言
本文转载自: https://blog.csdn.net/qq_44794321/article/details/127719490
版权归原作者 木易巷 所有， 如有侵权，请联系我们删除。
登录后发布评论

“炫酷的流动爱心最近很火 来吧 代码已奉上”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。