p5+gsap实现鼠标左右移动毛线打结动画效果代码-html代码-BFW代码库

p5+gsap实现鼠标左右移动毛线打结动画效果代码

代码语言：html

所属分类：动画

代码描述：p5结合gsap实现鼠标左右移动毛线打结动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          height: 100vh;
          overflow: hidden;
          display: grid;
          place-items: center;
          margin: 0;
          background: #6F4C5B;
        }
        
        canvas {
          touch-action: none;
        }
    </style>




</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
    <script>
        let vertices = [];
        let w = 500;
        let colors = ['#F5E8C7', '#DEBA9D','#9E7777'];
        const a = {
          t: 1.05
        };
        gsap.to(a, {
          t: 5,
          duration: 2.5,
          ease: 'power3.inOut',
          repeat: -1,
          yoyo: true
        });
        function draw () {
          clear();
          translate(w / 2, w / 2);
          rotate(millis() * 0.00006);
          
          curveTightness(a.t);
          stroke(colors[2]);
          noFill();
          
          for (let t = 0; t < 3; t++) {
            let c = color(colors[t]);
            strokeWeight((3 - t) * 9 - 4);
            stroke(c);
            
            drawingContext.shadow.........完整代码请登录后点击上方下载按钮下载查看