p5实现一个雪地表白文字渐显动画效果代码

代码语言:html

所属分类:表白

代码描述:p5实现一个雪地表白文字渐显动画效果代码

代码标签: p5 表白 雪地 文字

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html, body {
          margin: 0;
        }
        
        canvas {
          display: block;
        }
    </style>




</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
    <script>
        /*
          Johan Karlsson (DonKarlssonSan)
        */
        function Particle() {
          this.x = random([0, w]);
          this.y = random([0, h]);
          this.oldX = this.x;
          this.oldY = this.y;
        }
        
        Particle.prototype.move = function(stepSize) {
          this.oldX = this.x;
          this.oldY = this.y;
          this.x += random(-stepSize, stepSize);
          this.y += random(-stepSize, stepSize);
          if(this.x < 0) this.x = 0;
          if(this.x > w) this.x = w;
          if(this.y < 0) this.y = 0;
          if(this.y > h) this.y = h;
        }
        
        Particle.prototype.draw = function() {
          line(this.oldX, this.oldY, this.x, this.y);
        }
        
        var particles;
        var iterations;
        var px;
        var w;
        var h;
        
        function setup() {
          cursor(HAND);
          iterations = 5;
          w = windowWidth;
          h = windowHeight;
          createCanvas(w, h);
          .........完整代码请登录后点击上方下载按钮下载查看

网友评论0